Curso Básico Adobe Flex 2

Prévia do material em texto

Curso Básico 
Adobe Flex 2 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Por: Thiago Rodrigues Fernandes 
E-mail: thifernandes@gmail.com 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
Sumário 
 
Introdução ...........................................................................................................................3 
RIA (Rich Internet Application - Aplicações 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 aplicação de teste..............................................12 
Usando o help do Flex Builder ......................................................................................13 
Eventos ................................................................................................................................13 
O que são 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 Navegação .........................................................................................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 Básico Adobe Flex 2 
O Método 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 
Referências Bibliográficas........................................................................................33 
Links ....................................................................................................................................33 
Livros ...................................................................................................................................33 
 
 
 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
3 
 
 
RIA (Rich Internet Application - Aplicações Ricas para Internet) 
 
RIA é uma Aplicação Web que contêm características e funcionalidades de uma aplicação 
desktop tradicional. Tipicamente uma aplicação RIA transfere a necessidade de 
processamento do cliente (numa arquitetura cliente-servidor) para o navegador, mas 
mantém o processamento mais pesado no servidor de aplicação. 
 
A tecnologia AdobeFlex 
 
O Adobe® Flex™ 2 é a solução de desenvolvimento de aplicativos mais completa e 
potente para se criar e fornecer aplicativos avançados de Internet (RIAs) no ambiente 
empresarial e na Web. Ele permite que as empresas criem aplicativos multimídia 
personalizados que melhorem significativamente a experiência do usuário, 
revolucionando o modo como as pessoas interagem com a Web. 
 
Fonte: Adobe 
 
É um framework multi-plataforma para desenvolvimento de aplicações RIA, levando um 
modelo de programação padrão e conhecido por profissionais e desenvolvedores. Nele 
usamos uma linguagem de marcação (MXML) que é baseada no XML para definir a 
interface da aplicação e o Actionscript 3.0 para a parte lógica. As aplicações Flex levam a 
extensão .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 código aberto para a construção de programas de computador. O projeto 
Eclipse foi iniciado na IBM que desenvolveu a primeira versão do produto e doou-o como 
software livre para a comunidade. O gasto inicial da IBM no produto foi de mais de 40 
milhões de centavos de dólares. Hoje o Eclipse é a IDE Java mais utilizada no mundo. 
Possui como características marcantes o uso da SWT e não do Swing como biblioteca 
gráfica, a forte orientação 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 excelência 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 avançada 
lógica no lado do cliente para promover a integração com XML, serviços da Web ou Flex 
Data Services. Com sofisticadas ferramentas de design e layout, os designers de 
interface de usuário também podem criar interfaces de aplicativos mais ricas e fáceis de 
usar, com layout e funcionalidade personalizados. 
 
Instalando o Flex Builder 2 
 
Introdução 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
4 
Na primeira tela é solicitado aonde que será salvo os arquivos. Ele informa um endereço 
padrão de instalação que normalmente é utilizado. 
 
 
 
Na segunda tela é confirmado a opção escolhida. Clique em “Next” para prosseguir ou 
em “Back” para voltar. 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
5 
Na terceira tela será mostrado 2 (duas) opções de instalação: 
- Flex Builder and Flex SDK 
- Flex Builder Plug-in and Flex SDK 
A primeira opção se refere a instalação da IDE do Flex Builder e o SDK. 
A segunda opção se refere a instalação do plugin do Flex Builder que roda dentro do 
eclipse existente e o SDK. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
6 
Na quarta ele mostra o andamento da instalação. 
 
 
 
Na quinta tela ele informa alguns requisitos para a instalação como por exemplo fechar 
todos os programas antes de prosseguir. 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
7 
Na sexta tela será mostrado as regras de uso e solicitado o aceite ou rejeição do termo 
de uso. 
 
 
 
Na sétima tela é informado o diretório de instalação. Caso queria mudar clique em 
“Choose”. 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
8 
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. 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
9 
Na décima tela ele pergunta se você quer instalar o plugin Adobe Flash Player 9 para 
Internet Explorer e Firefox. 
 
 
 
Na décima primeira tela ele mostra o que será instalado, aonde e qual o espaço em disco 
que ele requer para a instalação. 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
10 
Na décima segunda tela ele informa o andamento da instalação. 
 
 
 
Na décima terceira tela ele informa que a instalação foi bem sucedida. Clique em “Done” 
para encerrar. 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
11 
Fundamentos do Flex 
 
A framework Flex é divida conforme a tabela abaixo. 
 
 
Framework de aplicação Flex. 
 
MXML 
 
Linguagem de marcação baseada em xml usada para definir a interface da aplicação. 
Pode ser usada também para definir aspectos não visuais da aplicação como acesso a 
dados no servidor. 
MXML inclui tags para componentes visuais como dataGrids, inputText, comboBox e 
menu. Inclui também tags para componentes não visuais como conexão com web 
services, data binding e efeitos de animação. 
 
ActionScript 3.0 
 
Linguagem de programação orientada a objetos usada para definir a parte lógica da 
aplicação. 
Linguagem semelhante ao Java e C#. 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
12 
 
Exemplo de Mxml e ActionScript 3.0 
 
Flex Class Library 
 
São as bibliotecas de classes do Flex. 
 
Flex Data Services 
 
Oferece um conjunto de avançados recursos de gerenciamento de dados no lado do 
servidor que permitem ao Flex fazer um uso intenso desses dados. 
 
Criando nosso primeiro projeto e aplicação 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 
aplicação. Selecione a opção “Basic”. Em seguida, dê um nome ao seu projeto. 
Em project contents, deixe a opção “use default location” marcada para usar a pasta 
padrão aonde os arquivos do projeto ficarão armazenados. 
Por último, clique em “Finish”. 
 
Por padrão, o flex cria na raiz do projeto um componente com o mesmo nome do 
projeto. 
 
O código de sua aplicação 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 aplicação. 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
13 
Na aba “Flex Properties” encontre a opção “text” e digite “Bem vindo ao Flex”. Em 
seguida, vamos adicionar um efeito ao label. Altere o tipo de visão da aba “Flex 
Properties” para “Category View”, encontre o atributo “mouseDownEffect” e digite 
“WipeRight”. 
 
O código de sua aplicação deverá estar conforme abaixo: 
 
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " 
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 referência da linguagem é o próprio help do Flex Builder. Ele traz uma 
lista completa de suas classes e métodos. Lá você também encontra lições que ensinam 
desde a criação de sua primeira aplicação em Flex até a criação de aplicações usando 
componentes mais avançados. 
 
Eventos 
 
O que são 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 eventose repassam 
para quem está "ouvindo", os chamados Listeners (ouvintes). 
 
Disparando Eventos 
 
Nosso primeiro exemplo mostra um botão 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 " ); 
 } 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
