Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

public function isTablet():Boolean {
  return stage.fullScreenHeight > 960 || stage.fullScreenWidth > 960;
}

AIR pour iOS – Compiler une MobileApplication Flex 4.5 pour iOS avec PFI

Le but de ce tutorial est de pouvoir compiler une application Flex Mobile en une application native pour iOS (iPhone / iPad). Les lignes de commandes présentes dans ce tutorial fonctionne avec la version présente de PFI (11 Oct 2010) qui pourra changer lorsque la prochaine version de PFI (Package For IPhone) sortira.

La dernière mise à jour de PFI est disponible en téléchargement sur les Adobe Labs:

http://labs.adobe.com/technologies/packagerforiphone/

En attendant de faire mieux…

La prochaine version de PFI sera vraisemblablement complètement intégrée à Flash Builder Burrito lors de sa sortie, un peu comme BlackBerry Tablet OS et Android sont actuellement supportés. En attendant, il est toujours possible de compiler des applications en ligne de commande. Le process sera sûrement le même une fois le nouveau packager sorti, ces lignes de commande pourront donc vous être utiles si vous faîtes de l'intégration continue par exemple pour laquelle vous allez builder sans Flash Builder.

Le Packager For IPhone actuel gère seulement Adobe AIR 2.0.2 et pas les nouvelles API AIR 2.5. Avant de compiler votre application, il est préferable de retirer toute référence vers ces APIs. Pour la liste des APIs actuellement non supportées, vous pouvez vous fier à cet article:

http://www.flex-tutorial.fr/2010/09/10/air-iphone-packager-for-iphone-pas-encore-compatible-avec-air-2-5-soyons-patients/

Encore une fois, lorsque Adobe aura mis à jour le packager, ces recommandations ne seront plus d'actualité.

Des performances encore faibles

Si vous arrivez jusqu'au bout du tutorial, vous allez pouvoir déployer votre application sur votre matériel iOS. J'ai testé sur un iPad et un iPhone 4. Les performances de l'iPad sont plus que médiocres et les performances sur iPhone sont plutôt mauvaise, d'autant plus que la résolution est totalement différente.

Vous pouvez en revanche vous servir de ce tutorial pour compiler vos applications ActionScript pour iOS, qui devrait fonctionner de manière plus fluide.

Selon Michael Chaize, notre Evangelist français, les performances seront bien meilleures dans la prochaine version du Packager, ne perdons pas espoir .

Un forum plein d'informations

Le forum Packager For IPhone est rempli de bonne ressources ainsi que d'utilisateurs ayant fait de multiples tests, notamment au niveau des performances. Si vous avez  un problème, je vous conseille de rechercher si la question n'a pas déjà été posée / résolue:

http://forums.adobe.com/community/labs/packagerforiphone?view=discussions&start=0

Ce qu'il vous faut pour ce tutorial

Pour réaliser les différentes étapes de ce tutorial, vous n'aurez ni besoin d'un Mac, ni de XCode. En revanche, les logiciels suivant sont recommandés / obligatoires:

Flash Builder 4.5 "Burrito"

Ce n'est pas obligatoire mais Burrito va nous faciliter la vie sur plusieurs points. Tout d'abord pour la création du projet mobile et pour le lancement des "Run Configuration" d'Eclipse qui vont nous permettre de compiler notre application en quelques clics. Sinon vous pouvez le faire avec votre IDE préféré mais c'est à vous de vous débrouiller

Télécharger Flash Builder Burrito

Packager For IPhone (PFI)

Télécharger PFI depuis les labs Adobe

Dézippez l'archive et placer la sur votre disque.

SDK Flex >= 4.5

On va réaliser des compilations avec le compilateur "amxmlc" présent dans le SDK Flex / AIR. Veillez donc à avoir la dernière version, au moins la 4.5. Si vous avez installé Flash Builder Burrito, vous devriez avoir le SDK Flex Hero 4.5 directement.

Un appareil sous iOS (iPhone et/ou iPad)

Pour pouvoir tester votre application au format IPA, il vous faudra un iPhone ou un iPad. Peut-être cela fonctionne avec le simulateur iOS sous Mac / XCode mais n'utilisant pas ces éléments, rien de sûr.

