Dominando

Adobe Flex Mobile

Parte 1

Daniel Pace Schmitz

www.danielschmitz.com.br www.flex.etc.br

Esta obra digital parte integrante do livro Dominando Flex Mobile, fornecida de forma gratuita para os leitores. Uma correo ortogrfica mais rgida ainda no foi realizada, e caso encontre algum erro, por favor informe para suporte@danielschmitz.com.br

Voc realmente conhece Orientao a Objetos? Nesta obra explicamos, passo a passo, e com muitos exemplos prticos, como entender melhor cada conceito da POO, incluindo tambm padres de projeto e construo de frameworks.

Veja mais sobre este livro aqui: http://www.danielschmitz.com.br/dominando-orientacao-objetos.html

Dica Use o sumrio do arquivo PDF para navegar entre os tpicos desta obra

Prefcio
O Desenvolvimento Mobile ganha novos adeptos a cada dia, e com o surgimento de dezenas de dispositivos mveis no mercado, caracterizados principalmente pelos tablets e celulares, o mobile ganha fora como uma tima rea para investimento. A Adobe, ciente deste crescimento, vem atravs dos ltimos trs anos formando a base para o que podemos chamar de desenvolvimento mobile atravs do uso do Flex, e de sua IDE Flash Builder. Nesta primeira parte da obra, mostramos o bsico do Adobe Flash Builder 4.5, exibindo todos os conceitos necessrios para criar uma aplicao simples para o seu dispositivo mobile. Na segunda parte da obra, que ainda ser lanada, iremos discutir todos os conceitos avanados incluindo suporte aos dispositivos Android e iOs, alm de criar uma aplicao completa para restaurantes. Aguardem!

Interessado na segunda parte da obra ? Ns criamos uma newsletter para que voc possa receber email com novidades e promoes sobre os nossos livros. Voc pode cadastrar o seu email no link a seguir: Clique aqui para preencher a nossa newsletter

Convenes utilizadas nesta obra

Informa uma dica ou observao ao leitor Indica que ser exibido um arquivo // ......... Indica que existe cdigo fonte, mas no ser exibido porque no relevante naquele momento. Cdigo em Negrito Indica alteraes no cdigo fonte, como por exemplo, uma nova propriedade adicionada a um componente. , , at So referncias ao cdigo realizadas para um melhor entendimento. Sempre que houver estas referncias existir uma explicao aps o cdigo Sempre que encontrar um texto COMO ESTE, estamos referenciando algum dado na tela, como o nome do projeto ou um boto que deve ser clicado.

Suporte Acesse www.danielschmitz.com.br para conferir as ltimas novidades do livro, captulos extra, cdigo fonte, etc. Voc tambm pode enviar um email para o autor, caso tenha dvidas sobre esta obra. Autor: Site: Email para suporte: Twitter: Daniel Pace Schmitz www.danielschmitz.com.br suporte@danielschmitz.com.br @Daniel_Schmitz

SUMRIO
1 Introduo ....................................................................................................................... 1 1.1 1.2 1.3 1.4 1.5 1.6 2 O que o framework Flex? .................................................................................... 1 O que MXML? ...................................................................................................... 2 O que Action Script? ............................................................................................ 3 Como o Flex Mobile funciona? ............................................................................... 3 Instalao do Adobe Flash Builder 4.5 ................................................................... 4 Como esta obra est dividida ................................................................................. 5

Conhecendo o Flex Mobile .............................................................................................. 6 2.1.1 2.1.2 2.1.3 2.1.4 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 Perspective ......................................................................................................... 7 Workspace ......................................................................................................... 7 Editor.................................................................................................................. 7 Project ................................................................................................................ 8 Tipos de projetos no Flash Builder 4.5 ................................................................... 8 Criando o primeiro projeto Flex Mobile ............................................................... 10 Configurando e executando o projeto Mobile ..................................................... 13 Executando atravs de um outro dispositivo ....................................................... 14 Entendendo a arquitetura do Flex Mobile ........................................................... 16 Views .................................................................................................................... 17 Componentes recomendados .............................................................................. 18 Mais consideraes para o framework Mobile .................................................... 18

Design e workflow do componente View ...................................................................... 20 3.1 3.2 Criando uma nova view ........................................................................................ 21 Navegando entre views ........................................................................................ 23

3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 4

Parmetros do pushView e popView ................................................................... 28 Outros mtodos para navegao entre Views ..................................................... 28 Action Bar ............................................................................................................. 29 Escondendo a Action Bar...................................................................................... 31 Utilizando cones .................................................................................................. 32 Definindo menus para as views ............................................................................ 32 Criando uma aplicao mobile com TabBars (Sections) ....................................... 36 Configurando a disposio do dispositivo mobile (Retrato ou paisagem) ........... 38 Persistncia de dados na View ............................................................................. 39

Componentes do Flex Mobile Framework ..................................................................... 41 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 4.10 4.11 4.12 4.13 4.14 4.15 ActionBar .............................................................................................................. 41 BusyIndicator ........................................................................................................ 41 TabbedViewNavigatorApplication........................................................................ 42 ViewNavigatorApplication .................................................................................... 44 View ...................................................................................................................... 44 ViewMenu ............................................................................................................ 45 Button................................................................................................................... 45 CheckBox .............................................................................................................. 46 Group.................................................................................................................... 47 Image .................................................................................................................... 47 Label ..................................................................................................................... 49 List ........................................................................................................................ 49 RadioButton ......................................................................................................... 49 RadioButtonGroup ............................................................................................... 50 TextInput .............................................................................................................. 50

Trabalhando com listas .................................................................................................. 52 5.1 5.2 5.3 O evento change .................................................................................................. 52 Item Renderers no List ......................................................................................... 54 Conhecendo o IconItemRenderer ........................................................................ 55

Criando a aplicao FlexTasks ........................................................................................ 59 6.1 6.2 6.3 Criando o projeto ................................................................................................. 59 Incluindo cones.................................................................................................... 62 Persistncia de dados ........................................................................................... 63

Introduo

Em 2011 o framework Adobe Flex 4.5 trouxe para o desenvolvimento RIA a possibilidade de criar aplicaes para dispositivos mveis, que vamos chamar de Mobile, que so os celulares e tablets. Ao mesmo tempo, vimos uma bruta ascenso de tais dispositivos, cada vez mais baratos e populares. Mesmo que aqui no Brasil o processo de popularizao dos dispositivos mobile seja mais lento e caro, chegar um momento em que a venda destes produtos ir superar a venda dos NetBooks, gerando assim uma demanda muito grande de software para esta arquitetura. Falando em arquitetura, os dispositivos mobile so mais fracos em processamento e memria, e por isso necessitam de um tratamento diferenciado em relao s aplicaes desktop. Ou seja, temos que criar aplicaes mobile com o pensamento na performance, e no podemos criar uma aplicao que seja usada tanto no desktop quanto no mobile. Felizmente o framework Flex mobile trouxe um bom conjunto de idias e componentes que exploram a necessidade de obter a melhor performance possvel, na qual veremos ao longo desta obra.

1.1 O que o framework Flex?

Provavelmente voc j conhece o Adobe Flex, pelo menos no seu conceito mais simples: ele um framework para criar aplicaes web, desktop e mobile. Mas para que possamos explicar melhor todos os conceitos ligados ao Flex, vamos fazer uma pequena retrospectiva sobre o ciclo de vida do Adobe Flex. Podemos dizer que o Flex comeou a ser usado profissionalmente a partir de sua verso 2.0, lanado em junho de 2006. Perceba que o framework est caminhando para quase seis anos de vida, o que garante muita maturidade no framework como um todo. Nas suas verses iniciais, o Flex era usado para criar aplicaes que funcionariam em um navegador web, sem uso de HTML ou Javascript, usando o plugin do Flash Player para executar toda a aplicao. Ou seja, o plugin Flash Player que usado at hoje para criar aqueles banners de propaganda com efeitos legais, tambm estava sendo reaproveitando para criar sistemas web.

Quando dizemos um sistema web, afirmamos que o Flex usado para cri ar aplicaes, que envolvem menus, formulrios, datagrids etc, que manipulam dados e exibem informaes para o usurio. Com novas verses do framework, lanadas ao longo dos anos, chegamos na atual verso em maio de 2011 (Flex 4.5), e possivelmente em junho/julho de 2011 teremos a verso 4.5.1. Nestas atuais verses, o framework Flex usado para criar aplicaes para a web, para o desktop e para o mobile. Nosso foco nesta obra a criao de sistemas para o mobile.

1.2 O que MXML?

MXML uma linguagem de marcao de texto, baseada no XML, e de alguma forma semelhante ao HTML. Se voc j usou HTML, criando aqueles divs, tables etc., meio que na mo, ficar a vontade com MXML. Se voc nunca usou HTML (voc dev?), a IDE Flash Builder possui um modo chamado Design, no qual voc pode arrastar os componentes para a sua interface, montando ela como um todo (semelhante ao Delphi, ou Windows Forms .Net). Um exemplo bsico de cdigo MXML exibido a seguir:
<s:Label x="9" y="140" text="Resultado:" width="186"/>

Neste exemplo, criamos um Label que possui coordenadas x e y dentro de uma aplicao, uma largura (width) de 186 pixels e o texto Resultado. Assim como no HTML, podem-se adicionar componentes dentro de componentes e assim criar uma estrutura mais complexa, por exemplo:
<s:Group x="12" y="11" width="207" height="201"> <s:TextInput x="9" y="11" width="186" id="Operador1"/> <s:ComboBox x="9" y="39" openOnInput="true" width="186"/> <s:TextInput x="9" y="70" width="186" id="Operador2"/> <s:TextInput x="9" y="167" width="186" id="Resultado"/> <s:Label x="9" y="140" text="Resultado:" width="186"/> <s:Button x="9" y="97" label="Executar" width="186" /> </s:Group>

Neste cdigo, criamos um grupo de componentes, posicionando cada um no eixo x-y. Poderamos tambm criar componentes lado a lado, tanto horizontalmente quanto verticalmente.

O MXML existe porque muito mais fcil criar uma interface em uma linguagem declarativa (como o XML) do que imperativa (como o Action Script). Isso quer dizer que tudo que fazemos em MXML (ou quase tudo) pode ser feito com Action Script, mas desenhar interfaces algo extremamente frustrante. Para termos uma idia, o cdigo anterior de 8 linha vai para no mnimo 100 linhas em Action Script. Ok, estamos falando muito de Action Script, ele merece um novo tpico.

1.3 O que Action Script?

Action Script uma linguagem de programao, orientada a objetos, baseada no padro ECMAScript3, o que garante certa semelhana s linguagens derivadas do C, como o C#, PHP, Java e Java Script. A atual verso do Action Script a 3, com um bom suporte a orientao a objetos, e uma tima API, vinda do Flash Player ou da mquina virtual do Adobe Air. O que podemos j saber, e isso muito importante, que todo cdigo MXML relativo aos componentes torna-se cdigo Action Script 3. Isso , o <s:label /> que criamos no MXML, na verdade uma classe em ActionScript. O compilador faz esta converso no momento em que estamos compilando o projeto. Fazendo uma analogia ao desenvolvimento web tradicional, a dobradinha MXML+ActionScript pode ser comparada com o HTML+Java Script. Voc pode imaginar como seria difcil criar divs, tables e forms apenas com Java script e tambm como fcil trabalhar com o HTML, sabendo que um <h2> um ttulo e um <p> pargrafo. Uma diferena positiva em relao ao MXML que o que voc desenhar o que ser visto independente do navegador ou do sistema operacional. Todos conhecem a guerra entre os navegadores e cada um com a sua prpria engine de renderizao. No caso do Flex, como a engine a mesma, o Flash Player, voc ter o mesmo resultado independente se estiver usando Internet Explorer ou Firefox.

1.4 Como o Flex Mobile funciona?

H alguns anos a Adobe criou o AIR Adobe Integrated Runtime que uma mquina virtual usada para executar aplicativos. Funciona com muita similaridade ao JVM, a mquina virtual Java.

Isso significa que voc dever criar aplicaes para serem executadas no AIR e no mais no navegador Web ou nativamente no sistema operacional. Ou seja, quando voc programa para Adobe Air, voc no se preocupa a sua aplicao vai funcionar para Windows, Mac ou Linux. Este conceito idntico ao desenvolvimento mobile. Voc ir criar o seu programa para que possa funcionar em uma mquina virtual (AIR) que estar instalada no celular ou tablet do cliente. Desta forma, voc no necessita saber qual o tipo ou a verso do celular na qual est criando o sistema. Basta apenas saber se o dispositivo possui o Adobe Air instalado. Ou seja, j podemos perceber que uma aplicao mobile na verdade uma aplicao Adobe Air, s que com alguns detalhes a mais, no qual veremos ao longo desta obra. Para certificar que o seu dispositivo mobile est compatvel com o Adobe Air e com o Flex Mobile, acesse 1 este endereo .

1.5 Instalao do Adobe Flash Builder 4.5

O Flex composto por duas partes distintas: O SDK, que o kit de desenvolvimento de software, open source e gratuito, e a IDE, que a ferramenta de desenvolvimento (que inclusive j contm o SDK) e tem um custo, mas pode tambm ser adquirida gratuitamente para projetos no comerciais. Nesta obra estaremos utilizando a IDE Adobe Flash Builder 4.5, que instala tudo que precisamos deixando o Flex pronto para ser utilizado. Para realizar o download do Flash Builder 4.5 acesse este link e, ao lado direito do site, localize o item Flash Builder 4.5 Premium e clique em try. Na prxima tela, escolha a verso de acordo com o Sistema Operacional, e clique em Download Now. Faa o login ou crie uma conta no site da Adobe, para que o download inicie. Aps o download terminar, execute o arquivo de instalao e aguarde a tela inicial de instalao, que contm o contrato de licena. Clique em Aceitar. Na prxima tela, voc deve digitar o nmero de srie ou ento selecionar a verso de avaliao. Selecione a opo desejada, depois o idioma e ento clique em Avanar. Na prxima tela, surgem os
2

1 2

http://www.adobe.com/flashplatform/certified_devices/ http://www.adobe.com/products/flash-builder.html

produtos que sero instalados, bem como o local. Voc pode deixar tudo como padro e clicar em Instalar. Para garantir que os plugins do flash player em modo debug sejam instalados, feche todos os navegadores web abertos. Aguarde a concluso da instalao. O Flash Builder 4.5 no gratuito, ele pago, mas existem verses de avaliao por 60 dias, 3 e verses para estudantes e desempregados . Voc pode usar o Flash Builder 4.5 para aprender Flex, e decidir pela compra da IDE somente quando estiver confortvel quanto ao seu uso. O framework Flex SDK 4.5 open source, isto , pode-se compilar uma aplicao inteira em Flex, somente usando a linha de comando do Windows (antigo DOS) ou o console do Mac/Linux, escrevendo o cdigo diretamente em um editor de textos comum. Mas este no o foco desta obra, iremos usar constantemente o Flash Builder 4.5 para apresentar os benefcios do Framework Flex juntamente com a sua IDE.

1.6 Como esta obra est dividida

Podemos considerar que esta obra divide-se em duas partes bastante especficas. A primeira possui toda a teoria necessria para que possamos entender como o framework Flex Mobile funciona. Diferentemente dos livros anteriores, onde podamos criar um projeto e j comear a criar aplicaes, no mobile precisamos entender alguns conceitos antes de partir a aplicao. Isso no significa que vamos ver apenas teoria, veremos teoria com diversos exemplos. A segunda parte desta obra envolve a criao de uma aplicao destinada a realizao de pedidos de um restaurante, envolvendo todos os conceitos aprendidos.

https://freeriatools.adobe.com/

Conhecendo o Flex Mobile

Aps a instalao do Flash Builder 4.5, execute-o, e aps o seu carregamento, voc ver uma tela conforme a Figura 2.1. No centro, temos a aba Start Page, com diversos links para o aprendizado Flex, em ingls.

Figura 2.1- Tela inicial do Flash Builder 4.5

O termo workbench usado para ilustrar todos os recursos de visualizao do Flash Builder 4.5 relativos a suas configuraes e janelas. Como o Flash Builder 4.5 foi construdo utilizando a plataforma Eclipse, existem muitos conceitos que devem ser entendidos para que possamos extrair o mximo de produtividade da ferramenta.

2.1.1

Perspective

Todas as janelas internas do Flash Builder 4.5 podem ser alteradas de tamanho, bem como alteradas de posio. Podem estar ocultas ou no. Como existem muitas janelas, normalmente organizadas em abas, o Eclipse criou um conceito chamado Perspective, que a perspectiva das janelas de acordo com o contexto da aplicao. A perspectiva exibida no canto superior direito da aplicao, a inicialmente vem com o padro Flash. Vamos ento alterar a perspectiva, navegando at o menu Window > Open Perspective > Flash Debug. Veja que, ao selecionar esta perspectiva, a organizao das janelas muda completamente, incluindo novas abas e sumindo com outras. Para voltar a perspectiva Flash, voc poder usar o menu Window > Open Perspective ou ento usar os botes no canto superior direito do Flash Builder 4.5. Voc pode criar novas perspectivas e alter-las facilmente na barra de ferramentas de perspectivas. Voc pode clicar com o boto direito do mouse na barra de perspectiva e retirar o item Show Text, deixando somente o cone para ilustrar as perspectivas recentemente abertas. 2.1.2 Workspace

O conceito de workspace diferente de workbench. Um workspace caracterizado atravs de um arquivo de configurao que altera praticamente tudo dentro do Flash Builder 4.5. Apesar de pouco usado, este conceito pode ser til em determinadas situaes relacionadas a configurao do eclipse. Por exemplo, suponha que voc tenha dois clientes, e um deles um projeto Flex+PHP, com vrios projetos abertos no Flash Builder 4.5. Outro cliente j utiliza Flex+Java, contendo mais alguns projetos relacionados a Java. Ter todos estes projetos abertos em somente uma instncia do Flash Builder 4.5 trariam confuso na manipulao dos mesmos, alm de prejudicar a performance. Para isso, voc cria workspaces onde cada um deles ser destinado a um cliente, ou a algum tipo de projeto. Para alterar o Workspace, voc pode acessar o menu File > Switch Workspace. 2.1.3 Editor

Um editor responsvel em editar arquivos do seu projeto, mas com a particularidade de possuir recursos extras para cada tipo de arquivo. Por exemplo, o editor de arquivos MXML

possui o modo Source e o modo Design. J o editor de arquivos CSS apresenta outras particularidades distintas. O mesmo vale para arquivos PHP, Java, Action Script. 2.1.4 Project

Um projeto a reunio de vrios arquivos de diversos tipos e diversos editores, com o propsito de representar a sua aplicao, seja ela web, desktop ou mobile. Veja que uma aplicao pode conter um ou mais projetos, e que projetos podem ser compartilhados entre aplicaes. Por exemplo, voc pode criar um projeto que contm somente componentes personalizados, e pode criar vrios projetos que utilizam estes componentes.

2.2 Tipos de projetos no Flash Builder 4.5

Existem duas formas para criar um projeto Flex no Flash Builder 4.5. A primeira delas ir at o menu File e depois New. A segunda forma, mais usada, clicar com o boto direito do mouse na janela Package Explorer e escolher o menu New. Boto direito na janela Package Explorer mostra um menu que pode variar de acordo com o item selecionado. Quando voc selecionar um projeto, perceber que o menu ser alterado. Ao criar um novo projeto (Figura 2.2), temos a disposio sete tipos de projeto diferentes, veja: Flex Project: Cria um projeto Flex, que pode ser executado na Web ou no Desktop, e tambm pode conectar-se a diversos tipos de servidor, como ColdFusion, Java, PHP. Flex Library Project: Cria uma biblioteca de componentes para uso no Flex. Esta biblioteca pode, por exemplo, conter componentes que so compatveis com as verses Web, Desktop ou Mobile. Flex Mobile Project: Uma das grandes novidades desta verso, agora possvel criar projetos totalmente customizados para dispositivos mobile. Action Script Project: Pode-se criar um projeto totalmente em Action Script. Neste tipo de projeto, no so usados os arquivos MXML para o desenho da aplicao, e no h o recurso Design de formulrios. Este tipo de projeto mais usado para a criao de jogos utilizando a plataforma Flex.

Action Script Mobile Project: Possui o mesmo conceito do Action Script Project, mas otimizado para os dispositivos mobile. Flash Professional Project: Cria um projeto Flash, que diferente do Flex. Este tipo de projeto no ser abordado nesta obra. Flash Catalyst Compatible Project: Cria um projeto que compatvel com o Flash Catalyst.

Figura 2.2 - Criando um novo projeto Flex

Nesta obra estaremos utilizando quase todos os projetos envolvidos, principalmente quando formos criar a aplicao final.

2.3 Criando o primeiro projeto Flex Mobile

O projeto Mobile criado atravs do menu File >> New >> Flex Mobile Project. Surge ento o assistente, conforme a Figura 2.3, onde poderemos inserir um nome para o projeto, o local onde o projeto ser criado, e a verso do SDK do Flex que ser usada.

Figura 2.3 - Criando o projeto Mobile

Como nome de projeto, coloque HelloWorld, deixe o caminho padro do projeto e a verso padro do SDK. Clique em Next, para acessar a segunda tela do assistente - Figura 2.4, que uma novidade para os desenvolvedores Flex. Nesta tela, estaremos configurando qual a plataforma inicial da aplicao, neste caso o Google Android. Outras plataformas (iphone, ipad e outras) sero adicionadas na verso 4.5.1. Nota do autor: Talvez voc j tenha acesso a verso para iOs (iphone/ipad), mas isso no foi possvel enquanto escrevamos o livro. Nota do autor 2: Veja que, mesmo no podendo estabelecer a verso para iPhone neste momento, no significa que voc no poder criar uma aplicao para iPhone.

Aps escolher a plataforma Google Android, existem trs abas para a configurao do projeto mobile para a plataforma. A primeira aba, chamada de Application Type, define como a aplicao ser desenhada inicialmente. Existem trs formas distintas, que veremos com mais detalhes no decorrer da obra. Por enquanto, vamos deixar o item View-Based Application selecionado. No campo Initial view Title, vamos deixar o padro, HomeView.

Figura 2.4 - Editando as configuraes iniciais do projeto Flex Mobile

A segunda aba configura as permisses que a aplicao ter com o dispositivo mobile. No caso do Google Android, existem algumas permisses que podem ser selecionadas, tais como READ_PHONE_STATE, CAMERA, RECORD_AUDIO. Estas configuraes

