[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Programmation > Autres langages > [AIR] Tout sur Adobe AIR > Réalisation d'une application > Structure et création d'une application > Lecture du tutoriel

Structure et création d'une application

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Toute application AIR basée sur du HTML et du JavaScript doit OBLIGATOIREMENT être composée au minimum des deux fichiers suivants : un fichier XML (appelé le descripteur d'application) et un fichier HTML (l'application en elle-même).
Les fichiers composant l'application respectent donc l'arborescence suivante :

./mon_appli_AIR/ (dossier),

application_descripteur.xml (fichier XML),
application_html.html (fichier HTML),
[et éventuellement d'autres dossiers ou fichiers (par exemple : des images stockées dans le dossier ./mon_appli_AIR/imgs/ )].

Maintenant que vous savez de quels fichiers est composée une application AIR, je vais pouvoir vous expliquer ce qui se passe à l'intérieur de ces fichiers, et à quoi ils servent vraiment.

Pour ce faire, je vous montrerai dans cette partie comment afficher le traditionnel "Hello World" dans notre appli... Stay tuned !

Sommaire du chapitre :

Le descripteur d'application
La page HTML : le coeur de l'application
Tester et compiler l'application
Les frameworks JavaScript
Ce qu'il faut retenir
Q.C.M.

Le descripteur d'application

Nous allons commencer avec un fichier essentiel, puisqu'il définit les caractéristiques élémentaires qu'aura l'application à laquelle il est lié : le descripteur d'application.

Les propriétés contenues dans ce fichier, organisées sous la forme d'un arbre XML, affecteront l'application dans sa totalité. On peut par exemple y définir le nom de l'application, sa version, les copyrights, etc.

Voici un exemple de descripteur simple, mais qui vous permettra de réaliser sans soucis les micro-TP de ce tuto, et aussi vos premières applications.

Code : XML

<?xml version="1.0" encoding="UTF-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
	<id>tuto.exemple.HelloWorld</id>
	<version>0.1</version>
	<name>Hello World</name>
	<description>Mini application ne faisant qu'afficher "Hello World !"</description>
	<filename>hello_world</filename>
	<initialWindow>
		<content>hello_world.html</content>
		<visible>true</visible>
		<width>450</width>
		<height>400</height>
	</initialWindow>
</application>

Passons maintenant aux choses sérieuses marrantes... Je veux évidemment parler du "décorticage" de ce fichier XML. :pirate:

Les paramètres qu'il contient n'étant pas tous obligatoires, j'ai préféré les séparer en deux parties. L'une explicitant les éléments obligatoires, l'autre explicitant les facultatifs.

Les éléments obligatoires

Tous les éléments décrits dans cette partie sont obligatoires !

Commençons par le commencement, c'est-à-dire annoncer que le contenu du fichier est du XML encodé en UTF-8. Et ça, c'est la première ligne qui s'en charge :
Code : XML

1	<?xml version="1.0" encoding="UTF-8" ?>

Le prologue XML annonçant un contenu encodé en UTF-8, prenez bien soin de vérifier l'encodage du document pour qu'il corresponde.

Vient ensuite la balise "application". Balise importante s'il en est, puisque c'est à l'intérieur de celle-ci que sont définies toutes les propriétés que l'on souhaite donner à notre application.
Un développeur averti remarquera sans doute que cette balise est pourvue de l'attribut "xmlns". :-°

Code : XML

1	<application xmlns="http://ns.adobe.com/air/application/1.0">

Cet attribut, tout comme en xHTML, sert à définir le NameSpace (ou espace de nom) du document, et dans ce cas particulier, il sert aussi à préciser la version du runtime que doit posséder le client (la version 1.0 dans cet exemple). Si la version du client n'est pas celle requise par l'application, AIR se charge d'afficher une boîte de dialogue pour demander à l'utilisateur de remédier au problème (en mettant à jour le runtime par exemple).

id, c'est une chaîne d'au minimum un caractère et d'un maximum de 212 qui fait office d'identifiant unique, ce qui permet au runtime de pouvoir identifier cette application parmi les autres.
Cette chaîne est restreinte aux caractères suivants :

0-9
a-zA-Z
. (point)
- (tiret)

version, chaîne définissant le numéro de version de l'application. Cette information, bien qu'obligatoire, n'influe en rien sur le comportement du runtime ou du SDK et ne sera même pas interprétée par ces derniers.

filename, nom du fichier HTML contenant l'application (sans l'extension).

initialWindow, les propriétés enfants de initialWindow seront chargées lors du lancement du programme afin de créer la fenêtre principale.

content, URL relative du fichier (page HTML ou fichier SWF) à charger dans la fenêtre principale, à partir de la racine de l'application. Ce paramètre étant une URL, il doit être encodé correctement.

Les éléments facultatifs

Tous les éléments décrits dans cette partie sont facultatifs !

name, nom de l'application. Sera affiché lors de l'installation et lors du fonctionnement si aucun titre n'est défini dans l'application. S'il est renseigné, il sera aussi utilisé pour nommer le dossier d'installation.

description, description de l'application. Elle sera affichée lors de l'installation.

visible, booléen contrôlant l'affichage immédiat (s'il vaut true) ou retardé de la fenêtre principale (pour par exemple avoir le temps de déplacer la fenêtre, modifier ça taille, charger entièrement l'application, etc.). Si ce paramètre n'est pas renseigné, sa valeur par défaut étant false, il vous faudra effectuer une petite action (que les chapitres sur les fenêtres vous apprendront) de manière à rendre la fenêtre visible.

width, largeur de la fenêtre en pixels.

height, hauteur de la fenêtre en pixels.

Pfiou ! Ben ça en fait des choses à dire pour ce petit descripteur !
N'hésitez pas à relire et à bookmarker cette partie, car le contenu du descripteur est très important, et les propriétés ci-dessus constituent la base de sa configuration.

Heureusement, la partie HTML de l'application est on ne peut plus simple, et elle ne vous apprendra rien que vous ne sachiez déjà... Du moins je l'espère. :-°

La page HTML : le coeur de l'application

Sans plus de blabla, je vous propose d'attaquer la partie HTML de l'application.
Pour ceux qui l'auraient oublié, l'appli que nous voulons créer aura pour seul et unique but d'afficher "Hello World !". Donc rien de bien compliqué pour les experts en HTML que vous êtes.

Seulement, histoire de compliquer un peu plus la chose, nous allons tenter de centrer notre message et de le colorer en bleu. Et pour le fun, nous allons aussi afficher une boîte de dialogue en JavaScript avec notre fameux message, et ce, dès que la fenêtre sera chargée.

Mes exigences vous paraissent-elles claires ? Si oui, allez, au boulot jeunes padawans !

Hep hep ! Minute ! Tu nous fais faire un exo sans même nous avoir appris comment le résoudre ?

Hmm... Le but de l'exercice n'est-il pas de réaliser une appli très simple ? N'ai-je pas précisé qu'une appli AIR aussi simple utilise exactement la même structure qu'une page HTML classique ?
Si ? Alors où est le problème ? Faites simplement comme si notre appli n'était en fait qu'une page web "normale" !

Allez, cette fois, au boulot !

...

...

Ayé, c'est terminé ?
Comment ça "non" ?! :pirate:

...

...

Bon, correction time !

Secret (cliquez pour afficher)

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Hello World !</title>
	<style type="text/css">
		.hello {
			color: blue;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			alert('Hello World !');
		}
	</script>
</head>
<body>
	<h1 class="hello">Hello World !</h1>
</body>
</html>

Eh bien oui, à votre grande surprise, une page HTML d'application AIR se présente comme... une page HTML classique d'un site web !
Nous pouvons donc très bien utiliser les mêmes propriétés CSS que pour un site web afin de centrer et de colorer notre message, ainsi que des fonctions JavaScript pour afficher notre boîte de dialogue.

Tu nous dis qu'on peut utiliser les mêmes fonctions JavaScript que pour nos sites web, mais peut-on aussi utiliser les mêmes frameworks ?

Bonne question petits Zér0s !
Eh bien, la réponse à votre question serait... oui, et non.

En effet, tous les frameworks ne sont pas utilisables avec AIR (Prototype ne l'est pas d'ailleurs)... Mais nous verrons cela plus en détails lors de nos TP.

Tant que nous parlons de JavaScript, il faut savoir que le runtime de AIR met à notre disposition tout un tas de classes JS permettant la gestion des bases de données locales, des fichiers, etc.

Ces classes forment ce que j'appellerai par la suite l'API de AIR.

Ces classes s'instancient et s'utilisent comme toutes les classes JavaScript "classiques", voyez plutôt :
Code : JavaScript

1	var conn = new air.SQLConnection(); //la classe "SQLConnection" est celle que nous étudierons dans le prochain chapitre

Le "air." de l'instanciation de la classe SQLConnection est indispensable car il permet d'aller "fouiller" dans l'API de AIR pour aller chercher la classe demandée.
Ce "air." n'est en fait qu'un alias qui permet d'éviter d'avoir à écrire "window.runtime.flash.data.SQLConnection" (dans ce cas-ci, ça pourrait être parfois bien plus long).
Pour faciliter la vie des développeurs, Adobe a mis à disposition un fichier nommé "AIRAliases.js" contenant tous les alias de l'API.
Grâce à ce fichier, il suffit donc de mettre "air." devant la classe à instancier, et vous pourrez démarrer.
Bien que ce dernier puisse être trouvé dans le dossier "frameworks" du SDK, j'ai pensé qu'un lien pour le télécharger pouvait être utile. N'hésitez pas à jeter un coup d'oeil ici.
Pour utiliser ces alias, il suffit d'inclure le fichier AIRAliases.js comme vous le feriez pour n'importe quel fichier JavaScript.

Alors, c'était si difficile que ça ?
Citation : Zér0s

Ben oui c'était dur ! Tu nous as même pas dit comment tester notre code !

En effet, j'ai préféré garder le meilleur pour la fin, vous pouvez donc passer à la lecture de la suite du tuto.

Tester et compiler l'application

Maintenant que notre application est codée, il serait sympa de voir si elle fonctionne, et si c'est le cas, de la compiler pour pouvoir l'installer.

Tester une application

Pour cela, rien de plus simple. =)