14 
 
 ]]> 
</mx:Script> 
 
Container 
 
O que é um container? 
 
Um container define uma região retangular de desenho do Adobe Flash Player. Dentro de 
um container, definimos componentes, controles e outros containers. Componentes 
definidos dentro de um container são chamados de filhos do 
container. O Adobe Flex fornece uma ampla variedade de containers, que vão desde 
simples caixas através de painéis e formas, até containers navegadores e containers de 
layout. 
 
Application 
 
O Flex define um container de layout padrão chamado “Application” que é o primeiro 
arquivo a ser carregado ao rodar a aplicação. Representado pela tag <mx:Application>, 
é o responsável por definir o início da aplicação. É o container pai e responsável pelo 
controle de chamadas aos demais containers filhos (Panel, Form, Canvas, dentre outros). 
 
Exemplo de código de um container Application: 
 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " 
layout=" absolute " > 
 
</mx:Application> 
 
Containers de Layout 
 
Um container de layout define uma região 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 posições de seus filhos em 
um esquema similar a um formulário HTML. 
Para usar um container de layout, você cria o container e, em seguida, adiciona os 
elementos que definem a sua aplicação. 
Logo abaixo temos os containers de layout mais utilizados. 
 
Canvas 
 
O container de layout “Canvas” define uma região retangular em que você coloca filhos 
containers e controles. Ao contrário de todos os outros componentes ele só utiliza layout 
absoluto, ou seja, você deve especificar as propriedades x e y, ou os filhos dele serão 
empilhados em cima do canto superior esquerdo. Você deve especificar as posições x e y 
com base nas laterais ou no centro das âncoras. 
 
