Création d’une première application AIR for iOS

AIR 2.6 ou ultérieur, iOS 4.2 ou ultérieur

Vous pouvez programmer le code des fonctionnalités d’une application iOS, les créer et les tester par le biais d’outils Adobe uniquement. Toutefois, pour installer une application iOS sur un périphérique et la distribuer, vous devez appartenir au programme iOS Developer d’Apple (service payant). Une fois membre du programme iOS Developer, vous pouvez accéder au portail iOS Provisioning Portal, où vous pouvez obtenir d’Apple les éléments et fichiers suivants, dont vous devez disposer pour installer une application sur un périphérique à des fins de test et de distribution ultérieure :

  • Certificats de développement et de distribution

  • ID d’application

  • Fichiers de configuration pour le développement et la distribution d’applications

Création du contenu de l’application

Créez un fichier SWF qui affiche le texte « Hello world! » Vous disposez à cet effet de Flash Professional, Flash Builder ou d’un autre IDE. Cet exemple fait simplement appel à un éditeur de texte et au compilateur SWF de ligne de commande intégré au kit SDK de Flex.

  1. Créez un répertoire destiné aux fichiers de l’application à un emplacement adéquat. Créez le fichier HelloWorld.as et modifiez-le dans l’éditeur de code de votre choix.

  2. Ajoutez le code suivant :

    package{ 
         
        import flash.display.Sprite; 
        import flash.text.TextField; 
        import flash.text.TextFormat; 
        import flash.text.TextFieldAutoSize; 
         
        public class HelloWorld extends Sprite 
        { 
            public function HelloWorld():void 
            { 
                var textField:TextField = new TextField(); 
                textField.text = "Hello World!"; 
                textField.autoSize = TextFieldAutoSize.LEFT; 
                     
                var format:TextFormat = new TextFormat(); 
                format.size = 48; 
                 
                textField.setTextFormat ( format ); 
                this.addChild( textField ); 
            } 
        } 
    }
  3. Compilez la classe à l’aide du compilateur amxmlc :

    amxmlc HelloWorld.as

    Un fichier SWF, HelloWorld.swf, est créé dans le même dossier.

    Remarque : cet exemple considère comme acquis que vous avez défini la variable d’environnement path de sorte à inclure le répertoire dans lequel réside amxmlc. Pour plus d’informations sur la définition de la variable path, voir Variables d’environnement path. Vous pouvez également saisir le chemin d’accès complet à amxmlc et aux autres outils de ligne de commande utilisés dans cet exemple.

Création des icônes et des graphiques de l’écran initial de l’application

Toutes les applications iOS contiennent des icônes affichées dans l’interface utilisateur de l’application iTunes et sur l’écran du périphérique.

  1. Créez un répertoire au sein du répertoire de projet et affectez-lui le nom « icons ».

  2. Créez trois fichiers PNG dans le répertoire icons, Nommez-les Icon_29.png, Icon_57.png et Icon_512.png.

  3. Modifiez les fichiers PNG pour créer des graphiques adaptés à l’application. Les fichiers doivent mesurer 29 pixels sur 29 pixels, 57 pixels sur 57 pixels et 512 pixels sur 512 pixels. Dans le cadre de ce test, vous pouvez vous contenter de carrés de couleur unie.

    Remarque : lorsque vous envoyez une application à l’App Store d’Apple, vous utilisez une version JPG (et non PNG) du fichier de 512 pixels. La version PNG est réservée au test des versions de développement d’une application.

Toute application iPhone affiche une image initiale lors de son chargement sur l’iPhone. Vous définissez cette image initiale dans un fichier PNG, comme suit :

  1. Dans le répertoire de développement principal, créez un fichier PNG appelé Default.png. (Ne placez pas ce fichier dans le sous-répertoire icons et respectez la casse du nom du fichier.)

  2. Modifiez le fichier de sorte que ses dimensions correspondent à 320 pixels de large sur 480 pixels de haut. Pour le moment, contentez-vous d’un contenu composé d’un rectangle blanc uni, que vous modifierez ultérieurement.

Pour plus d’informations sur ces graphiques, voir Icônes d’une application.

Création du fichier descripteur de l’application

Créez un fichier descripteur de l’application qui spécifie les propriétés de base de cette dernière. Vous disposez à cet effet d’un IDE tel que Flash Builder ou un éditeur de texte.

  1. Dans le dossier du projet qui contient HelloWorld.as, créez un fichier XML, HelloWorld-app.xml. Modifiez ce fichier dans l’éditeur XML de votre choix.

  2. Ajoutez le code XML suivant :

    <?xml version="1.0" encoding="utf-8" ?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7" minimumPatchLevel="0"> 
        <id>change_to_your_id</id> 
        <name>Hello World iOS</name> 
        <versionNumber>0.0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <supportedProfiles>mobileDevice</supportedProfiles> 
        <initialWindow> 
            <content>HelloWorld.swf</content> 
            <title>Hello World!</title> 
        </initialWindow> 
        <icon> 
            <image29x29>icons/AIRApp_29.png</image29x29> 
            <image57x57>icons/AIRApp_57.png</image57x57> 
            <image512x512>icons/AIRApp_512.png</image512x512> 
        </icon> 
    </application>

    Par souci de simplicité, cet exemple ne définit que quelques-unes des propriétés disponibles.

    Remarque : Si vous utilisez AIR 2 ou une version antérieure, vous devez utiliser l’élément <version> et non l’élément <versionNumber>.
  3. Remplacez l’ID de l’application par l’ID spécifié dans le portail iOS Provisioning Portal. (N’incluez pas de préfixe au début de l’ID d’application.)

  4. Testez l’application avec l’application ADL :

    adl HelloWorld-app.xml -screensize iPhone

    L’application ADL devrait ouvrir une fenêtre sur le bureau dans laquelle figure le texte Hello World!. Si tel n’est pas le cas, vérifiez si le code source et le fichier descripteur d’application contiennent des erreurs.

Compilation du fichier IPA

Vous pouvez maintenant compiler le fichier d’installation IPA à l’aide de l’outil ADT, comme suit : Vous devez disposer de la clé privée et du certificat de développement Apple au format P12, ainsi que du profil de configuration pour le développement Apple.

Exécutez l’outil ADT en spécifiant les options suivantes (remplacez les valeurs keystore, storepass et provisioning-profile par vos propres valeurs) :

adt -package -target ipa-debug 
    -keystore iosPrivateKey.p12 -storetype pkcs12 -storepass qwerty12 
    -provisioning-profile ios.mobileprovision 
    HelloWorld.ipa 
    HelloWorld-app.xml 
    HelloWorld.swf icons Default.png

(Utilisez une ligne de commande unique. Les sauts de ligne qui figurent dans cet exemple ont pour unique objet de faciliter la lecture du code.)

L’outil ADT génère le fichier d’installation de l’application iOS, HelloWorld.ipa, dans le répertoire du projet. La compilation du fichier IPA prend parfois quelques minutes.

Installation de l’application sur un périphérique

Pour installer l’application iOS à des fins de test :

  1. Ouvrez l’application iTunes.

  2. Le cas échéant, ajoutez à iTunes le profil de configuration associé à l’application. Dans iTunes, sélectionnez Fichier > Ajouter le fichier à la bibliothèque. Sélectionnez ensuite le fichier du profil de configuration (dont le type de fichier correspond à mobileprovision).

    Utilisez à présent le profil de configuration pour le développement afin de tester l’application sur le périphérique de développement.

    Lors de la distribution ultérieure de l’application sur l’iTunes Store, vous utiliserez le profil de distribution. Pour procéder à une distribution ad hoc de l’application (en d’autres termes, pour la distribuer sur plusieurs périphériques sans passer par l’iTunes Store), utilisez le profil de configuration ad hoc.

    Pour plus d’informations sur les profils de configuration, voir Configuration d’iOS.

  3. Certaines versions d’iTunes ne remplacent pas l’application si une version identique de l’application est déjà installée. Dans ce cas de figure, supprimez l’application du périphérique et de la liste d’applications dans iTunes.

  4. Double-cliquez sur le fichier IPA associé à l’application. Elle devrait apparaître dans la liste d’applications d’iTunes.

  5. Connectez le périphérique au port USB de l’ordinateur.

  6. Dans iTunes, vérifiez sur l’onglet Application associé au périphérique que l’application est sélectionnée dans la liste d’applications à installer.

  7. Sélectionnez le périphérique dans la liste de gauche d’applications. Cliquez ensuite sur le bouton Synchroniser. Une fois la synchronisation terminée, l’application Hello World apparaît sur l’iPhone.

Si la nouvelle version n’est pas installée, supprimez-la du périphérique et de la liste d’applications dans iTunes, puis répétez la procédure. Ce cas de figure se produit parfois si la version actuellement installée utilise le même ID et le même numéro.

Modification des graphiques de l’écran initial

Avant de compiler l’application, vous avez créé le fichier Default.png (voir Création des icônes et des graphiques de l’écran initial de l’application). Ce fichier PNG contient l’image de démarrage affichée lors du chargement de l’application. Lorsque vous avez testé l’application sur l’iPhone, peut-être avez-vous remarqué l’écran vide au démarrage.

Remplacez cette image par l’écran de démarrage de l’application (« Hello World! ») en procédant comme suit :

  1. Ouvrez l’application sur le périphérique. Lorsque la première occurrence du texte « Hello World » apparaît, appuyez sur le bouton principal (figurant sous l’écran) et maintenez-le enfoncé. Tout en maintenant appuyé le bouton principal, appuyez sur le bouton Marche/Veille figurant dans la partie supérieure de l’iPhone. Vous effectuez ainsi une capture d’écran, qui est envoyée à Pellicule.

  2. Transférez l’image sur l’ordinateur de développement via iPhoto ou toute autre application adaptée. (Sous Mac OS, vous disposez également de l’application Transfert d’images.)

    Vous pouvez aussi envoyer la photo par E-mail à l’ordinateur de développement, comme suit :

    • Ouvrez l’application Photos.

    • Ouvrez Pellicule.

    • Ouvrez la capture d’écran que vous avez effectuée.

    • Touchez l’image, puis le bouton fléché figurant dans l’angle inférieur gauche. Cliquez ensuite sur le bouton Envoyer par courrier et envoyez l’image à votre propre adresse électronique.

  3. Remplacez le fichier Default.png, qui réside dans le répertoire de développement, par une version PNG de la capture d’écran effectuée.

  4. Recompilez l’application (voir Compilation du fichier IPA) et installez-la à nouveau sur le périphérique.

L’application utilise à présent le nouvel écran de démarrage au chargement.

Remarque : sous réserve de respecter les dimensions requises (320 x 480 pixels), libre à vous de créer n’importe quel graphique pour le fichier Default.png. Il est toutefois préférable que l’image issue du fichier Default.png corresponde à l’état initial de l’application.