Il suffit d'ouvrir un terminal (ou invite de commandes si vous êtes sous Windows) et de vous placer dans le répertoire qui contient l'application (pour ne pas avoir à entrer le chemin complet vers cette dernière à chaque fois). Pour moi, ça donne quelque chose comme ça :
Code : Console

cd ./Bureau/tuto_AIR/hello_world/

Maintenant, entrez la commande adl suivie du nom du descripteur d'application (dans mon cas hello_world.xml).
Code : Console

adl hello_world.xml

Si tout se passe bien, une fenêtre contenant votre application s'ouvre, et là vous êtes content, vous venez d'exécuter votre première application AIR !

Vous pourrez désormais tester votre application quand bon vous semblera, et sans avoir besoin de la compiler entièrement.

Petite précision : le terminal dans lequel vous avez lancé l'exécution du programme sera aussi utilisé par AIR en cas d'erreur avec ce dernier, ou si l'application choisit d'y "logguer" un message (ce que nous apprendrons très bientôt à faire

Problème courant

Il se peut qu'au lieu de lancer votre application, un message vous soit renvoyé par le terminal. Je vais donc expliciter le message d'erreur le plus courant :

Citation : SDK AIR

application descriptor not found

Ici, le SDK nous dit que le descripteur d'application n'a pas été trouvé. Trois causes sont possibles :

vous n'êtes pas situé dans un dossier le contenant ;
le nom du descripteur entré lors de la commande est erroné ;
il y a une erreur de syntaxe dans le descripteur, ce qui fait qu'il n'est pas reconnu comme étant un descripteur.

Compiler l'application

Nous y sommes, notre application fonctionne parfaitement, et peut enfin être distribuée !
Il ne nous reste plus qu'à la compiler afin que tout le monde puisse l'installer sur son ordinateur et l'utiliser sans passer par un terminal.

Signature de l'application

La première étape de la compilation consiste à signer numériquement l'application. En la signant, vous certifiez au futur utilisateur que cette dernière n'a pas été modifiée depuis la compilation. L'outil de génération de certificat d'Adobe est gratuit, mais il affichera automatiquement "unknown" en tant qu'éditeur de l'application.
Pour remédier à cela, il n'y a pas d'autre moyen que d'acheter un certificat à VeriSign, Thawte, ou autre. Cependant, à notre niveau, nous ne sommes pas encore concernés par ce genre de "soucis".

Passons maintenant à la partie pratique. Pour signer une application, rendez-vous dans le dossier qui la contient, et entrez la commande suivante (en prenant soin de remplacer "motdepasse" par votre mot de passe, et de bien mémoriser ce dernier) :
Code : Console

adt -certificate -cn SelfSigned 1024-RSA certificat.pfx motdepasse

Maintenant que le certificat généré, nous pouvons passer à la compilation.

La compilation

Compiler un programme AIR signifie "regrouper tous les fichiers le composant dans un seul et unique fichier AIR, exécutable sur n'importe quelle machine équipée du runtime d'AIR".

Et pour compiler une application, il suffit d'utiliser la commande suivante :
Code : Console

adt -package -storetype pkcs12 -keystore certificat.pfx HelloWorld.air hello_world.xml hello_world.html

Tous les fichiers/dossiers composants l'application doivent être listés lors de la commande de compilation, y compris le certificat et le descripteur d'application.

Le fichier ainsi obtenu est un exécutable AIR, un double-clic sur ce dernier suffit pour lancer l'installation.

Les frameworks JavaScript

Citation : K-Phoen

une page HTML d'application AIR se présente comme... une page HTML classique d'un site web !

Partant de ce que je vous ai dit précédemment, nous pouvons faire la déduction suivante : si une page HTML d'appli AIR se comporte comme une page HTML classique, alors je peux utiliser les mêmes frameworks que dans mes sites web.
Seulement, cette affirmation n'est pas vraie pour tous les frameworks JavaScript.

Pour les frameworks compatibles avec AIR (que je liste ci-après), l'inclusion du fichier .js dans la page HTML vous permettra de pouvoir exploiter les capacités du framework.
Sont pris en charge les frameworks suivants :

Dojo Toolkit 1.1.0 bêta ;
Ext JS 2.0.2 avec adaptateur Adobe AIR ;
jQuery 1.2.3 ;
MochiKit 1.3.1 ;
MooTools 1.11 ;
Version préliminaire de Spry 1.6.1.

N.B : Prototype ne faisant pas partie de la liste ci-dessus, il ne servirait à rien que vous tentiez de l'utiliser pour vos applis car il n'est pas compatible avec Adobe AIR.

Ce qu'il faut retenir

J'inaugure ici une sous-partie que vous risquez de rencontrer souvent au cours de ce tuto, car je l'utiliserai désormais pour faire une mini-synthèse de ce qu'il faut absolument avoir retenu du chapitre.

Toutes les infos, notions et autres ne seront donc pas obligatoirement reprises ici.

Une application AIR se compose d'au moins deux fichiers :

le descripteur d'application ;
le fichier HTML contenant l'application.

Le descripteur d'application : fichier XML contenant les caractéristiques élémentaires de l'application. Les éléments id, version, filename et content doivent obligatoirement y figurer. Voir la partie sur le descripteur d'application pour plus de précisions.

Le fichier HTML : fichier HTML contenant l'application. À notre niveau et dans ce tuto, nous allons admettre que ce fichier ne peut contenir que du HTML, du CSS, et du JavaScript.

Durant le développement de l'application, il est possible de la tester sans avoir à la compiler. Pour cela, il vous suffit d'entrer adl mon_descripteur.xml dans un terminal.
Pour compiler l'application, un coup de adt -package -storetype pkcs12 -keystore mon_certificat.pfx Mon_Appli.air . mon_descripteur.xml mon_appli.html vous comblera (attention à avoir préalablement créé un certificat).

Pour utiliser un framework JavaScript dans votre appli AIR, il suffit de l'inclure comme on le ferait pour une page HTML classique.

Q.C.M.

Combien de fichiers au minimum sont nécessaires pour créer une application AIR ?

Tout dépend de l'application ;
un seul ;
deux.

Bien que le fichier principal de l'application soit un fichier HTML, je ne peux ni utiliser de CSS, ni du JavaScript pour coder mon application.

Faux ;
vrai.
je peux avoir un café ? =D ;

Pour tester mon application, je dois...

... utiliser le SDK et sa commande "adl".
... la compiler et installer le fichier .air ainsi créé.
... ouvrir le fichier .html contenant l'application dans mon navigateur internet.

Pour utiliser le framework JavaScript jQuery, je dois...

... ne rien faire, le framework est inclu par défaut dans AIR.
... inclure le fichier JS contenant le framework, et faire comme si je codais une application web "normale".
... le déclarer en faisant un "var jquery = new jquery();".

Statistiques de réponses au QCM

Voilà, vous savez maintenant comment créer une application basique sous AIR. Et si on passait à quelque chose d'un peu plus stimulant... un TP par exemple ! :ange:

Pour les Zér0s intéressés, je mets à disposition l'application que nous venons juste de créer (sources + exécutable).
Vous pouvez télécharger l'archive ici.

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité