Adobe AIR 101/ AIR 1.0/ AIR 1.1/ AIR 2.0/ AIR 2.7/ AIR 3.0/ AIR Mobile/ Flash Player

Adobe AIR perde o foco para criar Apps para dispositivos móveis

air_2_lg.jpg.adimg.mw.138

A Adobe hoje atualizou o Flash Player e Adobe AIR Whitepapers, que é um documento público mostrando as intenções da empresa desde sua mudança de foco nos últimos 2 anos.

Hoje ela acredita que suas plataformas Flash Player/ Adobe AIR continuaram fortes na arquitetura atual e abandorá todos os esforços na criação da próxima versão do Actionscript Next e Flash Player Next, que possivelmente seriam o Actionscript 4.0 e o Flash Player 12.

Ela voltará seu foco em novas VM como o V8 por exemplo do Google Chrome ou o Webkit amplamente utilizado por vários fabricantes de navegadores.
Com essas novas atualizações dos documentos, houve Buzz e ainda vai ter, veja alguns destaques de pessoas importantes dentro da empresa, e suas visões em relação à plataforma.

Já que a regra vale a máxima, Uma imagem vale mais do que mil palavras, quanto mais uma declaração como essa.

adobe_airmobile

 

Sim, nós não estamos promovendo o AIR para criação de apps para smartphones. Eu concordo que o AIR é ótimo com o Starling e o Feathers, já que você tem uma velocidade quase nativa.

 

Essa foi uma das declarações feita por alguns dos evangelistas da Adobe, em especial o Lee no Google Plus e está disponível para quem quiser ler, que hoje lidera a parte de evangelismo para Jogos.

Não é polêmica a declaração, só reafirma que o compromisso da Adobe não é só manter o foco na plataforma Flash/AIR em sí, mas dar ênfase à outra parcela de desenvolvedores que adotam o padrão aberto.

Na mesma discussão Mike Chambers reforça que o foco da Adobe para plataforma Flash é Jogos.

adobe_airmobile2

 

 

Não é que você precisa ficar desesperado por que o suporte ao Adobe AIR vai sumir do mapa e você não vai mais conseguir criar Apps usando o Adobe AIR, só para você saber quando e como usar o AIR em suas Apps, mesmo usando ele embedado na sua App.
Essa ficará para história de como destruir um eco-sistema enorme de desenvolvedores para concorrentes.

Adobe AIR 101/ AIR 2.7/ AIR 3.0

Adobe AIR 101 – Como posicionar a tela do meu App no sistema operacional?

Hoje inicio uma série de posts sobre Adobe AIR, eu venho prometendo isso faz séculos, mesmo depois de ter colocado dois cursos de Adobe AIR on-line, sempre faltava aquele tempinho extra.
Nada melhor como uma ótima sexta-feira ensolarada de Sampa para começar essa série. O que é 101 séries?
Basicamente são 101 receitas de como você faz isso ou aquilo, seja em qualquer tecnologia.

O post inaugural da série seria, como posicionar a janela do meu App no sistema operacional?

É muito simples a solução. Como explicar essa facilidade? Quando você cria uma nova App no Flash Builder para a plataforma AIR, você geralmente usa o componente WindowedApplication, o WindowedApplication é a Raiz do App, você pode até trocar mais basicamente cada nova Janela Window ou Windowed que você adiciona no AIR, ele acaba indo para o systemManager, onde você pode administrar facilmente.

Cada classe Window fica armazenda no momento em que ela é criada, sendo assim o systemManager recebe elas e o NativeApplication, onde SystemManager é gerenciado pelo run-time AIR, ai é só fazer a continha básica da herança que você chegará ao resultado.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   width="555" height="381">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import spark.components.Window;
 
 
 
 
			protected function changeWindowPosition(event:MouseEvent):void
			{
				if(_x.text != '' && _y.text != ''){
					nativeApplication.activeWindow.x = Number(_x.text);
					nativeApplication.activeWindow.y = Number(_y.text);
				}
			}
 
		]]>
	</fx:Script>
	<s:Button x="62" y="134" width="137" height="31" label="Mover"
			  click="changeWindowPosition(event)"/>
	<s:Form x="32" y="15">
		<s:FormItem label="x">
			<s:TextInput id="_x"/>
		</s:FormItem>
		<s:FormItem label="y">
			<s:TextInput id="_y"/>
		</s:FormItem>
	</s:Form>
</s:WindowedApplication>

Veja o código acima, como eu sei que a Janela Atual é o Próprio App, então eu não preciso instanciar ela, já que ela está visível, basta eu usar a propriedade nativeApplication e janela ativa (activeWindow) e eu consigo chegar onde eu quero para move-la de posição.

Outro exemplo bem legal que se pode fazer é o uso de efeitos, veja o mesmo código abaixo, só que agora com efeitos.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
					   xmlns:s="library://ns.adobe.com/flex/spark"
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   width="555" height="381" xmlns:interfaces="com.riacycle.interfaces.*">
	<fx:Declarations>
	<interfaces:JanelaInterpolator id="interpola"/>
 
		<s:Sequence id="mover" target="{this}" duration="1000">
				<s:Fade duration="300"/>
				<s:Animate>
					<s:SimpleMotionPath property="tamanho" valueTo="{rect}" interpolator="{interpola}"/>
				</s:Animate>
		</s:Sequence>
 
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			private var rect:Rectangle = new Rectangle();
 
			public function get tamanho():Rectangle
			{
				return nativeWindow.bounds;
			}
			public function set tamanho(value:Rectangle):void
			{
				nativeWindow.bounds = value;
			}
			protected function changeWindowPosition(event:MouseEvent):void
			{
 
				rect.width = nativeWindow.width;
				rect.height = nativeWindow.height;
				rect.x = Number(_x.text);
				rect.y = Number(_y.text);
				mover.play();
			}
 
		]]>
	</fx:Script>
	<s:Button x="62" y="134" width="137" height="31" label="Mover"
			  click="changeWindowPosition(event)"/>
	<s:Form x="32" y="15">
		<s:FormItem label="x">
			<s:TextInput id="_x"/>
		</s:FormItem>
		<s:FormItem label="y">
			<s:TextInput id="_y"/>
		</s:FormItem>
	</s:Form>
</s:WindowedApplication>

Explicando o código:

Veja bem, quando você usa efeitos na própria janela onde você está chamando a ação, basicamente ela vai dar estouro de pilha e não funciona, justamente por que o intervalo de tempo entre a chamada e a execução acaba sendo no mesmo momento, nem que você tenha que chamar por callLater, o que na prática nunca vai funcionar. Foi ai que acabei criando o interpolador para facilitar, a execução do efeito, pegando valores anteriores do nativeWindow e aplicando os novos valores do Rect que o efeito irá aplicar.

Aqui está o código do Interpolador.

package com.riacycle.interfaces
{
	import flash.geom.Rectangle;
 
	import spark.effects.interpolation.IInterpolator;
 
	public class JanelaInterpolator implements IInterpolator
	{
		public function JanelaInterpolator()
		{
		}
 
		/**
		 *
		 * Funciona assim:
		 *
		 * Você começa com o valor x = 200 e y= 200;
		 * E soma a fração em Delta que sofre mudanças repetidas entre o valor final e o valor inicial.
		 *
		 * Basicamente se um objeto começa na posição x=200 e y=200;
		 * E você quer mudar para x=300 e y= 300;
		 *
		 * Você faz a interpolação do efeito somando o valor inicial + fração (valor Final - valor Inicial)
		 *
		 * Isso dá um incremento a posição inicial do objeto.
		 *
		 * A fração é a velocidade com que essas mudanças ocorrem, você pode incrementar elas ou não.
		 * */
		public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object
		{
			return new Rectangle(startValue.x + fraction * (endValue.x - startValue.x),
				startValue.y + fraction * (endValue.y - startValue.y),
				startValue.width + fraction * (endValue.width - startValue.width),
				startValue.height + fraction * (endValue.height - startValue.height));
		}
 
		public function increment(baseValue:Object, incrementValue:Object):Object
		{
			return new Rectangle(baseValue.x + incrementValue.x,baseValue.y + incrementValue.y,
				baseValue.width + incrementValue.width,baseValue.height + incrementValue.height);
		}
 
		public function decrement(baseValue:Object, decrementValue:Object):Object
		{
			return new Rectangle(baseValue.x - decrementValue.x,
				baseValue.y - decrementValue.y,
				baseValue.width - decrementValue.width,
				baseValue.height - decrementValue.height);
		}
	}
}

Outro problema é que você tem que criar um retangulo para re-posicionar a tela que você está fazendo as mudanças, uma vez que você cria essas proporções a própria nativeWindow ou nativeApplication sempre que muda de posição é alterado os valores, então o mais correto é pegar os bounds, área da janela atual e corrigir isso através de uma propriedade própria sua, retardando o processo.
Já que as mudanças sofridas pelo nativeWindow são imediatas, devido não ter o immediatePropagation(); Impedindo que elas ocorram, você tem que recorrer ao fato do Rect para se salvar desse pequeno problema.

Esse efeito acaba valendo também para modificar o tamanho da janela em si, assim como redimencionar o tamanho de acordo com o conteúdo.

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.

AIR 2.7/ AIR Mobile/ Android/ Flex/ Flex 4.5/ Flex Mobile Framework

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

Depois de muito tempo sem tempo, olha que controvérsia, acabei com algumas horas livres essa tarde e aproveito para escrever esse post.
Quer criar Apps para Android com o Adobe AIR e Flex? Siga a receita abaixo para isso.

Ja é sabido de sua parte que o Flex cria apps nativas para Android de forma hiper simples. Se você é acostumado ao seu workflow de componentes, ciclos de vidas, você irá facilmente criar Apps elegantes, rápidas e intuitivas para dispositivos móveis.

O Framework do Flex, que usaremos é o Flex 4.5 com overlay do Adobe AIR 2.7, que conta com 4x mais performance do que o AIR 2.6. Em suma, o Flex roda em dispositivos móveis por que o AIR Run-time roda no Android.

Só que antes de você sair comprando ai seus dispositivos xing-lings ou baratinhos com o Android para testar suas criações artisticas, aconselho ler esse POST.

Para começar a brincadeira, você vai precisar de alguns ingredientes, vamos aos itens:

Antes de configurar alguma coisa, é super importante que você tenha em mente a seguinte afirmação. Eu entendo os riscos e serei um bom garoto(a), e nunca irei portar nenhum App meu com Datagrid de 100 registros dentro de uma App móvel, não farei Zilhões de operações.

Ok! Agora pode continuar.

Criando uma conta no Google e no Android Market

Esse passo é o mais simples que você encontrará nesse post, duvido que você não tenha uma conta no Google, vai dizer pajé que tu não tem um @gmail.com ? Uma continha perdida do Orkut? Ah! você vive em outro mundo que não é esse, volta para lá de onde tu veio vai! Esqueça isso de Mobile.

Ok, animos acalmados, criou a conta? Ah! Já tem? Ótimo, o próximo passo é registra-se no Android Market e se tornar um publicador de Apps lá. O processo é mega simples, entre no endereço https://market.android.com/publish/Home
android_publish_home.

Coloque seu login e senha e clique em Login, como você ainda é novato, vai aparecer outra tela perguntando seu Developer Name, dados de contato e telefone. Lembre-se coloque um nome de guerra, nome profissional, nada de vitinho, Vikky, Fofinha, LindinhadoAndroid, algo que passe credibilidade aos seus futuros usuários, Caso você seja uma empresa nem preciso fazer essas recomendações, basta colocar o nome da empresa que você quer usar como Developer Name no formulário.

android_publish_info

Clique agora em Continue.

Depois disso, você precisará dos

US$25 dolares

para fazer a sua inscrição no programa por 1 ano, se você tem conta no Google Checkout basta gastar por lá, caso contrário use algum cartão de crédito de qualquer bandeira que aceite transações internacionais.

android_publish_pagamento

Pronto, você está com a conta no Google Android Market criada e é só aguardar a liberação. Em média esse processo é quase imediato, em outros pode levar cerca de 1 dia no máximo. A coisa é rápida, então fica de olho no e-mail de boas vindas quando tudo for aceito pelo Google.

Aqui está minha dashboard no Android Market.

android_publish_dashboard

Configurando o Flex 4.5.1 SDK para usar o AIR 2.7 SDK

Como o SDK do Flex 4.5.1 ainda vem com suporte ao Adobe AIR 2.6 que é cerca de 4.x mais lento tanto no Android quanto no IOS, você vai precisar configurar seu SDK, esse processo agente chama de “SDK Overlay”, que é basicamente um CTRL+C e CTRL+V em alguns diretórios que sobrepõem arquivos antigos do AIR 2.6.

Baixou o AIR 2.7 SDK? Ok, feito isso extraia ele para um diretório de sua confiança, que seja simples de acessar. O pacote contendo o AIR 2.7 SDK tem os seguintes diretórios e arquivos.

air_2.7_sdk

Se você tem um igual, sinal que vai dar tudo certo, meio caminho andado.

Baixou o Flex 4.5.1 SDK? Ótimo, faça o mesmo processo do AIR 2.7 SDK e descompacte ele no seu diretório predileto, eu particularmente sempre deixo em um diretório meu chamado SDKs, porém nesse exemplo tem pessoas que gostam de deixar no mesmo diretório dos já existentes SDK do Flash Builder 4.5.1.

Ok, se você tem o SDK já descompactado, basta copiar o conteúdo da pasta onde você descompactou o AIR 2.7 SDK dentro da pasta do Flex 4.5.1. SDK. A idéia é sobrescrever os já existentes.

Feito? Ok, próximo passo é instalar o Flash Builder, a ferramenta perfeita para você criar suas apps, não só para Android como para outros devices, ios, BlackBerry Playbook, Web e Desktop.

Flash Builder Instalado? Perfeito, vamos agora configurar o ambiente Android para rodar sua app no console nativo que o próprio google disponibiliza.

Configurando o Android Console

Já tem o Java instalado em sua máquina? Então pule essa etapa, ela só serve mesmo para quem nunca usou o JDK ou tem apenas o JRE.

Para você testar no console, você precisa do JDK(Java Development Kit), que já vem tudo em um, então dependendo de seu sistema operacional, você precisará fazer alguns processos manuais, já no Windows é meio for dummies, é next-> next-> finish.

Baixou o correto referente ao seu OS? Instalou? Ótimo, pois agora precisamos definir as variáveis de ambiente do JAVA_HOME nas configurações globais do sistema operacional.

No Windows, vá em Iniciar – > Computador -> Botão direito do mouse -> Escolha propriedades -> Escolha aba Configurações Avançadas -> Variáveis de ambiente.

Adicione um novo registro na suas variáveis de ambiente com o nome JAVA_HOME. Olhe o exemplo abaixo.

jdk_java_home

Se você configurou tudo certinho, você pode testar no prompt do DOS do windows digitando java -version. Vai aparecer isso aqui ó.

java_version_console

Agora você está pronto para o Android SDK.

Baixando e configurando o Android SDK

Baixou o SDK? Então descompacte em um diretório de fácil acesso, eu coloquei o meu em C:/android-sdk. Para facilitar digitação de comandos.

Execute o SDK Manager, que é o carinha responsável por baixar todos os arquivos necessários do Android SDK da nave mãe Google.

android_avd

Pela primeira vez, esse processo dependendo de sua conexão com a internet, leva uma média de 1 hora para baixar todos os arquivos para seu computador.
Depois disso ele fica como o meu aqui.

android_sdk_dir

Ok, tudo configurado e instalado, vamos verificar se está mesmo. Com o mesmo comando que fiz para o java -version, usarei agora o comando adb version que é o Android Debug Bridge , para ver se executa corretamente.

android_adb

Se aparecer como na imagem acima, é sinal que tudo está correto e perfeito para criarmos nosso Android Emulator, onde iremos simular o sistema operacional Android. Prontos para esse passo?

Ah! Que esqueci, que depois que ele instalar tudo, ele vai pedir para você fechar o SDK Manager e abrir novamente, para que as alterações sejam aplicadas.

Criando o Android Emulator

Ok, volte agora ao SDK Manager e escolha a opção Virtual Devices.

android_virtual_devices

Veja que nesse meu eu já possuo 2 devices virtuais, para criar outro basta clicar em “New…”.

android_new_console