Exemplo de código de um container Canvas: 
 
<mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml " width=" 400" 
height=" 113 " > 
 
</mx:Canvas> 
 
HBox 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
15 
No container “HBox”, os componentes filhos são empilhados horizontalmente da 
esquerda para a direita. 
 
Exemplo de código de um container HBox: 
 
<mx:HBox width=" 100%" horizontalAlign=" center " verticalAlign=" middle " 
height=" 30%" > 
 
</mx:HBox> 
 
VBox 
 
No container “VBox”, a posição dos componentes filhos é definida de cima para baixo e 
centralizado. 
 
Exemplo de código de um container VBox: 
 
<mx:VBox height=" 100%" horizontalAlign=" center " verticalAlign=" middle " 
width=" 100%" > 
 
</mx:VBox> 
 
Form 
 
Os formulários são um dos métodos mais comuns utilizados em aplicações web para 
coletar informações dos usuários. 
 
Exemplo de código 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. Além disso, este container possui uma barra de título aonde se pode adicionar 
um texto a ela. 
 
Exemplo de código de um container Panel: 
 
<mx:Panel width=" 250" height=" 200 " layout=" absolute " title=" Título do 
Painel " > 
 
</mx:Panel> 
 
Containers de Navegação 
 
Os containers de navegação são utilizados basicamente para controlar a visualização de 
containers filhos. Por exemplo, um container TabNavigator permite que você visualize um 
container filho utilizando um conjunto de separadores. 
 
ViewStack 
 
Um container de navegação ViewStack é constituído por um conjunto de containers filhos 
que estão empilhados uns em cima dos outros, com apenas um container visível ou ativo 
de uma só vez. 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
16 
 
A imagem abaixo mostra containers filhos empilhados em um container ViewStack: 
 
 
Exemplo de disposição de containers filhos dentro de um ViewStack. 
 
O ViewStack não define um mecanismo aonde os usuários 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 lógica na sua 
aplicação em ActionScript para permitir que os usuários mudem de um container filho 
ativo para um inativo. Por exemplo, você pode definir botões para alternar entre os 
containers filhos. 
 
Exemplo de código de um container ViewStack: 
 
<!-- Cria um container VBox para armazenar os conta iners HBox e ViewStack 
na posição vertical. --> 
<mx:VBox> 
<!-- Cria um container HBox para armazenar os botõe s de forma 
horizontal. --> 
 <mx:HBox borderStyle=" solid " > 
<!-- Define três botões. Cada container (Canvas) fi lho utiliza 
um id para definir qual é o ativo. --> 
<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> 
<!-- Define o ViewStack e três containers (Canvas) filhos aonde a 
visualização é controlada através de seus id's pelo s botões. --> 
 <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 código acima: 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
17 
 
Exemplo de utilização do container ViewStack. 
 
Accordion 
 
O container de navegação Accordion é uma variação do container ViewStack. Como ele 
você pode melhorar significativamente a aparência e navegação. 
Ao invés de empilhar os containers filhos uns em cima dos outros, ele define uma 
seqüência de painéis, mas exibe apenas um painel de cada vez deixando apenas uma 
barra de seleção dos containers. 
 
Exemplo de código 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> 
 <!-- Informações Adicionais. --> 
 </mx:Form> 
 <mx:Form id=" dadosResidenciais " label=" 2. Dados Residenciais " > 
 <mx:FormItem id=" itemEndereco " label=" Endereço: " > 
 <mx:TextInput id=" endereco " /> 
 </mx:FormItem> 
 <!-- Informações Adicionais. --> 
 </mx:Form> 
 <mx:Form id=" dadosBancarios " label=" 3. Dados Bancários " > 
 <mx:FormItem id=" itemAgencia " label=" Agência: " > 
 <mx:TextInput id=" agencia " /> 
 </mx:FormItem><mx:FormItem id=" itemContaCorrente " label=" Conta Corrente: " > 
 <mx:TextInput id=" contaCorrente " /> 
 </mx:FormItem> 
 <!-- Informações Adicionais. --> 
 </mx:Form> 
</mx:Accordion> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
18 
 
Exemplo de um formulário 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 são outros containers. O container 
TabNavigator cria uma aba para cada container filho. Quando o usuário 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 código de um container TabNavigator: 
 
mx:TabNavigator borderStyle=" solid " > 
 <mx:VBox label=" Dados Pessoais " width=" 400" height=" 150 " > 
 <!-- Informações Adicionais. --> 
 </mx:VBox> 
 <mx:VBox label=" Dados Residenciais " width=" 400" height=" 150 " > 
 <!-- Informações Adicionais. --> 
 </mx:VBox> 
 <mx:VBox label=" Dados Bancários " width=" 400" height=" 150 " > 
 <mx:Form id=" dadosBancarios " label=" 3. Dados Bancários " > 
 <mx:FormItem id=" itemAgencia " label=" Agência: " > 
 <mx:TextInput id=" agencia " /> 
 </mx:FormItem> 
<mx:FormItem id=" itemContaCorrente " label=" Conta 
Corrente: " > 
 <mx:TextInput id=" contaCorrente " /> 
 </mx:FormItem> 
 <!-- Informações Adicionais. --> 
 </mx:Form> 
 </mx:VBox> 
</mx:TabNavigator> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
19 
 
Exemplo de um container TabNavegator. 
 
Controles 
 
Os controles são componentes de interface do usuário (UIComponents) que exibem algo 
para o usuário e/ou solicitam ao usuário interagir com a aplicação. Buttons, TextArea, 
ComboBox, dentre outros são alguns exemplos de controles. 
Normalmente, você define um container e, em seguida, insere controles a ele. 
A tag raiz de uma aplicação 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 características: 
o MXML API - Para declarar o controle e os valores de suas propriedades e eventos; 
 
o ActionScript API - Para chamar os métodos de controle estabelecendo as suas 
propriedades em tempo de execução; 
 
o Customização de aparência usando estilos, skins e fontes. 
 
A imagem abaixo mostra vários controles usados em um container Form: 
 
 
Exemplo de controles dentro de um container Form. 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
20 
 
Button 
 
O controle Button (botão) é comumente utilizado como botão retangular. Geralmente 
possui no seu rótulo um texto, um ícone ou ambos. Você pode optar em usar skins para 
cada um dos vários estados do botão. 
 
Você pode criar um botão normal ou um alternar seu controle. 
 
Botões tipicamente usam event listeners (eventos ouvintes) para executar uma ação 
quando o usuário seleciona-o. 
 
Quando um usuário clica com o mouse sobre um botão, o botão é ativado e com isso é 
disparado o evento “click”. 
 
Um botão possui eventos como o mouseMove, mouseOver, mouseOut, rollOver, rollOut, 
mouseDown, e mouseUp. 
 
Exemplo de código de um controle Button: 
 
<mx:Button label=" Button " click="abrirJanela()" /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle Button. 
 
 
LinkBar 
 
Um controle LinkBar define uma linha horizontal ou vertical que designa uma série 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ê também pode usar um LinkBar para criar um conjunto de links em seu aplicativo. 
 
Exemplo de código 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> 
 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle LinkBar. 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
21 
Neste exemplo, foi utilizado as tags <mx:dataProvider> e <mx:String> para definir o 
conteúdo do LinkBar. O dataProvider gera uma espécie de array de Strings com labels. 
O evento itemClick dispara uma solicitação HTTP para o site da Adobe baseado no 
conteúdo selecionado pelo usuário e abre a página 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 não pelo usuário 
verificando quais opções foram marcadas. 
Você pode adicionar um texto a um campo CheckBox e colocá-lo à esquerda, direita, 
superior ou inferior da caixa. 
 
