sábado, 14 de janeiro de 2012

Android + iOS = Adobe Air

Olá povo,

Atualmente a disputa entre as plataformas para dispositivos móveis está bastante acirrada. Android e iOS travam uma verdadeira batalha pela preferência dos usuários, tanto no mercado de tablets quanto de smartphones. E nós, como desenvolvedores, temos de estar atentos a essa peleja.
Imagine que você recebe uma demanda de um projeto em que um dos requisitos, é rodar em iOS e Android. Nesse caso, o primeiro pensamento normalmente é: "putz! vou ter que fazer duas aplicações?".
Quem me conhece, sabe que meu projeto de mestrado foi o desenvolvimento de uma ferramenta que traduz aplicações iOS para Android. Mas infelizmente ela ainda está longe de ficar pronta :( Mesmo assim, durante as pesquisas do mestrado, analisei algumas ferramentas "concorrentes" da minha como o PhoneGap e Titanium. Entretanto, dentre todas, a que gostei mais foi o Adobe Air. Entre os pontos positivos da tecnologia estão: a produtividade, utilizando uma ferramenta RAD com diversos recursos; a linguagem de programação é dinâmica e bastante fácil de aprender; e o aspecto visual que se mantém igual no Android e no iOS.

A aplicação é desenvolvida em Flex e/ou ActionScrpit com o Flash Builder (ou Flash Professional CS5). Nesse post, vou mostrar como iniciar o desenvolvimento e fazer o bom e velho "Hello World". Para começar, você precisa fazer o download do Flash Builder 4.6 no site da Adobe. Ele é uma IDE baseada em Eclipse, onde você pode baixar um trial de 60 dias, e após esse tempo deve ser adquirido. Faça o download e instale o Flash Builder Trial no seu computador e vamos começar a brincadeira :)

Acesse o menu File > New > Flex Mobile Project. Na janela exibida abaixo, digite o nome do projeto e o local onde o projeto será salvo e clique em Next.

Na próxima janela do assistente, selecionamos para quais plataformas iremos desenvolver: iOS, Android e/ou BlackBerry. Deixei aqui Android e iOS. Na aba "Application Template" selecionamos o formato de aplicação que devemos desenvolver, aqui deixei uma aplicação Blank. As outras opções permitem criar aplicações que naveguem entre telas ou com abas respectivamente.
Na aba "Permission", selecionamos as permissões necessárias para acessar recursos de aplicações Android (para iOS ela não é usada). E em "Platform Settings", selecionamos para quais aparelhos iOS iremos desenvolver (iPad, iPod, iPhone).
Na seção "Application settings", marcamos se a aplicação deve mudar de orientação (portrait e landscape) automaticamente; se será tela cheia; e se a aplicação será esticada para se ajustar a telas de diferentes densidades. Deixe as configurações como abaixo e clique em Next.

Na próxima tela poderíamos selecionar se estamos utilizando alguma tecnologia servidor. Mas como não é o caso, clique em Next.
Na última tela do assistente, vamos deixar as opções padrão, exceto pelo campo Application ID, onde preencheremos com o esquema similar ao que usamos em Java. ex:"ngvl.air.exemploblog". Outro campo interessante dessa tela, é o "Main Application File" onde definimos o arquivo que será o ponto de partida da nossa aplicação. Aqui, deixamos HelloWorldBlog.mxml e clicamos em Finish.

Ao iniciar o projeto, o arquivo HelloWorldBlog.mxml é aberto em modo texto, mas vamos primeiro edita-lo no modo design. Para tal, clique no botão na parte superior do editor de código, e no combo "Device" selecione um aparelho de sua preferência.

Na paleta de componentes, localizada do lado esquerdo, arraste para a tela de design: um Label, um TextInput e um Button. De um duplo-clique nos componentes Label e Button para alterar o texto. E deixe conforme abaixo:

Agora vá para o modo Source e deixe conforme abaixo;
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationDPI="160">

