O seu nome é SIGCOND, um sistema de gestão de condomínios muito completo. Todo o sistema foi elaborado em Adobe Flex 4, com recurso ao ZendFramework, MySql e PHP mas não se limitou a estas tecnologias, já que também conta com um sistema interno de chat / conferencia feito com recurso ao Red5 Media Server / Java. Conta com variadas áreas, 4 niveis de utilização: Super Administrador, Administrador de Condomínio Master, Administrador de condomínio e Condómino. Cada um deles apenas pode aceder a algumas funções e menus da aplicação devido a um sistema de UAC implementado.

Foram também integradas algumas API’s que tornam a aplicação muito funcional, de entre as quais:

• Google Charts API, permitindo assim criar relatórios de consultas com gráficos tornando os relatórios bem mais agradaveis.
• Clickatell SMS API, permite que o sistema possa enviar notificações por SMS para os telefones dos condóminios e administradores, tornando a troca de informação mais directa entre os administradores e o sistema. Esta API é implementada de uma forma totalmente automática, já que as notificações sao apenas configuradas (activas/inactivas) e o sistema encarrega-se de enviar as devidas notificações consoante várias operações iniciadas por parte do utilizador, ou automaticamente por parte do sistema. Estas notificações incluem falta de pagamentos, agendamentos, notas, reuniões de condomínios, lançamento de quotas / facturas, etc.
• EasyPay – Gateway MB. Esta API torna o sistema ainda mais funcional, permitindo o lançamento em tempo real de Facturas com uma referencia MB / Home-banking que imediatamente fica disponível para pagamento. Sendo que os administradores podem pagar o aluguer da plataforma e os condóminos as suas quotas / facturas sem sair de casa. Assim que o cliente/condómino paga a factura numa caixa electrónica, ponto de pagamento ou home-banking o sistema é de imediato notificado e efectua o fecho do registo a pagamento.

A aplicação foi criada com 2 layouts diferentes que são carregados consoante a plataforma (iOS e Android), e usa componentes nativos da framework flex, como o mobile view navigator e list, usando também um item render nessa lista, algo bem simples de fazer.

Para a listagem de artigos, carregados a partir do feed, foi usada uma libraria para ler e converter os feeds para objectos que são adicionados um arrayCollection  usado na lista. Já no caso dos autores, foi usada a API AS3 do WordPress que desenvolvi (podem ver a documentação aqui), que infelizmente ainda não consegui coloca-la publicamente disponível, mas em breve o farei. Usando apenas uma simples função: wpas3api.getAuthors() tive a listagem dos autores do blog e suas informações. Como o RedeRIA usa algumas plugins para gerir thumbnails e informações os autores, tive que fazer uma pequena alteração no “core” do XMLRPC Server do wordpress para devolver mais alguns campos já que por defeito o wordpress apenas devolve nome, id e login de cada autor.

De resto, foi só compilar a aplicação para ambos os markets.

Para o Android (muitooooo facil) foi só compilar com o certificado de assinatura de código, pagar os 25 USD para poder publicar e enviar o arquivo apk (ficando a conta de imediato activa) junto com uma pequena descrição e algumas imagens.

Já a brincadeira para a compilação par iOS foi bem mais complicada… alem de termos que gerar alguns certificados, temos que registar os nossos “testing” devices na area de developer da apple, criar os certificados de aprovisionamento, de aplicação e device para depois poder compilar o .ipa final com todos estes certificados para finalmente podermos testar a nossa aplicação no nosso device com drag-n-drop directo para o itunes (+syncronização). Complicado não? pois piora quando querem publicar a aplicação na apple store, pois precisam de repetir todo este processo de certificados, voltar a compilar a aplicação para terem o ipa final.

Voltamos ao site developer.apple.com (ah, pequeno detalhe, aqui pagamos 99 USD por ano para poder publicar app’s e que estive 2 semanas à espera da activação manual já que deu um erro na automática), fazemos o login no iTunes Connect e preenchemos os dados para publicar a nossa aplicação até que chegamos ao ultimo passo que é o envio do nosso ipa para aprovação; Uma estranha notícia: Não têm um mac? não pode publicar na apple store! WTF???
Pois é, a única aplicação que permite o envio dos nossos ficheiros ipa para aprovação é o Application Loader que apenas têm uma versão para… MAC OS. Como no site não temos opção de fazer upload ficamos na mer**! Boa Apple!!

Resumindo, por enquanto menos uma app na apple store! (Engraçado que para pagar a anuidade pode ser feito até de um windows 95, agora publicar só com um MAC)

Seguem alguns screenshots da aplicação.

A aplicação foi bastante simples, não me demorou mais que umas horas a fazer e ficou bem agradavel, servindo como prova que o Flash Builder / Flex + AIR vieram para ficar na area do desenvolvimento mobile.

E você? ja testou algum projecto mobile feito em flex, e a aplicação RedeRIA Android, o que achou?

Abraço.

O projecto trata-se de o desenvolvimento de uma plataforma de comunicação visual para apresentação publica em Televisores. Com certeza já passou num aeroporto, hotel, ginásio e viu alguns LCD’s espalhados por lá com as mais diversas informações, principalmente nos aeroportos com as chegadas / partidas, pois então, o projecto focou-se no desenvolvimento de uma plataforma dessas em Adobe AIR (Flex 4) que pudesse facilmente ser administrada pelo cliente, mas também que fosse facilmente personalizada para poder ser distribuída por vários clientes.

O sistema baseou-se me duas aplicações, uma front-end para distribuição pelos clientes, apenas com controlo de chaves (Numero de série gerado pela administração) e que carregará toda uma playlist de vários módulos, bem como toda a skin (cores e logo). A segunda aplicação consiste numa area administrativa onde o cliente pode gerir a sua playlist, noticias, videos, animações, aniversariantes, noticias manuais, etc’s. Esta area administrativa também permite no caso do login de Super Administrador de gerir todos os clientes, skins e restantes informações.

As playlists são ilimitadas, pelo que podem criar uma playlist completa para o dia!

Todo o sistema do cliente, ao abrir-se  (na primeira apresentação pede a chave da aplicação) carrega todas as informações do servidor; Skin, playlist e logotipo e adapta-se em fullscreen ao ecrã. Dá-se então inicio ao processo de carregamento da playlists e seus elementos. Esta palylist consiste na apresentação de variados modulos e respectivas durações de apresentações.  (Vejam as imagens mais em baixo…)

Os módulos desenvolvidos foram os seguintes:

• Noticias; Vários modulos de noticias de varias categorias, quer com fonte num Feed RSS  ou na base de dados (Inserção manual). Categorias: Actualidade, Mundo, economia, tecnologia, inovação, desporto, cultura, saúde, país.
• Tempo; Previsão de tempo para o dia e próximos 3 dias com a possibilidade de 1 ou mais locais na area central, e com os display das temperaturas para todas as grandes cidades no topo;
• Informação financeira; Bolsa de valores (cotações em tempo real) e Cambios.
• Aniversariantes; Possibilidade de apresentar aniversariantes e suas fotos /departamentos na area central para os próximos 7 dias.
• Animações / Publicidade; Possibilidade de colocar animações em formato SWF para display apenas na area central ou em fullscreen.
• Videos / Publicidade; Apresentação de videos em streamming na area central ou em fullscreen.

As noticias na area central podem conter também fotografias vindas de um feed RSS ou da base de dados. A playlist pode ser organizada com varios destes elementos / módulos, e facilmente gerida via “drag&drop”.  O sistema ficou preparado para a qualquer hora poder criar um novo módulo e integra-lo na playlist; Novos módulos se adivinham como conferências, dicas, publicidade, classificações de jogos, programação de canais de televisão, etc’s…

O sistema ainda conta com auto-update para se actualizar sem necessidade de intervenção do administrador, tal como a própria aplicação procura actualizações de noticias, skins, imagens, videos, playlist de 15 em 15 minutos para que desta forma apresentar sempre conteúdo actualizado.

Se eu ao inicio tinha algumas duvidas se o consumo de memória e processador da aplicação no PC do cliente poderia depois de uma longa utilização entrar num ponto crítico, essas duvidas foram desaparecendo depois de alguns dias de testes, que surpreendemente revelaram que o consumo de memória se mantinha praticamente o mesmo (em alguns casos mais baixo que o inicial) e que o consumo de processador apenas era mais elevado a quando do carregamento de videos em streamming.

Tecnologias usadas:

O pricipal “motor” do front-end e da skin foi o Adobe Illustrator que permitiu converter elementos vectoriais do corel draw facilmente para o Flash Builder, claro sempre com a ajuda preciosa do Flash Catalyst. Depois disto foi criar a skin no Flash Builder, definir os elementos, configurar as diferentes skins dos módulos e juntar tudo num só componente MXML.

A partir daí o Flex encarrega-se de fazer o resto, usando so módulos necessários e ajustando a skin conforme as necessidades. A parte mais fantastica é que ao usar PATH’s (FXG) a skin faz o auto-resize sem perder qualidade e toda ela pode facilmente mudar de cor, o que permitiu criar diferentes skins configuradas no backend.

Foi usado o ZendAMF (PHP) + MySQL como backend para gestão de dados.

As informações de noticias são vindas quer da base de dados quer de varios feeds (que podem também ser alterados facilmente no backend), já as informações meterológicas para todas as cidades são do google e as financeiras (bolsa e cambios) do yahoo.

Penso que é tudo, aqui fica mais uma prova que o Flex pode também servir para aplicações variadas, tal como esta. Como a própria aplicação está em adobe AIR, provavelmente num futuro próximo ela pode ser migrada para as próprias Televisões “Internet” com o sistema operativo Android, abolindo a necessidade de um PC para o trabalho

Abraço!

Deixo-vos com algumas imagens (Partes das areas foram ocultadas, como o logotipo e imagens dos aniversariantes para preservar os clientes).

Flex 4, AS3, Java, Red5, C#, Fluorine!

Alem de estar a realmente enfiar a cara no Flex4, estou a levar muito na cabeça… olhem que a transição do flex 3 pro 4 não é nada facil (estou a falar-vos como Flex 3 Certified Expert), alem de milhares de mudanças no “core”, há os novos namespaces, componentes, hierarquias, separação de componentes, etc’s… mas é uma agradavel surpresa encontrar muitos elementos corrigidos e melhorados, a melhor notici é sem duvida a enorme (ja era grande) facilidade com que criamos os nossos componentes, embora agora tenhamos que os construir passo a passo: Base, Skin, Scrollers, Actions, Etc’s… mas com certeza vão surgir componentes fantasticos. Eu proprio ja tive que criar alguns, de entre eles um a que chamei de spark datagrid. (quem ja vasculhou no flex 4 a datagrid foi extinta no spark). E erram ao pensar que me levou muito tempo… foi até muito simples com os novos containers/elementos do flex4.

