Flex Mobile

Tecsul 2011

Prof. Librio de Oliveira Jnior libajunior@gmail.com

PATO BRANCO - PR

Prof. Librio de Oliveira Jnior libajunior@gmail.com

ii

Sumrio
Captulo 1: Introduo........................................................................................................1 1.1 O que Flex? ......................................................................................................................... 1 1.2 O que MXML? ..................................................................................................................... 1 1.3 O que Action Script? ........................................................................................................... 2 1.4 Instalando Adobe Flash Builder 4.5 ....................................................................................... 3 Captulo 2: Conhecendo o Flash Builder 4.5.........................................................................3 2.1 Conhecendo o Workbench do Flash Builder 4.5 ................................................................... 3 2.1.1 Perspective.......................................................................................................................... 4 2.1.2 Workspace .......................................................................................................................... 4 2.1.3 Editor................................................................................................................................... 4 2.1.4 Project ................................................................................................................................. 4 2.2 Tipos de Projetos no Flash Builder 4.5 .................................................................................. 5 Captulo 3: Criando o Projeto..............................................................................................6 3.1 Criando o Projeto Tecsul ....................................................................................................... 6 3.2 Adicionando arquivos Externos ........................................................................................... 10 3.3 API Key da Google................................................................................................................ 10 3.4 Manipulando a view TecsulHomeView ............................................................................... 11 3.4.1 Modo Design ..................................................................................................................... 11 3.4.2 Modo Source ..................................................................................................................... 17 3.5 Manipulando a view MapaView .......................................................................................... 21 3.5.1 Modo Design ..................................................................................................................... 22 3.5.2 Modo Source ..................................................................................................................... 24 3.5.3 Chamando o MapaView .................................................................................................... 28

Prof. Librio de Oliveira Jnior libajunior@gmail.com

Captulo 1: Introduo
Em maio de 2011 a Adobe lanou um conjunto de atualizaes em sua plataforma Flex trazendo diversas novidades nas mais variadas reas, sendo uma das principais mudanas o suporte ao desenvolvimento mobile. Este minicurso objetiva apresentar aos participantes uma introduo ao Flex SDK 4.5 no uso do desenvolvimento de aplicaes para plataforma mvel.

1.1 O que Flex?

O Adobe Flex uma tecnologia open source para o desenvolvimento de aplicaes RIA (Rich Internet Applications) que ir permitir o desenvolvedor criar aplicaes tanto para web, quanto desktop e mveis (mobile), utilizando componentes que vo alm dos simples componentes do HTML. Com o Flex possvel desenhar aplicaes que contem telas, formulrios, datagrids, trees, menus, janelas e muito mais. Agora tambm possvel desenvolver aplicaes desktop, para celular e tablets tendo acesso as seus recursos nativos. Todos os recursos Flex esto includos no Flex SDK, que voc pode baixar gratuitamente no site da Adobe e usar para criar suas aplicaes. Voc pode criar toda a aplicao em um editor de texto como o bloco de notas e compilar gratuitamente utilizando o Flex SDK, mas este trabalho poder ser rduo. Por este motivo, aconselha-se o uso de uma IDE (Ferramenta Integrada de Desenvolvimento) chamada Flash Builder 4.5 que facilita de todas as formas possveis o seu desenvolvimento. Esta ferramenta possui um custo, mas tambm pode ser adquirida gratuitamente, se voc for estudante ou estiver desempregado. Atravs deste site1 possvel realizar o cadastro e obter o serial. Se este o seu primeiro contato com o Flash Builder, saiba que ele Trial, com 60 dias para teste, ento no preciso se apressar na busca de um serial.

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 e etc (meio que na unha), ficar a vontade com o MXML.
1

http://www.adobe.com/devnet-archive/flex/free/
Prof. Librio de Oliveira Jnior libajunior@gmail.com

2 Se voc nunca uso HTML, 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" width="186" id="Resultado:"/>

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 uno 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" width="186" id="Resultado:"/> <s:Button x="9" y="97" width="186" label="Executar"/> </s:Group>

Neste cdigo criamos um grupo de componentes, posicionando cada um no eixo x/y. Poderamos tambm criar componentes lados 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). Isto 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 ideia, o cdigo anterior de 8 linhas vai para no mnimo 100 linhas em Action Script.

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 verso atual do Action Script a 3, com um bom suporte a orientao a objetos e uma tima API vinda do Flash Player.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

3 Todo o cdigo MXML relativo aos componentes torna-se cdigos Action Script3. Isto , o <s:Label /> que criamos no MXML, na verdade uma classe em Action Script. O compilador faz esta converso no momento em que estamos compilando o projeto. Fazendo uma analogia ao desenvolvimento web tradicional, a dobradinha MXML + Action Script pode ser comparada com o HTML + JavaScript.

1.4 Instalando 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. Neste minicurso 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 o link2 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 teu 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 produtos que sero instalados, bem como o local. Voc pode deixar tudo como padro e clicar em Instalar. Para garantir que os plug-ins do flash player em modo debug sejam instalados, feche todos os navegadores abertos. Aguarde a concluso da instalao.

