Apostila Curso Basico Adobe Flex 2

Curso Bsico
Adobe Flex 2
Por: Thiago Rodrigues Fernandes

E-mail: thifernandes@gmail.com
Sumrio
Introduo ...........................................................................................................................3
RIA (Rich Internet Application - Aplicaes Ricas para Internet) ........................3
A tecnologia Adobe Flex ...................................................................................................3
Eclipse e Adobe Flex Builder ...........................................................................................3
Instalando o Flex Builder 2..............................................................................................3
Fundamentos do Flex ..................................................................................................11
MXML ...................................................................................................................................11
ActionScript 3.0 ................................................................................................................11
Flex Class Library .............................................................................................................12
Flex Data Services ............................................................................................................12
Criando nosso primeiro projeto e aplicao de teste..............................................12
Usando o help do Flex Builder ......................................................................................13
Eventos ................................................................................................................................13
O que so Eventos? ..........................................................................................................13
Disparando Eventos .........................................................................................................13
Container ............................................................................................................................14
O que um container? ....................................................................................................14
Application .........................................................................................................................14
Containers de Layout...................................................................................................14
Canvas .................................................................................................................................14
HBox ....................................................................................................................................14
VBox.....................................................................................................................................15
Form.....................................................................................................................................15
Panel ....................................................................................................................................15
Containers de Navegao .........................................................................................15
ViewStack ...........................................................................................................................15
Accordion............................................................................................................................17
TabNavigator .....................................................................................................................18
Controles.............................................................................................................................19
Button..................................................................................................................................20
LinkBar ................................................................................................................................20
CheckBox ............................................................................................................................21
DateChooser e DateField ................................................................................................21
DataChooser ......................................................................................................................21
DateField ............................................................................................................................22
Label ....................................................................................................................................22
TextInput............................................................................................................................23
Text ......................................................................................................................................23
ComboBox ..........................................................................................................................23
DataGrid ..............................................................................................................................24
View States........................................................................................................................26
Elementos de um View State .........................................................................................28
Criando um View State em ActionScript.....................................................................28
Estilos ...................................................................................................................................29
Folha de Estilo Externa ...................................................................................................29
Folha de Estilo Local ........................................................................................................29
Gerenciando Classes de Estilo ......................................................................................30
___________________________________________________________________________
Curso Bsico Adobe Flex 2
O Mtodo setStyle().........................................................................................................30
Folha de Estilo Interna ...................................................................................................31
Trabalhando com arquivos XML............................................................................31

Lendo um XML interno e populando os dados ..........................................................31
Lendo um arquivo XML externo e populando os dados ..........................................31
Referncias Bibliogrficas........................................................................................33
Links ....................................................................................................................................33
Livros ...................................................................................................................................33
___________________________________________________________________________
Introduo
RIA (Rich Internet Application - Aplicaes Ricas para Internet)
RIA 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.
A tecnologia Adobe Flex
O Adobe Flex 2 a soluo de desenvolvimento de aplicativos mais completa e
potente para se criar e fornecer aplicativos avanados de Internet (RIAs) no ambiente
empresarial e na Web. Ele permite que as empresas criem aplicativos multimdia
personalizados que melhorem significativamente a experincia do usurio,
revolucionando o modo como as pessoas interagem com a Web.
Fonte: Adobe
um framework multi-plataforma para desenvolvimento de aplicaes RIA, levando um
modelo de programao padro e conhecido por profissionais e desenvolvedores. Nele
usamos uma linguagem de marcao (MXML) que baseada no XML para definir a
interface da aplicao e o Actionscript 3.0 para a parte lgica. As aplicaes Flex levam a
extenso .mxml e podem ser criadas em qualquer editor de texto comum, como por
exemplo o Bloco de Notas.
Fonte: E-genial
Eclipse e Adobe Flex Builder
Eclipse
uma IDE de cdigo aberto para a construo de programas de computador. O projeto
Eclipse foi iniciado na IBM que desenvolveu a primeira verso do produto e doou-o como
software livre para a comunidade. O gasto inicial da IBM no produto foi de mais de 40
milhes de centavos de dlares. Hoje o Eclipse a IDE Java mais utilizada no mundo.
Possui como caractersticas marcantes o uso da SWT e no do Swing como biblioteca
grfica, a forte orientao ao desenvolvimento baseado em plug-ins e o amplo suporte ao
desenvolvedor com centenas de plug-ins que procuram atender as diferentes
necessidades de diferentes programadores.
Adobe Flex Builder
O Adobe Flex Builder uma IDE baseada no Eclipse usada para o desenvolvimento
de RIAs que combinam a excelncia dos aplicativos de desktop com o alcance
multiplataforma da Adobe Engagement Platform (Plataforma de Enganjamento).
Utilizando o Flex Builder, os desenvolvedores podem rapidamente criar uma avanada
lgica no lado do cliente para promover a integrao com XML, servios da Web ou Flex
Data Services. Com sofisticadas ferramentas de design e layout, os designers de
interface de usurio tambm podem criar interfaces de aplicativos mais ricas e fceis de
usar, com layout e funcionalidade personalizados.
Instalando o Flex Builder 2
___________________________________________________________________________
Na primeira tela solicitado aonde que ser salvo os arquivos. Ele informa um endereo
padro de instalao que normalmente utilizado.
Na segunda tela confirmado a opo escolhida. Clique em Next para prosseguir ou

em Back para voltar.
___________________________________________________________________________
Na terceira tela ser mostrado 2 (duas) opes de instalao:

- Flex Builder and Flex SDK
- Flex Builder Plug-in and Flex SDK
A primeira opo se refere a instalao da IDE do Flex Builder e o SDK.
A segunda opo se refere a instalao do plugin do Flex Builder que roda dentro do
eclipse existente e o SDK.
___________________________________________________________________________
Na quarta ele mostra o andamento da instalao.
Na quinta tela ele informa alguns requisitos para a instalao como por exemplo fechar
todos os programas antes de prosseguir.
___________________________________________________________________________
Na sexta tela ser mostrado as regras de uso e solicitado o aceite ou rejeio do termo
de uso.
Na stima tela informado o diretrio de instalao. Caso queria mudar clique em

Choose.
___________________________________________________________________________
Na oitava tela ele pede que informe a pasta aonde se encontra a pasta do eclipse
instalado.
Na nona tela ele informa que est configurando as pastas do sistema.
___________________________________________________________________________
Na dcima tela ele pergunta se voc quer instalar o plugin Adobe Flash Player 9 para
Internet Explorer e Firefox.
Na dcima primeira tela ele mostra o que ser instalado, aonde e qual o espao em disco
que ele requer para a instalao.
___________________________________________________________________________
10
Na dcima segunda tela ele informa o andamento da instalao.
Na dcima terceira tela ele informa que a instalao foi bem sucedida. Clique em Done
para encerrar.
___________________________________________________________________________
11
Fundamentos do Flex
A framework Flex divida conforme a tabela abaixo.
Framework de aplicao Flex.

MXML
Linguagem de marcao baseada em xml usada para definir a interface da aplicao.
Pode ser usada tambm para definir aspectos no visuais da aplicao como acesso a
dados no servidor.
MXML inclui tags para componentes visuais como dataGrids, inputText, comboBox e
menu. Inclui tambm tags para componentes no visuais como conexo com web
services, data binding e efeitos de animao.
ActionScript 3.0
Linguagem de programao orientada a objetos usada para definir a parte lgica da
aplicao.
Linguagem semelhante ao Java e C#.
___________________________________________________________________________
12
Exemplo de Mxml e ActionScript 3.0

Flex Class Library
So as bibliotecas de classes do Flex.
Flex Data Services
Oferece um conjunto de avanados recursos de gerenciamento de dados no lado do
servidor que permitem ao Flex fazer um uso intenso desses dados.
Criando nosso primeiro projeto e aplicao de teste
Para criarmos nosso primeiro projeto em flex, v em:
File > New > Flex Project.
Aparecer uma tela perguntando qual o tipo de acesso a dados voc vai usar em sua
aplicao. Selecione a opo Basic. Em seguida, d um nome ao seu projeto.
Em project contents, deixe a opo use default location marcada para usar a pasta
padro aonde os arquivos do projeto ficaro armazenados.
Por ltimo, clique em Finish.
Por padro, o flex cria na raiz do projeto um componente com o mesmo nome do
projeto.
O cdigo de sua aplicao dever estar conforme abaixo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
</mx:Application>
Agora vamos criar nosso primeiro aplicativo.
No modo de design, v na aba Components e selecione dentro de Controls o
componente Label.
Clique e arraste-o para dentro da aplicao.
___________________________________________________________________________
13
Na aba Flex Properties encontre a opo text e digite Bem vindo ao Flex. Em
seguida, vamos adicionar um efeito ao label. Altere o tipo de viso da aba Flex
Properties para Category View, encontre o atributo mouseDownEffect e digite
WipeRight.
O cdigo de sua aplicao dever estar conforme abaixo:
<?xml version="1.0" encoding="utf-8"?>
layout="absolute">
<mx:Label x="497" y="317" text="Bem vindo ao Flex"
mouseDownEffect="WipeRight"/>
</mx:Application>
Usando o help do Flex Builder
Um timo guia de referncia da linguagem o prprio help do Flex Builder. Ele traz uma
lista completa de suas classes e mtodos. L voc tambm encontra lies que ensinam
desde a criao de sua primeira aplicao em Flex at a criao de aplicaes usando
componentes mais avanados.
Eventos
O que so Eventos?
Quando voc clica com o mouse ou pressiona uma tecla, voc est disparando um evento
de mouse ou teclado respectivamente. O Flash Player captura estes eventos e repassam
para quem est "ouvindo", os chamados Listeners (ouvintes).
Disparando Eventos
Nosso primeiro exemplo mostra um boto disparando um evento alerta.
Exemplo de evento em mxml:
<mx:Button label="Disparar Evento" click="Alert.show("Bem vindo ao Flex",
"Alerta");" />
Exemplo de evento em actionScript:
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Button;
private var btn: Button;
public function init(): void {
btn = new Button();
btn.label = "Novo Botao";
btn.addEventListener(MouseEvent.CLICK, alerta);
this.addChild(btn);
}
public function alerta(event: Object): void {
Alert.show("Bem vindo ao Flex","Alerta");
}
___________________________________________________________________________
14
]]>
</mx:Script>
Container
O que um container?
Um container define uma regio retangular de desenho do Adobe Flash Player. Dentro de
um container, definimos componentes, controles e outros containers. Componentes
definidos
dentro
de
um
container
so
chamados
de
filhos
do
container. O Adobe Flex fornece uma ampla variedade de containers, que vo desde
simples caixas atravs de painis e formas, at containers navegadores e containers de
layout.
Application
O Flex define um container de layout padro chamado Application que o primeiro
arquivo a ser carregado ao rodar a aplicao. Representado pela tag <mx:Application>,
o responsvel por definir o incio da aplicao. o container pai e responsvel pelo
controle de chamadas aos demais containers filhos (Panel, Form, Canvas, dentre outros).
Exemplo de cdigo de um container Application:
layout="absolute">
</mx:Application>
Containers de Layout
Um container de layout define uma regio retangular do Adobe Flash Player e controla o
dimensionamento e posicionamento de controles e containers filhos definidos por ele.
Por exemplo, um container de layout Form define tamanhos e posies de seus filhos em
um esquema similar a um formulrio HTML.
Para usar um container de layout, voc cria o container e, em seguida, adiciona os
elementos que definem a sua aplicao.
Logo abaixo temos os containers de layout mais utilizados.
Canvas
O container de layout Canvas define uma regio retangular em que voc coloca filhos
containers e controles. Ao contrrio de todos os outros componentes ele s utiliza layout
absoluto, ou seja, voc deve especificar as propriedades x e y, ou os filhos dele sero
empilhados em cima do canto superior esquerdo. Voc deve especificar as posies x e y
com base nas laterais ou no centro das ncoras.
Exemplo de cdigo de um container Canvas:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="113">
</mx:Canvas>
HBox
___________________________________________________________________________
15
No container HBox, os componentes filhos so empilhados horizontalmente da

esquerda para a direita.
Exemplo de cdigo de um container HBox:
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle"
height="30%">
</mx:HBox>
VBox
No container VBox, a posio dos componentes filhos definida de cima para baixo e
centralizado.
Exemplo de cdigo de um container VBox:
<mx:VBox height="100%" horizontalAlign="center" verticalAlign="middle"
width="100%">
</mx:VBox>
Form
Os formulrios so um dos mtodos mais comuns utilizados em aplicaes web para
coletar informaes dos usurios.
Exemplo de cdigo de um container Form:
<mx:Form width="100%" height="100%">
</mx:Form>
Panel
O container Panel pode atuar como um HBox, VBox e dependendo do layout como um
Canvas. Alm disso, este container possui uma barra de ttulo aonde se pode adicionar
um texto a ela.
Exemplo de cdigo de um container Panel:
<mx:Panel width="250" height="200" layout="absolute" title="Ttulo do
Painel">
</mx:Panel>
Containers de Navegao
Os containers de navegao so utilizados basicamente para controlar a visualizao de
containers filhos. Por exemplo, um container TabNavigator permite que voc visualize um
container filho utilizando um conjunto de separadores.
ViewStack
Um container de navegao ViewStack constitudo por um conjunto de containers filhos
que esto empilhados uns em cima dos outros, com apenas um container visvel ou ativo
de uma s vez.
___________________________________________________________________________
16
A imagem abaixo mostra containers filhos empilhados em um container ViewStack:
Exemplo de disposio de containers filhos dentro de um ViewStack.

O ViewStack no define um mecanismo aonde os usurios conseguem mudar o container
ativo para um container inativo. Neste caso voc deve usar um controle para isso
(LinkBar, TabBar, Button, ButtonBar ou ToggleButtonBar) ou construir uma lgica na sua
aplicao em ActionScript para permitir que os usurios mudem de um container filho
ativo para um inativo. Por exemplo, voc pode definir botes para alternar entre os
containers filhos.
Exemplo de cdigo de um container ViewStack:

<mx:VBox>

<mx:HBox borderStyle="solid">

<mx:Button id="searchButton" label="Search Screen"
click="myViewStack.selectedChild=search;"/>
<mx:Button id="cInfButton" label="Customer Info Screen"
click="myViewStack.selectedChild=custInfo;"/>
<mx:Button id="aInfoButton" label="Account Info Screen"
click="myViewStack.selectedChild=accountInfo;"/>
</mx:HBox>

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%">
<mx:Canvas id="search" label="Search">
<mx:Label text="Search Screen"/>
</mx:Canvas>
<mx:Canvas id="custInfo" label="Customer Info">
<mx:Label text="Customer Info"/>
</mx:Canvas>
<mx:Canvas id="accountInfo" label="Account Info">
<mx:Label text="Account Info"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
A imagem abaixo mostra o layout do cdigo acima:
___________________________________________________________________________
17
Exemplo de utilizao do container ViewStack.

Accordion
O container de navegao Accordion uma variao do container ViewStack. Como ele
voc pode melhorar significativamente a aparncia e navegao.
Ao invs de empilhar os containers filhos uns em cima dos outros, ele define uma
seqncia de painis, mas exibe apenas um painel de cada vez deixando apenas uma
barra de seleo dos containers.
Exemplo de cdigo de um container Accordion:
<mx:Accordion id="accordion1" height="192" width="310">
<mx:Form id="dadosPessoais" label="1. Dados Pessoais">
<mx:FormItem id="itemPrimeiroNome" label="Primeiro Nome">
<mx:TextInput id="primeiroNome"/>
</mx:FormItem>

</mx:Form>
<mx:Form id="dadosResidenciais" label="2. Dados Residenciais">
<mx:FormItem id="itemEndereco" label="Endereo:">
<mx:TextInput id="endereco"/>
</mx:FormItem>
</mx:Form>
<mx:Form id="dadosBancarios" label="3. Dados Bancrios">
<mx:FormItem id="itemAgencia" label="Agncia:">
<mx:TextInput id="agencia"/>
</mx:FormItem>
<mx:FormItem id="itemContaCorrente" label="Conta Corrente:">
<mx:TextInput id="contaCorrente"/>
</mx:FormItem>
</mx:Form>
</mx:Accordion>
___________________________________________________________________________
18
Exemplo de um formulrio dentro de um container Accordion.

TabNavigator
Um container TabNavigator cria e gera um conjunto de abas (guias) que voc usa para
navegar. Os filhos de um container TabNavigator so outros containers. O container
TabNavigator cria uma aba para cada container filho. Quando o usurio seleciona uma
aba, ele exibe o container filho associado.
O container TabNavigator filho da classe ViewStack e herda grande parte da sua
funcionalidade.
Exemplo de cdigo de um container TabNavigator:
mx:TabNavigator borderStyle="solid">
<mx:VBox label="Dados Pessoais" width="400" height="150">
</mx:VBox>
<mx:VBox label="Dados Residenciais" width="400" height="150">
</mx:VBox>
<mx:VBox label="Dados Bancrios" width="400" height="150">
<mx:Form id="dadosBancarios" label="3. Dados Bancrios">
<mx:FormItem id="itemAgencia" label="Agncia:">
<mx:TextInput id="agencia"/>
</mx:FormItem>
<mx:FormItem id="itemContaCorrente" label="Conta
Corrente:">
<mx:TextInput id="contaCorrente"/>
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:TabNavigator>
___________________________________________________________________________
19
Exemplo de um container TabNavegator.
Controles
Os controles so componentes de interface do usurio (UIComponents) que exibem algo
para o usurio e/ou solicitam ao usurio interagir com a aplicao. Buttons, TextArea,
ComboBox, dentre outros so alguns exemplos de controles.
Normalmente, voc define um container e, em seguida, insere controles a ele.
A tag raiz de uma aplicao Flex a <mx:Application>, o que representa um container
que abrange todo o Flash Player. Voc pode colocar controles diretamente sob a tag
<mx:Application> ou em outros containers.
A maioria dos controles tem as seguintes caractersticas:
o MXML API - Para declarar o controle e os valores de suas propriedades e eventos;
o
ActionScript API - Para chamar os mtodos de controle estabelecendo as suas

propriedades em tempo de execuo;
Customizao de aparncia usando estilos, skins e fontes.
A imagem abaixo mostra vrios controles usados em um container Form:
Exemplo de controles dentro de um container Form.
___________________________________________________________________________
20
Button
O controle Button (boto) comumente utilizado como boto retangular. Geralmente
possui no seu rtulo um texto, um cone ou ambos. Voc pode optar em usar skins para
cada um dos vrios estados do boto.
Voc pode criar um boto normal ou um alternar seu controle.
Botes tipicamente usam event listeners (eventos ouvintes) para executar uma ao
quando o usurio seleciona-o.
Quando um usurio clica com o mouse sobre um boto, o boto ativado e com isso
disparado o evento click.
Um boto possui eventos como o mouseMove, mouseOver, mouseOut, rollOver, rollOut,
mouseDown, e mouseUp.
Exemplo de cdigo de um controle Button:
<mx:Button label="Button" click="abrirJanela()"/>
Exemplo de um controle Button.
LinkBar
Um controle LinkBar define uma linha horizontal ou vertical que designa uma srie de
links de destino. Voc normalmente utiliza um LinkBar para controlar o filho ativo de um
container ViewStack ou para criar um conjunto de links diversos.
Voc tambm pode usar um LinkBar para criar um conjunto de links em seu aplicativo.
Exemplo de cdigo de um controle LinkBar:
<mx:LinkBar borderStyle="solid" itemClick="navigateToURL(new
URLRequest('http://www.adobe.com/' + String(event.label).toLowerCase()),
'_blank');">
<mx:dataProvider>
<mx:String>Flash</mx:String>
<mx:String>Director</mx:String>
<mx:String>Dreamweaver</mx:String>
<mx:String>ColdFusion</mx:String>
</mx:dataProvider>
</mx:LinkBar>
Exemplo de um controle LinkBar.
___________________________________________________________________________
21
Neste exemplo, foi utilizado as tags <mx:dataProvider> e <mx:String> para definir o

contedo do LinkBar. O dataProvider gera uma espcie de array de Strings com labels.
O evento itemClick dispara uma solicitao HTTP para o site da Adobe baseado no
contedo selecionado pelo usurio e abre a pgina em uma nova janela do browser.
CheckBox
O controle CheckBox utilizado para reunir um conjunto de valores verdadeiros ou
falsos. Com ele voc consegue controlar campos requeridos ou no pelo usurio
verificando quais opes foram marcadas.
Voc pode adicionar um texto a um campo CheckBox e coloc-lo esquerda, direita,
superior ou inferior da caixa.
Exemplo de cdigo de um controle CheckBox:
<mx:CheckBox width="100%" label="Enviar Dados?" selected="true" />
Exemplo de um controle CheckBox.

Neste exemplo foi criado um CheckBox que verifica se o usurio quer ou no enviar os
dados.
DateChooser e DateField
Os controles DateChooser e DateField permitem que os usurios selecionem datas da
agenda grfica. O DateChooser o calendrio. O DateField possui um campo texto e usa
uma seletor popup de datas para selecionar a data como resultado.
DataChooser
O controle DateChooser exibe o nome de um ms, o ano, e uma grade de dias do ms,
com colunas contendo os dias da semana. Esse controle til em aplicaes onde voc
deseja que uma agenda visvel. O usurio pode escolher uma nica data a partir da
agenda.
Voc consegue desativar a seleo de determinadas datas e limitar a exibio de um
intervalo de datas.
Exemplo de cdigo de um controle DataChooser:
<mx:DateChooser id="data1" />
___________________________________________________________________________
22
Exemplo de um controle DateChooser.

DateField
O controle DateField um campo texto que exibe a data com uma agenda (cone) em
seu lado direito. Quando um usurio clicar em qualquer lugar dentro do campo, um
seletor de data que idntico ao controle DateChooser aparece. Se nenhuma data foi
escolhida e o campo de texto estiver em branco, o ms atual exibido no seletor de
data.
Exemplo de cdigo de um controle DataField:
<mx:DateField id="data1" />
Exemplo de um controle DateField.

Label
O Label um controle no editvel de texto em uma nica linha.
Possui as seguintes caractersticas:
o
O usurio no pode alterar o texto, mas a aplicao pode modific-lo;
Pode especificar formatao de texto usando estilos texto ou HTML;
Voc pode controlar o alinhamento e o tamanho;
O controle transparente e no tem uma propriedade de cor de fundo, de modo

que o fundo do container mostra atravs do Label;
O Label aparece como texto escrito diretamente em seus antecedentes;
O Label no tem foco.
Exemplo de cdigo de um controle Label:

<mx:Label id="label1" text="Este um Label" />
Exemplo de um controle Label.
___________________________________________________________________________
23
TextInput
O controle TextInput um campo de texto editvel em uma nica linha. Ele permite ao
usurio introduzir uma linha de texto. Diferente do controle TextArea que permite inserir
vrias linhas de texto.
Exemplo de cdigo de um controle TextInput:
<mx:TextInput id="texto1" />
Exemplo de um controle TextInput.

Text
O controle Text exibe vrias linhas de texto no editveis.
Possui as seguintes caractersticas:
o
O usurio no pode alterar o texto, mas a aplicao pode modific-la;
No suporta scroll bars;
transparente;
Suporta texto em HTML e uma variedade de estilos de fontes.
Exemplo de cdigo de um controle Text:

<mx:Text width="100" text="Este um exemplo de controle Text em vrias
linhas." />
Exemplo de um controle Text.

ComboBox
O controle ComboBox uma lista suspensa a partir do qual o usurio pode selecionar um
nico valor. A sua funcionalidade muito semelhante ao SELECT em HTML.
Exemplo de cdigo de um controle ComboBox:
<mx:ComboBox>
<mx:ArrayCollection>
<mx:String>Masculino</mx:String>
<mx:String>Feminino</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
___________________________________________________________________________
24
Exemplo de um controle ComboBox.

Neste exemplo, criamos um controle ComboBox com opes de sexo. Dentro da tag
<mx:ComboBox> adicionamos uma coleo de array contendo duas opes de Strings
(Masculino e Feminino).
DataGrid
O controle DataGrid uma lista que pode exibir mais de uma coluna de dados. uma
tabela formatada de dados que permite que voc edite suas clulas.
O controle DataGrid fornece as seguintes caractersticas:
o
Colunas, linhas e cabealhos personalizveis;
Colunas que o usurio pode redimensionar e reorganizar em tempo de execuo;
Seleo de eventos;
Apoio paginao atravs de dados;
Travamento de linhas e colunas para que no se desloquem.
Exemplo de cdigo de um controle DataGrid:

<mx:DataGrid width="550">
<mx:Object>
<mx:Artista>Pink Floyd</mx:Artista>
<mx:Album>The Wall</mx:Album>
<mx:Valor>R$ 99,00</mx:Valor>
</mx:Object>
<mx:Object>
<mx:Artista>O Rappa</mx:Artista>
<mx:Album>Acstico MTV</mx:Album>
<mx:Valor>R$ 30,00</mx:Valor>
</mx:Object>
</mx:DataGrid>
___________________________________________________________________________
25
Exemplo de um controle DataGrid.

Neste exemplo, criamos um controle DataGrid aonde possui uma coleo de array com
dois objetos contendo trs valores cada um (lbum, Artista e Valor).
O mesmo poderia ser feito da seguinte forma:
<mx:Object Artista="Pink Floyd" Album="The Wall" Valor="R$
99,00" />
<mx:Object Artista="O Rappa" Album="Acstico MTV" Valor="R$
30,00" />
</mx:DataGrid>
Voc tambm pode especificar as colunas que devem aparecer e a ordem delas:
<mx:Object Artista="Pink Floyd" Album="The Wall" Valor="R$
99,00" />
<mx:Object Artista="O Rappa" Album="Acstico MTV" Valor="R$
30,00" />
<mx:columns>
<mx:DataGridColumn dataField="Artista" />
<mx:DataGridColumn dataField="Valor" />
</mx:columns>
</mx:DataGrid>
Com isso, nosso DataGrid ficaria com o seguinte layout:
Exemplo de um controle DataGrid com colunas especificadas.
___________________________________________________________________________
26
View States
View States permitem que voc varie o contedo e a aparncia de um componente,
normalmente em resposta a uma ao do usurio. Para utilizar View States (visualizao
de estados), voc define um View State base de um componente, e um ou mais View
States que modifiquem o View State base.
Voc pode usar View States, por exemplo, para implementar uma tela de login e um
formulrio de inscrio.
Exemplo:
<mx:states>
<mx:State name="Registrar">
<mx:AddChild relativeTo="{form1}" position="lastChild">
<mx:FormItem label="Confirmar Senha:" width="100%">
<mx:TextInput id="textInput3"
displayAsPassword="true"/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{panel1}" name="height" value="190"/>
<mx:SetProperty target="{panel1}" name="title" value="Novo
Registro" />
<mx:SetProperty target="{linkButton}" name="label"
value="Retornar ao Login" />
<mx:SetProperty target="{button1}" name="label"
value="Cadastrar" />
<mx:SetEventHandler target="{linkButton}" name="click"
handler="currentState = ''" />
<mx:SetProperty target="{textinput1}" name="width"/>
<mx:SetProperty target="{textinput2}" name="width"/>
</mx:State>
</mx:states>
<mx:Panel width="350" height="160" layout="absolute" title="Login"
id="panel1">
<mx:Form left="0" right="0" top="0" bottom="0" id="form1">
<mx:FormItem label="Login:" width="100%" id="formitem1">
<mx:TextInput width="100%" id="textinput2"/>
</mx:FormItem>
<mx:FormItem label="Senha:" width="100%" id="formitem2">
<mx:TextInput width="100%" id="textinput1"
displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton id="linkButton" label="Registrar"
click="currentState = 'Registrar'" />
<mx:HRule width="100%" alpha="0"/>
<mx:Button label="Logar" id="button1" />
</mx:ControlBar>
</mx:Panel>
Neste exemplo, a primeira vista, o estado inicial da tela solicita ao usurio para efetuar o
login, e inclui um link que permite registr-lo se necessrio.
___________________________________________________________________________
27
Exemplo de um View State em estado inicial.

Caso o usurio queira se registrar, ele clica no link Registrar. Com isso mudar a tela
passando para outro estado. Nela aparecer um terceiro campo Confirmar Senha como
mostra a imagem abaixo:
Exemplo de um View State em um segundo estado.

Observem que tambm mudou o ttulo do painel e os nomes dos botes.
Voc pode configurar a exibio de qualquer componente Flex, incluindo o componente
Application.
Um componente pode ter outros View States em momentos diferentes, mas apenas
apresentado um de cada vez.
A propriedade currentState do componente especifica o seu estado atual. Como regra
geral, voc deve usar essa propriedade para alterar os estados.
Para especificar o estado atual, utilize na propriedade currentState o conjunto "."
(aspas). Ex: this.currentState = Registrar.
Para se referenciar base original, atribua da seguinte forma: this.currentState = .
Voc define View States da seguinte forma:
o
Voc s pode definir View States na raiz de uma aplicao ou de um componente

personalizado, isto , em uma tag <mx:Application> ou na tag raiz de um
componente MXML.
Voc define estados usando a tag filha <mx:State> dentro da tag pai
<mx:states>.
___________________________________________________________________________
28
Para definir o ponto base de um estado em relao a um outro estado, voc deve
especificar o estado na tag <mx:State> utilizando a propriedade basedOn. Caso
contrrio, a perspectiva do estado utiliza a perspectiva da base inicial.
Elementos de um View State

Uma View State um conjunto de mudanas, ou sobreposies sobre um componente.
Por padro, o Flex aplica a sobreposio aplicao ou ao componente personalizado,
que define o ponto de vista do estado inicial.
Voc pode usar as seguintes classes para definir o que quer sobrepor:
Para adicionar ou remover objetos filhos, usa-se as classes AddChild e RemoveChild.
Por exemplo, o cdigo abaixo adiciona um novo boto em um componente (v1):
<mx:AddChild RelativeTo="{v1}">
<mx:Button Label="New Button"/>
</mx:AddChild>
Para definir ou alterar qualquer uma das seguintes caractersticas do componente:
Utilizando a classe SetProperty, o seguinte cdigo abaixo desabilita um Button
(button1):
<mx:SetProperty Target="{button1}" name="enabled" value="false"/>
Observem que em name eu digo qual a propriedade do boto que quero me referenciar
e em value eu informo o valor que quero que essa propriedade receba.
Utilizando a classe SetStyle, o seguinte cdigo abaixo define a cor da propriedade de um
Buttton (b2):
<mx:SetStyle name="color" value="0xAAAAAA" target="{b2}" />
Utilizando a classe SetEventHandler, o seguinte cdigo abaixo define o evento click de
um Button (button1) chamando uma funo (newClickHandler):
<mx:SetEventHandler target="{button1}" name="click"
handler="newClickHandler()"/>
Criando um View State em ActionScript
<?xml version="1.0"?>
initialize="criarEstado();" >
<mx:Script>
<![CDATA[
import mx.states.*;
// Varivel para o ActionScript definir o View State.
private var estado: State;
// Inicializa o mtodo e
// cria um View State usando ActionScript.
private function criarEstado():void {
estado = new State();
estado.name = "estado1";
___________________________________________________________________________
29
var meuEstilo: SetStyle = new SetStyle();

meuEstilo.name="backgroundColor";
meuEstilo.value= "#CCCCCC";
meuEstilo.target = meuHBox;
estado.overrides[0] = meuEstilo;
states.push(estado);
}
]]>
</mx:Script>
<mx:HBox id="meuHBox" height="50%" width="50%">
<mx:Button label="Estado Base" click="currentState='';" />
<mx:Button label="Mudar Estado"
click="currentState='estado1';"/>
</mx:HBox>
</mx:Application>
Neste exemplo criado um View State dinmico, isto , em actionScript. Observem que
criamos uma varivel com nome estado e em seguida uma funo com o nome
criarEstado. Essa funo cria uma nova instncia de State e atribui a varivel estado.
Depois atribumos a propriedade name o valor estado1. Abaixo criado uma varivel
do tipo SetStyle com nome meuEstilo e atribumos a ela valores nas propriedades
name, value e target. Aps, atribudo a propriedade overrides na posio 0 zero
da varivel estado a varivel meuEstilo. Por fim, adicionamos o State criado ao
atributo states da aplicao.
Estilos
Estilos so teis para definir o look and feel (aparncia) de aplicativos Adobe Flex.
Voc pode us-los para alterar a aparncia de um nico componente ou aplic-los em
todos os componentes. Este tpico descreve como usar estilos, incluindo a sintaxe
Cascading Style Sheet (CSS), em suas aplicaes. Tambm descreve como usar temas.
Voc pode modificar a aparncia de componentes Flex atravs de propriedades de estilo.
Essas propriedades podem definir o tamanho de uma fonte usada em um controle Label
ou a cor de fundo utilizada no controle TextInput. Em Flex, alguns estilos so herdados
do container pai para os seus filhos. Isto significa que voc pode definir um estilo uma
vez e ele aplicar-se a todos os controles de um nico tipo ou de um conjunto de
controles. Alm disso, voc pode sobrepor propriedades individuais para cada controle
em um local, componente, ou a nvel global, o que lhe d grande flexibilidade no controle
da aparncia de suas aplicaes.
Folha de Estilo Externa
Use CSS para aplicar estilos em um documento ou em toda a aplicao. Voc pode
apontar para uma folha de estilo sem invocar o ActionScript. Este o mtodo mais
conciso de aplicar estilos, mas tambm pode ser o menos flexvel. Folhas de estilo global
podem definir estilos que so herdados por todos os controles ou classes de estilos
individuais que s certos controles utilizao.
O exemplo a seguir aplica a folha de estilo externa myStyle.css a um componente:
<mx:Style source="myStyle.css"/>
Folha de Estilo Local
Use a tag <mx:Style> para definir estilos que se aplicam ao documento atual e seus
filhos. Voc define estilos com a tag <mx:Style> usando sintaxe CSS e pode definir
___________________________________________________________________________
30
estilos que se aplicam a todas as instncias de um controle ou de controles individuais. O

exemplo a seguir define um novo estilo e isso se aplica apenas ao controle myButton:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
.myFontStyle {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" styleName="myFontStyle" label="Clique
Aqui"/>
</mx:Application>
O exemplo a seguir define um novo estilo que se aplica a todas as instncias da classe
Button:
<mx:Style>
Button {
fontSize: 15;
color: #9933FF;
}
</mx:Style>
<mx:Button id="myButton" label="Clique Aqui"/>
</mx:Application>
Gerenciando Classes de Estilo
Use a classe StyleManager para aplicar estilos para todas as classes ou todas as
instncias de classes especficas. O exemplo a seguir define os estilos fontSize para 15 e
color para 0x9933FF sobre todos os controles Button:
creationComplete="initApp()">
<mx:Script>
<![CDATA[
public function initApp():void {
StyleManager.getStyleDeclaration("Button").setStyle
("fontSize",15);
StyleManager.getStyleDeclaration("Button").setStyle
("color",0x9933FF);
}
]]>
</mx:Script>
<mx:Button id="myButton" label="Clique Aqui" />
</mx:Application>
O Mtodo setStyle()
Use o mtodo setStyle()para manipular propriedades de estilo sobre instncias de
controle. A utilizao desse mtodo exige uma maior quantidade de poder de
processamento sobre o cliente do que usando folhas de estilo.
O exemplo a seguir define os estilos fontSize para 15 e color para 0x9933FF apenas
sobre o exemplo myButton:
creationComplete="initApp()">
___________________________________________________________________________
31
<mx:Script>
<![CDATA[
public function initApp():void {
myButton.setStyle("fontSize",15);
myButton.setStyle("color",0x9933FF);
}
]]>
</mx:Script>
<mx:Button id="myButton" label="Clique Aqui"/>
</mx:Application>
Folha de Estilo Interna
Use atributos de tags MXML (fontSize, color, etc) para aplicar propriedades de estilo.
Estas propriedades aplicam-se apenas ao controle atribudo.
O exemplo a seguir define os estilos fontSize para 15 e color para 0x9933FF no exemplo
myButton:
<mx:Button id="myButton" color="0x9933FF" fontSize="15" label="Clique
Aqui"/>
</mx:Application>
Trabalhando com arquivos XML

Lendo um XML interno e populando os dados
Abaixo segue um exemplo de como carregar dados em um XML interno:

<mx:Model id="xml">
<pessoa>
<id>6</id>
<nome>Francisco</nome>
<sobreNome>Gomes da Silva</sobreNome>
<telefone>617-219-3345</telefone>
</pessoa>
</mx:Model>
<mx:Label
<mx:Label
<mx:Label
<mx:Label
text="{xml.id}"/>
text="{xml.nome}"/>
text="{xml.sobreNome}"/>
text="{xml.telefone}"/>
</mx:Application>
Lendo um arquivo XML externo e populando os dados
Abaixo segue um exemplo de como carregar dados em um arquivo XML externo:

<mx:Model id="xml" source="dados.xml" />
<mx:Label text="{xml.id}"/>
<mx:Label text="{xml.nome}"/>
___________________________________________________________________________
32
<mx:Label text="{xml.sobreNome}"/>
<mx:Label text="{xml.telefone}"/>
</mx:Application>
Observem que o XML carregado e colocado na tag Model. Apartir da, para me
referenciar ao campo eu utilizo ponto (.) mais o nome da tag declarada no XML.
Exemplo: xml.nome me traz o nome da pessoa.
Abaixo segue a estrutura do arquivo dados.xml:
<pessoa>
<id>5</id>
<nome>Francisco</nome>
<sobreNome>Gomes da Silva</sobreNome>
<telefone>617-219-3345</telefone>
</pessoa>
Voc tambm pode carregar XMLs com dados dinmicos utilizando servios como
HTTPService, WebService ou RemoteObject.
___________________________________________________________________________
33
Referncias Bibliogrficas
Links
http://pt.wikipedia.org/wiki/RIA
http://www.adobe.com/br/products/flex/
http://www.egenial.com.br
Livros
Flex 2 Developers Guide
The Essential Guide to Flex 2 with ActionScript 3.0
Programming Flex 2
___________________________________________________________________________

Apostila Curso Basico Adobe Flex 2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Curso Basico Adobe Flex 2

Enviado por

Direitos autorais:

Formatos disponíveis

Curso Bsico

Por: Thiago Rodrigues Fernandes

Trabalhando com arquivos XML............................................................................31

Na segunda tela confirmado a opo escolhida. Clique em Next para prosseguir ou

Na terceira tela ser mostrado 2 (duas) opes de instalao:

Na quarta ele mostra o andamento da instalao.

Na stima tela informado o diretrio de instalao. Caso queria mudar clique em

Na nona tela ele informa que est configurando as pastas do sistema.

Na dcima segunda tela ele informa o andamento da instalao.

Framework de aplicao Flex.

Exemplo de Mxml e ActionScript 3.0

No container HBox, os componentes filhos so empilhados horizontalmente da

A imagem abaixo mostra containers filhos empilhados em um container ViewStack:

Exemplo de disposio de containers filhos dentro de um ViewStack.

Exemplo de utilizao do container ViewStack.

Exemplo de um formulrio dentro de um container Accordion.

Exemplo de um container TabNavegator.

ActionScript API - Para chamar os mtodos de controle estabelecendo as suas

Customizao de aparncia usando estilos, skins e fontes.

A imagem abaixo mostra vrios controles usados em um container Form:

Exemplo de controles dentro de um container Form.

Exemplo de um controle Button.

A imagem abaixo mostra o layout do cdigo acima:

Exemplo de um controle LinkBar.

Neste exemplo, foi utilizado as tags <mx:dataProvider> e <mx:String> para definir o

Exemplo de um controle CheckBox.

Exemplo de um controle DateChooser.

Exemplo de um controle DateField.

O usurio no pode alterar o texto, mas a aplicao pode modific-lo;

Pode especificar formatao de texto usando estilos texto ou HTML;

Voc pode controlar o alinhamento e o tamanho;

O controle transparente e no tem uma propriedade de cor de fundo, de modo

O Label aparece como texto escrito diretamente em seus antecedentes;

O Label no tem foco.

Exemplo de cdigo de um controle Label:

Exemplo de um controle Label.

Exemplo de um controle TextInput.

O usurio no pode alterar o texto, mas a aplicao pode modific-la;

No suporta scroll bars;

Suporta texto em HTML e uma variedade de estilos de fontes.

Exemplo de cdigo de um controle Text:

Exemplo de um controle Text.

A imagem abaixo mostra o layout do cdigo acima:

Exemplo de um controle ComboBox.

Colunas, linhas e cabealhos personalizveis;

Colunas que o usurio pode redimensionar e reorganizar em tempo de execuo;

Apoio paginao atravs de dados;

Travamento de linhas e colunas para que no se desloquem.

Exemplo de cdigo de um controle DataGrid:

Exemplo de um controle DataGrid.

Exemplo de um controle DataGrid com colunas especificadas.

Exemplo de um View State em estado inicial.

Exemplo de um View State em um segundo estado.

Voc s pode definir View States na raiz de uma aplicao ou de um componente

Elementos de um View State

var meuEstilo: SetStyle = new SetStyle();

estilos que se aplicam a todas as instncias de um controle ou de controles individuais. O

Trabalhando com arquivos XML

Você também pode gostar