Alem de muito flex 4, um dos meus planos do ano passado para este ano era aprender Java, e acho que desta vai. (Ja fiz até o meu primeiro CRUD :p ), acabei por me envolver num projecto que requeria o uso do red5 como servidor de video/audio/sharedobjects. Ao principio hesitei, mas foi-me dada a liberdade de poder ao mesmo tempo que desenvolvia, podes estudar um pouco do red5 e suas app’s em java. Das app’s pro red5 até às simples app’s java o caminho é quase inexistente, visto que ambos usam java… foi então que dei uso à minha vontade de aprendizagem e começei a estudar um pouco de java e acabei desenvolvendo  o meu primeiro crud. Ainda existem muitas duvidas na minha cabeça, principalmente na hora de criar uma app java e na hora do seu deploy… a confusão começa simplemesmente no facto de existirem tantos deploys e app’s diferentes.. em simples class java,  jar, applet, jnlp, etc’s… mas bom, com calma la vou… se por acaso tiverem bons links de tutoriais, artigos, estudos sobre java e tambem sobre red5 é só mandaram… a comissão agradece (pode ser em inglês ou francês).

Outra parte que tambem me vi envolvido foi no c#, devido ao facto de ser necessario a migraçao de alguns elementos para o novo projecto, e acabei mesmo por me dedicar tambem um pouco ao c#, visual studio e sqlServer, isto junto com o flex 4 + Fluorine. Posso afirmar já de caras que fiquei espantado com a facilidade da integração, em em alguns casos mesmo com a rapidez de processamento do flex+fluorine + sqlserver.  Claro que a minha entrada no c# ficou bem facilitado por ter tido a iniciação do visual c e c++ no meu cursito à uns anos atras.. mas muito ja estava esquecido…

Espantei-me tambem foi com muitas semelhanças com o as3… alias, muito parecidos mesmo….

AS3: var variavel:String = “ola”;

Java: String variavel = “ola”;

C#: string variavel = “ola”;

Em breve vou tertando colocar alguns artigos sobre estes meus estudos…que neste momento são os meus focos, por isso, caros amigos, links, tutoriais e infos são bem vindos!!

Bom, acho que estou a dar inicio à minha meta do ano 2010 um pouco tarde, mas mais vale tarde do que nunca!!

Grande abraço!!

Mas a minha dica é outra… no trabaho não convem eu ter misturadas as coisas, então eu queria usar ambos os workspaces no Flash Builder, mas de forma separada… ou seja, poder ter os 2 workspaces sem ter que andar a altera-los cada vez que inicio o Flash Builder… e então? como fazer isto?

A nivel de plugins para o eclipse (para quem nao sabe o flash builder é baseado no eclipse) não encontrei nada, então cheguei a uma solução bem facil… façam uma cópia do atalho do Flash Builder 4 e coloquem como argumento no executável o seguinte (propriedades): -data “c:\caminho\para\o\outro\workspace” e desta forma podemos ter um segundo atalho para outra instancia do flash builder que automaticamente carrega o segundo workspace… eu por exemplo tenho 2 atalhos: Flash Builder 4 Work e Flash Builder 4 Home, desta forma posso trabalhar nos 2 em qualquer lado sem necessidade de os ter misturados ou andar a seleciona-los de cada vez que inicio o flash builder…

É uma dica simples, mas que me foi muito util!

Claro que foi preciso alguma investigação e uma ou outra ferramentas para reduzir o trabalho, mas no final temos a mesma aplicação a correr com applicação Desktop, Web e Mobile sem qualquer alteração de código, apenas com atenção a um ou outro elemento.

No momento é altamente recomendado que não usem isto para aplicações finais, porque as suas limitações e alterações no futuro podem ser muitas requerendo por completo a recompilação da aplicação com outro SDK, mas nada de grave… como é apenas para provar a teoria de que o flex já funciona no AIR dos dispositivos Android sem necessidade da tão esperada Framework Slider, aqui vamos.

Primeiro o que é necessário ter instalado na sua maquina.

1. Flash Builder 4 Instalado, podem fazer download aqui: http://www.adobe.com/products/flashbuilder/, podem escolher o trial, e se forem estudantes ou desempregados a licensa é gratuita, vejam aqui.

2. AIR SDK 2.0, podem fazer o download aqui: http://labs.adobe.com/downloads/air2.html

3. AIR SDK 2.5, actualmente apenas em pre-release, registem-se no programa aqui. Depois do registo e do login, podem fazer o dowload do SDK 2.5 (para o android 2.1 Eclair, o download deve ser da release datada do 04/06 2010, a ultima release apenas funciona no Android 2.2 froYo).

4. Package Assistant Pro, a aplicação que poupa algumas dores de cabeça de volta da linha de comandos com o compiler manual do SDK. Esta é a aplicação que torna tudo muito mais facil, acreditem! (Por vezes os antivirus ficam meios loucos com este ficheiro, se for o caso desliguem o antivirus antes do download e instalação.)

Depois disto instalado, é necessário instalar o air SDK 2.5 e o 2.0 porque o que vem com o flash builder 4 não é a ultima versão, logo pode causar problemas. o Processo é bem simples, abram a pasta de instalação do Flash Builder 4 (no windows, algo como c:\Program Files\Adobe\Adobe Flash Builder 4\) e abram a pasta sdk’s, lá emcontram uma pasta com o nome 4.0.0, façam duas cópias dela na mesma pasta sdks com os nomes: “4.0.0 AIR 2.0” e “4.0.0 AIR 2.5“, depois basta exportarem o conteudo do arquivo SDK 2.0 que fizeram download para a pasta “4.0.0 AIR 2.0″ substituindo todos os arquivos, e o mesmo para o SDK 2.5 na pasta “4.0.0 AIR 2.5” e temos os SDK’s prontos para usar.

Depois disto, basta identifica-los no flash builder 4, para isso abram o FB4, Menu Windows->Preferences->Flash Builder->Installed SDk’s, coloquem em Add New e escolham a pasta “4.0.0 Air 2.0″ e dêm o nome de 4.0.0 AIR 2.0 e o mesmo para o Air 2.5. Assim têm os 2 sdk’s para o flash builder…

Agora mãos à obra, o processo seguinte utiliza por defeito o MXML sem qualquer limitação, o que é uma ótima novidade.

Criem um novo Flex Project, escolhendo Desktop (AIR), e no sdk escolham na lista o 4.00 AIR 2.5, desta forma a aplicação é preparada usamdo o SDk 2.5. Depois disto é só trocar na primeira e ultima linhas o “WindowedApplication” por “Application”, porque desta forma o projeto é compilado como applicação “Geral”, uma forma oculta que a adobe encontrou para já deixar preparado o SDK para o ambiente Mobile.

Agora, é com vocês, é só inventarem, usem e abusem dos componentes… o que devem fazer atenção é que para o Android devem aumentar no minimo 2x o tamanho de cada componente e fontes senão ficará muito pequeno na tela do seu android. Isto deverá ser corrigido em breve, mas por agora só assim mesmo.

Por final, devem editar o arquivo xml da vossa aplicação, se lhe deram o nome de “ExemploAndroid” encontram na mesma pasta o arquivo Exemplo-Android-app.xml, editem este arquivo, e eliminem tudo, e coloquem apenas assim:

 

<?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?>

<application xmlns=”http://ns.adobe.com/air/application/2.5″>

<id>Main</id>

<filename>Main</filename>

<name>Main App</name>

<versionNumber>1.0.1</versionNumber>

<versionLabel>1.0.1</versionLabel>

<supportedProfiles>mobileDevice</supportedProfiles>

<initialWindow>

<content></content>

<visible>true</visible>

<!– <autoOrients>true</autoOrients> –>

</initialWindow>

<icon>

<image16x16>icons/appIcon_16.png</image16x16>

<image32x32>icons/appIcon_32.png</image32x32>

<image48x48>icons/appIcon_48.png</image48x48>

<image128x128>icons/appIcon_128.png</image128x128>

</icon>

</application>

Um titulo carismático, mas é a pura verdade… para os menos preparados e com menos conhecimentos do flex e da sua estrutura, esta mudança vai ser muito dificil, não só pela completa remodelação da arquitectura da interface, mas sim pelas enumeras diferenças e implantações nesta nova versão.

Já à muito tempo que o flex andava nas bocas do publico e nas mãos dos mais curiosos, inclusive nas minhas, mas como tantos outros utilizadores da frameworks e IDE não quiz na altura do seu primeiro lançamento beta aprofundar muito nesta nesse nova versão porque o tempo de aprendizagem seria bem elevado, mas como tudo tem um tempo, eis que a Adobe acaba de distribuir a versão final do Flash Builder 4 e do Flex SDK 4, que alem de contar com muitas novidades, uma ótima noticia é que os componentes de apresentação grafica são agora parte do SDK como open source, ou seja, jápodemos usar graficos para apresentar visualmente os nossos dados sem ter que recorrer a bibliotecas terceiras.

Esta nova versão conta com muitas novidades, segue um pequeno resumo vindo da propria pagina no produto.

• Novas ferramente de apoio à escrita de código, melhor acesso à documentação da class e compoennte, melhor tabulação e identificação/coloração visual do código.
• Um completo novo aspecto visual, não deixando de lado os antigos componentes mx, mas assumindo já os novos “cores” visuais. Fx, spark…
• Acesso a dados, muito rapido, simples e com wizards para grande parte das linguagens backend mais populares.
• Melhoramentos a nivel de graficos, inter-agir com dados e graficos é simplesmente facil.
• Skins, styles, e temas. Agora é mais facil do que nunca implementar um tema no nosso projecto.
• Rapida integração com a Suite grafica  da adobe, Photoshop, illustrator, fireworks ou com o novo Flash Catalyst.
• Reaproveitamento do código foi agora mais amplamente implementado e é possivel re-utilizar quase todo o nosso código ou funções muito facilmente com alguns novos assistentes.
• Novos utilitarios de teste e monitoramenteo de trafego entre aplicações. (Premium)
• Nova e melhorada documentação as3 e MXML. Os compoentarios à class ou componentes são agora apresentados durante a  escrita do nosso código, facilitando a compreensão da class ou componente.
• Novos wizards automaticos e geradores de código.
• As novidades no SDk são muitas, e longe de serem facilmente entendidas, mas isso… vamos com calma

Podem ver um artigo que fiz à alguns tempos com uma analise mais em promenor a algumas das novidades desta versão aqui. Vai ajudar bastante com certeza.

Esta nova versão vai deixar muitos dos “programadores” Flex de rastos, porque existem muitas novidades, mas acreditem que para os “agarrados” ao Flex Builder, esta nova versão caiu do ceu porque vai simplificar muitaaaaaaaaa coisa….

Dêm uma vista de olhos! Que eu vou começar a pensar seriamente em adaptar-me já!!

Download do Flash Builder aqui e do SDK4 aqui.

Uma novidade em grande nao??

]]> http://blog.msdevstudio.net/2010/03/22/developers-flex-oficialmente-desactualizados-fb4/feed/ 7 http://blog.msdevstudio.net/2009/12/03/zendamf-service-browser/ http://blog.msdevstudio.net/2009/12/03/zendamf-service-browser/#comments Thu, 03 Dec 2009 13:13:25 +0000 Mário Santos http://msdevstudio.com/blog/?p=1196 Esta noticia já conta com alguns dias, mas não deixa de ser uma ótima noticia….

Uma das coisas que pouca gente gostou foi o facto de no Zend AMF não existir um browser de serviços que nos permitisse testar as nossas classes, mas eis que finalmente surge a solução, o ZamfBrowser permite isso mesmo, embora eu o tenha testado com algumas classes houve algum trabalho para testar as mesmas, inclusive algumas nas quais simplesmente não funcionou, mas talvez por não seguir a linha de orientação das mesmas…. enfim, assim que tiver um pouco tenciono efetuar alguns testes mais sérios para verdadeiramente saber o potencial deste browser. Pelo menos já é uma ótima noticia.

Já na sua versão 1.11, conta com um grande utilitário, um simples botão que permite gerar todas as classes em as3 necessárias para trabalhar com o Remote Object no f lex ou flash, embora muitos trabalhem com o mx:RemoteObject via MXML no Flex, no flash as coisas são bem piores e esta opção é sem duvida das mais uteis.

Bom, resta-me informar que o site oficial encontra-se em http://www.zamfbrowser.org onde podem encontrar mais informações e o link para download…

Bom, venham  essas primeiras impressões.

Abraço.

]]> http://blog.msdevstudio.net/2009/12/03/zendamf-service-browser/feed/ 0 http://blog.msdevstudio.net/2009/06/26/flash-builder-4-uma-analise-mais-a-serio/ http://blog.msdevstudio.net/2009/06/26/flash-builder-4-uma-analise-mais-a-serio/#comments Fri, 26 Jun 2009 11:35:36 +0000 Mário Santos http://msdevstudio.com/blog/?p=1056 Bem, e as novidade não são poucas….muita coisa melhorou e muitas outras coisas foram acrescentadas nesta nova versão. Depois da publicação de um artigo meu em inglês no thetechlabs foi acordada também a publicação aqui no blog da sua versão em Português e aqui vai.

Neste artigo vamos discutir alguns pontos desta nova versão do antigo Flex Builder agora chamado Flash Builder, heis os pontos aqui discutidos:

• Criando um novo Projecto.
• Namespaces
• Temas e Skins
• Novidades a nivel do Action Script & MXML
• Wizard de código e Serviços
• Ligações de dados; Exemplo PHP (+ ZendFramework)
• Interacção com dados
• Documentação AS3
• Unit Tests
• Interacção com o Flash Catalyst
• Notas finais

Mas antes de começar a alongar-me na introdução vamos dar uma vista de olhos na IDE que à primeira vista parecer quase igual, mas na realidade só é tão igual ao Flex Builder 3 até criar-mos um primeiro projecto. À primeira vista apenas se sobressai um novo painel ao fundo, onde podem ver 2 tabs Data/Services e Network Monitor que são nova nesta versão, e acreditem que se tornam muito uteis. Vejam então a tão falata IDE: (cliquem para ver maior).

No ecrã principal podem também encontrar alguns links que são muito uteis, principalmente para quem está a iniciar no Flash Buider, têm também um link para o Tour de Flex que até foi actualizado com alguns elementos do Flex 4, vale a pena ver. De resto, tudo igual apenas com a excepção do logotipo do eclipse ao lado direito, que parece dar relevo à excelente e versatil plataforma eclipse….

Criando um novo Projecto.

O processo é o mesmo, mas ao clicarem no menu File encontram já novidades, como o Import Flex Project (FXP) e o Export Flex Project (FXP) de onde podem importar projectos exportados pelo Flash Builder, mas também layouts feitos no Flash Catalyst. Mas vamos então criar um novo projecto menu File->New->e voilá! mais novidades, onde encontram o Test Case Class e Test Suite Class, que se apresentam como dialogo para criação de Classes para Unit Tests, algo de novo nesta nova versão.

Selecionem então Flex Project, onde de entre as opções podem encontrar a nova versão do Flex SDK, a 4.0 (Podem ainda usar uma versão anterior para  desenvolver o vosso projecto, mas muitas das novoas opções não estarão disponiveis.) Dêm um nome ao vosso projecto, por exemplo, FlashBuilderTest, e cliquem em OK! Mais novidades… desta feita a no explorador do projecto vemos agora a nossa aplicação dentro de um package default, onde já podemos imaginar uma nova estrutura de pastas, junto com esta novidade, vemos ainda uma “pasta” Flex 4 onde encontramos agora todas as partes das frameworks como RSL’s (Runtime Shared Libraries), onde ainda podemos explorar os seus packages e ver todos as classes e implementações das mesmas.

Esta nova estrutura ajuda-nos a compreeender melhor as relações entre componentes e a sua disposição de organização. Podem encontrar todos os elementos que compõem a framework do Flex 4, como a nova textLayout framework/component, as skins do spark (sparkskins.swc), a libraria datavisualization, que inclui os graficos disponibilizados no flex, a libraria RPC e a libraria base do Flex 4.

Ao fundo, ao lado do painel que falei anteriormente, Data/Services, podemos encontrar um novo tab, ASDoc que nos permite criar a documentação para as nossas classes que será disponibilizada junto com a class. Muito util para projectos em equipa onde temos que partilhar informações sobre a nossa class.

Namespaces

A nivel do código, podemos encontrar já os novos namespaces do Flex 4 em uso:

e aqui começam verdadeiramente as novidades do Flex 4 e do Flash Builder,  os novos namespaces:

• fx – O novo namespace do Flex Builder 4, o que veio substituir o mx como primeiro e unico namespace carregado por defeito nas aplicações Flex 3
• s – Spark, Uma das grande novidades, traz sobretudo muitos componentes visuais direcionados exclusivamente para a versão 10 do flash player, uma nova arquitectura de componentes que nos permite extender e personalizar ainda mais (quase até ao limite) os componentes nativos e novos componentes derivados.
• mx – O nosso antigo namespace, deste pouco há a falar… componentes habituais do flex 3.

Estes novos namespaces trazem muitos componentes novos que vão precisar de algum tempo para nos habituar-mos a eles.

Se mudarem para a parte visual, no explorador de componentes mais algumas novidades, de entre novos componentes também mudou a organização destes, agora apresentados mais organizadamente em varias “pastas”. Arrastem um Button para o stage, verão que ele é carregado directamente do namespace spark, se voltarem ao código verão isso mesmo:

<s:Button ..> se copiarem este código e mudarem o prefixo para mx: em vez de s: o botão fica exactamente igual, mas nas suas propriedades as coisas mudam bastante, o noso Button Spark possui muito mais possibilidades de personalização, principalmente a nivel dos Styles.

Temas e Skins

Esta nova versão traz pode defeito o novo tema Spark, e agora na nova versão do flash builder é mais facil do que nunca trocar de skin, em apenas alguns instantes temos a nossa aplicação completamente personalizada sem escrever uma linha de código css tudo isto graças ao theme switcher que vem incorporado da aplicação. Na area visual, cliquem no stage e na tab Appearence vão encontrar desta novidade, onde indica current theme: spark e se clicarem em cima dele, vai-se abrir a janela para escolher um novo tema se assim desejarmos. E ainda conta com o botão find more themes que vai aumentar ainda mais a lista de temas quando estes começarem a ser criados pela comunidade. Vejam a janela de que falo (cliquem para ver maior)

Novidades a nivel do Action Script & MXML

Muitas! Não no Action Script, mas da maneira como o Flash  Builder lida com o código, quer MXML quer Action Script, principalmente no action script. Mas vamos começar pelo MXML. Ao escreverem um simples “<” verão a maior das funcionalidades… as documentação da class fica disponivel imediatamente no editor, sendo mesmo possivel clickar no “Tab” para ganhar o focus e poder percorrer livremente os varios componentes e agora também namespaces.

Qualquer elemento visual, por exemplo um button possui também a sua documentação visivel, quer na class principal (Button) mas se colocarem o rato também nas suas propriedades, verão que também possui documentação, sendo que agora será muito mais facil obter informação sobre as propriedades de determinado elemento, sem sequer ter que sair da applicação.

A nivel de Action Script, as alterações começam ainda no MXML, assim que pretendemos escrever um pedaço de código em action script iriamos iniciar a area de action script no mxml com o <mx:script… mas isto era no flex 3, agora foi susbtituido pelo <fx:script..>, tendo já por defeito o novo namespace e tendo obrigatóriamente que ser escrito assim, o mesmo se passa com o style e basicamente com todos os anteriores componentes do mx.

Mas vamos a um exemplo em Action Script, escrevam apenas import, e como podem ver já vão encontrar algumas diferenças no packages disponiveis, de entre eles as novidades authoring, fl, flashx e spark onde encontraremos centenas de novidades.

Escrevam apenas: import mx.controls.Alert;

Assim que iniciam a escrita do Alert, é-vos apresentado imediatamente a documentção da class, o que acaba por simplificar em muito a procura de determinado componente, bem como saber a sua utilização.

Se passarem o rato por cima do Alert verão a mesma documentação sempre sem sair da IDE, se clicarem no F2 podem ver o resto da documentação da Class e de classes relacionadas. Esta informação está disponivel em quase todos os componentes, o que se torna numa das melhores ajudas para o programador, principalmente com tantas novidades esta é sem duvida a melhor aposta deste novo Flash Builder. Toda esta informação da class pode também ser vista no painel ASDoc, bastando colocar o rato sobre a class que querem ver a documentação.

Nesta documentação podem encontrar além das classes relacionadas, também a versão do flex e a versão do flash player / Air necessária para que este controlo seja visualizado.

Wizard de código e Serviços

Via MXML ao lidar com eventos, também é possivel gerar automaticamente o código para lidar com esse evento, chamado de Generate Event Listener onde apenas um click gera a respectiva função de handling.

A nivel visual, também existem muitas novidades, principalmente que aceleram o processo de programação e desenvolvimento de uma aplicação, vejam o exemplo de um button, ao clickarem sobre ele no stage com o botão direito do rato, podem ver algumas novas opções de entre as quais se destacam o Generate Service Call, e Generate Click Handler.

O generate Click Handler permite de uma forma muito rapida gerar a função para lidar com um click do rato e coloca-la logo associada ao click do mesmo, sendo o desenvolvedor automaticamente transferido para o código respectivo.

O generate Service Call permite gerar o código necessario para fazer uma chamada remota via HTTP service, Web service ou Remoting, no caso de não existir nenhuma fonte de dados, o proprio flex builder se encarrega de perguntar ao utilizador se deseja criar um novo serviço de dados. Aqui podem encontrar um recurso muito melhorado do antigo Flex Builder, a criação de serviço de dados, e para quem usa LCDS ou PHP têm as coisas muito facilitadas, em cerca de 5 minutos e alguns clicks têm um serviço Remoting a funcionar, nas minha aplicação vou usar o php, sigam o exemplo, cliquem no Generate Service Call e respondam sim à criação de um novo serviço de dados. Abre-se então o wizard de serviço de dados:

Ligações de dados; Exemplo PHP

Neste wizard como, como podem ver, permite criar ligações a serviços de dados em alguns passo, para verem como é simples escolham PHP, é-vos então pedido que configurem um servidor de php, algo muito simples, cliquem em Yes e insiram os caminhos relativos para o vosso servidor, no meu caso escolhi servidor PHP, no Web Root coloquem o caminho do sistema local para a pasta htdocs/www,  por exemplo numa insatlação padrão do wamp: c:\wamp\www\meuProjecto e no Root URL coloquem o vosso caminho do browser para essa pasta, normalmente: http://localhost/meuProjecto e cliquem em Validade Configuration. O output folder será gerado automaticamente, se não o for indiquem algo como c:\wamp\www\meuProjecto\bin-debug. Coloquem então OK, o wizard volta de novo à criação de dados e pede algumas informações, como por exemplo o nome do service, coloquem por exemplo PHPTEST e indiquem a class onde têm as funções do php (pode ser uma class amfphp ou zendAMF) ou por exemplo uma class padrão, recomendada pela adobe que obtêm clicando em Generate Sample PHP Class, e cliquem em Finish e eis que vos apresenta a mais recente novidade da adobe, a auto-instalação do ZendAMF para servidor AMF de dados do php:

Cliquem em OK e aguardem um pouco, em poucos instantes será instalado a framework Zend (embora não seja completamente necessaria toda a framework, as vantagens são muitos quando usamos toda a framework porque se trata de uma das melhores frameworks php existentes no mercado.). É-vos informado que a framework será instalada na mesma pasta da aplicação e que esta localização deve ser alterada quando distribuimos uma aplicação final por razões de segurança, esssa alteração deve ser informada no arquivo .ini de configuração.

Depois do zendAMF instalado, cliquem de novo OK. Muito provavelmente vão encontrar um erro a informar que não foi possivel abrir o Loader do Zend, isto porque a Adobe se enganou na instalação da framework Zend e caminhos relativos, para solucionar este problema devem abrir a vossa pasta c:\wamp\www\meuProjecto e editar o ficheiro amf_config.ini e na terceira linha alterem o:

;zend_path = c:\Frameworks\ZendFramework\library

para o caminho da vossa instalação do zend, normalmente assim (não se esquecam de remover o “;” ):

zend_path = c:\wamp\www\meuProjecto\ZendFramework\library

Salvem o ficheiro e voltem ao Flash Builder, cliquem ok na janela de erro e cliquem de novo en Finish, desta forma deixará de existir o erro certo? se em alguns casos ocorrer um erro de acesso, verifiquem as permissões do vosso servidor web. Abre-se então a class recem criada com um simples CURD e mais operações para teste, escrevam na segunda função (getAllItems) apenas return “Ola Mundo”; e guardem o vosso ficheiro.

Se voltarem ao Flash Builder, é-vos perguntado se desejam adicionar um tipo de retorno ou associar a função a um componente viosual, cliquem apenas ok. Agora no painel Data/Services vêm as vossas operações.

Antes de usar quando uma destas funções, devem indicar que tipo de retorna elas devolvem, cliquem na nossas função getAllItems e cliquem no botão da direita do rato e cliquem Configure Return Type, indiquem o tipo de dados que a vossa função devolve, para deteção automatica, coloquem custom, escrevam um nome e indiquem alguns possiveis parametros da função para auto deteção e depois cliquem seguinte. No nosso caso usamos use custom action script data type String.

Como podem ver pal imagem anterior, o getAllItems encontra-se com o icon a verde o que indica que o nosso serviço está pronto a ser usado, isto só acontece depois de indicar-mos o tipo de dados que a função devolve.

Interacção com dados

Depois de todo este processo para trabalhar com o php, a questão de trabalhar com dados é facil, uma das grandes novidades é a possibilidade de não só (como indiquei antes) de associar uma chamada de um serviço a um botão pelo clique com o botão direito do rato, mas também por drag & drop, arrastem a função getAllItems para o vosso botão e será automaticamente criada a chamada do serviço e o respectivo responder/handler.

Geralmente não é gerado o handler para resultado para os dados recebidos do backend a não ser numa dataGrid, que mais uma vez apresenta uma janel muito util para acelerar todo o processo, é o wizard para atribuir dados a uma lista, “Bind to Data”:

Neste wizard podem escolher o serviço e a operação, no nosso caso como definimos o return como String este não poderá ser atribuido a uma dataGrid que recebe como dataProvider um Ilist / ArrayCollection, para isso e por uma questão de testes coloquem na vossa função php:

$dados[0]->name=”Ola”;

$dados[0]->age=”26″;

$dados[0]->country=”France”;

$dados[1]->name=”Mundo”;

$dados[1]->age=”55″;

$dados[1]->country=”Italy”;

return $dados;

Salvem o php e no dialogo do flash builder cliquem change return type: e escrevam em custom data type: Client, cliquem next e no proximo e cliquem em next de novo, e voilá os dados devolvidos do php.