Captulo 2: Conhecendo o Flash Builder 4.5

2.1 Conhecendo o Workbench do Flash Builder 4.5
O termo workbench usado para ilustrar todos os recursos de visualizao do Flash Builder 4.5 relativos s suas configuraes e janelas. Como o Flash Builder 4.5 foi construdo

http://www.adobe.com/products/flash-builder.html
Prof. Librio de Oliveira Jnior libajunior@gmail.com

4 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, com como alteradas de posio. Podem estas ocultas ou no. Como existem muitas janelas normalmente organizadas em abas, o Eclipse criou um conceito chamado de Perspective, que a perspectiva das janelas de acordo com o contexto da aplicao. A perspectiva exibida no canto superior direito da aplicao e inicialmente vem com o padro Flash. Ao selecionar uma perspectiva qualquer, a organizao das janelas muda completamente, incluindo abas e ocultando outras, tudo para atender a nova perspectiva.

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 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 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 isto, 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 arquivo CSS apresenta outras particularidades. O mesmo vale para arquivos PHP, Java e 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.
Prof. Librio de Oliveira Jnior libajunior@gmail.com

5 Por exemplo, voc pode criar um projeto que contm somente componentes perolizados 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 no Flex no Flash Builder 4.5. A primeira delas ir at o menu File > 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, temos a disposio sete tipos de projetos diferentes, veja: Flex Project: Cria um projeto Flex que pode ser executado na Web ou no Desktop e que pode conectar-se a diversos tipos de servidor, como ColdFusion, Java ou PHP. Flex Library Project: Cria uma biblioteca de componentes para o 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 e foco deste minicurso. 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 desenho da aplicao e no h o recurso do 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 de Action Script Project, mas voltado para dispositivos mveis. Flash Professional Project: Cria um projeto Flash, porm necessrio ter o Flash Professional instalado no computador. Flash Catalyst Compatible Project: Cria um projeto que compatvel com o Flash Catalyst.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

Captulo 3: Criando o Projeto

3.1 Criando o Projeto Tecsul
Acesse o menu File > New > Flex Mobile Project para surgir o assistente para a criao do Projeto conforme a Figura 01.

Figura 01: Criando o projeto Flex Mobile

Este assistente tem 4 passos, sendo o primeiro deles exibidos na Figura 02. Nesta primeira tela voc deve informar o nome do projeto no campo Project Name, ou seja, digite Tecsul. Depois, voc indica aonde o projeto ser gravado (Project Location). Em nosso caso, devemos desmarcar a opo Use default location e no campo Folder informe o caminho C:\Tecsul2011\Tecsul. Em Flex SDK Version voc escolhe a verso do SDK que a aplicao ser compilada, neste caso o Default. Clique em Next para continuar.

Figura 02: Primeiro passo do assistente

Prof. Librio de Oliveira Jnior libajunior@gmail.com

7 No passo seguinte, devemos escolher o template da aplicao na guia Application Template, em nosso caso selecionaremos a View-Based Application e em Application settings, marque a opo Automatically reorient para que sua aplicao possa mudar o sentido vertical/horizontal quando o dispositivo e girado, como ilustra a Figura 03. Mude para a guia Permissions e marque a permisso INTERNET para que nossa aplicao possa fazer requisies a API do Google Maps e ACCESS_FINE_LOCATION para que possamos utilizar o GPS do dispositivo (Figura 04).

Figura 04: Segundo passo do assistente Configurando o template da aplicao

Figura 05: Segundo passo do assistente Alterando as permisses

Prof. Librio de Oliveira Jnior libajunior@gmail.com

O terceiro passo do assistente utilizado para definir o acesso ao servidor. Como no estaremos ligando nossa aplicao a nenhuma aplicao de backend utilizando Java, PHP, ColdFusion ou .NET vamos deixar o item None selecionado. A aplicao Flex compilada e no interpretada. Ou seja, aps voc programar a aplicao, ser compilada e todos os arquivos (XML e action script) sero reunidos em um nico arquivo com a extenso swf. Esta compilao tambm gera alguns arquivos extras e todos eles so criados no diretrio que est informado em Output folder. Por isto, deixe o bin-debug como padro, como est ilustrado na Figura 05, e clique em Next.

Figura 06: Terceiro passo do assistente

O ltimo passo chamado de Build Paths onde diversas configuraes so realizadas. Em Framework Linkage, definimos se o framework Flex ser adicionado junto aplicao ou em separado. Isto significa que voc pode ter uma aplicao com aproximadamente 100K e um framework com quase 1.5M, ou ento ter apenas um arquivo SWF com quase 1.6M. Vamos deixar o padro, que manter o framework separado, chamado de RSL. Em Build path libraries podemos adicionar novas bibliotecas (arquivos SWC) ao projeto. Podem-se adicionar novas bibliotecas em qualquer momento do desenvolvimento da aplicao. A seguir, temos quatro configuraes relacionadas s bibliotecas RSL, so elas:

Prof. Librio de Oliveira Jnior libajunior@gmail.com

