ADOBE FLEX-dominando - Flex - Mobile - pt1 PDF

Dominando
Adobe Flex Mobile

Parte 1
Daniel Pace Schmitz

www.danielschmitz.com.br
www. ex.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:

h p://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 disposi vo
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 newsle er
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:
Twi er:
Daniel Pace Schmitz

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

2.1.1
Perspec ve......................................................................................................... 7
2.1.2
Workspace ......................................................................................................... 7
2.1.3
Editor.................................................................................................................. 7
2.1.4
Project ................................................................................................................ 8
2.2
Tipos de projetos no Flash Builder 4.5 ................................................................... 8
2.3
Criando o primeiro projeto Flex Mobile ............................................................... 10
2.4
Con gurando e executando o projeto Mobile ..................................................... 13
2.5
Executando atravs de um outro dispositivo ....................................................... 14
2.6
Entendendo a arquitetura do Flex Mobile ........................................................... 16
2.7
Views .................................................................................................................... 17
2.8
Componentes recomendados .............................................................................. 18
2.9
Mais consideraes para o framework Mobile .................................................... 18
Design e work ow do componente View ...................................................................... 20

3.1
Criando uma nova view........................................................................................ 21
3.2
Navegando entre views ........................................................................................ 23
3.3
Parmetros do pushView e popView ................................................................... 28
3.4
Outros mtodos para navegao entre Views ..................................................... 28
3.5
Ac on Bar ............................................................................................................. 29
3.6
Escondendo a Ac on Bar...................................................................................... 31
3.7
Utilizando cones .................................................................................................. 32
3.8
De nindo menus para as views ............................................................................ 32
3.9
Criando uma aplicao mobile com TabBars (Sections) ....................................... 36
3.10
Configurando a disposio do dispositivo mobile (Retrato ou paisagem) ........... 38
3.11
Persistncia de dados na View ............................................................................. 39
Componentes do Flex Mobile Framework ..................................................................... 41

4.1
Ac onBar .............................................................................................................. 41
4.2
BusyIndicator........................................................................................................ 41
4.3
TabbedViewNavigatorApplica on........................................................................ 42
4.4
ViewNavigatorApplica on .................................................................................... 44
4.5
View ...................................................................................................................... 44
4.6
ViewMenu ............................................................................................................ 45
4.7
Bu on................................................................................................................... 45
4.8
CheckBox .............................................................................................................. 46
4.9
Group.................................................................................................................... 47
4.10
Image .................................................................................................................... 47
4.11
Label ..................................................................................................................... 49
4.12
List ........................................................................................................................ 49
4.13
RadioBu on ......................................................................................................... 49
4.14
RadioBu onGroup ............................................................................................... 50
4.15
TextInput .............................................................................................................. 50
Trabalhando com listas .................................................................................................. 52

5.1
O evento change .................................................................................................. 52
5.2
Item Renderers no List ......................................................................................... 54
5.3
Conhecendo o IconItemRenderer ........................................................................ 55
Criando a aplicao FlexTasks ........................................................................................ 59

6.1
Criando o projeto ................................................................................................. 59
6.2
Incluindo cones.................................................................................................... 62
6.3
Persistncia de dados ........................................................................................... 63
Introduo
Em 2011 o framework Adobe Flex 4.5 trouxe para o desenvolvimento RIA a possibilidade de
criar
Mobile
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 disposi vos 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 so ware 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 retrospec va
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
web.
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
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
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
ver calmente.
O MXML existe porque muito mais fcil criar uma interface em uma linguagem declarativa
(como o XML) do que impera va (como o Ac on Script). Isso quer dizer que tudo que
fazemos em MXML (ou quase tudo) pode ser feito com Ac on 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 Ac on
Script, ele merece um novo tpico.
1.3 O que Action Script?

Ac on 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 Run me que uma mquina
virtual usada para executar aplica vos. 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 disposi vo 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 disposi vo mobile est compatvel com o Adobe Air e com o Flex Mobile, acesse
este endereo1.
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 u lizado.
Para realizar o download do Flash Builder 4.5 acesse este link2 e, ao lado direito do site,
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
deve digitar o nmero de srie ou ento selecionar a verso de avaliao. Selecione a opo
h p://www.adobe.com/ ashpla orm/cer
h p://www.adobe.com/products/ ash-builder.html
ed_devices/
produtos que sero instalados, bem como o local. Voc pode deixar tudo como padro e
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,
e verses para estudantes e desempregados3. 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 (an go 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.
h ps://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
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
u lizando 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 Perspec ve, 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
alterar a perspec va
Open Perspec ve > Fl
das janelas muda completamente, incluindo novas abas e sumindo com outras. Para voltar
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
perspec vas.
Voc pode clicar com o boto direito do mouse na barra de perspectiva e retirar o item
do 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
des nado a um cliente, ou a algum po de projeto.
2.1.3
Editor
Um editor responsvel em editar arquivos do seu projeto, mas com a par cularidade de
possuir recursos extras para cada po 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
par cularidades dis ntas. O mesmo vale para arquivos PHP, Java, Ac on 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 compar lhados
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
Boto direito na janel

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 pos 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 disposi vos mobile.
Ac on Script Project: Pode-se criar um projeto totalmente em Ac on Script. Neste
tipo de projeto, no so usados os arquivos MXML para o desenho da aplicao, e
criao de jogos utilizando a plataforma Flex.
Ac on Script Mobile Project: Possui o mesmo conceito do Ac on Script Project,

mas o mizado para os disposi vos mobile.
Flash Professional Project: Cria um projeto Flash, que diferente do Flex. Este tipo
de projeto no ser abordado nesta obra.
Flash Catalyst Compa ble Project: Cria um projeto que compatvel com o Flash
Catalyst.
Figura 2.2 - Criando um novo projeto Flex
Nesta obra estaremos u lizando 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 con gurando
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 disposi vo. 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:
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
disposi vo.
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 Con igurando 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
disposi vo 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 disposi vo para a

simulao. Depois, clique em Apply e em Run. A aplicao mobile ser simulada de
acordo com o disposi vo 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,
u lizando o boto Browse. Escolha On desktop em Launch Method e depois
escolha o disposi vo 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 disposi vo
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.
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
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
.swc
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 Ac onBar
Spark BusyIndicator
Spark
TabbedViewNavigator
Applica on
Spark TabbedViewNavigator
Spark View
Spark ViewMenu
Spark ViewNavigator
Spark ViewNavigatorApplica on
Spark Bu on
Spark CheckBox
Spark DataGroup
Spark Group
Spark HGroup / VGroup
Spark TileGroup
Spark Image / BitmapImage
Spark Label
Spark List
Spark RadioBu on
Spark RadioBu onGroup
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
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 ver cal, entre outros. A Adobe
recomenda que u lize 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 disposi vo 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.
foram
criados:
HelloWorld.mxml
/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.HelloWorldHomeView">
</s:ViewNavigatorApplication>
/HelloWorld/src/views/HelloWorldHomeView.mxml
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
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 signi ca 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
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
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
automa camente pelo framework.
O que temos agora na aplicao que a view HelloWorldAgain
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
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
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
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 ca 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 de nida 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
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
automa camente pela propriedade title da view.
Naviga on area: rea esquerda do tle, destinado a inserir botes ou links de
navegao. configurado atravs da propriedade <s:navigationContent>
Ac on 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 signi ca
que voc possa atribuir outros controles a estas reas.
Por exemplo, voc pode usar a propriedade tleContent para determinar o contedo da
rea onde o ttulo ficava, podendo, por exemplo, realizar a seguinte configurao:
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
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
firstView="views.ViewWithActionBar">
<s:navigationContent>
<s:Button id="btnBack" label="Back">
<s:click>
<![CDATA[
]]>
</s:click>
</s:Button>
</s:navigationContent>
</s:ViewNavigatorApplication>
Neste exemplo, criamos o boto Back para executar a ao de popView. Este boto est
de nido 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
content e o action content tambm.
title
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.
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:click>
<![CDATA[
]]>
</s:click>
</s:Button>
</s:titleContent>
</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:Button id="btnBack" label="Back"
icon="@Embed('assets/icons/back.png')">
<s:click>
<![CDATA[
]]>
</s:click>
</s:Button>
3.8 De inindo menus para as views

Para cada view criada, podemos de nir 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:
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
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:
title="Details">
<s:actionContent>
<s:click>
<![CDATA[
]]>
</s:click>
</s:Button>
</s:actionContent>
<s:titleContent>
<s:TextInput id="txtBusca" width="100%" prompt="Busca"/>
</s:titleContent>
<s:viewMenuItems>
<s:ViewMenuItem label="Realizar Busca"
icon="@Embed('assets/icons/ic_menu_search.png')">
<s:click>
<![CDATA[
]]>
</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 Applica on
Tabbed Applica on
Nos projetos anteriores, utilizamos a aplicao baseada em Views, onde existia somente
uma nica pilha de views. Agora vamos criar uma Tabbed Applica on, 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 dis ntos, 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 3.1
View 1
View 2
View 3
Tab1
Home
Tab2
Con g
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 disposi vos mobile possuem duas orientaes que so chamadas de portrait e
landscape. O framework Flex tambm possui uma forma de poder gerenciar a disposio,
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:
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:Image width="402" height="284" source="android.gif"
</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
-se a guardar a propriedade data de uma view enquanto a
aplicao estiver funcionando, e o usurio estiver navegando entre views.
e des na-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 es ver 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 u lizados 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 subs tui
onteiro do mouse para as aplicaes web/desktop,
e para exibiseguir. Pode-se tambm utilizar a propriedade symbolColor para alterar a cor do
indicador e a propriedade rotationalInterval para alterar a velocidade do indicador.
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.TabbedViewNavigatorApplica on
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
disposi vo, conforme o exemplo a seguir:
<s:TabbedViewNavigatorApplication
>
<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 Aplica on
4.4 ViewNavigatorApplication
spark.components.ViewNavigatorApplica on
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
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.Bu on
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 par r 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
{
}
]]>
</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
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
Ac onScript.
A segunda forma ( ) referencia diretamente o evento click a um mtodo, nesta caso
chamado de OnBu onClick. O mtodo ( ) deve ser de nido 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:Bu on. 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 es ver marcada ou false se no
es ver 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
Ver calLayout: 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 subs tuir 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 dis ntas:
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
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,
, 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:
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, allowMul pleSelec on 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.RadioBu on
O componente RadioBu on 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 RadioBu on, e groupName, que
iden ca o grupo onde o RadioBu on est inserido. Esta propriedade importante porque
somente uma opo entre os RadioBu ons deve ser escolhida.
Outras propriedades do RadioBu on so: selected, que indica se o Radio est selecionado e
value, que indica um valor que ser exibido atravs do componente RadioBu onGroup,
visto na prxima seo.
4.14 RadioButtonGroup
spark.components.RadioBu onGroup
O RadioBu onGroup no um componente visual, e foi criado especialmente para

