Développer en Flex sur Android : 1ère partie
Traduire/Translate (by Google) : English - Espagnol - Deutsch
Le 8 octobre 2010, Adobe a annoncé AIR 2.5 sur Android. Il est temps de développer en Flex sur Android (bien que pour l'instant Adobe conseille d'utiliser Flash).
Je vais écrire quelques articles sur le développement sur Android en faisant part de mon expérience. Dans cette première partie, nous verrons surtout comment trouver et installer les outils et ressources nécessaires pour le développement en Flex/Flash sur Android.
Sur le téléphone mobile, la version 2.2 d'Android (appelé Froyo) est obligatoire pour installer AIR sur Android. Ce mobile doit être équipé d'un processeur ARMv7-A (par exemple : HTC Desire).
Pour les installations, je me focaliserais sur l'environnement Windows 7 - 64 bits.
En effet, des écrans MultiTouch sont disponibles pour Windows 7 :
ce qui facilite grandement le développement/test des interfaces tactiles. Il existe des écrans MultiTouch chez Dell, Iiyama. Voir une liste ici : http://www.generation-tactile.com/liste-des-ecrans-multitouch
Bien sûr, vous devez installer le SDK 2.5 d'AIR dans Flex/Flash Builder : disponible actuellement en prerelease sur le lab.
Installer le SDK d'Android
Il faut tout d'abord télécharger le SDK d'Android que vous trouverez ici : http://developer.android.com/sdk/index.html
1. Il faut simplement suivre les instructions et commencer à installer le JDK de Java (et pas le JRE).
Si vous avez une machine 64 bits que prendre ? le JDK en 32 bits ou le JDK en 64 bits ? A priori, j'ai essayé les deux modes 32bits et 64 bits et cela fonctionne. Mais, je suis revenu au 32 bits pour des raisons de compatibilité avec d'autres outils. C'est conseillé aussi dans les forums.
2. Dézipper le fichier android-sdk_r07-windows.zip par exemple dans la racine C:
La suite des exemples suppose donc que vous avez créé le répertoire C:\android-sdk-windows
3. Avant l'installation du SDK Android, il faut définir pour le système la variable
JAVA_HOME et modifier la variable PATH
pour contenir le SDK d'Android et les binaires du SDK java.
Pour ceci, il faut modifier les variables d'environnement par :
Explorateur (Win-E). Cliquer sur Ordinateur > click-droit > choisir Propriétés
> Cliquer sur "Paramètres Systèmes avancés" puis dans onglet "Paramètres Systèmes avancés", cliquer sur le bouton en bas "Variables d'environnement..."
Dans "Variables systèmes", ajouter avec "Nouvelle" et créer JAVA_HOME avec le bon path par exemple : C:\Program Files (x86)\Java\jdk1.6.0_21
Dans "Variables utilisateur", ajouter avec "Nouvelle" (ou modifier avec "Modifier") la variable PATH qui doit contenir le répertoire bin du SDK java et le répertoire tools du SDK d'Android :
C:\Program Files (x86)\Java\jdk1.6.0_21\bin;C:\android-sdk-windows\tools;
Mise à jour Mars 2011 : Avec la revsion 10 et 11, le programme adb a changé de répertoire : il se trouve dans le répertoire platform-tools. Vous devez donc ajouter le répertoire platform-tools du SDK d'Android :
C:\Program Files (x86)\Java\jdk1.6.0_21\bin;C:\android-sdk-windows\tools;C:\android-sdk-windows\platform-tools;
Pour ceux qui n'ont pas compris, voici en anglais en images comment définir JAVA_HOME comme variable système : http://wso2.org/project/wsas/java/1.1/docs/setting-java-home.html
4. Vous pouvez lancer SDK Setup.exe qui se trouve dans C:\android-sdk-windows et qui va installer les différentes versions et utilitaires pour Android
Je lance SDK Setup.exe et rien ne se passe : la fenêtre s'ouvre et se ferme aussitôt ?
Votre utilitaire pour dézipper n'a pas créé les deux répertoires vides suivants : platforms et add-ons
Vous devez créer manuellement les deux répertoires add-ons et tools dans C:\android-sdk-windows
Relancer SDK Setup.exe
Comment vérifier l'installation du SDK d'Android ?
- Connecter votre mobile au PC avec le câble USB en mode "Lecteur de disque"
- sur votre mobile, mettre le mode USB en mode debug par
Paramètres > Application > Développement > cocher Deboggage USB
- Ouvrir sur le PC une fenêtre DOS (par cmd) et taper :
adb get-serialno
Vous devez voir s'afficher le numéro de série de votre mobile...
Où trouver les fonts d'Android ?
Android utilse la font principale "DroidSans" que vous trouverez dans le SDK d'Android.
La plateforme Android 2.2 est l'API de niveau 8 et donc les ressources se trouvent dans le répertoire android-8 du SDK d'Android. Les fonts se trouvent dans le répertoire :
C:\android-sdk-windows\platforms\android-8\data\fonts
Où trouver les icônes "officiels" d'Android ?
Pour trouver les icônes de base, il faut savoir qu'Android distingue 3 types d'écran selon la densité : high (hdpi), medium (mdpi), et low (ldpi).
Pour simplifier, il existe deux types d'icones actuellement : les icônes en mdpi en 48x48 et les icônes en hdpi en 72x72.
On trouvera donc 2 répertoires pour les 2 densités :
C:\android-sdk-windows\platforms\android-8\data\res\drawable-hdpi
C:\android-sdk-windows\platforms\android-8\data\res\drawable-mdpi
Comment réaliser des icônes ?
Pour réaliser ces icônes, il faut suivre le guide d'Android qui donne des exemples en photoshop avec toutes les propriétés PhotoShop pour réaliser des ombres, etc...
http://developer.android.com/guide/practices/ui_guidelines/icon_design.html
Où trouver d'autres exemples ?
23 liens pour les ressources graphiques :
http://android-france.fr/2010/09/20/developpement-android-elements-graphiques/
Comment faire une photo de son écran (screen capture) ?
Pour ceci, il faut connecter son téléphone en USB et lancer l'utilitaire Dalvik Debug Monitor du SDK d'Android.
Lancer cmd puis taper : ddms
puis dans le menu : Device > Screen Capture (ou Ctrl-S)
Vous pouvez sauver l'image par "Save" puis utiliser "Refresh" pour une nouvelle copie et "Rotate" pour les photos en mode landscape/paysage.
Comment faire une video de son application ?
Vous pouvez utiliser androidscreencast que vous trouverez ici :
http://code.google.com/p/androidscreencast/
C'est une application Java qui génère un fichier .mov.
Existe-t-il des composants pour Flash/Flex ?
Pour Flex, il faut attendre la version du SDK Hero avec les composants mobiles.
Pour Flash, il existe la bibliothèque de Kevin Hoyt. Voir son article Some Flash Android Components :
http://blog.kevinhoyt.org/?p=548
Où trouver des exemples de designs pour mobile ?
Tout d'abord, vous pouvez consulter le blog de Paul Trani : http://www.paultrani.com/blog/
et son article Mobile Design that Doesn't Suck : http://www.slideshare.net/paultrani/mobile-design-that-doesnt-suck
Vous pouvez consulter ceci : Android UI Design Tips : http://www.slideshare.net/AndroidDev/android-ui-design-tips
Vous pouvez trouver des exemples ici : http://www.mobileawesomeness.com/
Où trouver des exemples/sources en Flex pour Android ?
Vous pouvez consulter les exemples de Christophe Coenraets et surtout : Employee Directory on AIR for Android : http://coenraets.org/blog/air-for-android-samples/employee-directory-for-android/
Vous pouvez consulter les exemples de Michael Chaize sur RIAgora : http://www.riagora.com/
Le blog de Fabien Nicollet comprend aussi de nombreux exemples : http://www.flex-tutorial.fr/
Comment créer un certificat pour AIR pour Android ?
Il suffit de créer un projet AIR puis de créer une version Release (Project > Export Release Build). A l'étape 2 (Digital Signature), vous pouvez créer un certificat personnel avec le bouton "Create".
Attention/Warning: Pour mettre votre application sur l'Android Market, le certificat doit avoir une période de validité de 25 ans. Actuellement, les versions de Flex ne permettent pas de définir la période de validité.
Vous devez donc utiliser l'extension AIR d'Android pour Flash CS5 et lancer la commande suivante :
"C:\Program Files (x86)\Adobe\Adobe Flash CS5\AIK2.5\bin\adt" -certificate -cn CERTIFICAT_NAME -o ORGANISM -c FR -validityPeriod 25 2048-RSA CERTIFICAT.p12 PASSWORD
Remplacez les noms en majuscules par les noms que vous voulez donner.
Plus d'information sur le blog de Ryan Stewart avec son article Publishing AIR Apps to the Android Market :
http://blog.digitalbackcountry.com/2010/10/publishing-air-apps-to-the-android-market/
Comment créer ma première application AIR pour Android en 15 minutes ?
Suivez les guides d'Adobe...
Sinon, comme il n'existe pas encode actuellement de wizard pour application mobile, voici les étapes avec le SDK 4.1 de Flex. Pour les impatients, le projet Flex AndroidHello.fxp à importer par File > Import Flex Project (FXP).
- connecter le mobile au PC avec le câble USB en mode "Lecteur de disque" et
vérifier que le mode USB est en mode debug par
Paramètres > Application > Développement > cocher Deboggage USB
- créer une application AIR avec New > Flex Project de type Desktop
- remplacer s:WindowedApplication par s:Application
- tapez le code suivant pour l'interface (après </fx:Declarations> pour les débutants en Flex) :
<s:BorderContainer top="0" left="0" right="0" bottom="0" cornerRadius="0">
<s:Label text="Hello Android" horizontalCenter="0" verticalCenter="0"
fontSize="26" fontWeight="bold"/>
<s:Button label="Exit" height="45" width="120" bottom="0" horizontalCenter="0"
fontSize="22" fontWeight="bold"
click="NativeApplication.nativeApplication.exit()"/>
</s:BorderContainer>
- dans le fichier Android-Hello-app.mxml, remplacer le code pour initialWindow par celui-ci. Pour information, <visible>true</visible> est très important
<initialWindow>
<content>AndroidHello.swf</content>
<visible>true</visible>
<autoOrients>true</autoOrients>
</initialWindow>
- créer un répertoire util (au même niveau que src) et créer un certificat (voir question précédente). Dans le projet, on a créé un certificat hello.p12 avec le mot de passe toto
Ce certificat doit être dans le répertoire util.
- lancer votre application avec Ctrl-F11 (ou Run > Run Android Hello)
- dans le répertoire util, créer un fichier build.bat qui contient les lignes suivantes :
cd ..\bin-debug
call "C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks\4.1.0\bin\adt" -package -target apk -storetype pkcs12 -keystore ../util/hello.p12 -storepass toto AndroidHello.apk
AndroidHello-app.xml AndroidHello.swf
adb install -r AndroidHello.apk
pause
(Attention, la ligne avec "call" doit être une seule ligne et pas en 3 lignes comme sur l'écran)
Pour info, ce fichier permet de créer le fichier AndroidHello.apk avec la commande adt de Flex en utilisant le certificat hello.p12 et le mot de passe toto à partir de fichier AndroidHello.swf (le fichier swf doit exister c'est pour cela que l'on lance un premier run)
Puis, on installe sur le mobile avec la commande : adb install -r AndroidHello.apk
Cette commande arrête le programme si il tournait et écrase le programme précédent (si il existait).
Ouvrir un explorateur (Win-E) et lancer le fichier buid.bat en cliquant dessus. Il crée le fichier AndroidHello.apk
et l'installe sur le mobile.
Vous pouvez lancer l'application sur le mobile.
Si vous faites pivoter le mobile, l'application pivote (grâce à la commande <autoOrients>true</autoOrients> que nous avons défini dans Android-Hello-app.mxml)
Vous pouvez faire Exit pour sortir de l'application. ATTENTION, sur Android, le exit ne devrait pas exister. L'application fonctionne tout le temps...
Voici le fichier du projet : HelloAndroid.fxp et le fichier pour mobile HelloAndroid.apk
(avec Internet Explorer, utiliser click-droit et "Enregistrer
la cible sous..." en vérifiant les extensions des fichiers : .fxp et .apk)
Si vous n'avez que 6 minutes, passer à Flash pour créer et publier une application sur l'Android Market.
Voir la vidéo de Lee Brimelow ici :
http://gotoandlearn.com/play.php?id=131