Création d’une première application AIR de type HTML à l’aide du kit SDK d’AIR

Création des fichiers du projet
Création du fichier descripteur d’application AIR
Création de la page HTML de l’application
Test de l’application
Création du fichier d’installation AIR
Etapes suivantes

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 HTML simple, appelée « Hello World ».

Avant de commencer, vous devez installer le moteur d’exécution et configurer le kit SDK AIR. Dans ce didacticiel, vous allez utiliser l’application de débogage du lanceur AIR et l’outil AIR Developer (ADT). Les outils ADL et ADT sont des programmes de ligne de commande et résident dans le répertoire bin du kit SDK AIR (voir Installation du kit de développement SDK AIR). Dans ce didacticiel, il est considéré comme acquis que vous savez exécuter des programmes à partir de la ligne de commande et configurer les variables d’environnement path requises par le système d’exploitation.

Remarque : si vous utilisez Adobe® Dreamweaver®, voir Création d’une première application AIR de type HTML dans Dreamweaver.

Remarque : vous ne pouvez développer des applications AIR de type HTML que pour les profils desktop et extendedDesktop. Les profils mobile et tv ne sont pas pris en charge.

Création des fichiers du projet

Chaque projet AIR HTML doit contenir les deux fichiers suivants : un fichier descripteur d’application, qui définit les métadonnées de l’application, et une page HTLM de niveau supérieur. Outre ces fichiers obligatoires, le projet comprend également un fichier de code JavaScript, AIRAliases.js, qui définit des variables d’alias pratiques pour les classes des API AIR.

Créez le répertoire HelloWorld qui contiendra les fichiers du projet.
Créez le fichier XML HelloWorld-app.xml.
Créez le fichier HTML HelloWorld.html.
Copiez AIRAliases.js du dossier frameworks du kit SDK AIR vers le répertoire du projet.

Création du fichier descripteur d’application AIR

Pour commencer à programmer l’application AIR, créez un fichier descripteur d’application XML contenant la structure suivante :

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

Ouvrez le fichier HelloWorld-app.xml en vue de le modifier.
Ajoutez l’élément <application> racine avec pour attribut l’espace de noms AIR :

<application xmlns="http://ns.adobe.com/air/application/2.6"> Le dernier segment de l’espace de noms, « 2.6 », indique la version du moteur d’exécution requis par l’application.
Ajoutez l’élément <id> :

<id>examples.html.HelloWorld</id> L’ID identifie l’application de manière unique, en conjonction avec l’ID d’éditeur (dérivé par AIR du certificat de signature du package d’application). L’ID d’application assure l’installation, l’accès au répertoire de stockage du système de fichiers de l’application privé, l’accès aux emplacements de stockage chiffrés privés et la communication entre les applications.
Ajoutez l’élément <versionNumber> :

<versionNumber>0.1</versionNumber> Permet à l’utilisateur de déterminer la version de l’application qu’il installe.
Ajoutez l’élément <filename> :

<filename>HelloWorld</filename> Nom utilisé pour le fichier exécutable et le répertoire d’installation de l’application, ainsi que pour les autres références à cette dernière dans le système d’exploitation.
Ajoutez l’élément <initialWindow>, qui contient les éléments enfant suivants, afin de spécifier les propriétés de la fenêtre initiale de l’application :

<content>HelloWorld.html</content> Identifie le fichier HTML racine que doit charger AIR.

<visible>true</visible> Indique que la fenêtre est immédiatement visible.

<width>400</width> Définit la largeur de la fenêtre (en pixels).

<height>200</height> Définit la hauteur de la fenêtre.

Enregistrez le fichier. Le fichier descripteur d’application terminé se présente comme suit :

<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.6"> 
    <id>examples.html.HelloWorld</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>HelloWorld</filename> 
    <initialWindow> 
        <content>HelloWorld.html</content> 
        <visible>true</visible> 
        <width>400</width> 
        <height>200</height> 
    </initialWindow> 
</application>

Cet exemple se contente de définir quelques unes des propriétés d’application disponibles. Voir Fichiers descripteurs d’applications AIR pour consulter la liste complète des propriétés de l’application, qui permettent de définir des paramètres tels que le chrome, la taille et la transparence des fenêtres, le répertoire d’installation par défaut, les types de fichier associés et les icônes de l’application.

Création de la page HTML de l’application

Vous devez à présent créer une page HTML simple qui constituera le fichier principal de l’application AIR.

Ouvrez le fichier HelloWorld.html en vue de le modifier. Ajoutez le code HTML suivant :