Exemplo de código de um controle CheckBox: 
 
<mx:CheckBox width=" 100%" label=" Enviar Dados? " selected=" true " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle CheckBox. 
 
Neste exemplo foi criado um CheckBox que verifica se o usuário quer ou não enviar os 
dados. 
 
DateChooser e DateField 
 
Os controles DateChooser e DateField permitem que os usuários selecionem datas da 
agenda gráfica. O DateChooser é o calendário. 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 mês, o ano, e uma grade de dias do mês, 
com colunas contendo os dias da semana. Esse controle é útil em aplicações onde você 
deseja que uma agenda visível. O usuário pode escolher uma única data a partir da 
agenda. 
Você consegue desativar a seleção de determinadas datas e limitar a exibição de um 
intervalo de datas. 
 
Exemplo de código de um controle DataChooser: 
 
<mx:DateChooser id=" data1 " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
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 usuário clicar em qualquer lugar dentro do campo, um 
seletor de data que é idêntico ao controle DateChooser aparece. Se nenhuma data foi 
escolhida e o campo de texto estiver em branco, o mês atual é exibido no seletor de 
data. 
 
Exemplo de código de um controle DataField: 
 
<mx:DateField id=" data1 " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle DateField. 
Label 
 
O Label é um controle não editável de texto em uma única linha. 
 
Possui as seguintes características: 
 
o O usuário não pode alterar o texto, mas a aplicação pode modificá-lo; 
o Pode especificar formatação de texto usando estilos texto ou HTML; 
o Você pode controlar o alinhamento e o tamanho; 
o O controle é transparente e não tem uma propriedade de cor de fundo, de modo 
que o fundo do container mostra através do Label; 
o O Label aparece como texto escrito diretamente em seus antecedentes; 
o O Label não tem foco. 
 
Exemplo de código de um controle Label: 
 
<mx:Label id=" label1 " text=" Este é um Label " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle Label. 
 
___________________________________________________________________________Curso Básico Adobe Flex 2 
23 
 
TextInput 
 
O controle TextInput é um campo de texto editável em uma única linha. Ele permite ao 
usuário introduzir uma linha de texto. Diferente do controle TextArea que permite inserir 
várias linhas de texto. 
 
Exemplo de código de um controle TextInput: 
 
<mx:TextInput id=" texto1 " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle TextInput. 
 
Text 
 
O controle Text exibe várias linhas de texto não editáveis. 
 
Possui as seguintes características: 
 
o O usuário não pode alterar o texto, mas a aplicação pode modificá-la; 
o Não suporta scroll bars; 
o É transparente; 
o Suporta texto em HTML e uma variedade de estilos de fontes. 
 
Exemplo de código de um controle Text: 
 
<mx:Text width=" 100" text=" Este é um exemplo de controle Text em várias 
linhas. " /> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle Text. 
 
ComboBox 
 
O controle ComboBox é uma lista suspensa a partir do qual o usuário pode selecionar um 
único valor. A sua funcionalidade é muito semelhante ao SELECT em HTML. 
 
Exemplo de código de um controle ComboBox: 
 
<mx:ComboBox> 
 <mx:ArrayCollection> 
 <mx:String> Masculino </mx:String> 
 <mx:String> Feminino </mx:String> 
 </mx:ArrayCollection> 
</mx:ComboBox> 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
24 
A imagem abaixo mostra o layout do código acima: 
 
 
Exemplo de um controle ComboBox. 
 
Neste exemplo, criamos um controle ComboBox com opções de sexo. Dentro da tag 
<mx:ComboBox> adicionamos uma coleção de array contendo duas opções 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 células. 
 
O controle DataGrid fornece as seguintes características: 
 
o Colunas, linhas e cabeçalhos personalizáveis; 
o Colunas que o usuário pode redimensionar e reorganizar em tempo de execução; 
o Seleção de eventos; 
o Apoio à paginação através de dados; 
o Travamento de linhas e colunas para que não se desloquem. 
 
Exemplo de código de um controle DataGrid: 
 
<mx:DataGrid width=" 550" > 
 <mx:ArrayCollection> 
 <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> Acústico MTV </mx:Album> 
 <mx:Valor> R$ 30,00 </mx:Valor> 
 </mx:Object> 
 </mx:ArrayCollection> 
</mx:DataGrid> 
 
A imagem abaixo mostra o layout do código acima: 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
25 
 
Exemplo de um controle DataGrid. 
 
Neste exemplo, criamos um controle DataGrid aonde possui uma coleção de array com 
dois objetos contendo três valores cada um (Álbum, Artista e Valor). 
 
O mesmo poderia ser feito da seguinte forma: 
 
<mx:DataGrid width=" 550" > 
 <mx:ArrayCollection> 
<mx:Object Artista=" Pink Floyd " Album=" The Wall " Valor=" R$ 
99,00 " /> 
<mx:Object Artista=" O Rappa " Album=" Acústico MTV " Valor=" R$ 
30,00 " /> 
 </mx:ArrayCollection> 
</mx:DataGrid> 
 
Você também pode especificar as colunas que devem aparecer e a ordem delas: 
 
<mx:DataGrid width=" 550" > 
 <mx:ArrayCollection> 
<mx:Object Artista=" Pink Floyd " Album=" The Wall " Valor=" R$ 
99,00 " /> 
<mx:Object Artista=" O Rappa " Album=" Acústico MTV " Valor=" R$ 
30,00 " /> 
 </mx:ArrayCollection> 
 <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. 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
26 
View States 
 
View States permitem que você varie o conteúdo e a aparência de um componente, 
normalmente em resposta a uma ação do usuário. Para utilizar View States (visualização 
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 
formulário de inscrição. 
 
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 usuário para efetuar o 
login, e inclui um link que permite registrá-lo se necessário. 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
27 
 
Exemplo de um View State em estado inicial. 
 
Caso o usuário 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 também mudou o título do painel e os nomes dos botões. 
 
Você pode configurar a exibição 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 aplicação ou de um componente 
personalizado, isto é, em uma tag <mx:Application> ou na tag raiz de um 
componente MXML. 
o Você define estados usando a tag filha <mx:State> dentro da tag pai 
<mx:states>. 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
28 
o Para definir o ponto base de um estado em relação a um outro estado, você deve 
especificar o estado na tag <mx:State> utilizando a propriedade basedOn. Caso 
contrário, a perspectiva do estado utiliza a perspectiva da base inicial. 
 
Elementos de um View State 
 
Uma View State é um conjunto de mudanças,ou sobreposições sobre um componente. 
Por padrão, o Flex aplica a sobreposição à aplicação 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 código abaixo adiciona um novo botão em um componente (v1): 
 
<mx:AddChild RelativeTo=" { v1 } " > 
 <mx:Button Label=" New Button " /> 
</mx:AddChild> 
 
Para definir ou alterar qualquer uma das seguintes características do componente: 
 
Utilizando a classe SetProperty, o seguinte código abaixo desabilita um Button 
(button1): 
 
<mx:SetProperty Target=" { button1 } " name=" enabled " value=" false " /> 
 
Observem que em “name” eu digo qual a propriedade do botão que quero me referenciar 
e em “value” eu informo o valor que quero que essa propriedade receba. 
 
Utilizando a classe SetStyle, o seguinte código abaixo define a cor da propriedade de um 
Buttton (b2): 
 
<mx:SetStyle name=" color " value=" 0xAAAAAA" target=" { b2} " /> 
 
Utilizando a classe SetEventHandler, o seguinte código abaixo define o evento click de 
um Button (button1) chamando uma função (newClickHandler): 
 
<mx:SetEventHandler target=" { button1 } " name=" click " 
handler="newClickHandler()" /> 
 
Criando um View State em ActionScript 
 
<?xml version="1.0"?> 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " 
initialize="criarEstado();" > 
 <mx:Script> 
 <![CDATA[ 
 import mx.states.*; 
 
 // Variável para o ActionScript definir o View Stat e. 
 private var estado: State; 
 
 // Inicializa o método e 
 // cria um View State usando ActionScript. 
 private function criarEstado(): void { 
 estado = new State(); 
 estado.name = "estado1" ; 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
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 dinâmico, isto é, em actionScript. Observem que 
criamos uma variável com nome “estado” e em seguida uma função com o nome 
“criarEstado”. Essa função cria uma nova instância de State e atribui a variável estado. 
Depois atribuímos a propriedade “name” o valor “estado1”. Abaixo é criado uma variável 
do tipo SetStyle com nome “meuEstilo” e atribuímos a ela valores nas propriedades 
“name, value e target”. Após, é atribuído a propriedade “overrides” na posição 0 “zero” 
da variável “estado” a variável “meuEstilo”. Por fim, adicionamos o State criado ao 
atributo states da aplicação. 
 
Estilos 
 
Estilos são úteis para definir o look and feel (aparência) de aplicativos Adobe Flex. 
Você pode usá-los para alterar a aparência de um único componente ou aplicá-los em 
todos os componentes. Este tópico descreve como usar estilos, incluindo a sintaxe 
Cascading Style Sheet (CSS), em suas aplicações. Também descreve como usar temas. 
 
Você pode modificar a aparência de componentes Flex através 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 são 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. Além disso, você pode sobrepor propriedades individuais para cada controle 
em um local, componente, ou a nível global, o que lhe dá grande flexibilidade no controle 
da aparência de suas aplicações. 
 
Folha de Estilo Externa 
 
Use CSS para aplicar estilos em um documento ou em toda a aplicação. Você pode 
apontar para uma folha de estilo sem invocar o ActionScript. Este é o método mais 
conciso de aplicar estilos, mas também pode ser o menos flexível. Folhas de estilo global 
podem definir estilos que são herdados por todos os controles ou classes de estilos 
individuais que só certos controles utilização. 
 
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 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
30 
estilos que se aplicam a todas as instâncias 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 instâncias da classe 
Button: 
 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " > 
 <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 
instâncias de classes específicas. O exemplo a seguir define os estilos fontSize para 15 e 
color para 0x9933FF sobre todos os controles Button: 
 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " 
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 Método setStyle() 
 
Use o método setStyle()para manipular propriedades de estilo sobre instâncias de 
controle. A utilização desse método 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”: 
 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " 
creationComplete="initApp()" > 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
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 atribuído. 
O exemplo a seguir define os estilos fontSize para 15 e color para 0x9933FF no exemplo 
“myButton”: 
 
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " > 
<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:Application xmlns:mx=" http://www.adobe.com/2006/mxml " > 
 
 <!-- Cria o 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 text=" { xml.id } " /> 
 <mx:Label text=" { xml.nome } " /> 
 <mx:Label text=" { xml.sobreNome } " /> 
 <mx:Label 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:Application xmlns:mx=" http://www.adobe.com/2006/mxml " > 
 
 <!-- Carrega o xml externo. --> 
 <mx:Model id=" xml " source=" dados.xml " /> 
 
 <mx:Label text=" { xml.id } " /> 
 <mx:Label text=" { xml.nome } " /> 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
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ê também pode carregar XML’s com dados dinâmicos utilizando serviços como 
HTTPService, WebService ou RemoteObject. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
___________________________________________________________________________ 
Curso Básico Adobe Flex 2 
33 
Referências Bibliográficas 
 
Links 
 
http://pt.wikipedia.org/wiki/RIA 
http://www.adobe.com/br/products/flex/ 
http://www.egenial.com.br 
 
Livros 
 
Flex 2 Developer’s Guide 
The Essential Guide to Flex 2 with ActionScript 3.0 
Programming Flex 2