9 Verify RSL digests: Verifica se os arquivos swf do framework so os mesmo da aplicao e do servidor. Esta verificao realizada atravs de um hash de nmeros (da o nome digest). Se voc desmarcar esta caixa sua aplicao poder usar os arquivos SWF de outra aplicao, podendo assim otimizar o seu carregamento, mas tambm apresentar problemas de segurana. Remove unused RSLs: Remove as bibliotecas que no so usadas. Ou seja, se voc no usar nenhum componente de uma determinada biblioteca, ela no ser copiada para o output folder. Use local debug RSL when debbuging: Com esta opo marcada, voc pode debugar o framework internamente, pois o mesmo open source. Automatically Determine Library Order Based On Dependencies: Determina automaticamente a ordem de carregamento das bibliotecas do framework. Aps estas configuraes, existem trs caixas de texto para a alterao de pastas e arquivos do projeto. So eles: Main source folder: O nome da pasta que conter o cdigo fonte do projeto. Deixe o padro src. Main application file: O nome do arquivo MXML da aplicao principal. Application ID: usado pela runtime AIR e pelo sistema operacional para identificar o aplicativo. A fim de garantir um nico Application ID, utilizamos uma conveno de nomenclatura que utilizar o domnio com o nome invertido. Por exemplo: br.org.tecsul. Para o nosso projeto, altere o valor deste campo para br.org.tecsul.tecsul2011. Precisaremos adicionar duas bibliotecas ao path libraries: a as3corelib que ir permitir a comunicao com a API do Google (a qual utilizaremos o formato JSON) e a Tecsul2011 que possui o componente do Google Maps. Clique no boto Add SWC e localize o arquivo as3corelib.swc que est no diretrio C:\Tecsul2011\library\ e clique em OK para adicionar. Repita o procedimento agora adicionando o arquivo Tecsul2011.swc. As configuraes do Build Path devero ficar como a Figura 07.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

10

Figura 07: Configurando o Build Path da Aplicao

3.2 Adicionando arquivos Externos

Vamos utilizar algumas imagens em nosso projeto. No diretrio do material (C:\Tecsul2011\) existe um diretrio chamado Imagens. Dentro deste diretrio h uma pasta chamada assets e voc dever copiar esta pasta e colar dentro do diretrio src do nosso projeto. Ou seja, dever copiar o diretrio assets que est em C:\Tecsul2011\Imagens para o diretrio C:\Tecsul2011\Tecsul\src. Resumindo: Dever ser copiado o d

3.3 API Key da Google

Para poder consumir a API do Google, precisamos criar uma chave para nossa aplicao (API key). Neste projeto iremos utilizar uma chave j criada para o Tecsul 2011, mas para voc utilizar em seus projetos futuros, visite o link3 e siga as instrues para gerar gratuitamente sua chave.

http://code.google.com/intl/pt-BR/apis/maps/signup.html
Prof. Librio de Oliveira Jnior libajunior@gmail.com

11

3.4 Manipulando a view TecsulHomeView

Vamos comear a trabalhar com a view no Modo Design, para nos acostumar com a ferramenta Flash Builder. Para alternar entre do Modo Desenho (Design Mode) para Modo Cdigo (Source Mode) acesse o menu Windows > Switch Source/Design Mode.

3.4.1 Modo Design

Para iniciarmos as alteraes da view TecsulHomeView, acesse o menu Windows > Show Views > Properties. Na barra de propriedades, defina os valores conforme a Figura 08.

Figura 08: Propriedades da view TecsulHomeView

Localizar na barra Components (Windows > Show View > Components) o componente Image e arrast-lo para dentro da view. Na sequencia, localizar o componente BusyIndicator e arrastar para dentro da view posicionando-o sob o componente Image. Por fim, localize o componente Label e o arraste para baixo do BusyIndicator, deixando a view com a aparncia da Figura 09.

Figura 09: Layout da view TecsulHomeView

Prof. Librio de Oliveira Jnior libajunior@gmail.com

12 Clique sobre o componente Image e na barra de propriedades localize o campo Source, clique sobre o cone e escolha a opo Single Bitmap. Navegue at o diretrio

C:\Tecsul2001\Tecsul\src\assets, escolha a imagem alert.gif e clique no boto Abrir. Vamos agora embutir a imagem alert.png em nosso projeto marcando a opo Embed que est logo abaixo do campo Source.

Voc dever ponderar o uso de imagens embutidas, pois isto ir interferir diretamente no tamanho do teu arquivo final.

As propriedades da imagem devero ter ficado como a Figura 10.

Figura 10: Propriedades do componente Image

Clique agora sobre o componente label inserido na view e altere suas propriedades. Localize o campo ID e digite statusLabel e apague o texto Label do campo Text, deixando-o em branco. Ao final, clique no boto OK. Ao final, as propriedades devero ficar como mostra a Figura 11:

Prof. Librio de Oliveira Jnior libajunior@gmail.com

13

Figura 11: Propriedades do componente Label

A view TecsulHomeView ter trs estados de visualizao (States): GPS No Suportado, Carregando e Normal. Para criar estes estados de visualizao, acesse o menu Windows > Show View > States. Na barra de States, clique no boto (New State). Na janela que ir

surgir informe o Name naosuportado e clique no boto OK. Repita a operao, s que agora informe o Name como carregando. A Figura 12 mostra a janela de New State dos dois casos.

Figura 12: Janelas de criao dos States

Para finalizar a criao dos states precisamos criar o estado Normal. Para esse ltimo no vamos criar um novo State como foi feito nos passos anteriores, vamos apenas alterar o nome do State1. Para isto, clique sobre o State1 na barra de States, e clique no boto State Properties). Altere o Name para normal e clique no boto OK, conforme Figura 13. (Edit

Prof. Librio de Oliveira Jnior libajunior@gmail.com

14

Figura 13: Janelas de edio do State Normal

Criados os States, precisamos configurar o que ser exibido em cada um deles. Iniciaremos pelo GPS No Suportado (naosuportado), pois neste estado dever ser exibido a imagem de alerta e o statusLabel. Clique sobre a imagem e localize a propriedade In states. Clique no campo e marque apenas o state em que voc deseja que aparea a imagem. Neste caso, marque somente o state naosuportado deixando-o como a Figura 14.

Figura 14: Definindo o State que ser exibido a imagem de alerta

Repita o procedimento para o BusyIndicator, porm escolha o state carregando, como pode ser visto na Figura 15.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

15

Figura 15: Definindo o State que ser exibido o BusyIndicator

No caso do statusLabel, vamos deixa-lo visvel em dois states: naosuportado e carregando, pois este componente ser utilizado para exibir o status do sistema. Veja como ficou sua propriedade na Figura 16.

Figura 16: Definindo em quais States devero ser mostrados o statusLabel

Aplicando um pouco de regras de usabilidade, vamos configurar nosso statusLabel para quando entrar no state de naosuportado, a aplicao dever mostrar a cor do texto como vermelho. Para isto, mude para o state naosuportado, selecione o statusLabel e clique sobre o quadro preto para alterar a cor da fonte. Surgir uma janela chamada Color Picker, informe os valores 160, 20 e 0 para os campos R: G: B:, respectivamente. A Figura 17 demostra como dever ser configurada o Color Picker.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

16

Figura 17: Color Picker com o RGB alterado.

Sempre que for alterar alguma propriedade de um componente ou fazer qualquer tipo de alterao, certifique-se que esteja fazendo isto na state correta.

Continuando com a implementao da view TecsulHomeView, precisamos agora definir quais elementos sero exibidos no state normal. Selecione o state normal e arraste um componente Image para a view. Define o Source (da mesma forma que foi feito na imagem de alerta) apontando para a imagem logomarca.gif. Arraste agora um List sob a imagem de logomarca e defina na barra de propriedades deste List a largura (width) e a altura (height) com 100% e o ID como tiposList, conforme na Figura 18.

Figura 18: Propriedades do componente List

A view TecsulHomeView deve estar com a aparncia parecida com a Figura 19:

Prof. Librio de Oliveira Jnior libajunior@gmail.com

17

Figura 19: Layout da view no state Normal

3.4.2 Modo Source

Vamos meter a mo na massa! Para isto, acesse o menu Windows > Switch Source/Design Mode para mudar do Modo Desenho (Design Mode) para Modo Cdigo (Source Mode) . Precisamos, ao iniciar o aplicativo, verificar se o dispositivo suporta GPS e se o acesso a ele permitido. Para isto, localize em seu cdigo fonte o bloco de cdigo abaixo:
TecsulHomeView.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" tabBarVisible="true" title="O que voc precisa?"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout>

Procure o caractere > que aparece antes da tag <s:layout> e posicione o mouse antes deste caractere. Pressione a tecla Enter para fazer uma quebra de linha. Adicione o evento creationComplete, deixando como o bloco abaixo:
TecsulHomeView.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" tabBarVisible="true" title="O que voc precisa?" creationComplete=""> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout>

Prof. Librio de Oliveira Jnior libajunior@gmail.com

18 Posicione o cursos do mouse entre as aspas duplas depois do evento e pressione a combinao de teclas Alt + Barra Espao. Ir surgir a janela de assistente de cdigo sugerindo a ao Generate CreationComplete Handler. Pressione Enter e crie um mtodo chamado init para este evento. Ficar como o bloco abaixo:
TecsulHomeView.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" tabBarVisible="true" title="O que voc precisa?" creationComplete="init(event)"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout>

Perceba que entre as tags s:layout e s:states foi criado uma tag s:Script idntico ao bloco abaixo:
TecsulHomeView.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" tabBarVisible="true" title="O que voc precisa?" creationComplete="init(event)"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import mx.events.FlexEvent; protected function init(event:FlexEvent):void { // TODO Auto-generated method stub } ]]> </fx:Script> <s:states> <s:State name="normal"/> <s:State name="naosuportado"/> <s:State name="carregando"/> </s:states>

Implemente os testes com o GPS do dispositivo, conforme o bloco abaixo:

TecsulHomeView.mxml
<fx:Script> <![CDATA[ import flash.sensors.Geolocation; import mx.events.FlexEvent; import spark.events.ViewNavigatorEvent; private var lat:Number; private var lng:Number; private var gps:Geolocation = new Geolocation();

Prof. Librio de Oliveira Jnior libajunior@gmail.com

19

protected function init(event:FlexEvent):void { if (Geolocation.isSupported) { if (this.gps.muted) { currentState = "naosuportado"; statusLabel.text = "O Acesso ao GPS foi negado"; } this.currentState = "carregando"; statusLabel.text = "Procurando sua geolocalizao"; this.gps.addEventListener(GeolocationEvent.UPDATE, onUpdateHandler); this.addEventListener(ViewNavigatorEvent.REMOVING,onRemoveHandler); } else { currentState = "normal"; this.lat=-26.2166667; this.lng=-52.6666667; } } private function onUpdateHandler(event:GeolocationEvent):void { this.lat = event.latitude; this.lng = event.longitude; this.currentState = "normal"; } private function onRemoveHandler(event:ViewNavigatorEvent):void { this.gps.removeEventListener(GeolocationEvent.UPDATE, onUpdateHandler); } ]]> </fx:Script>

Precisamos agora alimentar nossa lista de tipos de servios. Para isto vamos utilizar uma lista baseadas no Supported Place Types4 do Google que uma lista de tipos de lugares que a API do Google Maps suporta. Esta lista est implementada na biblioteca Tecsul2011.swc e o seu fonte pode ser encontrado no diretrio com o material do Tecsul2011. Para pegarmos esta lista, precisamos fazer algumas alteraes na tag List, como pode ser visto logo abaixo:
TecsulHomeView.mxml <s:List id="tiposList" includeIn="normal" width="100%" height="100%" dataProvider="{Consts.tipos}"/>

Logo aps digitar Consts pressione a combinao de teclas Alt + Espao para fazer o import da classe br.org.tecsul.Consts. Podemos testar agora nosso projeto. Ao clicar no boto para executar a aplicao,

ir surgir uma tela de configurao chamada Run Configurations. Marque a opo n desktop e selecione a opo Motorola Droid 2 conforme a Figura 20.

http://code.google.com/intl/pt-BR/apis/maps/documentation/places/supported_types.html
Prof. Librio de Oliveira Jnior libajunior@gmail.com

20

Figura 20: Parmetros de configurao

Ao final, o cdigo fonte ficar como o bloco abaixo:

TecsulHomeView.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" creationComplete="init(event)" tabBarVisible="true" title="O que voc precisa?"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import br.org.tecsul.Consts; import flash.sensors.Geolocation; import mx.events.FlexEvent; import spark.events.ViewNavigatorEvent; private var lat:Number; private var lng:Number; private var gps:Geolocation = new Geolocation(); protected function init(event:FlexEvent):void { if (Geolocation.isSupported) { if (this.gps.muted) { currentState = "naosuportado"; statusLabel.text = "O Acesso ao GPS foi negado"; } this.currentState = "carregando"; statusLabel.text = "Procurando sua geolocalizao"; this.gps.addEventListener(GeolocationEvent.UPDATE, onUpdateHandler); this.addEventListener(ViewNavigatorEvent.REMOVING,onRemoveHandler); } else { currentState = "normal"; this.lat=-26.2166667; this.lng=-52.6666667; } } private function onUpdateHandler(event:GeolocationEvent):void

Prof. Librio de Oliveira Jnior libajunior@gmail.com

21
{ this.lat = event.latitude; this.lng = event.longitude; this.currentState = "normal"; } private function onRemoveHandler(event:ViewNavigatorEvent):void { this.gps.removeEventListener(GeolocationEvent.UPDATE, onUpdateHandler); } ]]> </fx:Script> <s:states> <s:State name="normal"/> <s:State name="naosuportado"/> <s:State name="carregando"/> </s:states> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Image includeIn="normal" height="60" source="@Embed('assets/logomarca.gif')"/> <s:Image includeIn="naosuportado" source="@Embed('assets/alert.gif')"/> <s:BusyIndicator includeIn="carregando"/> <s:Label id="statusLabel" includeIn="carregando,naosuportado" color.naosuportado="#A01400"/> <s:List id="tiposList" includeIn="normal" width="100%" height="100%" dataProvider="{Consts.tipos}"/> </s:View>

3.5 Manipulando a view MapaView

Antes de comearmos a manipular o MapaView, precisamos cri-lo. Para isto clique com o boto direito sobre o pacote views, escolha a opo New > MXML Component. Preencha o Name com MapaView e escolha o VerticalLayout no campo Layout como pode ser visto na Figura 21.

Figura 21: Janela de criao do componente MapaView

Prof. Librio de Oliveira Jnior libajunior@gmail.com

22

3.5.1 Modo Design

Para iniciarmos as alteraes da view MapaView, mude de Modo Source para Modo Design. Vamos comear adicionando um boto na Action Bar que ter a funo de voltarmos para a tela inicial. O Action Bar o controle responsvel em adicionar o contedo no titulo da aplicao Mobile. Ele no um controle que necessariamente arrastado para a tela, mas sim um controle oculto usado internamente por alguns componentes do framework. Acesse o menu Windows > Show Views > Components e arraste um boto (Button) para o canto superior direito da tela. Quando o boto, ainda sendo arrastado, chegar rea de actionContent ir surgir uma borda azul indicando aonde ele deve ser solto. A Figura 22 demonstra como dever aparecer. D um duplo clique no boto e altere o texto de Button para Voltar.

Figura 22: Boto sendo arrastado para rea invisvel chamada actionContent

Ainda no boto Voltar, localize a opo On click na barra de propriedades e digite {navigator.popView()}. Isto far com que voltemos ao TecsulHomeView ao clicar neste boto. Vamos repetir os procedimentos feito na view TecsulHomeView, definindo para o view MapaView as propriedades Align como Center e Top como 5. Na sequencia, incluindo uma imagem (alert.gif) um BusyIndicator e um Label. Aponte o source do componente Image para o alert.gif e marque a opo Embutir. Nomeie o componente Label como statusLabel e apague o texto do mesmo. A view MapaView tambm ter os mesmo estados de visualizao do TecsulHomeView. Repita os passos para criao dos States naosuportado, carregando e normal. Repita tambm a configurao dos componentes que sero exibidos em cada state:
Prof. Librio de Oliveira Jnior libajunior@gmail.com

23 naosuportado aparece apenas imagem de alerta e o statusLabel; carregando aparece o BusyIndicator e o statusLabel. No se esquea de mudar a cor do label statusLabel quando ele estiver no state carregando. Selecionando o State normal, adicione uma imagem com a logo do Tecsul, como fizemos na view TecsulHomeView. Localize o componente GMaps e arraste para baixo da logo inserida anteriormente. Na barra de propriedades, defina a largura (width) e altura (height) com 100%. A Figura 23 demostra como ficar o resultado final da view.

Figura 22: MapaView depois de pronta

Antes de iniciarmos a codificao, na barra de States, selecione o state carregando e clique no boto (Edit State Propertie). Na janela que ir surgir (Figura 23) marque a opo

Set as start state para definirmos este state como o inicial.

Figura 23: Setando o state carregando como o estado inicial da view

Prof. Librio de Oliveira Jnior libajunior@gmail.com

24

3.5.2 Modo Source

Para comearmos as alteraes, altere para o modo Source, selecionando o menu Windows > Switch Source/Design Mode. Localize o cdigo abaixo:
MapaView.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" xmlns:tecsul="br.org.tecsul.*" currentState="carregando" title="MapaView"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout>

Precisamos criar um mtodo que ser disparado quando a view for ativada. Este mtodo tambm receber parmetros vindos da view TecsulHomeView. Veja no bloco abaixo as alteraes feitas no bloco anterior.
MapaView.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" xmlns:tecsul="br.org.tecsul.*" currentState="carregando" title="MapaView" viewActivate="activeHandler(event)"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import spark.events.ViewNavigatorEvent; protected function activeHandler(event:ViewNavigatorEvent):void { // TODO Auto-generated method stub } ]]> </fx:Script>

Vamos implementar o mtodo activeHandler conforme o bloco abaixo. Primeiramente precisaremos declarar alguns atributos que iremos utilizar e dentro do mtodo iremos alimentar estes atributos com valores vindos da view TecsulHomeView. O nico atributo que no ser alimentado pela view anterior o atributo lugares. Este atributo na verdade ser uma lista de lugar que a API do Google ir retornar baseado no parmetro tipo.

Prof. Librio de Oliveira Jnior libajunior@gmail.com

25
MapaView.mxml
<fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import spark.events.ViewNavigatorEvent; [Bindable] [Bindable] [Bindable] [Bindable] [Bindable] private private private private private var var var var var tipo: String; tipoLabel: String; myLat: Number; myLng: Number; lugares: ArrayCollection;

protected function activeHandler(event:ViewNavigatorEvent):void { this.tipo = data.selected.id; this.tipoLabel = data.selected.label; this.myLat = data.lat; this.myLng = data.lng; statusLabel.text = "Carregando "+ this.tipoLabel +"..."; } ]]> </fx:Script>

Altere o title da view para {this.tipoLabel} para que mostre o ttulo do tipo. Para que seja feito a requisio da API, precisamos adicionar um componente no visual que responsvel por fazer chamadas HTTP. Localize a tag <fx:Declarations> e implemente conforme o bloco abaixo:
MapaView.mxml
<fx:Declarations> <s:HTTPService id="httpService" result="event.token.resultHandler(event)" fault="event.token.faultHandler(event)" /> </fx:Declarations>

Continuando a codificao do mtodo activeHandler, precisamos agora chamar a API do Google solicitando uma lista de lugar contendo os lugares classificados pelo Google por tipo. Nesta requisio precisaremos tambm repassar o API Key da aplicao e o raio (5000m), em metros, que os lugares devero estar da geolocalizao do seu dispositivo.
MapaView.mxml
protected function activeHandler(event:ViewNavigatorEvent):void { this.tipo = data.selected.id; this.tipoLabel = data.selected.label; this.myLat = data.lat; this.myLng = data.lng; statusLabel.text = "Carregando "+ this.tipoLabel +"..."; var url url url url:String = "https://maps.googleapis.com/maps/api/place/search/json?"; += "location="+ this.myLat.toString() +","+ this.myLng.toString(); += "&radius=5000&types="+ this.tipo +"&key="+ Consts.APIKEY; += "&sensor=true";

httpService.url = url; var async:AsyncToken = httpService.send(); async.resultHandler = onResultHandler; async.faultHandler = oFaultHandler;

Prof. Librio de Oliveira Jnior libajunior@gmail.com

26
}

Precisamos agora criar dois mtodos: o onResultHandler que ser disparado se tudo der certo e o onFaultHandler que ser disparado se ocorrer algum erro na requisio. O bloco de Scripts ficar como o abaixo:
MapaView.mxml
<fx:Script> <![CDATA[ import br.org.tecsul.Consts; import com.adobe.serialization.json.JSON; import import import import mx.collections.ArrayCollection; mx.rpc.AsyncToken; mx.rpc.events.FaultEvent; mx.rpc.events.ResultEvent;

import spark.events.ViewNavigatorEvent; [Bindable] [Bindable] [Bindable] [Bindable] [Bindable] private private private private private var var var var var tipo: String; tipoLabel: String; myLat: Number; myLng: Number; lugares: ArrayCollection;

protected function activeHandler(event:ViewNavigatorEvent):void { this.tipo = data.selected.id; this.tipoLabel = data.selected.label; this.myLat = data.lat; this.myLng = data.lng; statusLabel.text = "Carregando "+ this.tipoLabel +"..."; var url url url url:String = "https://maps.googleapis.com/maps/api/place/search/json?"; += "location="+ this.myLat.toString() +","+ this.myLng.toString(); += "&radius=5000&types="+ this.tipo +"&key="+ Consts.APIKEY; += "&sensor=true";

httpService.url = url; var async:AsyncToken = httpService.send(); async.resultHandler = onResultHandler; async.faultHandler = oFaultHandler; } private function onResultHandler(event:ResultEvent): void { var resultData:Object = JSON.decode(event.result.toString()); if (resultData.status == "OK") { this.lugares = new ArrayCollection(resultData.results); currentState = "normal"; } else if(resultData.status == "ZERO_RESULTS") { currentState = "naosuportado"; statusLabel.text = "Nenhum registro foi encontrado"; } else { currentState = "naosuportado"; statusLabel.text = resultData.status; } } private function oFaultHandler(event:FaultEvent): void { currentState = "naosuportado"; statusLabel.text = event.fault.toString(); } ]]> </fx:Script>

Prof. Librio de Oliveira Jnior libajunior@gmail.com

27 Entendendo o mtodo onResultHandler: Como este mtodo disparado quando a API do Google responder a requisio e como o formato de resposta um JSON, precisamos converter o retorno em um objeto JSON. Na sequencia, feito uma verificao para saber se o retorno est OK (existes lugares para o tipo escolhido) se ZERO_RESULTS (se no encontrou nenhum lugar) e se ocorreu algum erro. Se o retorno for OK, alimenta o atributo lugares com os lugares encontrados e mostra o estado normal da view. Se no encontrar nenhum lugar (ZERO_RESULTS), simplesmente muda para o state naosuportado e mostra a mensagem que no encontrou nenhum registro. Se der algum erro, ou seja, se o retorno no for nem OK e nem ZERO_RESULTS, mostra o state nosuportado com o retorno enviado. J no mtodo onFaultHandler, foi implementado para, se ocorrer algum erro na requisio, direciona para o state naosuportado e mostra o erro que ocorreu. Ao final, o cdigo fonte dever ficar como o abaixo:
MapaView.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" xmlns:tecsul="br.org.tecsul.*" currentState="carregando" title="MapaView" viewActivate="activeHandler(event)"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import br.org.tecsul.Consts; import com.adobe.serialization.json.JSON; import import import import mx.collections.ArrayCollection; mx.rpc.AsyncToken; mx.rpc.events.FaultEvent; mx.rpc.events.ResultEvent;

import spark.events.ViewNavigatorEvent; [Bindable] [Bindable] [Bindable] [Bindable] [Bindable] private private private private private var var var var var tipo: String; tipoLabel: String; myLat: Number; myLng: Number; lugares: ArrayCollection;

protected function activeHandler(event:ViewNavigatorEvent):void { this.tipo = data.selected.id; this.tipoLabel = data.selected.label; this.myLat = data.lat; this.myLng = data.lng; statusLabel.text = "Carregando "+ this.tipoLabel +"...";
var url:String = "https://maps.googleapis.com/maps/api/place/search/json?";

url += "location="+ this.myLat.toString() +","+ this.myLng.toString(); url += "&radius=5000&types="+ this.tipo +"&key="+ Consts.APIKEY; url += "&sensor=true"; httpService.url = url; var async:AsyncToken = httpService.send(); async.resultHandler = onResultHandler;

Prof. Librio de Oliveira Jnior libajunior@gmail.com

28
async.faultHandler = oFaultHandler; } private function onResultHandler(event:ResultEvent): void { var resultData:Object = JSON.decode(event.result.toString()); if (resultData.status == "OK") { this.lugares = new ArrayCollection(resultData.results); currentState = "normal"; } else if(resultData.status == "ZERO_RESULTS") { currentState = "naosuportado"; statusLabel.text = "Nenhum registro foi encontrado"; } else { currentState = "naosuportado"; statusLabel.text = resultData.status; } } private function oFaultHandler(event:FaultEvent): void { currentState = "naosuportado"; statusLabel.text = event.fault.toString(); } ]]> </fx:Script> <s:states> <s:State name="normal"/> <s:State name="naosuportado"/> <s:State name="carregando"/> </s:states> <fx:Declarations> <s:HTTPService id="httpService" result="event.token.resultHandler(event)" fault="event.token.faultHandler(event)" /> </fx:Declarations> <s:actionContent> <s:Button label="Voltar" click="{navigator.popView()}"/> </s:actionContent> <s:Image includeIn="naosuportado" source="@Embed('assets/alert.gif')"/> <s:BusyIndicator includeIn="carregando"/> <s:Label id="statusLabel" includeIn="carregando,naosuportado" color.naosuportado="#A01400"/> <s:Image includeIn="normal" source="@Embed('assets/logomarca.gif')"/> <tecsul:GMaps id="gmaps" includeIn="normal" width="100%" height="100%" placeList="{this.lugares}"/> </s:View>

3.5.3 Chamando o MapaView

Abra novamente o TecsulHomeView, mude para o Source, selecionando o menu Windows > Switch Source/Design Mode e localize o bloco abaixo:
TecsulHomeView.mxml <s:List id="tiposList" includeIn="normal" width="100%" height="100%" dataProvider="{Consts.tipos}"/>

Antes dos caracteres \> digite click= e pressione as teclas Ctrl + Barra para chamar o wizard, escolha a opo Generater Click Handler e digite clickHandler.
TecsulHomeView.mxml <s:List id="tiposList" includeIn="normal" width="100%" height="100%" dataProvider="{Consts.tipos}" click="clickHandler(event)"/>

Prof. Librio de Oliveira Jnior libajunior@gmail.com

29 Ser gerado ao final da tag Script um mtodo chamado clickHandler. Implemente como o bloco a seguir.
TecsulHomeView.mxml
protected function clickHandler(event:MouseEvent):void { navigator.pushView(MapaView,{selected:tiposList.selectedItem,lat:lat,lng:lng}); }

Ao final, dever ter ficado um cdigo como o abaixo:

TecsulHomeView.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="O que voc precisa?" creationComplete="init(event)" > <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import br.org.tecsul.Consts; import flash.sensors.Geolocation; import mx.events.FlexEvent; import spark.events.ViewNavigatorEvent; private var lat:Number; private var lng:Number; private var gps:Geolocation = new Geolocation(); protected function init(event:FlexEvent):void { if (Geolocation.isSupported) { if (this.gps.muted) { currentState = "naosuportado"; statusLabel.text = "O Acesso ao GPS foi negado"; } this.currentState = "carregando"; statusLabel.text = "Procurando sua geolocalizao"; this.gps.addEventListener(GeolocationEvent.UPDATE, onUpdateHandler); this.addEventListener(ViewNavigatorEvent.REMOVING,onRemoveHandler); } else { currentState = "normal"; this.lat=-26.2166667; this.lng=-52.6666667; } } private function onUpdateHandler(event:GeolocationEvent):void { this.lat = event.latitude; this.lng = event.longitude; this.currentState = "normal"; } private function onRemoveHandler(event:ViewNavigatorEvent):void { this.gps.removeEventListener(GeolocationEvent.UPDATE, onUpdateHandler); } protected function clickHandler(event:MouseEvent):void {
navigator.pushView(MapaView,{selected:tiposList.selectedItem,lat:lat,lng:lng});

} ]]> </fx:Script> <s:states> <s:State name="normal"/>

Prof. Librio de Oliveira Jnior libajunior@gmail.com

30
<s:State name="naosuportado"/> <s:State name="carregando"/> </s:states> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Image includeIn="normal" height="60" source="@Embed('assets/logomarca.gif')"/> <s:Image includeIn="naosuportado" source="@Embed('assets/alert.gif')"/> <s:BusyIndicator includeIn="carregando"/> <s:Label id="statusLabel" includeIn="carregando,naosuportado" color.naosuportado="#A01400"/> <s:List id="tiposList" includeIn="normal" width="100%" height="100%" dataProvider="{Consts.tipos}" click="clickHandler(event)"/> </s:View>

Prof. Librio de Oliveira Jnior libajunior@gmail.com

31

REFERNCIAS BIBLIOGRFICAS
SCHMITZ, Daniel. Dominando Adobe Flex 4.5. Editora Prpria. So Paulo, 2011. SCHMITZ, Daniel. Dominando o Flex e Java. Editora Prpria. So Paulo, 2010. CAMDEN, Raymond. ColdFusion Jedi: INeedIt - Simple Flex Mobile example. Disponvel em < http://migre.me/5GBOx>. Acessado em: 09/09/2011.

Prof. Librio de Oliveira Jnior libajunior@gmail.com