AIR 2.7/ Flex/ Flex 4.5/ Flex Mobile Framework

Criando seu primeiro aplicativo Flex 4.5 Mobile para smartphones Android parte (2 de 3)

Caso você tenha chegado direto nessa matéria, ela é uma série de 3 partes, essa é a segunda. Se quiser ler do começo, clique aqui.

A estrutura de uma aplicação Android

Uma aplicação Android é como um arquivo .zip, de fato sua extensão .apk é um pacote com a mesma estrutura de um arquivo .zip, onde tem todos os elementos necessários para serem identificados no sistema operacional e assim sua aplicação existir e ter funcionabilidade.

Então, assumindo a premissa que um arquivo .apk seja uma aplicação Android, sua estrutura parte de 3 pilares básicos.

  • Código fonte escrito em Java e usando API do Android SDK
  • Estrutura de organização do projeto
  • Arquivos de mídia

filestructure

Com essa estrutura simplificada você consegue entender facilmente onde vai caber o arquivo de .swf que é embarcado dentro de seu pacote .apk, Na pasta de arquivos de mídia.

Essa pasta guarda o swf compilado com o Flex Framework e as suas classes em um único SWF, evitando assim os preloads, ou erros de fuga que possam ocorrer durante o processo de uso da app, garantindo não só a solidez de uma aplicação flex mobile como sua portabilidade entre diferentes telas e requisitos de sistema Android.

flex_apk_estrutura

Na imagem acima, você pode ver que o time do Flex conseguiu adotar o padrão “assets”, amplamente usado por apps RIA. Vai dizer que você nunca colocou seus ícones dentro desse diretório? A pasta assets substitui naturalmente a pasta /res que guarda esses recursos.

Já que você viu a estrutura de onde vão as coisas, que tal se aprofundar agora no arquivo de maior importância para a estrutura de um app Android?

O arquivo AndroidManifest.xml é a espinha dorsal que faz com que um App seja um App, é o mesmo que sua coluna vertebral, embora você só lembre dela quando está com dores nas costas, a coluna vertebral nos ajuda a definir nossas capacidades musculares, andar hereto e também ter dores 😀

Em fim, o arquivo AndroidManifest.xml ele é uma espécie de coluna vertebral + nervos especiais que definem funções do que sua aplicação mobile vai acessar, requisitar, armazenar e interagir.

Tudo que você faz no AndroidManifest.xml é mapear acessos, requisições e o mais importante permissões, tudo a base de tag de XML. E uma das coisas bem fantásticas disso tudo é que o pessoal da Adobe fez isso de uma forma bem legal, deixando apenas agente se preocupar com os acessos, o que sua App vai acesssar, como GPS, Acelerometro, cartão de memória, Camera e por ai vai. O resto eles cuidam para gente.

Então você sabendo com o que você vai lhe dar, é ultra simples encarar o desafio, veja aqui as permissões existentes no Android, onde nem todas são acessíveis pelo Adobe AIR, algumas apenas são possíveis de acessar por padrão, dentre elas:

air_permissions_by_default

Ufa, chega de explicações, então está preparado para começar a criar seu primeiro projeto Flex Mobile no Flash Builder 4.5.1 ? Vamos lá.

Para criar um novo projeto é simples, existem 3 maneiras:

  • CTRL+N Cria um novo projeto pelo Wizard escolhendo a categoria Flex e depois Flex Mobile Project
  • Vá ao menu File -> New -> Flex Mobile Project
  • Ou usando o Navigator do Flash Builder com o botão direito File -> New -> Flex Mobile Project

De todas as opções, a mais rápida e que praticamente desenvolvedores usam é a terceira, por que economiza tempo na criação e atalhos.

new_flexmobile_project

Lembre-se de setar o SDK que você fez o overlay para a versão Flex 4.5.1 SDK com o AIR 2.7, é super simples de fazer isso, basta clicar na opção Configure SDKs e adicionar o diretório onde você tem o SDK com overlay.

Quando você dá um nome ao projeto, ele particularmente vira o nome da App que você está publicando para o Android Market, então dê nomes simples sem acentos para que você consiga alcançar não só a Android Market Brasileira mais a mundial.

A idéia do nome para App.

Meu aplicativo será um pesquisador de tags do twitter, onde eu vou analisar em diferentes intervalos e tags o que anda rolando na rede social, vou chamar ele de TagsMonitor.

Dado o nome da App de TagsMonitor, eu vou clicar em Next.

config_flexmobile_project

Essa próxima tela é a essência da configuração de sua App.Para não deixar de explicar cada passo, separei por tópicos para você não perder o raciocínio.

Escolhendo a plataforma de publicação

target_platforms

Com configurações extras e exatas você consegue fazer para as outras. Como agente só vai fazer para Android deixo apenas marcado Android.

Escolhendo o template para a aplicação

Existem 3 tipos de aplicação Flex Mobile que você pode fazer, esses templates definem o comportamento de como ela apresenta para o usuário final, os tipos são:
Blank – Uma tela branca onde você tem liberdade de fazer o que quiser, semelhante ao que o Flash também proporciona.
View-Base – Uma tela com um sistema de navegação para N Views(telas). Semelhante ao ViewStack do Flex 2/3.
Tabbed – Que é como o antigo TabNavigator do Flex 2/3 e semelhante ao View-Base, a diferença é que você terá abas prontas para navegar.

view_base_app

Essas diferenças são aplicadas em variados tipos de aplicações e em qual o propósito de sua aplicação. O template mais comum que usaremos é o View-Base. Marque essa opção e pulamos para o próximo tópico.

Permissões acessadas

permissions_config

Como você sabe que para consultar a internet do seu aplicativo dentro de um dispositivo Android você precisa permissões, o Flash Builder por padrão já entende isso e deixa marcado já para você. Se você quiser acessar os outros recursos basta marcar aquele que você deseja. Próximo passo.

Densidade dos dispositivos

Cada fabricante tem seu próprio formato de densidade, até mesmo usando o mesmo OS como é o Android. Uma soma geral de densidades e tipos de telas você pode achar aqui. Que é a referência básica que o Android dispõe baseado em estatísticas coletadas.

google_densidades

A coisa mais legal do Google é que eles atualizam constantemente essas densidades e tamanhos de telas;Felizmente grande parte dos 550mil dispositivos ativados diariamente são normais, tanto no tamanho da tela quanto em sua densidade, que pode variar pouco entre um fabricante e outro. Até por que existe o mundo dos tablets Android e você pode considerar também a criação para ele.

No geral a média é de 240dpi. O que já facilita para gente, que é basicamente o padrão de mercado consideramos assim.

density_config

As outras partes, acredito eu que você vai deduzir que sejam Auto-reorientação que por padrão vem marcado, isso faz sua app ficar responsiva em trabalhar tanto com o device na horizontal ou na vertical.
FullScreen marcando essa opção ele vai esconder a parte do relógio e status, rodando sempre em primeiro plano e deixando o resto da interface gráfica do sistema em segundo plano.
E a última opção que vem é auto escalonar sua aplicação para os padrões de DPI, a Adobe acredita que 160dpi está ótimo, eu discordo dessa abordagem e considero mais padrão 240dpi do que os 160dpi padrão. Seja esperto e marque essa opção e mude de 160dpi para 240dpi.

Clique em Finish. E seu projeto já está pronto para você começar a elaborar sua navegação.

Para fazer a prototipação desse App, usarei o Balsamiq Mockup, bem simples para você prototipar suas apps ou qualquer coisa. Se você tem a licença do Balsamiq, aqui está o código gerado do meu mockup, basta importar para a ferramenta e dá continuidade ou alterar.

mockup

Eu acabei chegando nessa configuração para esse novo App, é bem simples e funcional. O propósito desse App é ajudar você acompanhar hashtags ou termos utilizados no Twitter em um intervalo de tempo, ajudando você acompanhar as reações.

Navegando entre as views

Navegar entre as telas de uma App móvel é muito simples, e o pessoal da API bolou um esquema bem funcional, quando você imagina em telas você imagina a navegação saindo de um ponto A na tela A para um ponto B na tela B.
Apps móveis é 90% parecida com esse esquema de navegação, só que existem 2 fatores essenciais que as mudam, uma que a API só te leva de um ponto A da tela A para Tela B, não existe esse certo centrismo de um ponto específico para a outra tela; E o segundo fator que leva essa navegação é a maneira como você interage com ela, seja por toque ou seja por gesto, inverso do tradicional clique ou duplo clique de mouse.

navigator

Na imagem acima, você pode ver que a API utilizada pelo Flex para navegar entre Views, que é o componente principal de uma aplicação Flex Mobile é uma exclusiva palavra reservada que faz toda a diferença e dinâmica para trazer à vida sua App.

O “navigator”, é a palavrinha mágica que faz essa navegação, digamos que ela seja um Array que guarda o registro de cada tela, onde você executa alguns comandos básicos para navegar entre as views através dela. Esses comandos básicos são:

  • navigator.pushView(viewClass,data,context,transition);
  • navigator.popAll(transition);
  • navigator.popToFirstView(transition);
  • navigator.popView(transition);

Se você conhece bem de Array, sabe que comandos do tipo Pop, push, geralmente são associados a remoção e adição. É justamente isso que esses comandos faz, o primeiro o pushView, adiciona uma nova View ao navigator, o popAll, remove todas as Views do navigator, o popToFristView remove todas as telas, exceto a primeira, e o popView remove a View atual e volta para View anterior.

Definindo suas Views

Eu já sei como funciona a navegação, então vamos criar nossas Views, a primeira coisa que você deve pensar é em organiza-las, o Flash Builder deixa já por padrão dentro de um diretório views, eu particularmente gosto dessa configuração, deixando as views em um só diretório e colocando o inverse domain suas classes que irão manipula-la é quase perfeita sem precisa nenhum design pattern.

Minha primeira tela é a HomeView.mxml

home_view

Ela tem o seguinte código.

<?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"
		actionBarVisible="false" title="HomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="#52a2cb"/>
		</s:fill>
	</s:Rect>
	<s:Image x="74" y="48" source="assets/logo.png"/>
	<s:Label x="56" y="357" color="#FFFFFF" text="20 Tags"/>
	<s:Label x="304" y="357" color="#FFFFFF" text="30 Menções"/>
	<s:Button x="73" y="428" width="333" height="65" label="Novo hashtag"
			  icon="assets/tag_add_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Button x="73" y="505" width="333" height="65" label="Hashtags pesquisadas"
			  icon="assets/book_bookmark_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Button x="73" y="580" width="333" height="65" label="Configurações"
			  icon="assets/gear_48.png" skinClass="com.riacycle.skins.WhiteButtonSkin"/>
</s:View>

A próxima tela que eu preciso criar é a NovaView.mxml

nova_view

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark" title="Nova hashtag">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:Button x="231" y="157" width="218" height="66" label="Adicionar" icon="assets/plus_48.png"
			  skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Label x="43" y="51" color="#3A74CC" text="Termo"/>
	<s:TextInput x="42" y="82" width="403" height="64"/>
</s:View>

A próxima tela HashtagView.mxml é onde eu vou acompanhar as menções feitas pelos usuários do twitter.

hashtag_view

<?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="Termo: #exemplo">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:actionContent>
		<s:Button icon="assets/arrow_circle_right_48.png"/>
	</s:actionContent>
	<s:List left="2" right="2" top="2" bottom="2"></s:List>
</s:View>

E a última View necessária para montarmos nossa App é a ConfigView.mxml onde, algumas configurações básicas serão adicionadas ao nosso App, para deixar ele um pouco personalizado.

config_view

Com o seguinte código:

<?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="Configurações">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:navigationContent>
		<s:Button icon="assets/arrow_left_48.png"/>
	</s:navigationContent>
	<s:actionContent>
		<s:Button icon="assets/checkmark_48.png"/>
	</s:actionContent>
	<s:HSlider x="20" y="158" value="4"/>
	<s:Label x="19" y="37" text="Configurações gerais do App"/>
	<s:Label x="19" y="123" text="Intervalo entre consultas"/>
	<s:Label x="318" y="215" fontStyle="italic" text="Em minutos"/>
	<s:Button x="88" y="354" height="65" label="Apagar todo o histórico"
			  skinClass="com.riacycle.skins.WhiteButtonSkin"/>
	<s:Label x="22" y="317" text="Histórico de pesquisas"/>
</s:View>

Bem, até aqui nós definimos todas as Views que esse App pode apresentar, assim como um preview de cada dela, elas podem mudar no decorrer do artigo com algumas modificações simples e essenciais.

Para você acompanhar como ficou a organização do projeto, compartilho aqui o código fonte do projeto para você importar para seu Flash Builder.

Dica: Para salvar basta clicar no link com botão direito do mouse e escolher salvar como…

Até a próxima e última parte do artigo onde eu vou mostrar como codificar isso e publicar no Android Market.

8 thoughts on “Criando seu primeiro aplicativo Flex 4.5 Mobile para smartphones Android parte (2 de 3)

  1. Muito bom o artigo….

    Baixei o arquivo, mas na hora de importar no flex dá o seguinte erro: ‘the specified file is not a valid archive file’

  2. Tbm não estou conseguindo baixar o arquivo.
    quando vc acha que vai sair a terceira e ultima parte?
    seria possivel ensinar tbm como colocar o icone que vai ficar no menu do telefone?

  3. Igor,

    Gostaria de saber se posso testar minha aplicação no meu android sem precisar me resgistar no android market, tipo criar o pacote e passar para meu celular via usb ou algo parecido.

    • Sim, Sérgio

      Pode usar sim sem a necessidade de usar a licença de publicador do Android Market.

      Ela é apenas para distribuir na loja, para criar nao há necessidade.

  4. Olá amigo, primeiramente gostaria de agradeçer pelo seu tutorial, foi de grande ajuda pra mim.
    Gostaria de saber como proceder pra colocar um ícone no meu aplicativo flex. Eu criei um app simples, tipo “Olá mundo”, dai compilei e usei o flash builder 4.5 pra desenvolver e rodar direto no Android 2.3. Mas a app fica com o icone do ROBOZINHO (rs..) como faço pra trocar esse icone? É muito complexo? Agradeço sua ajuda. abraço.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *