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!

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?