Adobe Flex para iniciantes, desde a instalao at produo avanada.

Pgina 1
 Adobe Flex a Partir do Zero
Desde a instalao produo avanada.
Elaborado por Mrio Santos

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 2

 INDEX

1. Observaes iniciais

2. Instalando, configurando e fazendo o tpico teste "hello world".

3. Entendendo a ordenao e estruturao do cdigo.

4. Entendendo os componentes internos, states e transies/efeitos.

5. Programao Action Script 3 e o primeiro teste "hello world" via action script.

6. Efeitos e eventListners ( Action Script 3 ).

7. Criando e importando componentes.

8. Entendendo a comunicao com Objectos Remotos (php/mysql) via amfphp.

9. Insero/eliminao/modificao de dados numa base de dados com recurso ao amfphp.

10. O Flex e o Adobe AIR.

12. Criando um projecto flex para ser "executado" em PC/MAC como aplicativo (Adobe AIR).

13. Observaes finais.

14. Links teis.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 3

1. Observaes iniciais.

Bom, como as informaes relativas a este "framework" so demasiado escassas, principalmente para quem
se est a iniciar na rea das RIA's (Rich internet Applications ou aplicaes ricas para internet), mesmo no
tendo muito tempo livre nem sendo um profissional vou decidi partilhar um pouco do que j aprendi para quem
deseja comear do zero a construir os seus projectos em Flex, focando essencialmente o aplicativo Adobe
Flex Builder.

O que uma RIA?? Passo a citar:

"RIA a abreviao de Rich Internet Applications ou Aplicaes Ricas para Internet.

uma Aplicao Web que contm caractersticas e funcionalidades de uma aplicao desktop tradicional.
Tipicamente uma aplicao RIA transfere a necessidade de processamento do cliente (numa arquitetura
cliente-servidor) para o navegador mas, mantm o processamento mais pesado no servidor de aplicao.
O termo RIA foi usado pela primeira vez em 2001 pela Macromedia (hoje Adobe Systems).
Caractersticas:
-roda em um navegador e no requer a instalao de programas adicionais;
-roda localmente em um ambiente seguro chamado sandbox;"

Origem: Wikipdia, a enciclopdia livre.

Bom, o Adobe Flex uma plataforma de desenvolvimento de RIA's tendo como principal base de distribuio
das suas aplicaes o Adobe Flash Player.
A grande diferena do convencional flash e esta plataforma mesmo o estilo de "programao" e a
diversidade do contedo que possvel criar com o flex, j que cada vez mais so disponibilizadas API's para
interaco com esta plataforma como o flicker, google maps, yahoo maps, youtube entre tantas outras.
O flex por si no o mais indicado para construir animaes frame-by-frame, para isso podem usar o flash e
usar a vossa animao dentro do Flex, mas sim para a construo de RIA's.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 4

Este documento ser dividido em varias seces, abrangendo os mais variados assuntos como a instalao,
animaes/transies simples, programao action script, comunicao com objectos remotos ou criao de
uma aplicao para desktop via Adobe AIR.

Utilizarei o Flex Builder 3 beta 2 (Trial, Windows) que para iniciao o mais indicado, j que o flex sdk
(Gratuito) muito mais "complexo" para iniciao visto a ausncia da parte grfica, e o Flex Buider 3 alpha
(linux) ainda no tem parte de componentes drag & drop.

Neste manual irei usar imagens e cdigo fonte sempre derivados da seco anterior do documento, por isso
aconselho a leitura e execuo de todos os passos pela sua devida ordem, caso contrario podero no
entender partes/exemplos de cdigo porque estes foram criados anteriormente.

Este manual tem como objectivo ensianar ao utilizador todos os passos bsicos para a iniciao na plataforma
Flex, mas tambm no Flex Buider, se seguirem a leitura atentamente, e ao mesmo tempo efectuarem todos os
passos indicados no final da leitura j conseguiro programar e ter uma facilidade enorme em compreender e
trabalhar com o Adobe Flex.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 5

2. Instalando, configurando e fazendo o tpico teste "hello world".

