apostila curso basico adobe flex 2

Curso Básico Adobe Flex 2

Por: Thiago Rodrigues Fernandes E-mail: [email protected]

___________________________________________________________________________ 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


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

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

Introdução


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"?> <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 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: <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


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> A imagem abaixo mostra o layout do código acima:

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> A imagem abaixo mostra o layout do código acima:


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()" /> 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.


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:


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.


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>


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:


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.


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"?> <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" ;


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: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()" >

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 " >  <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 " >  <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

Documents