sero abordadas com mais detalhes na segunda parte desta obra. A terceira aba, chamada de Plataform Settings, realiza algumas configuraes extras, mas isso depende de cada dispositivo. No Google Android, no h mais nada para ser configurado. Aps estas trs abas, existem mais algumas configuraes na caixa Application Settings. Dentre elas temos: Automatically reorient: Determina se a aplicao deve girar caso o dispositivo mobile gire. Full Screen: Determina se a aplicao ser executada no modo Full Screen tela cheia, onde a barra de status e de navegao no sero exibidas. Automatically scale ..... : Determina se a aplicao ter um tratamento especial para a diferena entre os diversos tamanhos de dispositivo mobile, possibilitando assim que seja criado componentes com diferentes resolues para cada tipo de dispositivo.

Destas trs opes, deixe somente a primeira marcada, relacionada a reorientao automtica. No preciso seguir para os prximos passos do assistente. Clique no boto Finish para que possamos ver a criao da aplicao no Package Explorer. Com o projeto criado, podemos ver no Package Explorer os arquivos iniciais da aplicao, conforme a Figura 2.5.

Figura 2.5 - Projeto HelloWorld

2.4 Configurando e executando o projeto Mobile

Aps a criao do projeto, podemos execut-lo. Nesta obra, estaremos apenas simulando a execuo da aplicao em um dispositivo pr configurado. Precisamos configurar um dispositivo para que o tamanho da aplicao e seus parmetros de configurao sejam devidamente informados. Execute a aplicao clicando no boto Run: . Como a primeira vez que a aplicao est sendo executada, e ainda no existe uma configurao estabelecida, surge a janela Run Configurations, conforme a Figura 2.6.

Figura 2.6 - Configurando um dispositivo para executar a aplicao

Em Launch Method, escolha o item On Desktop, e escolha um dispositivo para a simulao. Depois, clique em Apply e em Run. A aplicao mobile ser simulada de acordo com o dispositivo escolhido, de acordo com a Figura 2.7.

Figura 2.7 - Simulao da aplicao no dispositivo

2.5 Executando atravs de um outro dispositivo

Suponha agora que voc deseja executar a aplicao no Motorola Xoom. Para isso, v at o menu Run, e escolha o item Run Configurations. Voc ver, conforme a Figura 2.8, que existe a configurao HelloWorld, e o boto New Launch configuration. Clique neste boto e configure os seguintes parmetros. Em Name, coloque HelloWorldWithXoom. Em Project, escolha o projeto HelloWorld, utilizando o boto Browse. Escolha On desktop em Launch Method e depois escolha o dispositivo Motorola XOOM. Clique em Apply e depois em Run, e voc ver uma tela muito maior que a primeira configurao realizada.

Figura 2.8 - Adicionando uma nova configurao para executar o projeto mobile

Aps adicionar estas duas configuraes de execuo, voc pode execut-las conforme o menu Run, exibido na Figura 2.9.

Figura 2.9 - Execuo da aplicao depende do dispositivo

2.6 Entendendo a arquitetura do Flex Mobile

Neste captulo comearemos a abordar as principais diferenas entre uma aplicao flex mobile e uma aplicao flex web/desktop. O primeiro conceito que precisamos entender no mobile : menos mais. Isto , no desenvolvimento mobile, estamos sempre optando pela simplicidade tanto nas telas quanto na programao realizada, pois a arquitetura mobile exige isso. Por qu? A arquitetura mobile exige este comportamento porque a tela onde as informaes so exibidas muito menor do que uma tela exibida na web/desktop, e os recursos de hardware para o mobile so inferiores aos recursos de uma arquitetura web/desktop. Ou seja, temos uma tela menor para dispor informaes e um hardware mais lento. Felizmente a Adobe teve uma preocupao muito grande nestas limitaes, e restringiu o seu framework (entenda como uma limitao nos componentes disponveis) para que a aplicao funcionasse de forma satisfatria. Alm disso, criou um conceito simples para que possamos criar cada tela da aplicao Mobile de forma rpida e fcil. Este conceito discutido no prximo captulo.

2.7 Views
Se voc reparar na Figura 2.5, ver no projeto um package com o nome views, alm de um arquivo MXML com o nome HelloWorldHomeView.mxml. Na arquitetura Flex Mobile, a Adobe introduziu o conceito de Views, que pode ser considerada como uma tela que representa algum tipo de informao no dispositivo mobile. Nota do autor: A palavra view no ser traduzida para viso, no faz sentido... Cada view deve representar somente um tipo de informao, e uma aplicao mobile formada por diversas views. Na Figura 2.10 temos o exemplo de duas views diferentes. A primeira delas exibe uma lista de pessoas, e a segunda exibida quando escolhemos o item Lauren.

Figura 2.10 - Duas views diferentes

Resumindo, para criar uma aplicao mobile utilizando o framework Flex, voc precisa criar views e prover a comunicao entre elas. Este conceito um pouco diferente do desenvolvimento web/desktop, onde voc tinha uma tela vazia e precisava criar, do zero, as telas do sistema.

2.8 Componentes recomendados

Nem todos os componentes do framework Flex podem ser usados no mobile. Isso deve-se a restrio ligada a performance e s Skins de cada tipo de componente. Quando estamos no ambiente mobile, o Flex sabe aplica skins diferentes aos componentes que o mobile suporta (isso acontece atravs do tema mobile.swc). Os componentes MX, do Flex 3, tambm no podem ser usados, com exceo dos componentes grficos e do mx:spacer (mas no recomendamos, j que existe o s:spacer). A seguir, exibimos uma lista de componentes que podem ser utilizados na aplicao mobile: Spark ActionBar Spark BusyIndicator Spark TabbedViewNavigator Application Spark TabbedViewNavigator Spark View Spark ViewMenu Spark ViewNavigator Spark ViewNavigatorApplication Spark Button Spark CheckBox Spark DataGroup Spark Group Spark HGroup / VGroup Spark TileGroup Spark Image / BitmapImage Spark Label Spark List Spark RadioButton Spark RadioButtonGroup Spark SkinnableContainer Spark Scroller Spark TextArea Spark TextInput

Para todos os outros componentes, o seu uso problemtico. Para grficos MX, o seu uso pode gerar problemas de performance, o que pode ser resolvido em verses futuras.

2.9 Mais consideraes para o framework Mobile

Alm da restrio dos componentes, existem algumas consideraes que devemos estar atentos, para que possamos criar aplicaes com performance. Item Renderers Se possvel escreva Item Renderers em Action Script. Todo o cdigo MXML traduzido para Action Script, e se voc escrever um item renderer em action script nativamente, ganhar

performance. Voc ver mais sobre item renderers no Captulo 5.2. Alm disso, existem dois item renderers que so otimizados para o mobile. So eles: LabelItemRenderer IconItemRenderer

Sempre que possvel, use estes item renderers. Skins O conceito de Skin, vindo do Flex 4, tambm est presente no Flex Mobile. Por exemplo, o Spark Button no framework Mobile o mesmo Spark Button do desktop (funcionalidades), mas a sua Skin diferente porque quando criamos um projeto Mobile, estamos aplicando o tema mobile.swc no projeto. Se voc for criar um novo tema com novos Skins, a recomendao da Adobe criar a Skin nativamente com Action Script, e usar somente grficos FXG (vetorial), ao invs de bitmap. Uso do TLF O TLF Text Layout Framework - uma renderizao especial para o texto, possibilitando suporte a idiomas (chins, por exemplo), textos na vertical, entre outros. A Adobe recomenda que utilize os componentes Spark Label, Spark TextInput e Spark TextArea para evitar o uso do TLF e conseqentemente ter problemas de performance.

Design e workflow do componente View

Neste captulo veremos como criar uma aplicao mobile usando o conceito aprendido no captulo 2.7, que a View. Uma view um componente do framework Flex, assim como um Panel ou um TitleWindow, e representa a tela do dispositivo mobile, composta basicamente de uma rea destinada ao cabealho da aplicao, uma rea destinada ao contedo e outra destinada ao rodap. As reas: cabealho, contedo e rodap possuem seus respectivos nomes em ingls, e no traduziremos estes nomes para no dificultar o aprendizado. Basicamente, uma view tem uma ActionBar (Cabealho), um Content Area (Contedo) e um TabBar (Rodap).

Figura 3.1 - Esquema bsico de uma view

Na Figura 3.1, temos um exemplo de view com as trs reas distintas. Para que possamos entender melhor o conceito de view, vamos retornar ao projeto HelloWorld e abrir os

dois arquivos MXML que HelloWorldHomeView.mxml. /HelloWorld/src/HelloWorld.mxml

foram

criados:

HelloWorld.mxml

<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.HelloWorldHomeView"> </s:ViewNavigatorApplication>

/HelloWorld/src/views/HelloWorldHomeView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"> </s:View>

Apesar dos dois arquivos mxml no conterem nenhum contedo, j podemos observar algumas particularidades na estrutura da aplicao. A primeira delas que o arquivo principal do projeto, o HelloWorld.mxml, possui o componente ViewNavigatorApplication. Ou seja, ele no um Spark Application (Web) ou um WindowedApplication (Air - Desktop). Alm disso, o ViewNavigatorApplication possui a propriedade firstView, que indica a primeira view a ser carregada. A primeira view, que o arquivo HelloWorldHomeView.mxml, tambm no contm muita informao, apenas a propriedade title que determina o ttulo da ActionBar (Cabealho) daquela view.

3.1 Criando uma nova view

Criar uma nova view significa criar um novo componente MXML, que herda do componente Spark View. Clique com o boto direito do mouse no package views, e selecione New > MXML Component. Crie o componente de acordo com a Figura 3.2, onde colocamos o

nome HelloWorldAgain e criamos o componente baseado no componente spark.components.View.

Figura 3.2 - Criando uma nova View

Aps criar a nova View, voc ter dois arquivos MXML no package views. Vamos aproveitar e criar mais uma View, com o nome de HelloWorldDolly, resultando no projeto conforme a Figura 2.1.

Figura 3.3 - Projeto mobile com 3 views

3.2 Navegando entre views

At o momento temos uma aplicao com trs views, e a view HelloWorldHomeView aprimeira a ser carregada. Como fao ento para carregar outras views? O Framework Flex disponibiliza um sistema baseado em empilhamento de views. Um empilhamento de views significa que, quando voc navegar para a prxima view, voc estar na verdade colocando uma view sobre a outra, como se fosse aquele velho exemplo dos pratos (pilhas, stacks, lembra??) que aprendemos na faculdade. Neste momento, voc deve lembrar daqueles comandos push e pop de um array, o conceito o mesmo aqui. Para exemplificar, vamos criar um boto que ir carregar a tela HelloWorldAgain. Para fazer isso, utilize o seguinte cdigo: /HelloWorld/src/views/HelloWorldHomeView.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"> <s:layout> <s:VerticalLayout paddingTop="10"

paddingLeft="10" paddingRight="10"/> </s:layout> <s:Button label="Ir para outra view" width="100%"> <s:click> <![CDATA[ this.navigator.pushView(views.HelloWorldAgain); ]]> </s:click> </s:Button> </s:View>

Em , definimos que o contedo da view ter o layout vertical, e definimos alguns paddings para que a view fique melhor enquadrada na aplicao. Em criamos um boto, e definimos atravs do evento click () uma ao. Esta ao, em , usa a propriedade navigator da view para que possamos executar o mtodo pushView, repassando como parmetro qual a view que ser carregada. Diferente das aplicaes web/desktop, aqui no usamos (para acessar novas views) os mtodos addChild ou addComponent dos containers do framework. O resultado do cdigo acima representado pelas imagens a seguir:

Quando o usurio clica no boto Ir para outra view, feita uma transio da view arual para a view HelloWorldAgain. O efeito de transio e a troca de contedo feita automaticamente pelo framework. O que temos agora na aplicao que a view HelloWorldAgain est por cima da view HelloWorldHomeView, veja:

HelloWorld.mxml

HelloWorldAgain.mxml pushView() HelloWorldHomeView.mxml

Vamos novamente usar o pushView para adicionar mais uma view, s que agora na view HelloWorldAgain, veja: /HelloWorld/src/views/HelloWorldAgain.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HelloWorldAgain"> <s:layout> <s:VerticalLayout paddingTop="10" paddingLeft="10"

paddingRight="10"/> </s:layout> <fx:Script> <![CDATA[ protected function OnbtnClick(event:MouseEvent):void { this.navigator.pushView(views.HelloWorldDolly); } ]]> </fx:Script> <s:Button label="Hello Dolly !!" width="100%" height="200" click="OnbtnClick(event)" > </s:Button> </s:View>

Agora temos a seguinte situao:

HelloWorld.mxml

HelloWorldDolly.mxml pushView() HelloWorldAgain.mxml

HelloWorldHomeView.mxml

Temos trs views, uma sobre a outra, sendo que a view que est sendo exibida para o usurio a HelloWorldDolly. Nesta view, vamos criar o boto voltar. Este boto ir

voltar para a view anterior, e no carregar uma nova view. Ou seja, iremos retirar a view que est sendo visualizada para recarregar a view anterior. Para isso, usamos o mtodo popView(), veja: /HelloWorld/src/views/HelloWorldDolly.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HelloWorldDolly"> <s:layout> <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/> </s:layout> <s:Label text="Hello Dolly!!"/> <s:Button label="Voltar"> <s:click> <![CDATA[ this.navigator.popView(); ]]> </s:click> </s:Button> </s:View>

Alm das configuraes normais da view, temos em , o mtodo popView(), que ir retirar a view corrente e recarregar a view anterior, realizando o efeito inverso da animao (da direita para a esquerda). Atravs destes dois mtodos, pushView e popView, voc consegue adicionar/retirar telas (views) da sua aplicao, realizando a interao com o usurio. Veja que, mesmo comentando que uma view fica por cima da outra, simulando uma pilha de views, isso no ocorre realmente. Por uma simples questo de performance, somente uma tela carregada na memria por vez, mesmo que a impresso seja que existam telas uma por cima das outras. Este conceito importante, pois voc pode se confundir com o componente ViewStack do Flex, no qual tnhamos vrios componentes sendo que somente um era visualizado, mas todos eles estavam na memria.

3.3 Parmetros do pushView e popView

Vamos abordar agora, com mais cuidado, o mtodo pushView. Se voc reparou, ele possui quatro parmetros, no qual sero discutidos a seguir: class : a classe que ser carregada. data : um objeto que pode ser repassado para a view a ser carregada. Este objeto estar disponvel na view atravs da propriedade data. context : um objeto que determina o contexto que repassado para a propriedade navigator da view. A diferena em relao ao parmetro data que o contexto repassado para o navigator da view, e data passada diretamente para a view. O context pode ser acessado por todas as views. transition : Determina o efeito em que ser realizado para carregar a prxima view.

J o popView possui apenas um parmetro, que a transio (efeito) para voltar a view anterior, que quando omitida realiza uma transio padro. Como o framework Mobile integra-se ao dispositivo, quando o usurio executar o comando voltar do mobile ser executado o comando popView.

3.4 Outros mtodos para navegao entre Views

Alm do pushView e do popView, temos mais alguns mtodos relacionados a navegao entre as views, conforme os itens a seguir: popToFistView: remove todas as views da pilha de views, e exibe a primeira view que foi carregada, geralmente definida pela propriedade firstView do ViewNavigatorApplication popAll: remove todas as views, e deixa a tela em branco. replaceView: Faz uma troca da view atual por outra view, ou seja, a nova view no adicionada por cima da outra, mas sim trocada.

3.5 Action Bar

Voc j deve ter notado que, no desenvolvimento mobile, a view um dos componentes mais importantes, j que representa cada tela da aplicao. Na Figura 3.1, vimos tambm que uma view possui um cabealho, que chamamos de Action Bar. O componente ActionBar, que est automaticamente embutido na View, um controle que possui trs reas distintas para configurao, que so: Title area: Uma rea central para adicionar um ttulo a view. definido automaticamente pela propriedade title da view. Navigation area: rea esquerda do title, destinado a inserir botes ou links de navegao. configurado atravs da propriedade <s:navigationContent> Action area: rea direta do title, destinado a inserir botes de ao. configurado atravs da propriedade <s:actionContent>

A adobe recomenda que voc utilize botes na navigation area e action area e use a propriedade title para configurar o ttulo da title area, mas isso no significa que voc possa atribuir outros controles a estas reas. Por exemplo, voc pode usar a propriedade titleContent para determinar o contedo da rea onde o ttulo ficava, podendo, por exemplo, realizar a seguinte configurao:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Details"> <s:actionContent> <s:Button label="Search"> <s:click> <![CDATA[ navigator.pushView(views.HelloWorldAgain); ]]> </s:click> </s:Button>

</s:actionContent> <s:titleContent> <s:TextInput width="100%" prompt="Busca"/> </s:titleContent> </s:View>

O que resulta no seguinte resultado:

Caso haja a necessidade de definir uma rea padro para todas as views, podemos realizar a mesma configurao, s que no mxml principal da aplicao, onde encontramos o componente ViewNavigatorApplication, veja: /HelloWorld/src/HelloWorld.mxml
<?xml version="1.0" encoding="utf-8"?> <s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.ViewWithActionBar"> <s:navigationContent> <s:Button id="btnBack" label="Back"> <s:click> <![CDATA[ this.navigator.popView(); ]]> </s:click> </s:Button> </s:navigationContent> </s:ViewNavigatorApplication>

Neste exemplo, criamos o boto Back para executar a ao de popView. Este boto est definido no navigation content, e estar presente em todas as views da aplicao que no definirem um navigation content. Ou seja, o boto somente aparecer nas views que no implementarem a sua navigation area. Cuidado para no confundir <s:NavigatorContent> com <s:navigationContent> No somente o navigation content pode ser globalizado, mas o title content e o action content tambm.

3.6 Escondendo a Action Bar

Se voc deseja esconder a ActionBar da sua view, pode usar a propriedade actionBarVisible, conforme o exemplo a seguir.
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Details"> <s:actionContent> <s:Button label="close..."> <s:click> <![CDATA[ this.actionBarVisible = false; ]]> </s:click> </s:Button> </s:actionContent> <s:titleContent> <s:TextInput width="100%" prompt="Busca"/> <s:Spacer width="10"/> <s:Button label="Search"> <s:click> <![CDATA[ navigator.pushView(views.HelloWorldAgain); ]]> </s:click> </s:Button> </s:titleContent> <s:navigationContent> </s:navigationContent>

</s:View>

3.7 Utilizando cones

Na verso 4.5 do framework Flex, os botes passam a aceitar cones, atravs da propriedade icon. Use o @Embed para adicionar o cone diretamente no arquivo compilado, veja:
<s:navigationContent> <s:Button id="btnBack" label="Back" icon="@Embed('assets/icons/back.png')"> <s:click> <![CDATA[ this.navigator.popView(); ]]> </s:click> </s:Button> </s:navigationContent>

3.8 Definindo menus para as views

Para cada view criada, podemos definir um menu que ser exibido na parte inferior do dispositivo (podem haver alteraes de acordo com o dispositivo). Este menu surge quando usurio aciona o menu do dispositivo em questo, ou quando criamos um boto para fazer executar esta tarefa. Um menu no contm submenus, e no possvel criar tipos diferentes de componentes alm do componente ViewMenuItem. Os menus tambm no podem ser inseridos globalmente na aplicao, pelo menos de uma forma fcil. Para adicionar um menu na view, use a propriedade <s:viewMenuItems> e adicione <s:ViewMenuItem>, conforme o exemplo a seguir:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Details"> <s:viewMenuItems>

<s:ViewMenuItem label="Novo"/> <s:ViewMenuItem label="Copiar"/> <s:ViewMenuItem label="Colar"/> </s:viewMenuItems> </s:View>

Para testar o menu, execute a aplicao e, como estamos simulando o dispositivo, acesse o menu Device e clique em Menu, conforme a Figura 3.4.

Figura 3.4- Acessando o menu da aplicao Pode-se adicionar cones atravs da propriedade icon e capturar o evento click, para realizar a ao desejada ao selecionar o item de menu, veja:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Details">

<s:actionContent> <s:Button label="Search"> <s:click> <![CDATA[ navigator.pushView(views.HelloWorldAgain); ]]> </s:click> </s:Button> </s:actionContent> <s:titleContent> <s:TextInput id="txtBusca" width="100%" prompt="Busca"/> </s:titleContent> <s:navigationContent> </s:navigationContent> <s:viewMenuItems> <s:ViewMenuItem label="Realizar Busca" icon="@Embed('assets/icons/ic_menu_search.png')"> <s:click> <![CDATA[ navigator.pushView(views.HelloWorldAgain); ]]> </s:click> </s:ViewMenuItem> <s:ViewMenuItem label="Limpar tudo" icon="@Embed('assets/icons/ic_menu_delete.png')"> <s:click> <![CDATA[ this.txtBusca.text = ""; ]]> </s:click> </s:ViewMenuItem> <s:ViewMenuItem label="Novo"/> <s:ViewMenuItem label="Copiar"/> <s:ViewMenuItem label="Colar"/> </s:viewMenuItems> </s:View>

A configurao deste menu apresenta o resultado de acordo com a Figura 3.5.

Figura 3.5 - Menu com cones e aes

Caso seja necessrio abrir o menu sem usar o boto menu nativo do dispositivo mobile, voc pode usar o seguinte comando:
mx.core.FlexGlobals.topLevelApplication.viewMenuOpen=true

3.9 Criando uma aplicao mobile com TabBars (Sections)

Quando criamos o projeto HelloWorld, na Figura 2.4, tnhamos trs tipos de projeto mobile para escolher: Blank View-Baseade Application Tabbed Application

Nos projetos anteriores, utilizamos a aplicao baseada em Views, onde existia somente uma nica pilha de views. Agora vamos criar uma Tabbed Application, que consiste em criar uma TabBar na parte inferior da aplicao e dividir a pilha de views em sees (sections). Crie uma nova aplicao, chamada de HeloWorld2, e escolha o template Tabbed Application. Voc ver, conforme a Figura 3.6, que pode-se adicionar abas a aplicao, e no neste caso criamos trs abas: Home, Config, Favorites.

Figura 3.6 - Criando uma aplicao Tabbed

Clique no boto Finish e poderemos perceber uma estrutura diferente do nosso primeiro projeto, o HelloWorld. No arquivo HelloWorld2.mxml, temos agora a utilizao do componente TabbedViewNavigatorApplication, e temos tambm a criao de trs ViewNavigators distintos, representando as abas (tabs) que criamos no assistente. Para cada aba, temos uma view diferente, na qual poderemos adicionar mais views. Atravs das tabs, temos a seguinte situao: HelloWorld2.mxml

