“Write Once, Deploy to many!” – Flex4 + Air + Android

“Write Once, Deploy to many!” – Flex4 + Air + Android

Bom, esta frase nunca teve tanto sentido, e vou passar a explicar o porque! Neste artigo vou explicar como criar uma aplicação em Adobe Flash Builder 4 (Flex4) e distribui-la para o Android, e inclusive corre-la no proprio dispositivo… este processo à algum tempo parecia impossivel, mas agora é muito facil… até tive uma discussão bem agradavel com o Janderson que estão a abri-se novas portas e aguardem que ele vai lançar ainda mais dicas na sua palestra do flexmania, não faltem!

Claro que foi preciso alguma investigação e uma ou outra ferramentas para reduzir o trabalho, mas no final temos a mesma aplicação a correr com applicação Desktop, Web e Mobile sem qualquer alteração de código, apenas com atenção a um ou outro elemento.

No momento é altamente recomendado que não usem isto para aplicações finais, porque as suas limitações e alterações no futuro podem ser muitas requerendo por completo a recompilação da aplicação com outro SDK, mas nada de grave… como é apenas para provar a teoria de que o flex já funciona no AIR dos dispositivos Android sem necessidade da tão esperada Framework Slider, aqui vamos.

Primeiro o que é necessário ter instalado na sua maquina.

1. Flash Builder 4 Instalado, podem fazer download aqui: http://www.adobe.com/products/flashbuilder/, podem escolher o trial, e se forem estudantes ou desempregados a licensa é gratuita, vejam aqui.

2. AIR SDK 2.0, podem fazer o download aqui: http://labs.adobe.com/downloads/air2.html

3. AIR SDK 2.5, actualmente apenas em pre-release, registem-se no programa aqui. Depois do registo e do login, podem fazer o dowload do SDK 2.5 (para o android 2.1 Eclair, o download deve ser da release datada do 04/06 2010, a ultima release apenas funciona no Android 2.2 froYo).

4. Package Assistant Pro, a aplicação que poupa algumas dores de cabeça de volta da linha de comandos com o compiler manual do SDK. Esta é a aplicação que torna tudo muito mais facil, acreditem! (Por vezes os antivirus ficam meios loucos com este ficheiro, se for o caso desliguem o antivirus antes do download e instalação.)

Depois disto instalado, é necessário instalar o air SDK 2.5 e o 2.0 porque o que vem com o flash builder 4 não é a ultima versão, logo pode causar problemas. o Processo é bem simples, abram a pasta de instalação do Flash Builder 4 (no windows, algo como c:\Program Files\Adobe\Adobe Flash Builder 4\) e abram a pasta sdk’s, lá emcontram uma pasta com o nome 4.0.0, façam duas cópias dela na mesma pasta sdks com os nomes: “4.0.0 AIR 2.0” e “4.0.0 AIR 2.5“, depois basta exportarem o conteudo do arquivo SDK 2.0 que fizeram download para a pasta “4.0.0 AIR 2.0″ substituindo todos os arquivos, e o mesmo para o SDK 2.5 na pasta “4.0.0 AIR 2.5” e temos os SDK’s prontos para usar.

Depois disto, basta identifica-los no flash builder 4, para isso abram o FB4, Menu Windows->Preferences->Flash Builder->Installed SDk’s, coloquem em Add New e escolham a pasta “4.0.0 Air 2.0″ e dêm o nome de 4.0.0 AIR 2.0 e o mesmo para o Air 2.5. Assim têm os 2 sdk’s para o flash builder…

Agora mãos à obra, o processo seguinte utiliza por defeito o MXML sem qualquer limitação, o que é uma ótima novidade.

Criem um novo Flex Project, escolhendo Desktop (AIR), e no sdk escolham na lista o 4.00 AIR 2.5, desta forma a aplicação é preparada usamdo o SDk 2.5. Depois disto é só trocar na primeira e ultima linhas o “WindowedApplication” por “Application”, porque desta forma o projeto é compilado como applicação “Geral”, uma forma oculta que a adobe encontrou para já deixar preparado o SDK para o ambiente Mobile.

Agora, é com vocês, é só inventarem, usem e abusem dos componentes… o que devem fazer atenção é que para o Android devem aumentar no minimo 2x o tamanho de cada componente e fontes senão ficará muito pequeno na tela do seu android. Isto deverá ser corrigido em breve, mas por agora só assim mesmo. :)

Por final, devem editar o arquivo xml da vossa aplicação, se lhe deram o nome de “ExemploAndroid” encontram na mesma pasta o arquivo Exemplo-Android-app.xml, editem este arquivo, e eliminem tudo, e coloquem apenas assim:

 

<?xml version=”1.0″ encoding=”utf-8″ standalone=”no”?>
<application xmlns=”http://ns.adobe.com/air/application/2.5″>
<id>Main</id>
<filename>Main</filename>
<name>Main App</name>
<versionNumber>1.0.1</versionNumber>
<versionLabel>1.0.1</versionLabel>
<supportedProfiles>mobileDevice</supportedProfiles>
<initialWindow>
<content></content>
<visible>true</visible>
<!– <autoOrients>true</autoOrients> –>
</initialWindow>
<icon>
<image16x16>icons/appIcon_16.png</image16x16>
<image32x32>icons/appIcon_32.png</image32x32>
<image48x48>icons/appIcon_48.png</image48x48>
<image128x128>icons/appIcon_128.png</image128x128>
</icon>
</application>
Notem que no exemplo devem editar para a vossa configuração, no meu caso inclui os icons para a aplicação também. Bom, agora é só fazer o mesmo processo de export release build e está pronto. (Os pontos a negro deve ser alterados) o MobileDevice é importante, caso contrário nao funcionará no seu android.
No fim deste processo feito, instalem o Package Assistant Pro e na primeira execução vai-vos ser pedido o caminho para o SDK AIR 2.0, para o 2.5 também e por final uma chave para assinatura da aplicação, usem a mesma que geraram para assinar a Release Build do projeto.
De seguida, bem facil… esta app pode expotar um apk para android ou um exe, escolham o apk, depois é-vos pedido o xml da aplicação, naveguem até à pasta da vossa aplicação, no windows algo como c:\users\seu_username\Flash Builder 4\vossa_app e abram a pasta bin-debug, lá encontram o xml, e o .swf que vos será pedido no proximo passo da tela do Assistante Pro, depois coloquem a vossa password do certificado de assinatura e por final adicionem os ficheiros extra necessários à aplicação e continuem, o ultimo passo é a compilação… se tudo correu bem é gerado um ficheiro apk que se trata da vossa aplicação para android!!
E pronto, é tudo! No vosso android só têm que ter instalado o AIR 2.5, que podem fazer download no mesmo sistema da pre-release da adobe falado em cima.
Olha o meu exemplo:
Download do projecto fxp aqui: [download id=”30″]
Download do apk para o android aqui: [download id=”31″]
E aí está, o primeiro passo para a revolução das Rias agora também no mercado móvel!!! Acaba por ser simples não?
Abraço.

7 comments

add yours
  • Mario Junior June 11, 2010

    Clap! Clap! Clap! (palmas)
    É isso ae xará.. sempre saindo na frente!
    Muito, muito bom mesmo!!!

    Parabéns! :)

  • @jandersonfc June 11, 2010

    Clap! Clap! Clap! (mais palmas) :D
    muito bom amigo, ótimo material e como já conversamos, ótimas espectativas de futuro para os desenvolvedores flex ;)

    Vamos ter que aprender a pensar pequeno(Android) e grande(TV) agora :)

    dali Flash Player e Google, o resto é limitado :P

    abraços!

  • zé luis June 11, 2010

    sir, you are already dead.

    tanta coisa…e completamente obsoleta e inútil.

    com javascript fazes a mesma coisa sem largar milhares de euros e sem andar com plataformas de empresas manhosas.

  • Mário Santos June 11, 2010

    Caro Zé Luis,

    Você não deve ter a minima ideia das asneiras que acaba de afirmar em tão poucas linhas…

    Não precisa de gastar nem 1€, Flex 4 tem um SDK gratuito e Open Source, não precisa de pagar nada para desenvolver em flex… o packager falado é gratuito, e o Android OS é gratuito e Open Source… O Adobe Air é gratuito bem como o seu SDK… não estou a ver qualquer custo nisto!

    Mais, o tempo vai provar que de obsoleto nada têm e muito menos de inutil. Só quem tem um campo de visão limitado ou não quer ver é que consegue pensar dessa forma até porque as aplicações são tantas que nem vale a pena falar nelas.

    Quanto ao javascript, ainda não vi nenhuma aplicação em javascript que corra nativamente como aplicação no Android, mas se estiver enganado pode ter a certeza que dificilmente conseguirá produzir resultados tão ricos como o Flex. Eu apesar de amar o Flex sou muito atento ao mercado e às existente (e novas) tecnologias emergentes como o jQuery ou o HTML5, e por isso considerei esta resposta ao seu comentário para provar que você está redondamente enganado!

    BTW, a Adobe está longe de ser uma empresa manhosa! heheheh

    Abraço.

  • Ved June 14, 2010

    Sempre tem alguém para falar merda, né? Como tem inveja neste mundo. Parabéns Mario! Pioneiro é seu sobrenome!

  • Marko June 16, 2010

    De facto é uma pena estes infelizes comentários!
    Mário testei no meu HTC Desire mas dá erro “(processo app.Main) terminou de forma inesperada” tenho de ver o que se passa.
    Parabéns pelo tutorial.
    Abraço.

  • Mário Santos June 16, 2010

    Marko, você têm o AIR 2.5 Instalado no seu Android? (release do 04/06) ?

    Cumps.

Leave a Comment

Post