<html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Dans la section <head> du code HTML, importez le fichier AIRAliases.js :
```
<script src="AIRAliases.js" type="text/javascript"></script>
```
AIR définit une propriété appelée runtime sur l’objet de fenêtre HTML. Cette propriété permet d’accéder aux classes AIR intégrées, à l’aide du nom de package complet de la classe. Pour créer un objet File AIR, par exemple, vous pourriez ajouter l’instruction suivante en JavaScript :
```
var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");
```
Le fichier AIRAliases.js définit des alias pratiques pour les API AIR les plus utiles. Grâce à lui, vous pouvez par exemple raccourcir la référence à la classe File comme suit :
```
var textFile = new air.File("app:/textfile.txt");
```
Sous la balise script d’AIRAliases, ajoutez une autre balise script contenant une fonction JavaScript pour gérer l’événement onLoad :
```
<script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>
```
La fonction appLoad() appelle simplement la fonction air.trace(). Lorsque vous exécutez l’application à l’aide d’ADL, le message de trace s’imprime sur la console de commande. Les instructions de trace peuvent être très utiles pour le débogage.
Enregistrez le fichier.

Le fichier HelloWorld.html doit maintenant se présenter comme suit :

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Test de l’application

Pour exécuter et tester l’application à partir de la ligne de commande, faites appel à l’application de débogage du lanceur AIR (ADL). Le fichier exécutable ADL se trouve dans le répertoire bin du kit SDK AIR. Si vous n’avez pas encore installé le kit SDK AIR, voir Installation du kit de développement SDK AIR.

Ouvrez une console ou un shell de commande. Passez dans le répertoire créé pour ce projet.
Exécutez la commande suivante :
```
adl HelloWorld-app.xml
```
Une fenêtre AIR contenant l’application s’affiche. La fenêtre de la console présente également le message résultant de l’appel air.trace().

Pour plus d’informations, voir Fichiers descripteurs d’applications AIR.

Création du fichier d’installation AIR

Lorsque l’application s’exécute correctement, vous pouvez, à l’aide de l’outil ADT, la mettre en package sous forme de fichier d’installation AIR, c-à-d. un fichier d’archives contenant tous les fichiers de l’application, que vous pouvez distribuer à vos utilisateurs. Pour pouvoir installer un fichier AIR mis en package, vous devez installer Adobe AIR.

Pour garantir la sécurité des applications, tous les fichiers d’installation AIR doivent être signés numériquement. A des fins de développement, vous pouvez générer un certificat auto-signé de base à l’aide de l’outil ADT ou d’un autre outil de génération de certificats. Libre à vous également d’acheter un certificat de signature de code commercial auprès d’une autorité de certification telle que VeriSign ou Thawte. Lorsque les utilisateurs installent un fichier AIR auto-signé, l’éditeur porte la mention « Inconnu » pendant le processus d’installation. En effet, un certificat auto-signé garantit uniquement que le fichier AIR n’a pas été modifié depuis sa création. Rien n’empêche une tierce personne de présenter un faux fichier AIR auto-signé comme étant votre application. Il est fortement recommandé de signer les fichiers AIR que vous publiez au moyen d’un certificat commercial vérifiable. Pour une présentation de la sécurité AIR, voir Sécurité AIR (développeurs ActionScript) ou Sécurité AIR (développeurs HTML).

Génération d’un certificat auto-signé et d’une paire de clés

A l’invite de commande, entrez la commande suivante (le fichier exécutable ADT se trouve dans le répertoire bin du kit SDK AIR) :

adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

L’outil ADT génère le fichier de magasin de clés sampleCert.pfx, qui contient un certificat et la clé privée correspondante.

Cet exemple utilise le nombre minimal d’attributs qu’il est possible de définir pour un certificat. Vous pouvez attribuer toute valeur aux paramètres en italique. Le type de clé doit correspondre à 1024-RSA ou 2048-RSA (voir Signature d’applications AIR).

Création du fichier d’installation AIR

A l’invite de commande, entrez la commande suivante (sur une même ligne) :

adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

Vous êtes invité à entrer le mot de passe du fichier de magasin de clés.

L’argument HelloWorld.air correspond au fichier AIR généré par l’outil ADT. HelloWorld-app.xml est le fichier descripteur d’application. Les autres arguments représentent les fichiers utilisés par l’application. Cet exemple n’utilise que deux fichiers, mais vous pouvez inclure tout nombre de fichiers et de répertoires. L’outil ADT vérifie que le fichier de contenu principal, HelloWorld.html, figure dans le package, mais si vous omettez le fichier AIRAliases.js, l’application ne fonctionne pas.

Une fois le package AIR créé, vous pouvez double-cliquer dessus pour installer et exécuter l’application. Libre à vous également d’entrer le nom de fichier AIR en tant que commande dans une fenêtre de shell ou de commande.

Etapes suivantes

Dans AIR, le code HTML et JavaScript se comporte généralement comme s’il se trouvait dans un navigateur Web ordinaire. (De fait, AIR utilise le même moteur de rendu WebKit que le navigateur Web Safari.) Cependant, vous devez connaître quelques différences notoires lorsque vous développez des applications HTML dans AIR. Pour plus d’informations sur ces différences et d’autres sujets importants, voir Programming HTML and JavaScript (disponible en anglais uniquement).