Tutorial Adobe AIR: Première application avec Ajax

Lors de mon dernier article, je détaillais l’installation d’Adobe Air, nouvelle techno permettant au développeur web de créer des applications de bureau en utilisant les langages qu’il connait, comme HTML et Javascript.
Aujourd’hui, je vous propose de réaliser une première application permettant de retrouver le code postal d’une ville Française.

Si vous n’avez pas encore installé Adobe Air, je vous invite à lire mon article précédent détaillant l’installation sous Mac OS X et Windows.

Créez un répertoire codepostal sur votre disque. Créez-y deux fichiers: application.xml et codepostal.html.
Le fichier application.xml est ce que l’on nomme le fichier de description. C’est en effet dans ce fichier que nous allons spécifier la taille de la fenêtre, le nom de l’application, les icônes éventuelles…

Insérez le code suivant dans le fichier application.xml:

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

Les divers éléments qui composent le code xml sont les suivants:

id: Un identifiant unique pour votre application
version: La version de l’appli
filename: Le nom de l’appli
content: le fichier principal de l’application (Ici, il s’agit de codepostal.html)
visible: Visibilité de la fenêtre
width: longueur de l’application en pixels
height: hauteur de l’application en pixels

Voilà pour le fichier de description. Ouvrons maintenant le fichier codepostal.html, et insérons-y le code suivant:

<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript">
	var myAjax = ajax();

	function ajax() {
		var ajax = null;
		if (window.XMLHttpRequest)
		{
			try
			{
				ajax = new XMLHttpRequest();
			}
			catch(e) {}
		}

		return ajax;
	}

	function cp_request(ville) {
		myAjax.open("GET", "http://www.showbuzz.org/ajax/ville2cp.php?ville="+ville);
		myAjax.onreadystatechange = cp_result;
myAjax.send();
	}

	function cp_result() {
		if (myAjax.readyState == 4) {
			var myCp = myAjax.responseText;
			document.getElementById('cp').value = myCp;
		}
	}

	function getcp(ville) {
		cp_request(ville);
	}
    </script>
</head>
<body>
    <h1>Saisir le nom d'une ville</h1>
	<input type="text" id="ville" onkeyup="getcp(this.value)" />
	<input type="text" id="cp" value="Code postal" disabled="disabled" />
</body>
</html>

Dans ce code html/javascript, nous allons créer quatre fonctions:

ajax: Retourne un objet XMLHttpRequest afin de pouvoir envoyer des requêtes Ajax.
cp_request: Demande le code postal au script php sur le serveur.
cp_result: Traite la réponse du serveur et affiche le résultat sur la page HTML.
getcp: Déclenche l’action Ajax.

Voilà pour l’application. Nous allons pouvoir la tester en utilisant l’utilitaire adl.
Ouvrez le Terminal (sous Mac) ou l’interpreteur MS-DOS (sous Windows), déplacez-vous dans le répertoire de votre application puis tapez:

adl application.xml

Votre application doit désormais être ouverte, et vous pouvez la tester. Entrez le nom d’une ville dans le champ prévu à cet effet, le code postal correspondant devrait normalement s’afficher dans le champ de droite.
A noter, comme le montre la capture d’écran, j’ai eu des warnings lors de la phase de test. Etant moi même en pleine phase de familiarisation avec Air, je ne saurais vous en dire plus sur le sujet, malheureusement.

Il est maintenant temps de compiler le programme. La première chose à faire est de générer un certificat:

adt -certificate -cn SelfSigned 1024-RSA certif.pfx votreMotDePasse

N’égarez pas le mot de passe, il sera nécessaire pour compiler le programme
Une fois que nous avons le certificat, il ne reste plus qu’à lancer la commande suivante:

adt -package -storetype pkcs12 -keystore certif.pfx codepostal.air application.xml codepostal.html

Après avoir renseigné le mot de passe du certificat, vous trouverez dans votre répertoire le fichier codepostal.air. Vous pouvez désormais installer votre appli et la distribuer à qui vous voulez