Bom, se ainda no tiverem feito o download do Flex Builder beta 2, faam-no antes de prosseguir com a
leitura, o download est disponvel aqui: http://labs.adobe.com/technologies/flex/flexbuilder3/
Para iniciar o download, clicam no link "Get Flex Builder" do lado direito do site, necessrio o registo
(gratuito) para fazer o download (de cerca de 300mb de flex builder ) Retirem a verso "stand alone" para
windows. E instalem-o com os parmetros "default". No vou usar o flash debugger para j, mas se vos for
proposto na instalao instalem-o tambm, pode ser-vos proposto para instalar os plug-in's para o Internet
Explorer e Mozilla Firefox, por isso instalem-os tambm se usarem um destes "browsers".

Depois do Flex instalado, abram-no.. se na primeira janela (ao centro) aparecer uma mensagem parecida com
"Alternate HTML content should be placed here. This content requires the Adobe Flash Player. Get Flash "
cliquem no link que vos proposto (Get Flash) e faam o download/instalem o flash player desse site que se
abrir dentro do flex. No final da instalao reiniciem o flex.
Caso aparea a mesma mensagem aps reiniciarem o flex, vamos instalar o flash player de novo, mas desta
vez a partir daqui: http://labs.adobe.com/downloads/flashplayer9.html

Dessa pagina instalem:

-Active X Control para o Internet Explorer
-Plugin para Windows.

Fechem o flex builder aps a instalao do flash player, e reeiniciem o flex builder, se tudo tiver corrido bem,
j no deve aparecer o tal erro falado antes, mas sim uma pgina de bem-vindo.

1.1. Criando um novo projecto.

Bom, comeamos por criar um novo projecto, vo ao menu File -> New -> Flex Project.

coloquem "olaMundo" no nome do projecto, como na figura em baixo :

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 6

Logo a seguir deixem o resto das informaes como esto (para j). Cliquem em "Next".
Na janela a seguir ao fundo onde est o source folder: "src" retirem e deixem o campo em branco :

Cliquem em "Finish". O vosso projecto est agora criado...

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 7

1.2. Entendendo o espao de trabalho do Flex Builder

Vamos ento explicar os painis frontais do Flex Buider comeando pelo lado esquerdo.

Flex Navigation, onde listado os ficheiros e pastas que compem o

vosso projecto, se repararem foi criado um ficheiro olaMundo.mxml
com um smbolo de play e um pequeno globo. Significa que esse
documento a aplicao principal do nosso projecto, a que ser
sempre executada por defeito.

Components, onde pode encontrar todos os componentes grficos

para criao do layout, onde podem encontrar de tudo um pouco
desde botes, janelas, painis, listas, grelhas, barras de
navegao...etc... Todos estes componentes s podem ser usados
"drag & drop", do tipo arraste e solte.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 8

Ao centro est a rea principal (zona de desenho) da vossa aplicao, onde existe tambm um boto de
"Source" que ao ser clicado mostra o cdigo fonte do layout, quem est familiarizado com o Adobe
Dreamweaver no vai achar nada estranho e o boto "Design" mostra o layout da aplicao...
Cada vez que forem actualizados dados no layout eles so automaticamente adicionados no cdigo, e vice-
versa.

Do lado direito est presente a janela de "States", basicamente uma

janela onde so mostradas todas as "pginas"/"estados" da nossa
aplicao, funciona como se fossem pginas como em html. pagina 1,
pagina 2 e vai-nos permitir mais frente fazer links entre eles.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 9

 Janela de configurao ("Properties"), onde podem definir cores,
bordos, efeitos, margens, tipos de letra, alinhamento, tamanhos.
etc... para acesso a cada uma das propriedade de cada elemento
do nosso layout, temos que clicar em cima, por exemplo se
clicarem no fundo "azul" da rea de desenho, do lado direito tm
acesso s propriedades desse mesmo fundo, que nesse caso o
corpo de base da nossa aplicao.

Bom, a descrio termina por mostrar a barra horizontal que se encontra no topo, essencialmente
vamos focar os seguintes botes:

Da esquerda para a direita:

