Création d’une première application de bureau AIR Flex dans Flash Builder

Pour vous familiariser rapidement avec le fonctionnement d’Adobe® AIR®, suivez les instructions ci-dessous, qui permettent de créer et de mettre en package une application AIR SWF simple, appelée « Hello World », à l’aide d’Adobe® Flash® Builder.

Le cas échéant, téléchargez et installez Flash Builder. Téléchargez et installez également la version la plus récente d’Adobe AIR à partir de l’adresse suivante : www.adobe.com/go/air_fr.

Création d’un projet AIR

Flash Builder propose des outils de développement et de mise en package d’applications AIR.

Pour créer une application AIR dans Flash Builder ou Flex Builder, vous commencez comme s’il s’agissait de tout autre projet d’application Flex, c-à-d. en définissant un nouveau projet.

  1. Ouvrez Flash Builder.

  2. Sélectionnez Fichier > Nouveau > Projet Flex.

  3. Attribuez au projet le nom AIRHelloWorld.

  4. Dans Flex, les applications AIR sont considérées comme un type d’application. Vous disposez de deux options de type :

    • Application Web qui s’exécute dans Adobe® Flash® Player

    • Application de bureau qui s’exécute dans Adobe AIR

    Sélectionnez le type d’application de bureau.

  5. Cliquez sur Terminer pour créer le projet.

Les projets AIR se composent initialement de deux fichiers : le fichier MXML principal et un fichier XML d’application (ou fichier descripteur d’application). Le second fichier spécifie les propriétés d’une application.

Pour plus d’informations, voir Développement d’applications AIR avec Flash Builder.

Ecriture du code de l’application AIR

Pour écrire le code de l’application « Hello World », vous modifiez le fichier MXML de l’application, qui est ouvert dans l’éditeur. (Le cas échéant, ouvrez le fichier dans l’explorateur de projets.)

Les applications AIR Flex de bureau sont contenues dans la balise MXML WindowedApplication. Celle-ci crée une fenêtre simple qui comprend des contrôles de fenêtre de base, tels qu’une barre de titre et un bouton de fermeture.

  1. Ajoutez un attribut title au composant WindowedApplication et affectez-lui la valeur "Hello World" :

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
    </s:WindowedApplication>
  2. Ajoutez un composant Label à l’application (en le plaçant dans la balise WindowedApplication). Définissez la propriété text du composant Label sur "Hello AIR" et stipulez qu’il doit être centré, comme illustré ci-dessous :

    <?xml version="1.0" encoding="utf-8"?> 
    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" 
                           title="Hello World"> 
     
        <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
    </s:WindowedApplication>
  3. Ajoutez le bloc de style suivant juste après la balise WindowedApplication d’ouverture et avant la balise du composant Label que vous venez d’entrer :

    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
    skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style>

Ces paramètres de style s’appliquent à l’intégralité de l’application et définissent un arrière-plan de fenêtre gris légèrement transparent.

Le code de l’application se présente à présent comme suit :

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

Vous allez maintenant modifier certains paramètres dans le descripteur de l’application pour que celle-ci soit transparente :

  1. Dans le panneau Navigation de Flex, recherchez le fichier descripteur d’application dans le répertoire source du projet. Si vous avez nommé le projet AIRHelloWorld, ce fichier s’appelle AIRHelloWorld-app.xml.

  2. Double-cliquez sur le fichier descripteur d’application pour le modifier dans Flash Builder.

  3. Dans le code XML, recherchez les lignes de commentaire des propriétés systemChrome et transparent (de la propriété initialWindow). Supprimez les commentaires (autrement dit, supprimez les séparateurs « <!-- » et « --> »).

  4. Définissez la valeur de texte de la propriété systemChrome sur none, comme indiqué ci-après :

    <systemChrome>none</systemChrome>
  5. Définissez la valeur de texte de la propriété transparent sur true, comme indiqué ci-après :

    <transparent>true</transparent>
  6. Enregistrez le fichier.

Test de l’application AIR

Pour tester le code d’application que vous venez d’écrire, exécutez-le en mode de débogage.

  1. Cliquez sur le bouton de débogage dans la barre d’outils principale.

    Vous pouvez aussi sélectionner la commande Run > Debug > AIRHelloWorld.

    L’application AIR qui en résulte s’apparente à l’exemple suivant :

  2. Grâce aux propriétés horizontalCenter et verticalCenter du contrôle Label, le texte est placé au centre de la fenêtre. Vous pouvez déplacer ou redimensionner la fenêtre comme pour toute autre application de bureau.

Remarque : si la compilation de l’application échoue, corrigez les erreurs de syntaxe ou les fautes d’orthographe introduites par inadvertance dans le code. Dans Flash Builder, les erreurs et les avertissements s’affichent en mode Problems.

Mise en package, signature et exécution de l’application AIR

Vous pouvez maintenant mettre l’application « Hello World » en package sous forme de fichier AIR pour la distribuer. Un fichier AIR est un fichier d’archives contenant les fichiers de l’application ; autrement dit, tous les fichiers qui figurent dans le dossier bin du projet. Dans cet exemple simple, il s’agit des fichiers SWF et XML. Vous distribuez le package AIR aux utilisateurs, qui s’en servent pour installer l’application. Dans le cadre de ce processus, il est impératif de signer le package numériquement.

  1. Assurez-vous que l’application est exempte d’erreurs de compilation et s’exécute comme il se doit.

  2. Sélectionnez Projet > Exporter vers une version validée.

  3. Vérifiez que le projet correspond à AIRHelloWorld et l’application à AIRHelloWorld.mxml.

  4. Sélectionnez l’option d’exportation en tant que package signé. Cliquez ensuite sur Suivant.

  5. Si vous disposez déjà d’un certificat numérique, cliquez sur Parcourir pour y accéder, puis sélectionnez-le.

  6. Si vous devez créer un certificat numérique auto-signé, sélectionnez Créer.

  7. Spécifiez les informations requises et cliquez sur OK.

  8. Cliquez sur Terminer pour générer le package AIR, qui s’appelle AIRHelloWorld.air.

Vous pouvez maintenant installer et exécuter l’application à partir de l’explorateur de projets dans Flash Builder ou en double-cliquant sur le fichier AIR dans le système de fichiers.