Adobe Flex Tutorial - Adobe Flex Tutorial

15jan/112

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)

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).

Voici ma configuration, à adapter à vos paths:

Location:

C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\bin\amxmlc.bat

Working Directory:

${project_loc}/src

Arguments:

-default-size 768 1024 -library-path+="C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/fiberSwcs/4.0/libs/playerfds.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/fiberSwcs/4.0/locale/fiber_rb.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/fiberSwcs/4.0/libs/fiber.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/dcradSwcs/4.0/locale/fds_rb.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/dcradSwcs/4.0/locale/serializers_rb.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/dcradSwcs/4.0/libs/fds.swc","C:/Program Files (x86)/Adobe/Adobe Flash Builder Burrito/eclipse/plugins/com.adobe.flexbuilder.dcrad_4.5.0.287807/dcradSwcs/4.0/libs/serializers.swc" +configname=airmobile ${project_name}.mxml

Pour les "Arguments", vous pouvez voir que j'ai ajouté pas mal de SWCs qui sont définis dans les projets Flex 4.5 par défaut. Cela est nécessaire sinon vous aurez une erreur de compilation du genre "IHTTPWrapper class was not found".

On peut aussi remarquer le paramètres configname=airmobile". Cela sert à indiquer que l'on est dans un contexte mobile. Si vous oubliez ce paramètre, vous aurez l'erreur suivante:

Error: Could not resolve <s:MobileApplication> to a component implementation

Une fois que votre External Tool Configuration est prête, sélectionnez le fichier TwitterTrends.mxml dans le Package Explorer et lancez votre External Tool Configuration. Si tout se passe bien, vous devriez obtenir dans la console:

Chargement du fichier de configuration C:\Program Files (x86)\Adobe\Adobe Flash Builder Burrito\sdks\4.5.0\frameworks\airmobile-config.xml
D:\workspaces\Flex\Flex_Mobile\TwitterTrends\src\TwitterTrends.swf (605724 octets)

Si vous avez un message d'erreur, lisez bien ce que le compilateur vous dit, la plupart du temps c'est assez clair.

Volontairement, le fichier SWF généré est dans le dossier "/src/" pour ne pas remplacer celui qui se trouve dans "/bin-debug/". Pour la suite des évènements, vous verrez que votre External Tools Configuration pour PFI pointe sur /bin-debug/{nom-app}.swf. N'oubliez donc pas de copiez le fichiers /src/TwitterTrends.swf vers /bin-debug/TwitterTrends. Si vous avez peur d'oublier, vous pouvez aussi rajouter un paramètre à l'External Tool Configuration que vous venez de créer pour lui dire d'écrire le fichier SWF dans le répertoire bin-debug .

Voilà, on a notre SWF, on va passer à la suite!

Le fichier xxx-app.xml

De base, le projet TwitterTrends contient un fichier /src/TwitterTrends-app.xml qui est un descripteur XML de l'application. Ce fichier contient notamment le nom de votre application, sa version, etc. Ce fichier contient aussi en première ligne le xmlns qui va définir la version d'AIR à la compilation. Dans TwitterTrends-app.xml, la valeur est 'xmlns="http://ns.adobe.com/air/application/2.5".

Pour iOS, on ne peut pas compiler en 2.5 mais seulement en 2.0 pour le moment. Le plus simple est donc de créer un second fichier TwitterTrends-app.xml (une copie) directement à la racine du projet. Vous pourrez donc modifier ce fichier et travailler dessus sans toucher au fichier qui vous sert normalement.

Voici le contenu du fichier TwitterTrends-app.xml à placer à la racine de votre projet:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<application xmlns="http://ns.adobe.com/air/application/2.0">
    <id>TwitterTrends</id>
    <filename>TwitterTrends</filename>
    <name>Twitter Trends</name>
    <version>1.0.0</version>
    <initialWindow>
        <content>TwitterTrends.swf</content>
        <fullScreen>true</fullScreen>
        <visible>true</visible>
        <autoOrients>true</autoOrients>
        <renderMode>gpu</renderMode>
         <width>960</width>
         <height>640</height>
    </initialWindow>

    <icon>
        <image29x29>icons/icon29.png</image29x29>
        <image48x48>icons/icon48.png</image48x48>
        <image57x57>icons/icon57.png</image57x57>
        <image72x72>icons/icon72.png</image72x72>
    </icon>

  <iPhone>
        <InfoAdditions>
        <![CDATA[
            <key>UIDeviceFamily</key>
            <array>
                <string>1</string>
                <string>2</string>
            </array>
        ]]>
        </InfoAdditions>
    </iPhone>
</application>

A noter que les InfoAdditions spécifient les types de devices pour lesquelles cette application est faîte. (1=iPhone, 2=iPad). Cela permet à iTunes d'afficher si votre application est une application uniquement pour iPhone, pour iPad ou pour les 2.

Le "rendermode" gpu est optionnel, de base il est sur "cpu" si vous ne le précisez pas. Le mode "gpu" permet d'avoir de meilleures performances dans certains cas (transformations de bitmap & co, voir forum).Vous pouvez aussi essayer cpu pour votre application, les gains de performance peuvent être intéressants, cela dépend du contenu de votre application.

Normalement, on a maintenant tous les éléments pour construire notre IPA, il ne nous reste plus qu'à exécuter PFI

Lancement et configuration du Packager For IPhone PFI

Vérifiez que vous avez bien tous les éléments précisés au dessus (certificats, SWF, xxx-app.xml, icones, …).Pour avoir une structure correcte, on va mettre notre fichier .mobileprovision et p12 dans un dossier nommé "cert" à la racine de notre projet. Voici à quoi votre projet doit ressembler:

Pour nous simplifier la vie, on va utiliser une External Tools Configuration. De la même manière (voir plus haut), créez une nouvelle configuration que l'on va appeler "Build iOS".

Renseignez les paramètres suivants:

Location:

D:\pfi\bin\pfi.bat

Working Directory:

${project_loc}/bin-debug

Arguments:

-package -target ipa-test
-provisioning-profile ../cert/Business_Geografic.mobileprovision
-storetype pkcs12
-keystore ../cert/iphone_dev.p12
-storepass VOTRE_PASSWORD
${project_name}.ipa
${project_loc}/${project_name}-app.xml
-C ${project_loc}/bin-debug/
${project_loc}/bin-debug/${project_name}.swf
/icons
Default.png
Default-Landscape.png
Default-Portrait.png
Default-PortraitLandscapeLeft.png
Default-PortraitLandscapeRight.png
Default-PortraitUpsideDown.png

Quand tout vous semble ok, lancez la Debug Configuration. La vue Console devrait s'ouvrir avec marqué comme job "Build iOS [Program] D:\pfi\bin\pfi.bat". Si aucun message d'erreur ne s'affiche pendant les première 30 secondes, la suite devrait bien se passer.

Attention, le processus peut durer entre 5 et 10 minutes suivant la puissance de votre machine et l'ampleur de votre application. Il n'y a aucun indicateur d'avancement, soyez donc patient.

A la fin du process, vous devriez avoir un fichier TwitterTrends.ipa dans votre dossier "bin-debug". Il ne vous reste plus maintenant qu'à le transférer sur votre iPhone / iPad.

Transfert de l'IPA par iTunes

Lancez iTunes et connectez votre appareil. Glissez le fichier TwitterTrends.ipa dans votre bibliothèque iTunes:

L'application devrait apparaitre dans la liste de droite. Rendez-vous ensuite sur votre appareil (ici, iPad BG) dans l'onglet Apps. Vérifiez que Synchroniser les apps est bien coché et que l'application TwitterTrends est bien cochée dans la liste. Normalement cela devrait être OK car "Synchroniser automatiquement les nouvelles apps" est activé par défaut:

Appuyez sur "Synchroniser" ou "Appliquer" en bas à droite et laissez la synchronisation de votre iPhone / iPad se faire.

Votre application est maintenant déployée sur votre appareil, il ne vous reste plus qu'à tester ! Souvenez-vous, les performances seront médiocres mais cela ne peut aller que dans le bon sens .

Le résultat en vidéo

Pour bien faire, j'ai enregistré une petite vidéo qui montre la même application TwitterTrends déployée sur Android et sur iPad. Je n'ai pas d'iPhone mais je peux vous assurer que cela fonctionne (avec quelques petits problèmes de résolution). Démo sur Galaxy S Android 2.2 et iPad iOS 4.2:

Un problème? Besoin d'un coup de main?

Comme vous venez de le voir, la compilation avec PFI n'est pas une mince affaire et il y a énormément de points sur lesquels ont peut se planter. La plupart des solutions peuvent être trouvées sur le forum Packager For IPhone: