Flex:プロフィール

僕のFlexの経験について書くことが決めて、開始する事がどのようについてプロファイルを作成した。

 僕はFlexやFlashのSWFの可能な対話(ただし複雑な方法)などについて非常に興奮しているんだ。Como comecei no Flash, me sentia meio fora d'água no Flex, mas agora já tenho um certo know-howzinho e resolvi postar umas dicas pra quem pensa em migrar, ou conhecer, ou saber exatamente o que é o Flex. 

Flex e Flash são completamente independentes.

Assim como para fazer algo no Flash você precisa do Adobe Flash, para construir algo no Flex, você precisa de um programa chamado Adobe Flex Builder, que na verdade é o SDK da Eclipse, tunado pela finada Macromedia.

eclipse.jpg

Apesar de independentes, ambos utilizam o ActionScript e interagem um com o outro, pois ambas "plataformas" terminam no bem conhecido arquivo SWF.

Um bom tutorial que cobre essa "troquinha" é o do site Flash 'n Flex Hacks, que cobre essa interação em um exemplo simples mas bem instrutivo.

As diferenças

O conceito de timeline no Flex é diferente, na real, você não usa uma timeline visual, ela até existe e é de 30 fps, mas você não a vê. E geralmente nem se importa com ela.

A finalidade do Flex é voltada para interfaces com finalidade de exibição ou coleta de dados, ao contrário do Flash, que agora com o CS4 tem o foco claro na animação.

O objetivo principal do Flex são aplicações web (sistemas) ou aplicativos de desktop (Adobe AIR), que o usuário pode baixar, instalar e rodar local como um software normal, com a vantagem de ser, como o java, multi-plataforma.

A diferença principal é que o Flash tem uma interface amigável ao designer, e o Flex, que usa o Eclipse, é voltado para desenvolvedores. Mas na real, é a mesma coisa: tudo no fundo gira em torno de ActionScript 3.

Todo componente que existe no Flex, assim como no Flash, no fundo é uma classe AS que você pode nem ver, pois já foi importada automaticamente pelas bibliotecas, como a do core básico.
Ou porque você simplesmente não teve a curiosidade de procurar o arquivo ".as" original.

Mais uma linguagem para aprender?

No Flex existe uma linguagem chamada MXML, que no fundo é só uma linguagem de marcação, muito parecida com o XHTML, mas claro, com suas especifidades:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>

Quem está no mundo web a um tempo, não deve ter medo. É mais fácil que Html. É bem documentada, não dá bug e no fundo, é só um sumário de propriedades de uma classe que você instancia e seta valores, da mesma forma que você poderia fazer por ActionScript.

Por onde começar

Eu adorei o curso em vídeo que tem no site da Adobe, faço a maior propaganda, pois o curso tem exercícios e as aulas em vídeos possuem uma metodologia de ensino muito amigável, fica fácil aprender começando com esse curso gratuito:
http://www.adobe.com/devnet/flex/videotraining/

Componentes e mais componentes

O Flex vem com um pacote de componentes muito úteis, desde componentes visuais a componentes de interação com dados. Confira o aplicativo abaixo da própria Adobe que lista e mostra vários componentes default:
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Ao instalar o Flex Builder, você de cara ganha um monte de componente reciclável, porém isso não te remove a necessidade de ter que criar componentes específicos para seu problema.

A reutilização de código proposta pela programação orientada a objetos, OOP, favorece o surgimento na internet de vários repositórios, verdadeiras bibliotecas de códigos opensource prontos para serem usados.

Uma boa biblioteca é a FlexLib, que estende vários componentes:
http://code.google.com/p/flexlib/wiki/ComponentList

Além disso, desde a época da Macromedia, existe o repositório central de componentes da comunidade Flex, aberto a quem quiser postar os seus e baixar novos componentes:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=addSea...

Outra ótima forma de ver componentes que existem a disposição para Flex, é a aplicação Tour de Flex, um aplicativo AIR que te permite visualizar componentes incríveis.
http://flex.org/tour

tourdeflex.jpg

Customização

No mundo do Html, não tem nada mais feio que uma página branca com texto preto Arial e um formulário sem CSS. No mundo SWF, as skins padrão já são bonitinhas, arrendondas e style, porém nada melhor que você mesmo customizar os componentes.

No Flex, você pode ter o controle da aparência desde adicionando um simples CSS (bem parecido com o do Html, mas com umas variações especificas do ambiente Flex) até customizando totalmente uma skin usando programas de vetor como Illustrator ou Flash ou mesmo programas bitmap como Fireworks e Photoshop.

No site do Flex Style Explorer você pode configurar todas as opções de CSS que o Flex aceita, ver na hora a modificação e ainda conseguir copiar o código para colar no seu aplicativo Flex.

explorer.jpg

Trocando a skin

Já para mudar a skin do componente, é mais complicado. É preciso instalar uma extensão para cada programa do pacote CS3/CS4. Essa parte é simples, ou você baixa e dá dois cliques no arquivo mxp da Adobe Extension Manager ou precisará descompactar um zip numa pasta.

No Tom's Blog existe um passo a passo que cobre muito bem a instalação desses componentes:
http://lordbron.wordpress.com/2007/05/01/flex-component-kit-step-by...

Um bom tutorial de como exportar uma skin é o do site Ntt.cc:
http://ntt.cc/2008/06/11/using-flexbuilder-3-and-flash-cs3-to-build...

A melhor referência é da vídeo-aula, é um vídeo de meia hora que aborda o ponto crucial: fazer uma skin em programas da adobe, como o Photoshop. Também é mostrado como baixar e instalar as extensões:
Vídeo: Skining components with Adobe CS3 (28:14)

O link para baixar as extensões está abaixo, porém é preciso estar logado no site da Adobe:
https://www.adobe.com/cfusion/entitlement/index.cfm?e=flex_skins

Referência de linguagem AS3

Para ninguém duvidar que tudo gira em torno de ActionScript, lá vai a referência da linguagem, que coincide muito com a do Flash, mas possui suas classes particulares, que só fazem sentido no ambiente Flex:
http://livedocs.adobe.com/flex/3/langref/

Conclusão

Esse site eu fiz a maior parte em Flex, achei que foi bastante útil pois pude utilizar componentes já semi-prontos, aproveitando-os para o que queria. Contudo, fico com o pé atrás com alguns "bugs" que encontrei, como o relacionado a customização do componente Panel. Afinal, quando você lê na documentação que algo funciona, você acredita, entretanto às vezes o resultado que você obtem é diferente do que esperaria.