<fx:Script>
<![CDATA[
protected function botaoFilhaoClick(
event:MouseEvent):void
{
lblTexto.text = edtTexto.text;
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Label
id="lblTexto"
x="39" y="48"
text="Olá mundo Adobe Air"/>
<s:TextInput
id="edtTexto"
x="39" y="71"/>
<s:Button
x="39" y="112"
label="Vai filhão!"
click="botaoFilhaoClick(event)"/>
</s:Application>

Em seguida, clique com o botão direito sobre o projeto e selecione Run As... > Mobile Application. Aparecerá a janela abaixo. Selecione a plataforma que deseja testar (aqui usei Android) e em Launch Method você pode escolher entre rodar em um simulador ou em um dispositivo real. Aqui, selecionei para rodar no Desktop, e então o emulador com o tamanho de tela do Motorola Defy +. Clique em Run.

A figura abaixo mostra nossa aplicação em execução no simulador do Adobe Air. Ao clicar no botão, o texto digitado na caixa de texto é exibido no Label.


Bem povo, esse é apenas um pontapé inicial. Espero colocar mais posts sobre Adobe Air aqui no blog. Aproveito para agradecer ao meu grande amigo Eric Cavalcanti(@ericoc), com quem tive aulas de Adobe Air e me ajudou a iniciar nessa tecnologia.

Dúvidas? Deixem seus comentários.

4br4ç05,
nglauber

8 comentários:

Bit disse...

Grande Eric!!
Kra e quanto a adobe ter abandonado o flash? Com Adobe Air podemos rodar nossas aplicações nos mobiles sem o flash? Pois estou com uma aplicação que se conseguisse colocar um módulo no ipad o negocio ficaria melhor, ms no ipad nao rola sem flash!
flw

Bit

Bit disse...

Desculpe Glauber, quando escrevi tava o nome do Eric ficou na kbca hehehehe!
Espero que esteja lembrado de mim Sandro do curso de Android da Especializa!
Foi maus por errar seu nome hehehe

Nelson Glauber disse...

Olá Bit,

Sem problemas :)
Quanto ao abandono da Adobe, isso aconteceu apenas para o plugin do Flash para browsers mobile. Outros produtos como o Air e Flex continuam normalmente.

4br4ç05,
nglauber

Bit disse...

Então se fizer um modulo em AIR do meu aplicativo ele ira rodar no IOS?
brigadao!!

Nelson Glauber disse...

Exatamente. A mesma aplicação roda no Android e no iOS. Basta compilar a versão para iOS (Run as > Mobile App e seleciona iOS).

4br4ç05,
nglauber

Renato Mateus disse...

Glauber, eu tenho uma dúvida também. Com relação a rodar no iOS e Android, como ele procede.

Exemplo: Para iOS, ele transforma o código actionscript em objetive c

e no caso do Android ele transforma para java??

Ou ele roda o mesmo código actionscript dentro da plataforma adobe air, instalada no móvel..

2 - Se eu disponibilizo uma aplicação adobe air na app store e no google market, ao baixar ele instala automaticamente o adobe air? ou meu cliente, QUE NÃO SABE NADA, só quer baixar a app, vai ter de baixar e instalar o ADOBE AIR?

3 - Com relação ao mercado de desenvolvimento de apps para dispostivos móveis.. Sabemos que cresce e cresce demasiadamente, e o fato de eu ter uma linguagem que rode em duas plataformas que crescem juntos como o iOS e Android, eu fico feliz em poder desenvolver uma única vez. Mas uma coisa que me deixa inseguro, é o fato da adobe simplesmente cair fora. como fez com o flash, com a chegada do HTML5 que por sua vez, irá ficar tão pesado quanto ela, tendo em vista, funcionamento 3D no bronwser... vamos ver né?

Nelson Glauber disse...

olá tohr,

No caso do iOS, irá com a runtime do Adobe Air junto, uma vez que o iOS não suporta "VMs".
Já no Android, você instala a runtime por fora, e faz o download do runtime separadamente. Mas se você fizer o download de uma aplicação Air e não tiver a runtime instalada, ele vai dar uma mensagem avisando isso, e já abrirá a Play Store (antigo Android Market) para fazer o download da runtime.

Quanto a disputa com o HTML 5, realmente temos que pagar pra ver, mas creio que a Adobe vai resistir fortemente ;)

4br4ç05,
nglauber

Anônimo disse...

Para Android, via Flash Professional, você pode embutir o AIR no seu aplicativo afim de o cliente não precisar instalá-lo separadamente.

Abs,