Preencha os dados de seu virtual device, assim como mostra na imagem acima, veja que eu não esqueci de criar usando o Android 2.2 API level 8, que é o necessário para o Adobe AIR rodar e consecutivamente o Flex. Como eu quero apenas testar a App nativa no dispositivo virtual eu deixei as outras configurações padrão, salvo apenas para a memória alocada de 100mb para esse console. Agora clique em “Create AVD”.

O AVD foi criado, só que agora falta executar, esse processo é bem gastante se você tem pouca memória na máquina, típicos 2GB, demora aproximadamente 20min até 30min para ele começar realmente executar, Eu por exemplo tenho 8Gb de memória e leva uma média de 5min. Se você tiver problemas na hora de executar veja se o JVM está setado corretamente.

Para executar, basta clicar em “Start…”.

android_starting

Essa tela preta é demorada, então aproveita e vai tomar um café, falar com sua tchutchuca.

….
……………
Passados alguns minutos. E eis que temos a tela inicial do Android rodando.

android_started

Android rodando, navegando na Web, agora só temos um problema, não temos o Adobe AIR instalado para testar a App, como fazer?

Instalando o Adobe AIR APK no seu emulador

Se você é por natureza curioso, dúvido você não ter bisbilhotado o SDK do Flex que você fez o overlay(Sobreposição) do AIR 2.7 no Flex 4.5.1 SDK. Abra esse diretório para você navegar nele, dentro do SDK você vai encontrar o nosso famoso AIR.apk que é necessário para rodar suas Apps.

air_apk_folder

Veja que eu fiz um mapinha de onde você vai achar o run-time do AIR para seu emulador Android, existem dois, para o Device e para o Emulador, você deve usar a versão Emulador, que é com ela que você vai conseguir emular alguma coisa. Resumindo eis aqui o caminho completo em minha máquina.

C:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks4.5.1_air2.7runtimesairandroidemulator

Lembre-se seu índio, que o diretório na sua máquina pode ser diferente, se não você vai reclamar depois nos comentários que não consegiu achar o tal APK.

Eu copiei o meu para esse exemplo para o diretório raiz, C:/ para facilitar agora o processo de digitação pelo prompt de comando.

Abra o CMD(MS-DOS), e digite o comandos abaixo.

adb devices

adb_devices_list

Se aparecer o nosso Emulador em execução,é por que está tudo OK.

Para instalar é super simples, digite o comando.

adb install {NOME-DO-EMULADOR} c:/Runtime.apk

adb_devices_install_sucess

Finalmente terminamos essa parte chata de configurar a máquina, seu Adobe AIR está funcionando perfeitamente no seu device, Só que como é que eu sei que ele está instalado? Tem 2 formas, vê se o resultado do comando de instalar deu certo e também indo no Emulador, clicar em
Settings -> Applications-> Manage Applications; E você vai ver o Adobe AIR instalado lá.

air_installed

Tudo pronto, agora só abrir o Flash Builder já instalado e começar com sua App Hello World. Nos vemos na próxima Etapa.

Aproveite e participe do grupo de discussão Flex-Mobile

AIR 2.7/ AIR Mobile/ Flash Player

Adobe AIR 3.0 e Flash Player 11 Beta 2 já disponível no Adobe Labs

Cansado do Flash Player 10.3 e seus erros de HTTPS ?

Então prepare-se, por que além disso o Flash Player 11 vai vir bombando nessa versão. E não é papo de blogueiro não, juntei aqui algumas novidades que vai deixar muita gente com vontade de instalar ele antes mesmo de sair no mercado. Se você é desenvolvedor você já deveria ter instalado ele para testes.

Adobe AIR 3.0

Novidades que realmente valem a pena comentar

Stage3D Accelerated Graphics Rendering (desktop) — Stage3D (“Molehill”) é uma nova arquitetura para aceleração de hardware para renderização de gráficos criada pela Adobe. Stage3D tem API de baixo nível para habilitar gráficos avançados em 2D e 3D que funciona para múltiplas telas, como desktop, mobile e tv.
Ou seja,quem é acostumado com o OpenGL, softwares de 3D vai achar isso o máximo.

H.264/AVC Software Encoding for Cameras (desktop) — Transmitir agora sua webcam 720p virou real, o Flash Player agora dá suporte a isso, imagino as apps de video conferência utilizando isso em tempo real com uma qualidade excepcional. Vale lembrar que tem que ter banda de internet boa.

Native JSON (JavaScript Object Notation) — Suporte nativo a JSON, Uffa! até o JQuery tinha API o Flash Player tinha que ter.

Garbage Collection Advice — Melhorou muito, o lixeirinho querido dos desenvolvedores Flex/Flash, agora tem uma API que até agenda a coleta das informações.

Secure Random Number Generator — Muito bom, você pode gerar números random para encriptar banco de dados local, criar protocolos de comunicação seguras, Eu acredito que a Adobe adicionou isso ao AIR devido a Marinha Americana utilizar ele em alguns apps.

Native Extensions – Essa é uma das Maiores se não a Maior função revelação do AIR seja para Desktop ou Mobile a idéia do Native Extensions é gerar novas bibliotecas em C ou C++ para utilizar novas API. Ou seja é limitless, sem fronteiras.

Native Text Input UI (mobile) — Eles me ouviram, Eu havia postado isso como future request e não é que eles adicionaram, uma das minhas dificuldades em criar apps com AIR para Mobile era justamente em campos de texto, fica muito complexo a utilização das funções nativas que o dispositivo já possui no teclado, nada melhor que interagir com isso de uma forma mais nativa, mesmo programando em AS3. Onde você pode selecionar o texto, dar zoom no campo, pular de campo. E o bom disso tudo é que funciona em todos os dispositivos ( Android, Blackberry Tablet OS e iOs).

No Flash Player 11

Native 64-bit Support (Flash Player desktop) – Finalmente um Flash Player decente para quem tem Windows x64.

Quer ler todas as novidades? Leia aqui o release Notes

AIR 2.7/ AIR Mobile/ Android/ Flash Builder/ Flash Builder 4.5/ Flex/ Flex Mobile Framework

Flex 4.5.1 SDK e Flash Builder 4.5.1 com suporte a iOS

E viva! o Flash Builder 4.5.1 agora dá suporte a publicar sua aplicação Flex para plataforma iOS. Embora ela tenha lançado esse suporte o Flash Builder 4.1 já havia suporte para projetos com Actionscript 3.0 puro.

Esse novo lançamento vem fomentar mais ainda o mercado e ajudar a entregar aplicações ao tablet da Apple e também ao iPhones. Antes desse lançamento já era possível fazer via linha de comando com o último SDK 4.5. Porém é um baita rodeio para você fazer compliar.

Com os wizards do Flash Builder 4.5.1 para ios, a coisa ficou bem mais fácil. Para quem já tem o Flash 4.5 registrado baixe gratuitamente aqui o update.

Dica importante, para quem está publicando apps em Flex para iOS, não usem o AIR 2.6 SDK que é o padrão dessa versão. Leiam esse documento para que vocês possam utilizar o AIR 2.7 que está 4x mais rápido do que a atual versão suportada no SDK.

Outra dica para quem está publicando para o Blackberry Playbook, leiam esse release no Blog da RIM.

Quem é ligado como eu nos released notes sobre bugs existentes e já conhecidos, leia aqui. Nele você também encontra informações como usar o Flash Builder no Linux.

AIR 2.7/ AIR Mobile/ Dicas/ Notícias

Adobe AIR 2.7 lançado e cheio das novidades

Informalmente falando, estou bem animado com as novidades do AIR tanto para Android quanto para iOS, a performance está incrivelmente melhor no iOS, bem que o Arno, gerente de engenharia do AIR falou no Flashcamp Brasil em sua palestra.

Recompilei 2 apps (jogos) que estavamos fazendo com o novo AIR 2.7 e está incrivelmente melhor, nada se compara a um código feito nativamente, mais está muito bacana.

E uma das funções novas que eu mais gostei, foi a possibilidade de mudar o AIR para o SD do smartphone, afinal ele tem 17mb que usa da memória interna e isso é um pé no saco, já que o Android usa dessa memória para rodar aplicativos múltiplos.

Adorei as novidades, você pode conferir todas aqui.

Baixar para Android, já está disponível no Android Market, se você tem aplicativo feito em iOS com AIR 2.5 ou 2.6. Recompile com o novo SDK, você vai me agradecer pelo resto da sua vida por essa dica, roda muito mais rápido.

Para Desktop só seguir aqui.