trabalhar em conjunto com o RadioBu on. A sua finalidade bsica descobrir quais dos
RadioBu ons est selecionado. Como no um componente visual, este componente deve
ser inserido na tag fx:Declara ons. 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 RadioBu ons, e a propriedade groupName destes

componentes apontam para outro componente, o RadioBu onGroup, cujo id
formaPagamento.
Depois de criar estes quatro componentes (3 RadioBu ons + 1 RadioBu onGroup), basta
u lizar a propriedade selectedValue do componente RadioBu onGroup para descobrir
quais dos RadioBu ons 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

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 Ac on Script, sempre que possvel. Como voc deve
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 disposi vo mobile
pode car lento. Se voc precisar criar listas grandes, use paginao diferenciada
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 u lizar 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.
-se
que u lize 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.
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"
>
</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 disposi vo 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 signi ca 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, coloq
Target plataforms,
escolha a verso que ser compilada o projeto. Neste caso, Google Android.
me 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 con gurarmos 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.
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"/>
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 renomeFlex, 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 site4 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
da aplicao. Crie estas pastas se necessrio.
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%"
h p://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 a var a
propriedade persistNavigatorState, da seguinte forma:
/FlexTasks/src/FlexTasks.mxml
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, na va 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
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
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 po 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
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')"
/>
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.
/src/views/Tarefas.mxml
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
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
labelField="name"
messageField="description"
iconWidth="32"
iconHeight="32"
iconField="icon"
messageStyleName="messageStyle"
decorator="assets/icons/play.png"
>
O item renderer usa as propriedades do IconItemRenderer para con gurar 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
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 spark.transitions.FlipViewTransition;
import vos.Task;
]]>
</fx:Script>
<s:Button icon="@Embed('assets/icons/arrowleft.png')">
<s:click>
<![CDATA[
navigator.popView();
]]>
</s:click>
</s:Button>
<s:actionContent>
<s:Button icon="@Embed('assets/icons/plus.png')">
<s:click>
<![CDATA[
FlexGlobals.topLevelApplication.taskController.incompletas.add
Item(data);
FlexGlobals.topLevelApplication.taskController.save();
]]>
</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"/>
label="Normal"/>
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
topLevelApplication). Aps adicionar o item, fazemos o save() e depois usamos o

popView
Quando clicamos em uma tarefa, abrimos a view VerTarefa, com o seguinte cdigo:
/src/views/VerTarefa.mxml
title="Tarefa">
<fx:Script>
<![CDATA[
import classes.TaskController;
import itemRenderers.TaskItemRenderer;
import vos.Task;
]]>
</fx:Script>
<s:click>
<![CDATA[
]]>
</s:click>
</s:Button>
<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: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);
TaskController).completas.addItem(data);
TaskController).save();
vgroupCompletar.visible = false;
]]>
</s:click>
</s:Button>
<s:Button label="No" width="100">
<s:click>
<![CDATA[
vgroupCompletar.visible=false;
]]>
</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)
TaskController).removeCompleta(data as Task);
else
TaskController).removeIncompleta(data as Task);
]]>
</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
title="Nova Tarefa">
<s:layout>
<s:FormLayout paddingBottom="10" paddingLeft="10"
gap="30"
/>
</s:layout>
<fx:Declarations>
<s:RadioButtonGroup id="prioridade"
selectedValue="@{data.priority}"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.transitions.FlipViewTransition;
import vos.Task;
]]>
</fx:Script>
<s:click>
<![CDATA[
]]>
</s:click>
</s:Button>
<s:TextInput width="100%" prompt="Nome da tarefa"

text="@{data.name}"/>
<s:VGroup>
label="Alta"/>
label="Normal"/>
label="Baixa"/>
</s:VGroup>
<s:TextArea width="100%" height="200" prompt="Descrio"
text="@{data.description}"/>
<s:HGroup width="100%">
</s:HGroup>
</s:View>
Uma par cularidade 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
title="Opes">
<fx:Script>
<![CDATA[
import mx.effects.Parallel;
import spark.components.ViewNavigator;
import spark.effects.Fade;
import spark.effects.Resize;
]]>
</fx:Script>
<fx:Declarations>

</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingBottom="10" paddingLeft="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
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.

ADOBE FLEX-dominando - Flex - Mobile - pt1 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ADOBE FLEX-dominando - Flex - Mobile - pt1 PDF

Uploaded by

Copyright:

Available Formats

Dominando

Adobe Flex Mobile

Daniel Pace Schmitz

Esta obra digital parte integrante do livro Dominando Flex Mobile,

Voc realmente conhece Orientao a Objetos?

Veja mais sobre este livro aqui:

Interessado na segunda parte da obra ?

Convenes utilizadas nesta obra

Informa uma dica ou observao ao leitor

Daniel Pace Schmitz

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

Tipos de projetos no Flash Builder 4.5 ................................................................... 8

Criando o primeiro projeto Flex Mobile ............................................................... 10

Con gurando e executando o projeto Mobile ..................................................... 13

Executando atravs de um outro dispositivo ....................................................... 14

Entendendo a arquitetura do Flex Mobile ........................................................... 16

Componentes recomendados .............................................................................. 18

Mais consideraes para o framework Mobile .................................................... 18

Design e work ow do componente View ...................................................................... 20

Criando uma nova view........................................................................................ 21

Navegando entre views ........................................................................................ 23

Parmetros do pushView e popView ................................................................... 28

Outros mtodos para navegao entre Views ..................................................... 28

Utilizando cones .................................................................................................. 32

De nindo 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

RadioBu onGroup ............................................................................................... 50

Trabalhando com listas .................................................................................................. 52

O evento change .................................................................................................. 52

Item Renderers no List ......................................................................................... 54

Conhecendo o IconItemRenderer ........................................................................ 55

Criando a aplicao FlexTasks ........................................................................................ 59

Criando o projeto ................................................................................................. 59

Persistncia de dados ........................................................................................... 63

1.1 O que o framework Flex?

1.2 O que MXML?

Neste cdigo, criamos um grupo de componentes, posicionando cada um no eixo x-y.

1.3 O que Action Script?

1.4 Como o Flex Mobile funciona?

1.5 Instalao do Adobe Flash Builder 4.5

h p://www.adobe.com/ ashpla orm/cer

1.6 Como esta obra est dividida

Conhecendo o Flex Mobile

Figura 2.1- Tela inicial do Flash Builder 4.5

O conceito de workspace diferente de workbench. Um workspace caracterizado atravs

Um projeto a reunio de vrios arquivos de diversos tipos e diversos editores, com o

2.2 Tipos de projetos no Flash Builder 4.5

Boto direito na janel

Ac on Script Mobile Project: Possui o mesmo conceito do Ac on Script Project,

Figura 2.2 - Criando um novo projeto Flex

Nesta obra estaremos u lizando quase todos os projetos envolvidos, principalmente

2.3 Criando o primeiro projeto Flex Mobile

Figura 2.3 - Criando o projeto Mobile

Como nome de projeto, coloque HelloWorld, deixe o caminho padro do projeto e a