Como podem ver este wizard identifica previamente os dados recebidos do php, e permite mesmo adicionar possiveis dados em falta do mesmo. Cliquem em Finish e aguardem, que o icon da função getAllItems na janela Data/Services mude para varios icons.. depois cliquem no wizard em OK. E finalmente temos os dados na dataGrid, bem como os dados mapeados directamente por um vO onde são gerados os getters e setters para o mesmo. (Client.as, derivado do _SUPER_CLIENT.as) que pode ser alterado a nosso gosto, deixando de fora a class mapeadora principal (_SUPER_CLIENT.as). como podem ver na janela do explorador no package services.phptest.

Ao fazer esta acção, a datagrid é automaticamente alterada para lidar e apresentar os nossos dados sem uma unica linha de código, basta correrem a aplicação.

As restantes operações do CRUD podem ser falcilmente feitas com recurso a estes wizards, sendo que mesmo depois podemos atribuir como argumento o nosso VO, muito util na hora da criação ou alteração de um elemento numa base de dados.

Este é sem duvida um dos pontos mais fortes do novo flex builder, que praticamente nos faz de forma automatizada todo o trabalho de interacção com dados. Nesta nova versão do Flex 4 e MXML para comunicação remota foi quase que abolida a necessidade de usar um RemoteObject com variados metodos já que com estes wizards todo o código é gerado e trasnformado em componentes Action Script. No nosso caso toda a chamada e atribuição de dados é feita em apenas estas linhas:

<fx:Declarations>

<s:CallResponder id=”getAllItemsResult”/>

<phptest:PHPTEST id=”pHPTEST” destination=”PHPTEST” endpoint=”http://localhost/testPHP/testPHP-debug/gateway.php” fault=”Alert.show(event.fault.faultString)” showBusyCursor=”true” source=”PHPTEST”/>

</fx:Declarations>

Algo muito mais simples e reutilizavel que na versão anterior do flex. Apesar de ser tudo muito facil, merece que passemos algumas horas de volta do código gerado que apesar de ser muito util, também pode alongar o tamanho da nossa aplicaçâo desnecessariamente, por isso verifiquem sempre as classes e objectos gerados, analisem a vossa situação e retirem o que não for necessário.

Documentação AS3

Como foi antes falado é possivel agora ver a documentaçâo de uma class sem ter que aceder à mesma, basta seguirem este exemplo, criem uma nova Action Script Class baseada num sprite, no package com.msdevstudio, e depois se quiserem documentar a class, basta faze-lo dentro do package, antes do construtor dentro do bloco /** **/, como o seguinte exemplo mostra:

package com.msdevstudio
{
	/**
	 * Welcome to my TestClass by Mário Santos
	 *
	 * To use just write: import com.msdevstudio.testClass and then
	 * var temp:TestClass = new TestClass()
	 *
	 *
	 * @see flash.display.Sprite
 	 *
 	 *  @langversion 3.0
 	 *  @playerversion Flash 9
 	 *  @playerversion AIR 1.1
 	 *  @productversion Flex 3
	 *
	 * */
	import flash.display.Sprite;
	public class TestClass extends Sprite
	{
		/**
		 * Create a new instance of the class!
		 */
		public function TestClass()
		{
			//TODO: implement function
			super();
		}
	}
}

Guardem a vossa class, importem-na na aplicação e passem o rato por cima:

import com.msdevstudio.TestClass;

Obtêm então o dialogo de ajuda como a imagem seguinte mostra.

Como podem ver é mais facil do que nunca criar, distribuir e documentar as vossas classes.

Unit Tests

Nesta nova versão também já é possivel criar classes para efectuar unitTests ou testes lógicos e de performace, não tendo que recorrer a frameworks externas. Esta é mais uma das otimas novidades para quem pretende tirar o maximo de partido da sua applicação e evitar o maximo de erros possiveis.

Interacção com o Flash Catalyst

Esta ligação é feita quase instantaneamente, bast importarem um qualquer projecto do Flash Catalyst tendo sempre em conta que assim que abrirem o vosso projecto do Flash Catalyst no Flash Builder este deixará de ser editavel no Flash Catalyst. Este talvez seja um dos pontos menos positivos desta interação.

De resto, embora com alguns promenores a serem melhorados, a importação do layout do Flash Catalyst para o Flash Builder ocorrem sem qualquer problema. Brevemente teremos aqui um tutorial de como importar, transformar e programar um layout do illustrador para o Flash Player passando  pelo Flash Catalyst e Flash Builder.

Notas Finais

O novo Flash builder torna muitas coisas muito mais simples e sem duvida que vai acelerar em muito o desenvolvimento de aplicações ricas para a internet, principalmente na hora de trabalhar com dados. Os seus novos wizards guiam-nos pelo dificil processo de comunicação com um backend e em alguns simples passos as coisas passam de dificeis a faceis. A criação da documentação inline de cada class vai sem duvida ajudar os mais novatos, e com ainda maior certeza fazer com que os desenvolvedores mais experientes conheçam um pouco melhor as classes e tirem o maior partido delas.

Os novos namespaces ainda coexistem com o antigo mx, pelo que os desenvolvedores ainda terão algum tempo para absorverem tudo o que há de novo na versão 4 desta framework, principalmente a quase completa orientação a states a nivel de componentes que se por um lado pode ajudar pelo outro pode complicar mais ainda o código.

Finalmente, as novidades maiores como disse são mesmo no novissimo Flex 4, que deve ser estudado com alguma atenção já que traz muitas novidades.

E vocês? alguma coisa a dizer sobre os vossos primeiros testes?