iTunes

Pour transférer votre fichier IPA, vous ne pouvez pas le faire par mail ou USB comme sur Android, il vous faudra obligatoirement passer par iTunes. Vous aurez aussi besoin de iTunes pour déterminer votre Device ID (UDID), subtilement caché dans l'interface. Ah oui et vous aurez en plus la joie de devoir installer (parfois sans vous le demander) des logiciels tierce comme Quicktime ou l'Updater automatique d'Apple. Tous les utilisateurs d'iTunes vous le diront, ce logiciel est une merde mais il est cependant indispensable.

Certificats et comptes Developper iOS

Alors voilà la partie la plus complexe, qui pourtant, ne requiert presque aucune compétence en programmation! Pour pouvoir compiler votre application avec iOS, il vous faudra avoir un compte développeur iOS (99$ par an) afin de pouvoir générer votre certificat iOS. C'est sûrement la partie la plus longue car il va falloir faire pas mal de manipulation avant d'obtenir vos fichiers mobileprovision et p12.

Première étape: Récupérer les documents auprès d'Apple

Avant toute chose, vous pouvez commencer par récupérer les fichiers dont vous aurez besoin auprès d'Apple. Cette étape peut prendre du temps car vous devrez créer un compte Développeur et sortir la CB. Le prix est de 99$ / an mais à ce prix là, vous aurez la possibilité de mettre des applications sur l'AppStore et de générer vos certificats.

La procédure est assez laborieuse et dépend de votre OS. Heureusement, le guide Developper fourni par Adobe explique toutes les étapes en détail, que vous soyez sur Windows ou Unix. Commencez donc pas lire les pages 4- de ce document:

http://download.macromedia.com/pub/labs/packagerforiphone/packagerforiphone_devguide.pdf

Quelques précisions:

Si vous vous enregistrez comme entreprise et pas comme individuel (mais toujours avec le Developper Program à 99$/an), le process est plus long car Apple va vous demander des documents qui prouvent votre identité (enregistrement auprès de la chambre de commerce je crois).

Pour le point 6/b, qui consiste à récupérer l'identifiant UDID de votre device, il faut bien cliquer sur le numéro de série affiché dans iTunes pour que celui-ci affiche l'UDID. C'est complètement tordu et non intuitif mais cela fonctionne:

Pour la partie "Convert an Apple developer certificate to a P12 file on Windows" que vous devez faire avec OpenSSL, vous aurez peut-être des warnings vous indiquant que l'opération s'est mal passée. Mais en fait, le fichier que vous devez générer pour la première étape (mykey.key) est bien là, dans le répertoire "/bin".

A la fin des nombreuses manipulations, vous devriez avoir un fichier xxx.mobileprovision (généré par le site d'Apple) et un fichier iphone_dev.p12 que vous avez généré avec OpenSSL (si vous êtes sous Windows). Si vous avez ces 2 fichiers, bravo, vous avez déjà fait une bonne partie du chemin!

Création d'une application Flex Mobile

Pour pouvoir tester notre application, il faut déjà avoir son application mobile à compiler. Ici on va prendre le projet "TwitterTrends" qui est disponible en téléchargement comme sample de "Hero":

http://labs.adobe.com/technologies/flexsdk_hero/samples/

http://download.macromedia.com/pub/labs/flexsdk_hero/samples/twittertrends/twittertrends.fxp

Télécharger le fichier FXP et importez le dans Flash Builder (Fichier > Import Flash Builder Project). Si vous n'avez pas Flash Builder, dé-zippez le FXP comme une archive et récupérez les sources. Voilà, il va nous falloir récupérer d'autres fichiers mais on va voir avant la démarche de compilation à suivre

Compilation d'un IPA, comment ça marche?

Pour compiler un IPA avec PFI, il vous faut plusieurs éléments:

• Un fichier xxx.mobileprvision
• Un fichier iphone_dev.p12 et son mot de passe
• Un fichier NomDeLAppli-app.xml, qui va décrire votre application
• Le fichier SWF de votre application que l'on va compiler
• Quelques icônes ( certains optionnels):
  • icon 29×29
  • icon 48×48
  • icon 57×57
  • icon 72×72
• Quelques Splashscreen (optionnels):
  • Default.png (320 x 480px) pour iPhone
  • Default-Landscape.png (1024x768px)
  • Default-Portrait.png(768x1024px)
  • Default-PortraitLandscapeLeft.png(1024x768px)
  • Default-PortraitLandscapeRight.png(1024x768px)
  • Default-PortraitUpsideDown.png(768x1024px)

Les splashscreen doivent être placés directement dans le répertoire "src". Les noms sont arbitraires et les fichiers doivent se nommer de cette manière pour que le packager les prenne en compte. L'emplacement des icônes doit correspondre aux chemins donnés dans le fichier xxx-app.xml. Il est plus simple de tous les mettre dans un répertoire "icons". Maintenant que vous avez les certificats, on va générer le SWF de notre application.

Générer le fichier SWF de notre application avec amxmlc

Si vous voulez compiler une application Flex 3 / Flex 4 / pure AS3, vous avez un fichier SWF créé à chaque compilation dans le répertoire "bin-debug" de votre application. Au début, j'avais pensé que je pourrais utiliser ce SWF directement mais si vous faîtes cela, vous aurez par la suite l'erreur suivante:

Exception in thread "main" java.lang.Error: Unable to find named traits: mx.collections.errors::SortError
    at adobe.abc.Domain.resolveTypeName(Domain.java:195)
    at adobe.abc.Domain.resolveTypeName(Domain.java:112)
    at adobe.abc.GlobalOptimizer$InputAbc.resolveTypeName(GlobalOptimizer.java:274)
    at adobe.abc.GlobalOptimizer$InputAbc.readCode(GlobalOptimizer.java:983)
    at adobe.abc.GlobalOptimizer$InputAbc.readBody(GlobalOptimizer.java:531)
    at adobe.abc.GlobalOptimizer$InputAbc.readAbc(GlobalOptimizer.java:404)
    at adobe.abc.GlobalOptimizer$InputAbc.readAbc(GlobalOptimizer.java:280)
    at adobe.abc.LLVMEmitter.generateBitcode(LLVMEmitter.java:160)
    at com.adobe.air.ipa.AOTCompiler.convertAbcToLlvmBitcode(AOTCompiler.java:329)
    at com.adobe.air.ipa.AOTCompiler.GenerateMacBinary(AOTCompiler.java:600)
    at com.adobe.air.ipa.IPAOutputStream.compileRootSwf(IPAOutputStream.java:196)
    at com.adobe.air.ipa.IPAOutputStream.finalizeSig(IPAOutputStream.java:366)
    at com.adobe.air.ADTPackager.createPackage(ADTPackager.java:65)
    at com.adobe.air.ipa.IPAPackager.createPackage(IPAPackager.java:165)
    at com.adobe.air.ADTEntrypoint.parseArgsAndGo(ADTEntrypoint.java:132)
    at com.adobe.air.ipa.PFI.parseArgsAndGo(PFI.java:152)
    at com.adobe.air.ADTEntrypoint.run(ADTEntrypoint.java:68)
    at com.adobe.air.ipa.PFI.main(PFI.java:112)

ou

Exception in thread "main" java.lang.Error: Unable to find named traits: mx.collections.errors::ItemPendingError
...

Cela est apparemment (cf réponse de Scott Szretter sur ce post) aux RSL ou dans notre cas à Flash Builder. La solution est de compiler notre SWF en ligne de commande avec "amxmlc" et pas "mxmlc". Vérifiez aussi que vous n'avez pas oublié de copier le SWF de /src/ dans /bin-debug/ ! (voir plus loin).

Pour me simplifier la vie, j'ai créer une "External Tools Configuration" dans Flash Builder mais le processus peut aussi être fait avec Ant si vous le souhaitez. Dans Flash Builder, rendez-vous dans le menu Run > External Tools > External Tools Configurations… Une nouvelle fenêtre va s'ouvrir. Créez une nouvelle configuration (new launch configuration).