-O primeiro boto o que permite compilar a nossa aplicao, se carregarem nele, ser-vos- apresentada
uma janela de compilao, onde no requerer ateno se no houver alteraes na aplicao desde que foi
compilada pela ultima vez... caso no tenham sido salvos dados, ser-vos- proposto uma janela com os
ficheiros no salvos, e indiquem para salvar todos, seleccionando-os (por defeito), podem aplicar a opo de
salvar sempre antes de compilar.
No final da compilao (que demora um pouco) ser aberta uma janela do browser Internet Explorer (por
defeito) ou do vosso browser predefinido com o resultado da vossa aplicao.
-O Segundo boto o de debug, que comunicar com o flash player e a sua componente debug se esta
tiver sido instalada na altura da instalao do flex. No vou falar muito deste porque no o vamos usar neste
tutorial.
-O terceiro o profile, onde o flex abre o flex profiler, serve basicamente para controlar os aspectos de
desempenho do flex... tambm no vou falar para j.
O quarto o Export release version, que falarei mais frente quando falar do Adobe AIR.
O quinto e ultimo permite definies de configurao de ferramentas externas, para j no vou falar...

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 10

1.3. Criando o primeiro Exemplo "hello world".

Coloquem a vossa rea de trabalho em modo "Design", clicando no boto "Design".

Da janela de componentes, procurem um componente "Panel" (em layout components), cliquem nele e
arrastem-no para a vossa rea de desenho; cliquem 2x com o boto esquerdo do rato no topo desse painel e
escrevam "Teste olaMundo", de seguida da mesma janela de componentes procurem um "Button" e arrastem
para cima do painel que criaram na rea de desenho, cliquem 2x nesse mesmo boto e mudem o nome para
"Ol", devero obter um resultado como na figura em baixo.

A parte grfica do nosso projecto "hello world" est feita, vamos passar a explicar a estrutura do cdigo fonte
do que j fizemos at agora.

1.3.1 Entendendo a estrutura MXML

No topo vamos clicar no boto "Source" e vai aparecer o cdigo do nosso layout, estar algo muito parecido,
variando apenas as posies x=, y=, como o seguinte:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="126" y="114" width="250" height="200" layout="absolute" title="Teste olaMundo">
<mx:Button x="92.5" y="128" label="Ol"/>
</mx:Panel>
</mx:Application>

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 11

Como podem ver, temos <mx:Application ...> que a nossa aplicao/fundo.
A dentro da "tag" temos um <mx:Panel ...> o nosso painel, e dentro da "tag" Painel o nosso <mx:Button ..
/> note que no boto temos no final da sua definio (x=posio eixo dos xx e y=posio eixo yy) temos uma
"/" antes do ">" quer significar que como no vamos colocar nada dentro dele, fechamos logo a "tag" em vez
de usar </mx:Button>.
As tags faladas contm dentro delas as definies como x, y, width, height, e podemos adicionar mais
definies, mas agora isso no tem importancia... falamos mais frente...
No final, temos que fechar as "tag's" mx pela sua devida ordem, como j fechamos a "tag" button (por defeito
"/"), resta fechar o painel e a aplicao:

</mx:Panel>
</mx:Application>

Bom, j compreendemos um pouco da estrutura em cadeia, estilo XML, mas no flex chamado de MXML.

Se quisermos colocar outro boto no nosso painel, mas agora via MXML, basta escrever dentro da tag
<mx:Painel> o seguinte:
<mx:Button label="boto de teste" x="50" y="128" />
Se reparou, ao escrever "<mx:" aparece uma lista de componentes, a mesma lista da janela de onde
arrastamos o nosso painel e o nosso boto, basta seleccionar o Button. Nessa lista podemos adicionar
qualquer um dos outros componentes grficos, mas para j ficamos pelo Button.
Bom, o nosso cdigo ficaria assim:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="126" y="114" width="250" height="200" layout="absolute" title="Teste olaMundo">
<mx:Button x="92.5" y="128" label="Ol"/>
<mx:Button label="boto de teste" x="50" y="128" />
</mx:Panel>
</mx:Application>

Se clicarem agora no boto de "Design" ao cimo, aparece o nosso layout, j com o nosso novo boto.
De volta ao cdigo (boto "Source") apaguem o boto que acabaram de criar.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 12

1.3.2. Criando um script (Action Script 3)

Vamos agora criar um script muito simples.

Logo em baixo aps a tag </mx:Panel> e antes da </mx:Application> escrevemos o seguinte:
<mx:
e aparecer uma lista que j foi falada em cima, selecione o "Script" dessa mesma lista e dever ser
adicionado automaticamente o seguinte:

<mx:Script>
<![CDATA[

]]>
</mx:Script>

Ai dentro podemos definir comentrios ao cdigo para nos ajudar a compreender melhor, este tipo de
comentrios j bem conhecido no mundo da programao, aqui usamos "//" para definirmos os nossos
comentrios:

<mx:Script>
<![CDATA[
//nosso comentrio aqui
]]>
</mx:Script>

O nosso objectivo que ao clicar no boto "Ol" que criamos anteriormente, seja apresentada uma mensagem
que diga "Mundo!", para isso usamos um componente do flex chamado Alert. Antes de usarmos qualquer
"componente/package" do flex em Action Script temos que importar o devido componente do devido
"pacote"/"package" para o projecto, por isso escrevam dentro desse script :
import mx.controls.Alert;
Se repararem ao escrever "mx. " vao aparecer todos os controlos, funes, eventos, etc... do flex/flash
divididos por categorias ("packages"), se escrever "mx.controls." mostra na lista todos os objectos possveis de
importao do "package" controls do "mx." bom, no final dentro desse script fica algo como:

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 13

<mx:Script>
<![CDATA[
import mx.controls.Alert;

]]>
</mx:Script>

A seguir ao nosso import vamos criar uma funo para ser chamada quando o nosso boto for clicado..
Escrevam logo aps ao import:

private function aoClickar():void {

Alert.show("Mundo");
}

Explicando, uma funo "privada" de uso na aplicao, com o nome "aoClickar" que no vai retornar nada
(":void").

Dentro dessa funo escrevemos o que queremos que seja feito quando a funo for executada, neste caso
apresentar um alerta, logo chamamos o nosso "objecto" Alert que foi importado em cima, e dizemos-lhe que o
queremos mostrar
Alert.show("Mundo");

Dentro dos parmetros da funo, que vos so apresentados, apenas queremos utilizar uma mensagem para
j, sem definir botes nem ttulos nesse alert.

NOTA IMPORTANTE:
Todos os imports/componentes em modo de edio so "case sensitive", ou seja alert.show("Mundo"); no
funciona, tem que ser Alert.show("Mundo");

No final de tudo deve estar algo como:

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 14

<mx:Script>
<![CDATA[
import mx.controls.Alert;

private function aoClickar():void {

Alert.show("Mundo");
}
]]>
</mx:Script>
Temos quase o nosso teste completo, s falta "dizer" ao boto "Ol" que ao ser clicado tem que chamar esta
nossa funo. Para isso vamos indicar na "tag" <mx:Button ..> o seguinte:
click="{aoClickar();}"
Ficar algo como:
<mx:Button x="92.5" y="128" label="Ol" click="{aoClickar();}"/>
Os caracteres "{}" indicam que vamos utilizar elementos de um script (<mx:Script>).

Ora, vamos salvar, Menu File->Save

Uma verificao final ao nosso cdigo que deve estar como em baixo, tirando os parmetros x, y, width e
height.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="126" y="114" width="250" height="200" layout="absolute" title="Teste olaMundo">
<mx:Button x="92.5" y="128" label="Ol" click="{aoClickar();}"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function aoClickar():void {
Alert.show("Mundo");
}
]]>
</mx:Script>
</mx:Application>

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 15

No "Design" no alterou nada.

Clicam no primeiro boto daqueles 5 no topo do Flex Builder que falei em cima [ ], esperem a compilao,
o browser vai arrancar e apresentar o nosso projecto j compilado e a correr em Flash.

A Sua primeira aplicao FLEX est concluida, experimente clicar no Boto Ol.

Adobe Flex para iniciantes, desde a instalao at produo avanada. Pgina 16