View 1.1 View 3.2 View 1.1 View 1 Tab1 Home View 2 Tab2 Config View 3.1 View 3 Tab3 Favorites

Quando alteramos entre as sees (tabs), o framework Flex preserva o estado na seo anterior e carrega a view que da aba selecionada. Ou seja, a alterao entre uma aba e outra ocorre de forma independente. Qualquer view pode ser adicionada a qualquer seo, sem restries. E claro, em tempo de execuo, somente uma view de carregada por vez.

3.10 Configurando a disposio do dispositivo mobile (Retrato ou paisagem)

Os dispositivos mobile possuem duas orientaes que so chamadas de portrait e landscape. O framework Flex tambm possui uma forma de poder gerenciar a disposio, baseada no conceito de states, que o mesmo conceito do desenvolvimento web/desktop. Para que voc possa utilizar este recurso, basta criar os states com estes nomes e definir como ser o layout da aplicao. Isso ser feito no exemplo HelloWorld3, conforme o cdigo a seguir:
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"> <s:states> <s:State name="landscape"/> <s:State name="portrait"/> </s:states> <s:layout> <s:BasicLayout/> </s:layout> <s:Button label="Button" x.landscape="10" y.landscape="10" x.portrait="15" y.portrait="11"/> <s:Button label="Button" x.landscape="10" y.landscape="83" x.portrait="363" y.portrait="11"/> <s:Button label="Button" x.landscape="10" y.landscape="156" x.portrait="247" y.portrait="11"/> <s:Button label="Button" x.landscape="10" y.landscape="229" x.portrait="131" y.portrait="11"/> <s:Image width="402" height="284" source="android.gif" x.landscape="126" y.landscape="10" x.portrait="39" y.portrait="94"/> </s:View>

Que resulta na seguinte disposio:

3.11 Persistncia de dados na View

Toda aplicao, seja ela web/desktop ou mobile, trabalha necessariamente com dados. O Framework Flex mobile possui diversos recursos para ajudar o desenvolvedor a manipular estes dados. Inicialmente, temos no componente View, uma propriedade chamada data, que um objeto que armazena informaes sobre o que est sendo exibida naquela View. Voc deve usar a propriedade data em todas as suas views, pois o framework cuida da persistncia desta propriedade automaticamente para voc. Porqu? Por que uma aplicao mobile tem constantes interrupes, tais como uma chamada (o que interrompe a execuo da aplicao), a um evento do calendrio ou simplesmente a sada do usurio para acessar outra aplicao. Quando isso acontece, o framework cuida para manter essa persistncia de dados na varivel data, sem a necessidade de programao extra.

O framework Flex possui duas formas de persistncia de dados. A primeira delas chamada de in memory e limita-se a guardar a propriedade data de uma view enquanto a aplicao estiver funcionando, e o usurio estiver navegando entre views. A segunda forma de persistncia chamada de in session, e destina-se a armazenar diversos estados da aplicao, como, por exemplo, a view aberta, juntamente com a propriedade data, alm da aba carregada em uma aplicao Tabbed. Para habilitar este recurso, deve-se habilitar a propriedade persistNavigatorState de uma TabbedViewNavigatorApplication e/ou ViewNavigatorApplication. Se a propriedade persistNavigatorState estiver false,nenhuma persistncia ser realizada, e voc poder utilizar o meio tradicional para isso, que utilizando a classe PersistenceManager. No captulo 3.3, vemos que um dos parmetros do mtodo pushView justamente o data, que ser inserido na propriedade data da prxima view a ser carregada. Esta a melhor forma de se repassar um objeto para outra view, e ser amplamente utilizada em nossos exemplos.

Componentes do Flex Mobile Framework

A seguir veremos uma lista de todos os componentes que podem ser utilizados no desenvolvimento Mobile. Veja que todos os componentes MX no so recomendados para o uso em dispositivos mobile, com exceo dos charts (grficos). Dica: Nos componentes a seguir, mostramos no lado direito, logo abaixo do ttulo, o caminho completo de cada componente. Se voc quer saber mais sobre o componente em questo, experimente copiar/colar este caminho no Google.

4.1 ActionBar
spark.components.ActionBar

O ActionBar um componente composto de trs reas distintas: botes de navegao, uma barra de ttulos e botes de ao. Este componente inserido automaticamente em uma view, e voc pode adicionar itens a ele atravs das propriedades navigationContent e actionContent. O ttulo pode ser alterado atravs da propriedade title da View.

4.2 BusyIndicator
spark.components.BusyIndicator

Este componente usado para indicar alguma operao mais demorada no dispositivo mobile. Ele substitui o relgio do ponteiro do mouse para as aplicaes web/desktop, mas deve ser implementado manualmente. O componente est sempre em movimento, e para exibi-lo na tela, voc deve usar a sua propriedade visible, conforme o exemplo a seguir. Pode-se tambm utilizar a propriedade symbolColor para alterar a cor do indicador e a propriedade rotationalInterval para alterar a velocidade do indicador.
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" title="HelloWorldBusyIndicator"> <s:layout> <s:VerticalLayout gap="10" paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10" /> </s:layout> <s:actionContent> <s:BusyIndicator id="bi" visible="false" symbolColor="yellow"/> </s:actionContent> <s:Button label="Show Busy Indicator" width="100%"> <s:click> <![CDATA[ this.bi.visible = true; ]]> </s:click> </s:Button> <s:Button label="Hide Busy Indicator" width="100%"> <s:click> <![CDATA[ this.bi.visible = false; ]]> </s:click> </s:Button> </s:View>

4.3 TabbedViewNavigatorApplication
spark.components.TabbedViewNavigatorApplication

Quando escolhemos criar uma aplicao Tabbed, no assistente de criao do Flash Builder 4.5, a aplicao principal criada justamente este componente. Um TabbedView cria uma aplicao mobile dividida em sees, ou abas, que ficam localizadas na parte inferior do dispositivo, conforme o exemplo a seguir:
<?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" > <s:ViewNavigator label="Home" width="100%" height="100%" firstView="views.HomeView" icon="@Embed('icons/ic_menu_phone.png')"/> <s:ViewNavigator label="Config" width="100%" height="100%" firstView="views.ConfigView" icon="@Embed('icons/ic_menu_wizard.png')"/> <s:ViewNavigator label="Favorites" width="100%" height="100%" firstView="views.FavoritesView" icon="@Embed('icons/ic_menu_flash.png')"/> </s:TabbedViewNavigatorApplication>

O resultado semelhante a Figura 4.1.

Figura 4.1 - Tabbed Aplication

4.4 ViewNavigatorApplication
spark.components.ViewNavigatorApplication

O ViewNavigatorApplication tambm usado para criar uma aplicao mobile, mas sem sees (abas). Somente uma seo criada, na qual podem ser adicionadas diversas views.

4.5 View
spark.components.view

O componente View um dos principais componentes do framework mobile. Foi amplamente discutido no captulo 3. Resumindo, cada tela na aplicao que representa uma informao uma view.

4.6 ViewMenu
spark.components.ViewMenu

O ViewMenu um componente embutido na view usado para criar um menu na aplicao, que chamado atravs do boto menu do dispositivo mobile. Mais informaes no captulo 3.8.

4.7 Button
spark.components.Button

Representa um boto que pode ser clicado. Veja que tanto na web/desktop como no mobile, o componente o mesmo, mas a sua renderizao diferente. Graas ao conceito de Skins, implementado a partir do Flex 4, o desenho do boto no Mobile diferente do web/desktop, devido ao tema mobile.swc. Como propriedades principais, citamos o label, que determina o texto que aparecer no componente e tambm o evento click, disparado quando o usurio clica no boto. Existem algumas formas de relacionar uma ao ao evento click, veja:
<s:Button id="btn1" label="Button" click="{mx.controls.Alert.show('Hello Wolrd')}"/> OU <fx:Script> <![CDATA[ import mx.controls.Alert; protected function OnButtonClick (event:MouseEvent):void { mx.controls.Alert.show(Hello World); } ]]> </fx:Script> <s:Button id="btn2" label="Button" click="OnButtonClick (event)"/> Ou <s:Button id="btn3" label="Button"> <s:click> <![CDATA[ mx.controls.Alert.show('Hello World');

]]> </s:click> </s:Button>

Em , temos a forma mais simples e usada para pequenas operaes, como chamar um outro mtodo ou ento exibir uma mensagem de alerta. Veja que usamos a propriedade click= seguida do uso de chaves ( { ... } ), para delimitar um cdigo ActionScript. Sempre que quisermos chamar algum cdigo, executar algo ou referenciar alguma varivel dentro de uma propriedade, devemos usar as chaves para delimitar o cdigo MXML do cdigo ActionScript. A segunda forma () referencia diretamente o evento click a um mtodo, nesta caso chamado de OnButtonClick. O mtodo () deve ser definido entre a tag fx:Script, e geralmente possui parmetros relacionados ao evento. Esta segunda forma muito empregada quando estamos trabalhando em um projeto maior, no qual separamos totalmente o cdigo ActionScript do cdigo mxml. Em temos outra forma de executar cdigo ActionScript, mas este cdigo definido no interior da tag s:Button. Desta forma, podemos escrever vrias linhas de cdigo (o que impossvel em ) sem ter que criar um mtodo separado como foi feito em . Uma novidade na verso 4.5 a adio da propriedade icon, que adiciona um cone ao boto, conforme o exemplo a seguir:
<s:Button id="button" label="myButton" icon="@Embed('about.png')"/>

4.8 CheckBox
spark.components.checkBox

O Checkbox um componente usado para definir algum valor lgico, verdadeiro ou falso. Consiste de uma caixa seguida de um Label que pode estar marcada ou no. A sua propriedade principal selected, estando true se estiver marcada ou false se no estiver marcada.

4.9 Group
spark.components.group

O Group um componente usado para agrupar componentes visuais. O Group pode ser configurado para organizar os seus componentes em quatro disposies: vertical, horizontal, livre ou lado a lado. Esta configurao realizada atravs do parmetro s:layout, onde podemos fornecer os seguintes valores: BasicLayout: Semelhante ao Canvas no Flex 3 HorizontalLayout: Semelhante ao HBox no Flex 3 VerticalLayout: Semelhante ao VBox no Flex 3 TileLayout: Semelhante ao Tile no Flex 3

Alm do Group, temos tambm o HGroup e o VGroup. A diferena entre eles que se usarmos o Group, pode-se alterar a disposio (de vertical para horizontal, por exemplo) em tempo de execuo, enquanto que se usarmos o componente HGroup no poderemos fazer isso. Isso no significa que um melhor que o outro, apenas que podem ser usados normalmente dependo da sua necessidade. O componente Group foi criado para substituir os componentes VBox, HBox, Canvas e Tile do Flex 3. Ele possui mais performance e obedece s regras dos componentes Spark, como por exemplo a separao entre lgica e layout. Relembrando, mesmo o componente Group sendo Spark, pode-se adicionar componente mx nele. Vamos a um simples exemplo:
<s:Group> <s:layout> <s:VerticalLayout paddingTop="10"/> </s:layout> <s:Button label="Hello"/> <s:Button label="World"/> <mx:ProgressBar/> </s:Group>

4.10 Image
Usado para carregar imagens na sua aplicao, que podem ser JPEG, PNG, GIF e at SWF. A principal propriedade deste componente source, que indica o caminho completo da imagem a ser carregada. As imagens podem ser carregadas de duas formas distintas:

Elas podem ser incorporadas aplicao, carregando automaticamente, mas aumentando o tamanho do arquivo SWF da aplicao. Use este mtodo para imagens pequenas do sistema, como cones e bordas. Lembre-se que quanto mais imagens adicionar, maior sua aplicao final ficar, comprometendo o seu carregamento inicial. Para que uma imagem seja incorporada aplicao, use @Embed(source=nome do arquivo) na propriedade source. Elas podem ser carregadas em runtime, ou seja, assim que so requisitadas. Por exemplo, existe um Panel que tem um foto. Este Panel aberto na aplicao somente se clicar em um boto. At o momento a imagem no est carregada. Assim que o boto for clicado, o Panel carregado e o componente mx:image construdo. Automaticamente, o componente Image faz uma requisio (via http) da imagem, exibindo-a assim que o download da imagem for completado. Todo este processo automtico, e pode demorar um pouco dependendo da velocidade de conexo e do tamanho da imagem, o que pode no ser agradvel para o usurio.

preciso compreender que a escolha de uma destas duas formas de carregamento pode afetar o sistema, ento preciso escolher com cuidado qual caminho tomar. Uma dica deixar imagens pequenas incorporadas ( lembre-se, source=@Embed(icone.png)), alm da imagem de fundo (somente uma, com no mximo 50K). Outras imagens, como fotos, devem ser carregadas somente quando requisitadas. Outra dica incorporar imagens somente que so reutilizadas. Por exemplo, um cone que ser exibido somente em um Panel que quase nunca acessado, mesmo que contenha 5KB, no deve estar incorporado. Imagine 10 panels desta forma, voc j economizou 50K no tamanho inicial do arquivo SWF. Uma novidade da verso 4.5 que o Spark Image contm agora uma barra de progressos para mostrar o carregamento da imagem e tambm uma imagem indicando se o link est quebrado.

4.11 Label
spark.components.label

O label o componente usado para exibir texto na tela. A propriedade text usada para definir qual texto ser exibido. O texto no pode conter caracteres HTML, e para que possa ser formatado voc pode usar propriedades como fontFamily e fontSize, entre outros. O componente Label spark usa FTE Flash Text Engine, o que no acontecia no componente Label do Flex 3 (mx), que usava a classe TextField. Isso garante um melhor suporte a idiomas, alm de possibilitar que o label possa ter mltiplas linhas. O Label spark no pode ser selecionado e no possui formatao (como o uso de <b> para negrito, por exemplo). Exemplo:
<s:Label id=myLabel text=Hello World/>

4.12 List
spark.components.list

O componente List exibe uma lista de itens, que podem ser selecionados. semelhante ao controle Select do HTML. Dentre suas principais propriedades, temos o dataProvider, labelField, allowMultipleSelection que permite que mais de um item seja selecionado e selectedItens que retorna um vetor de objetos selecionados. O list um componente importante no mobile, sendo utilizado em quase todas as views para exibir informaes.

4.13 RadioButton
spark.components.RadioButton

O componente RadioButton usado para que possamos escolher uma opo entre vrias. o mesmo comportamento do controle Radio do HTML. As duas principais propriedades deste componente so label, que exibe o texto do RadioButton, e groupName, que identifica o grupo onde o RadioButton est inserido. Esta propriedade importante porque somente uma opo entre os RadioButtons deve ser escolhida. Outras propriedades do RadioButton so: selected, que indica se o Radio est selecionado e value, que indica um valor que ser exibido atravs do componente RadioButtonGroup, visto na prxima seo.

4.14 RadioButtonGroup
spark.components.RadioButtonGroup

O RadioButtonGroup no um componente visual, e foi criado especialmente para trabalhar em conjunto com o RadioButton. A sua finalidade bsica descobrir quais dos RadioButtons est selecionado. Como no um componente visual, este componente deve ser inserido na tag fx:Declarations. Vamos a um exemplo:
<fx:Declarations> <s:RadioButtonGroup id="formaPagamento" /> </fx:Declarations> <s:RadioButton id="boleto" label="Boleto" groupName="formaPagamento" selected="true"/> <s:RadioButton id="cartao" label="Carto de Crdito" groupName="formaPagamento"/> <s:RadioButton id="deposito" label="Depsito" groupName="formaPagamento"/> <s:Button label="Descobrir opo escolhida"> <s:click> <![CDATA[ mx.controls.Alert.show(formaPagamento.selectedValue.toString() ); ]]> </s:click> </s:Button>

Neste exemplo, criamos trs RadioButtons, e a propriedade groupName destes componentes apontam para outro componente, o RadioButtonGroup, cujo id formaPagamento. Depois de criar estes quatro componentes (3 RadioButtons + 1 RadioButtonGroup), basta utilizar a propriedade selectedValue do componente RadioButtonGroup para descobrir quais dos RadioButtons est selecionado. Isso feito no boto criado logo aps os trs Radios.

4.15 TextInput
spark.components.TextInput

O componente TextInput um dos mais usados para entrada de dados. Ele representa uma caixa onde o usurio pode inserir texto. A propriedade mais importante dele o text, que

representa o texto que est escrito na caixa de texto. Outras propriedades importantes so maxChars, que indica a quantidade mxima de caracteres, displayAsPassword, que indica se a caixa de texto deve omitir o que est sendo digitado e prompt, que exibe uma mensagem dentro da caixa de texto at que o usurio selecione o componente.

Trabalhando com listas

Exibir listas no framework mobile ser uma das tarefas mais rotineiras do seu desenvolvimento. importante comentar novamente que voc no deve usar o componente DataGrid para exibir dados na tela, mas sim o componente List. A forma mais simples de exibir uma lista de itens no framework mobile atravs do exemplo a seguir:
<s:List id="list" width="100%" labelField="firstName"> <s:dataProvider> <s:ArrayList> <fx:Object firstName="Daniel" /> <fx:Object firstName="Fulano" /> <fx:Object firstName="Beltrano" /> </s:ArrayList> </s:dataProvider> </s:List>

Por mais simples que este exemplo possa parecer, ele explica duas propriedades importantes do List. A primeira delas a propriedade dataProvider, que indica a fonte de dados da lista. Geralmente esta fonte um ArrayList de objetos. Outra propriedade importante labelField, que indica qual propriedade do objeto que ser exibido na lista.

5.1 O evento change

Quando o usurio seleciona um item da lista, o evento change disparado. Podemos captur-lo de acordo com o exemplo a seguir:
<s:List id="list" width="100%" <s:dataProvider> <s:ArrayList> <fx:Object <fx:Object <fx:Object </s:ArrayList> </s:dataProvider> labelField="firstName"> firstName="Daniel" /> firstName="Fulano" /> firstName="Beltrano" />

<s:change> <![CDATA[ this.title = list.selectedItem.firstName; ]]>

</s:change> </s:List>

Neste exemplo, usamos o evento change para capturar o momento em que o usurio selecionou um item da lista. Quando isso acontece, instantaneamente a propriedade selectedItem preenchida com o objeto que foi selecionado, e podemos us-lo para realizar algum tipo de processamento. Neste caso, apenas mudamos o ttulo da view. Caso a propriedade allowMultipleSelection esteja com o valor true (o padro false), voc deve usar a propriedade selectedItems, que uma lista dos objetos selecionados. O exemplo a seguir ilustra esta caracterstica:
<s:List id="list" width="100%" labelField="firstName" allowMultipleSelection="true" > <s:dataProvider> <s:ArrayList> <fx:Object firstName="Daniel" /> <fx:Object firstName="Fulano" /> <fx:Object firstName="Beltrano" /> </s:ArrayList> </s:dataProvider> <s:change> <![CDATA[ var names:String = ""; var poeVirgula:Boolean = false; for each (var item:Object in list.selectedItems) { if (poeVirgula) { names += ", " } names += item.firstName; poeVirgula = true; } this.title = names; ]]> </s:change> </s:List>

Neste exemplo criamos um lao para exibir a lista de nomes selecionados, atravs da propriedade selectedItems.

5.2 Item Renderers no List

Um Item Renderer uma forma de desenhar cada linha da lista. No exemplo anterior, cada linha era representada por um label simples, mas podemos alterar este comportamento com item renderers, podendo, por exemplo, incluir uma foto ou ento mais texto alm do normal. Na Figura 5.1, podemos ver o componente List com a sua renderizao normal, um label. J na Figura 5.2, temos um item renderer customizado, incluindo um cone e um label. Existem centenas de possibilidades para que voc possa criar suas listas personalizadas, mas por uma questo de performance, bom compreender as regras citadas a seguir: Escreva item renderers em Action Script, sempre que possvel. Como voc deve saber, todo componente MXML traduzido para o Action Script em tempo de execuo, e isso possui um custo alto para dispositivos mveis. No reaproveite os item renderers que voc criou no Flex web/desktop. Item Renderers para mobile devem herdar de de LabelItemRenderer Use somente LabelItemRenderer e IconItemRenderer. No crie listas com mais de 50 itens. Se isso acontecer, o seu dispositivo mobile pode ficar lento. Se voc precisar criar listas grandes, use paginao diferenciada (atravs de um boto mais).

Figura 5.1 - Componente List com renderizao padro, via componente Label

Figura 5.2 - Componente List com renderizao diferenciada

5.3 Conhecendo o IconItemRenderer

No exemplo a seguir iremos utilizar o componente IconItemRenderer repassando somente as propriedades necessrias para criar uma lista com imagens. Vejas que em nenhum momento fazemos referncia ao componente image ou ao componente bitmapImage, deixando o framework Flex com esta responsabilidade:
<s:List width="100%" height="100%"> <s:dataProvider> <s:ArrayList> <fx:Object name="Edit" icon="icons/edit.png"/> <fx:Object name="error" icon="icons/error.png"/> <fx:Object name="exchange" icon="icons/exchange.png"/> <fx:Object name="export1" icon="icons/export1.png"/> <fx:Object name="export2" icon="icons/export2.png"/> <fx:Object name="find" icon="icons/find.png"/> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:IconItemRenderer iconField="icon" labelField="name"> </s:IconItemRenderer> </fx:Component> </s:itemRenderer> </s:List>

Se os cones estiverem no lugar certo, o resultado deste cdigo visto na Figura 5.3.

Figura 5.3 - Renderizao de um IconItemRenderer

O componente IconItemRenderer no trabalha apenas com as duas propriedades iconField e labelField. Alm dela, tambm temos a propriedade messageField, que uma mensagem que ficar abaixo do label, sem falar que temos iconFunction, labelFunction e messageFunction, que so funes chamadas a cada interao dos itens do List que retornam uma String contendo o texto que ser exibido no item. Como temos que pensar sempre em listas rpidas, sem eventuais firulas, recomenda -se que utilize o IconItemRenderer em 99% das listas da sua aplicao mobile. No prximo exemplo, exibimos como criar uma lista mais elaborada, envolvendo diversos conceitos do IconItemRenderer, que resulta em uma lista conforme a Figura 5.4.
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Adobe Suported Devices"> <fx:Style> .messageStyle {

fontSize: 15; color: #aaaa00; } </fx:Style> <s:List width="100%" height="100%"> <s:dataProvider> <s:ArrayList> <fx:Object name="Acer Liquid" image="device/acer_liquid.png" info="Include with Android 2.2 update" /> <fx:Object name="Acer Liquid Ferrari" image="device/acer_ferrari.png" info="Include with Android 2.2 update" /> <fx:Object name="Acer Stream" image="device/acer_android.png" info="Include with Android 2.2 update"/> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:IconItemRenderer iconField="image" iconWidth="160" iconHeight="114" labelField="name" messageField="info" messageStyleName="messageStyle" fontStyle="italic" > </s:IconItemRenderer> </fx:Component> </s:itemRenderer> </s:List> </s:View>

Figura 5.4 - Uma lista de itens mais elaborada

Criando a aplicao FlexTasks

Somente com o contedo aprendido at agora j possvel criar aplicaes simples, que exigem pouco processamento e memria do dispositivo. A idia inicial desta aplicao criar um gerenciador de tarefas, capaz de controlas nossas pequenas tarefas do dia a dia. Esta aplicao possui o cdigo fonte para download. No cdigo fonte, eu comentei cada mtodo e cada funcionalidade para facilitar o entendimento. Estes comentrios no so exibidos nos cdigos a seguir para que no poluam o cdigo da obra, que deve ser o mais enxuto possvel. importante lembrar que ainda no estamos preparados para o desenvolvimento mobile, pois o mesmo exige conhecimento especfico do dispositivo e de toda a sua API (acessar dados do telefone, GPS, acelermetro, etc), mas isso ser visto nos prximos captulos, na segunda parte desta obra. Uma aplicao para gerenciar tarefas formada pelas tarefas que ainda no foram concludas, e pelas tarefas j concludas. Com isso podemos criar duas listas, de forma a carregar inicialmente somente a lista de tarefas no concludas. Veja que estamos, a todo momento, pensando em performance, e precisamos focar o desenvolvimento da aplicao neste quesito. de imaginar que o usurio no deseja ver, inicialmente, a lista de tarefas concludas, ento no h motivos para carreg-la na memria do celular, ainda mais que, com o passar do tempo, esta lista tende a crescer muito. Isto significa que a lista de tarefas concludas no ser vista na tela inicial da aplicao, mas estar carregada em uma varivel na memria. Este conceito pode ser melhorado caso voc deseje otimizar ainda mais a performance do dispositivo. Alm destas duas listas, tambm temos a tela de criao/edio de tarefas, com os seguintes campos: Nome da tarefa Descrio da tarefa Prioridade (0,1,2) Concluda (Sim, No)

6.1 Criando o projeto

Cmo o Flash Builder 4.5 aberto, acione o menu File > New > Flex Mobile Project. Em Project Name, coloque FlexTasks. Clique no boto Next. Em Target plataforms, escolha a verso que ser compilada o projeto. Neste caso, Google Android. Em Application Tamplate, selecione Tabbed Application, e adicione trs tabs: Tarefas, Concludas, Opes, conforme a Figura 6.1. Clique em Finish.

Figura 6.1 Criando as abas da aplicao FlexTasks

Aps criar a aplicao, execute-a clicando no boto Run. Surge a tela para configurarmos o dispositivo padro, que neste caso ser um Google Nexus One. Selecione-o, clique em Apply e depois em Run. Voc ver a aplicao de acordo com a Figura 6.2.

Figura 6.2 Tela inicial da aplicao

O cdigo gerado composto por quatro arquivos MXML, veja: /FlexTasks/src/FlexTasks.mxml a aplicao principal, e possui a chamada para trs abas. Veja que, se voc deseja adicionar mais abas ou retir-las, dever editar os componentes ViewNavigator, tanto no modo source quanto no modo design.
<?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:ViewNavigator label="Tarefas" width="100%" height="100%" firstView="views.TarefasView"/> <s:ViewNavigator label="Concludas" width="100%" height="100%" firstView="views.ConcluidasView"/>

<s:ViewNavigator label="Opes" width="100%" height="100%" firstView="views.OpesView"/> </s:TabbedViewNavigatorApplication>

J no package views, temos trs arquivos mxml que so as views de cada aba cr iada: ConcluidasView.mxml, OpcoesView.mxml e TarefasView.mxml. No assistente de criao do projeto, caso tenha usado acentuao no nome das abas, o nome dos arquivos ser comprometido. Por exemplo, Opes ser OpesView.mxml. Neste caso, faa o rename do arquivo (Selecione o arquivo e aperte F2). Sinceramente eu no gosto da palavra View no nome do Arquivo, porque todas so views, no existe distino. Ento iremos renome-las para Concluidas.mxml, Opcoes.mxml e Tarefas.mxml. Use o F2 dentro do Flex, no faa o rename no sistema de arquivos, pois o Flex precisa atualizar as referncias em toda a aplicao.

6.2 Incluindo cones

Vamos adicionar alguns cones nas abas, e para isso podemos acessar este site e baixar o kit de cones gratuitos. Existe uma verso paga com mais de 140 cones, caso deseje comprar. Aps realizar o download, copie os cones que deseja usar para a pasta src/assets/icons da aplicao. Crie estas pastas se necessrio. A pasta assets um padro informal da Adobe, que signif ica recursos. L inserimos todas as images, cones, estilos e outros recursos da aplicao. Para inserir os cones, use a propriedade icon do ViewNavigator, veja:
// ... <s:ViewNavigator label="Tarefas" width="100%"
4

http://www.androidicons.com/freebies.php

height="100%" firstView="views.TarefasView" icon="@Embed(source='assets/icons/ic_menu_database.png')" /> <s:ViewNavigator label="Concludas" width="100%" height="100%" firstView="views.Concluidas" icon="@Embed(source='assets/icons/ic_menu_tick.png')" /> <s:ViewNavigator label="Opes" width="100%" height="100%" firstView="views.Opcoes" icon="@Embed(source='assets/icons/ic_menu_equalizer.png')" /> // ...

6.3 Persistncia de dados

Antes de criarmos qualquer tela (view), temos que pensar em como ser a persistncia de dados da aplicao. Existem duas formas bsicas de persistir dados em uma aplicao mobile. A primeira delas usar um servidor (PHP, Java, etc) e persistir os dados no prprio servidor. Na segunda forma, os dados so armazenados no prprio dispositivo, e isso realizado atravs de implementaes do prprio framework mobile. Como foi visto no captulo 3.11, para ativar a persistncia de dados, temos que ativar a propriedade persistNavigatorState, da seguinte forma: /FlexTasks/src/FlexTasks.mxml
<?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" persistNavigatorState="true" > // ...

Somente com o persistNavigatorState possvel guardar diversas informaes sobre o estado das telas, mas preciso tambm guardar a lista de tarefas realizadas e a lista de tarefas a realizar, e fazemos isso atravs de dois mtodos da aplicao, que so: setProperty(chave, valor) getProperty(chave)

Para usar estes mtodos, precisamos instanciar a classe PersistenceManager, que uma classe bastante pequena, nativa do Flex 4.5, que possui uma implementao do recurso de SharedObject, que j deve ser conhecido pelos usurios do Flex. Apesar da aplicao ser de pequeno porte, iremos usar uma estrutura formada por camadas, onde a camada de negcios separada da camada de visualizao, tentando imitar sempre o padro MVC. Como Model, temos o arquivo Task.as, que contm as propriedades da tarefa. Como no futuro chamaremos este tipo de classe como Value Objetcs, criaremos o package vos e adicionaremos a classe neste p ackage: /FlexTasks/src/vos/Task.as
package vos { [Bindable] public class Task { public var public var public var public var

name:String; description:String; priority:uint=1; complete:Boolean;

public function get icon():String { if (this.complete) return "assets/icons/checks.png"; switch(priority) { case 1: { return "assets/icons/alta.png"; break; } case 2: { return "assets/icons/normal.png"; break;

} case 3: { return "assets/icons/baixa.png"; break; } } return "assets/icons/normal.png"; } } }

A classe Task.as representa uma tarefa nica. Ela [Bindable] porque iremos editar as propriedades da tarefa em formulrios, fazendo o link dos dados do formulrio ao objeto diretamente. A propriedade icon uma forma de retornar o cone da tarefa, de acordo com algumas propriedades. Por exemplo, se a tarefa estiver concluda, retornaremos o cone checks. Agora que criamos a classe vo que representa as tarefas, vamos criar a classe que gerencia as tarefas. Veja que ainda no estamos nos preocupando com as telas em si, somente com a implementao. Fazemos isso para separar cada parte da aplicao em uma camada. Vamos criar a classe TaskController no package classes, com o seguinte cdigo: /src/classes/TaskController.as
package classes { import flash.events.Event; import flash.utils.flash_proxy; import mx.collections.ArrayList; import spark.managers.PersistenceManager; import vos.Task; public class TaskController { private const TASKS_COMPLETAS:String = "TASKS_COMPLETAS"; private const TASKS_INCOMPLETAS:String = "INTASKS_COMPLETAS"; //Armazena as tarefas que esto completas

private var _completas:ArrayList; //Armazena as tarefas que esto incompletas private var _incompletas:ArrayList; //Varivel para "segurar" o persistence manager private var pM:PersistenceManager; public function TaskController() { /* Ativa o PersistentManager */ pM = new PersistenceManager(); pM.load(); initTaks(); } private function initTaks():void { _completas = pM.getProperty(this.TASKS_COMPLETAS) as ArrayList; if (_completas==null) _completas = new ArrayList(); _incompletas = pM.getProperty(this.TASKS_INCOMPLETAS) as ArrayList; if (_incompletas==null) _incompletas = new ArrayList(); } public function save():void { pM.setProperty(this.TASKS_COMPLETAS,completas); pM.setProperty(this.TASKS_INCOMPLETAS,incompletas); pM.save(); } public function deleteAll():void { pM.clear(); initTaks(); } public function removeIncompleta(task:Task):void

{ this.incompletas.removeItem(task); this.save(); } public function removeCompleta(task:Task):void { this.completas.removeItem(task); this.save(); } public function get incompletas():ArrayList { return _incompletas; } public function set incompletas(value:ArrayList):void { _incompletas = value; } public function get completas():ArrayList { return _completas; } public function set completas(value:ArrayList):void { _completas = value; } } }

Como a classe TaskController responsvel em gerenciar os dados das tarefas, tudo relativo a este gerenciamento est nela. Veja que criamos inicialmente dois arrays, que vo representar as tarefas incompletas e as tarefas completas. Pessoal, me perdoem por misturar palavras em ingls/portugus no mesmo sistema. O correto seria utilizar tudo em ingls... Tambm criamos a varivel pM, que presenta a classe PersistenceManager e prov a persistncia de dados da aplicao. No mtodo construtor, instanciamos o pM e chamamos o mtodo initTasks, que ir iniciar os arrays das tarefas. No mtodo initTasks, instanciamos os arrays de tarefas utilizando o mtodo getProperty do PersistenceManager. Depois temos o mtodo Save, que usa o mtodo

setProperty do PersistenceManager para poder salvar os arrays na memria do dispositivo. Os outros mtodos so relacionados a remover todos os itens ou ento remover itens de cada tipo de tarefa. Agora que criamos o TaskController, podemos adicion-lo na aplicao, e isso feito no mxml principal da app, veja: /FlexTasks1/src/FlexTasks.mxml
<?xml version="1.0" encoding="utf-8"?> <s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" persistNavigatorState="true" initialize="OnInit(event)" > <fx:Style source="assets/styles/style.css"/> <fx:Script> <![CDATA[ import classes.TaskController; import flash.net.registerClassAlias; import mx.events.FlexEvent; import vos.Task; //Varivel que controla as tarefas public var taskController:TaskController; // sempre bom registrar as classes Vo registerClassAlias("Task",Task); //Executado quando a aplicao estiver pronta protected function OnInit(event:FlexEvent):void { taskController = new TaskController(); } ]]> </fx:Script> <s:ViewNavigator label="Tarefas" width="100%" height="100%" firstView="views.Tarefas"

icon="@Embed(source='assets/icons/ic_menu_database.png')" /> <s:ViewNavigator label="Concludas" width="100%" height="100%" firstView="views.Concluidas" icon="@Embed(source='assets/icons/ic_menu_tick.png')" /> <s:ViewNavigator label="Opes" width="100%" height="100%" firstView="views.Opcoes" icon="@Embed(source='assets/icons/ic_menu_equalizer.png')" /> </s:TabbedViewNavigatorApplication>

Na aplicao principal, no evento onInit, criamos a varivel taskController que do tipo TaskController, e ser acessada por toda a aplicao. Depois, para cada aba do ViewNavigator, adicionamos um cone atravs da propriedade icon.

A primeira view Tarefas apresenta as tarefas no concludas, veja: /src/views/Tarefas.mxml

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Tarefas"> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; import vos.Task; ]]> </fx:Script> <s:actionContent> <s:Button icon="@Embed('assets/icons/plus.png')">

<s:click> <![CDATA[ this.navigator.pushView(InserirTarefa,new Task()); ]]> </s:click> </s:Button> </s:actionContent> <s:List id="listConcluidas" width="100%" height="100%" itemRenderer="itemRenderers.CompletasItemRenderer" > <s:creationComplete> <![CDATA[ listConcluidas.dataProvider = FlexGlobals.topLevelApplication.taskController.incompletas; ]]> </s:creationComplete> <s:change> <![CDATA[ if (listConcluidas.selectedItem!=null) navigator.pushView(views.VerTarefa,listConcluidas.selectedItem ); ]]> </s:change> </s:List> </s:View>

A lista de tarefas no concludas usa a varivel taskController.incompletas como dataProvider. Como voc pode ver, usamos a varivel FlexGlobals.topLevelApplication para referenciar a aplicao principal. Quando clica no boto para adicionar uma nova tarefa, usamos o pushView para navegar at a view InserirTarefa, repassando como parmetro data uma nova tarefa (new Task()). Veja tambm que usamos o itemRenderer TaskItemRenderers, exibido logo a seguir: /src/itemRenderers/TaskItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?> <s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" labelField="name" messageField="description"

iconWidth="32" iconHeight="32" iconField="icon" messageStyleName="messageStyle" decorator="assets/icons/play.png" > </s:IconItemRenderer>

O item renderer usa as propriedades do IconItemRenderer para configurar uma lista de itens como o ttulo, descrio e cone. Quando o usurio seleciona o boto adicionar, abrimos a view InserirTarefa.mxml, veja: src/views/InserirTarefa.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Nova Tarefa"> <s:layout> <s:FormLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" gap="30" /> </s:layout> <fx:Declarations> <s:RadioButtonGroup id="prioridade" selectedValue="@{data.priority}"/> </fx:Declarations> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; import spark.transitions.FlipViewTransition; import vos.Task; ]]> </fx:Script> <s:navigationContent> <s:Button icon="@Embed('assets/icons/arrowleft.png')"> <s:click> <![CDATA[ navigator.popView();

]]> </s:click> </s:Button> </s:navigationContent> <s:actionContent> <s:Button icon="@Embed('assets/icons/plus.png')"> <s:click> <![CDATA[ FlexGlobals.topLevelApplication.taskController.incompletas.add Item(data); FlexGlobals.topLevelApplication.taskController.save(); navigator.popView(); ]]> </s:click> </s:Button> </s:actionContent> <s:TextInput width="100%" prompt="Nome da tarefa" text="@{data.name}"/> <s:VGroup> <s:RadioButton group="{prioridade}" value="1" label="Alta"/> <s:RadioButton group="{prioridade}" value="2" label="Normal"/> <s:RadioButton group="{prioridade}" value="3" label="Baixa"/> </s:VGroup> <s:TextArea width="100%" height="200" prompt="Descrio" text="@{data.description}"/> <s:Spacer height="30"/> <s:HGroup width="100%"> </s:HGroup>

</s:View>

Veja que para inserir uma tarefa, usamos o arroba (@) para ligar cada valor de um campo a propriedade da varivel data. Quando o usurio confirma os dados, clicando no boto

mais, adicionamos a tarefa na lista de tarefas incompletas (usando novamente o topLevelApplication). Aps adicionar o item, fazemos o save() e depois usamos o popView para voltar a view Tarefas. Quando clicamos em uma tarefa, abrimos a view VerTarefa, com o seguinte cdigo: /src/views/VerTarefa.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Tarefa"> <fx:Script> <![CDATA[ import classes.TaskController; import itemRenderers.TaskItemRenderer; import mx.core.FlexGlobals; import vos.Task; ]]> </fx:Script> <s:navigationContent> <s:Button icon="@Embed('assets/icons/arrowleft.png')"> <s:click> <![CDATA[ navigator.popView(); ]]> </s:click> </s:Button> </s:navigationContent> <s:actionContent> <s:Image source="{data.icon}" width="32" height="32"/> <s:Spacer width="10"/> </s:actionContent> <s:layout> <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" />

</s:layout> <s:Label text="{data.name}" styleName="nomeTarefaLabel"/> <s:TextArea text="{data.description}" styleName="descricaoTarefaLabel" height="200" editable="false" /> <s:Spacer height="50"/> <s:VGroup width="100%" horizontalAlign="center"> <s:Button label="Completar" visible="{!data.complete}" height="{!data.complete?100:0}" width="100%"> <s:click> <![CDATA[ vgroupCompletar.visible = true; vgroupCompletar.height=100; ]]> </s:click> </s:Button> <s:HGroup id="vgroupCompletar" width="100%" visible="false" horizontalAlign="center" height="0"> <s:Button label="Sim" width="100"> <s:click> <![CDATA[ (data as Task).complete = true; (FlexGlobals.topLevelApplication.taskController as TaskController).removeIncompleta(data as Task); (FlexGlobals.topLevelApplication.taskController as TaskController).completas.addItem(data); (FlexGlobals.topLevelApplication.taskController as TaskController).save(); vgroupCompletar.visible = false; vgroupCompletar.height=0; ]]> </s:click> </s:Button> <s:Button label="No" width="100"> <s:click> <![CDATA[ vgroupCompletar.visible=false; vgroupCompletar.height=0;

]]> </s:click> </s:Button> </s:HGroup> <s:Button label="Editar" width="100%"> <s:click> <![CDATA[ this.navigator.pushView(EditarTarefa,this.data); ]]> </s:click> </s:Button> <s:Button label="Apagar" width="100%"> <s:click> <![CDATA[ vgroupApagar.visible = !vgroupApagar.visible; ]]> </s:click> </s:Button> <s:HGroup id="vgroupApagar" width="100%" visible="false" horizontalAlign="center"> <s:Button label="Sim" width="100"> <s:click> <![CDATA[ if ((data as Task).complete) (FlexGlobals.topLevelApplication.taskController as TaskController).removeCompleta(data as Task); else (FlexGlobals.topLevelApplication.taskController as TaskController).removeIncompleta(data as Task); this.navigator.popView(); ]]> </s:click> </s:Button> <s:Button label="No" width="100"> <s:click> <![CDATA[ vgroupApagar.visible=false; ]]> </s:click>

</s:Button> </s:HGroup> </s:VGroup> </s:View>

Quando visualizamos uma tarefa, podemos realizar algumas aes com ela. A primeira delas concluir uma tarefa, que ir retirar a tarefa do array de incompletas e adicionar no array de completas. Depois temos a ao de editar a tarefa, que ir chamar uma nova View e a ao de apagar a tarefa. A view editar exibida logo a seguir: src/views/EditarTarefa.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Nova Tarefa"> <s:layout> <s:FormLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" gap="30" /> </s:layout> <fx:Declarations> <s:RadioButtonGroup id="prioridade" selectedValue="@{data.priority}"/> </fx:Declarations> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; import spark.transitions.FlipViewTransition; import vos.Task; ]]> </fx:Script> <s:navigationContent> <s:Button icon="@Embed('assets/icons/arrowleft.png')"> <s:click>

<![CDATA[ navigator.popView(); ]]> </s:click> </s:Button> </s:navigationContent>

<s:TextInput width="100%" prompt="Nome da tarefa" text="@{data.name}"/> <s:VGroup> <s:RadioButton group="{prioridade}" value="1" label="Alta"/> <s:RadioButton group="{prioridade}" value="2" label="Normal"/> <s:RadioButton group="{prioridade}" value="3" label="Baixa"/> </s:VGroup> <s:TextArea width="100%" height="200" prompt="Descrio" text="@{data.description}"/> <s:Spacer height="30"/> <s:HGroup width="100%"> </s:HGroup> </s:View>

Uma particularidade na View para editar tarefas que ela no possui um boto para salvar o registro. Neste caso, estamos alterando diretamente o objeto, atravs do recurso two way databind. Para concluir, temos a View com as opes da aplicao, veja: src/views/Opcoes.mxml
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Opes"> <fx:Script> <![CDATA[ import mx.core.FlexGlobals; import mx.effects.Parallel;

import spark.components.ViewNavigator; import spark.effects.Fade; import spark.effects.Resize; ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:layout> <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" /> </s:layout> <s:VGroup horizontalAlign="center" width="100%"> <s:Button id="btnApagar" width="100%" label="Apagar todas as tarefas"> <s:click> <![CDATA[ hgrpApagarTudo.height = 100; hgrpApagarTudo.visible = true; btnApagarTarefasConcluidas.enabled = false; ]]> </s:click> </s:Button> <s:HGroup id="hgrpApagarTudo" width="50%" height="0"> <s:Button id="btnApagarSim" width="100%" label="Sim"> <s:click> <![CDATA[ FlexGlobals.topLevelApplication.taskController.deleteAll(); FlexGlobals.topLevelApplication.tabbedNavigator.selectedIndex = 0; ]]> </s:click> </s:Button> <s:Button id="btnApagarNao" width="100%" label="No"> <s:click> <![CDATA[ hgrpApagarTudo.height = 0; hgrpApagarTudo.visible = false; btnApagarTarefasConcluidas.enabled = true;

]]> </s:click> </s:Button> </s:HGroup> </s:VGroup> <s:Button id="btnApagarTarefasConcluidas" width="100%" label="Apagar as tarefas concluidas"> <s:click> <![CDATA[ btnApagarTarefasConcluidas.label = "Para Casa"; ]]> </s:click> </s:Button> </s:View>

Nas opes inclumos um boto que ir apagar todas as tarefas. Veja que esse boto abre dois botes Sim e No, para confirmar a operao. Como podemos ver, mesmo em uma aplicao pequena, criamos uma estrutura em camadas para a manipulao de dados. claro que podemos melhorar ainda mais esta estrutura, restringindo o uso do FlexGlobals ou ento o acesso direto s propriedades do TaskController. Com a aplicao de tarefas funcionando, chegamos ao final da primeira parte desta obra, onde aprendemos o bsico de uma aplicao Flex Mobile.

Aguardem pela segunda parte da obra, que dever ocorrer daqui h alguns meses.