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

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.

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 :

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 :

   Afficher le graphique à sa taille d'origine

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.

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.