Apostila Curso Basico Adobe Flex 2

Curso Básico
Adobe Flex 2
Por: Thiago Rodrigues Fernandes

E-mail: thifernandes@gmail.com
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
___________________________________________________________________________
3
Introdução
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 Adobe Flex
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
___________________________________________________________________________
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.
___________________________________________________________________________
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.
___________________________________________________________________________
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.
___________________________________________________________________________
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”.
___________________________________________________________________________
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.
___________________________________________________________________________
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.
___________________________________________________________________________
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.
___________________________________________________________________________
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#.
___________________________________________________________________________
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.
___________________________________________________________________________
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"?>

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 eventos e 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");
}
___________________________________________________________________________
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:
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
___________________________________________________________________________
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.
___________________________________________________________________________
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:

<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 código acima:
___________________________________________________________________________
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>

</mx:Form>
<mx:Form id="dadosResidenciais" label="2. Dados Residenciais">
<mx:FormItem id="itemEndereco" label="Endereço:">
<mx:TextInput id="endereco"/>
</mx:FormItem>
</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>
</mx:Form>
</mx:Accordion>
___________________________________________________________________________
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">
</mx:VBox>
<mx:VBox label="Dados Residenciais" width="400" height="150">
</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>
</mx:Form>
</mx:VBox>
</mx:TabNavigator>
___________________________________________________________________________
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.
___________________________________________________________________________
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()"/>
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>
Exemplo de um controle LinkBar.
___________________________________________________________________________
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" />
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" />
___________________________________________________________________________
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" />
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" />
Exemplo de um controle Label.

___________________________________________________________________________
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" />
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." />
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>
___________________________________________________________________________
24
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: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:DataGrid>
___________________________________________________________________________
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: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:DataGrid>
Você também 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="Acústico 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 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.
___________________________________________________________________________
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>.
___________________________________________________________________________
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"?>
initialize="criarEstado();" >
<mx:Script>
<![CDATA[
import mx.states.*;
// Variável para o ActionScript definir o View State.

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";
___________________________________________________________________________
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
___________________________________________________________________________
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: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:
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”:
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 atribuído.
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 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: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ê também pode carregar XML’s com dados dinâmicos utilizando serviços como
HTTPService, WebService ou RemoteObject.
___________________________________________________________________________
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
___________________________________________________________________________

Apostila Curso Basico Adobe Flex 2

Enviado por

Dados do documento

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 Básico

Por: Thiago Rodrigues Fernandes

RIA (Rich Internet Application - Aplicações Ricas para Internet)

A tecnologia Adobe Flex

O Adobe® Flex™ 2 é a solução de desenvolvimento de aplicativos mais completa e

É um framework multi-plataforma para desenvolvimento de aplicações RIA, levando um

Eclipse e Adobe Flex Builder

É uma IDE de código aberto para a construção de programas de computador. O projeto

Adobe Flex Builder

Instalando o Flex Builder 2

Na segunda tela é confirmado a opção escolhida. Clique em “Next” para prosseguir ou

Na terceira tela será mostrado 2 (duas) opções de instalação:

Na quarta ele mostra o andamento da instalação.

Na sétima tela é informado o diretório de instalação. Caso queria mudar clique em

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

Na décima segunda tela ele informa o andamento da instalação.

A framework Flex é divida conforme a tabela abaixo.

Framework de aplicação Flex.

Linguagem de marcação baseada em xml usada para definir a interface da aplicação.

Linguagem de programação orientada a objetos usada para definir a parte lógica da

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

Criando nosso primeiro projeto e aplicação de teste

Para criarmos nosso primeiro projeto em flex, vá em:

O código de sua aplicação deverá estar conforme abaixo:

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

Agora vamos criar nosso primeiro aplicativo.

O código de sua aplicação deverá estar conforme abaixo:

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

Usando o help do Flex Builder

O que são 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",

Exemplo de evento em actionScript:

private var btn: Button;

public function init(): void {

public function alerta(event: Object): void {

O Flex define um container de layout padrão chamado “Application” que é o primeiro

Exemplo de código de um container Application:

Exemplo de código de um container Canvas:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"

No container “HBox”, os componentes filhos são empilhados horizontalmente da

Exemplo de código de um container HBox:

<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle"

Exemplo de código de um container VBox:

<mx:VBox height="100%" horizontalAlign="center" verticalAlign="middle"

Exemplo de código de um container Form:

<mx:Form width="100%" height="100%">

Exemplo de código de um container Panel:

<mx:Panel width="250" height="200" layout="absolute" title="Título do

Os containers de navegação são utilizados basicamente para controlar a visualização de

Um container de navegação ViewStack é constituído por um conjunto de containers filhos

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

Exemplo de código de um container ViewStack:

<!-- Cria um container VBox para armazenar os containers HBox e ViewStack

A imagem abaixo mostra o layout do código acima:

Exemplo de utilização do container ViewStack.

O container de navegação Accordion é uma variação do container ViewStack. Como ele