Ma première application AIR

Jus De Citron on AIR

Adobe AIR permet de développer et de déployer des applications bureau, connectée au web, à l'aide des technologies AJAX ou Flex.
J'aime bien les applications basées sur la technologie AIR, comme par exemple Analytics Reporting Suite .
J'avais besoin de quelques statistiques pour mon blog, tels que le nombre de billets depuis l'origine, où ce genre de chose (des stats qui ne servent qu'à flatter mon égo), je me suis donc dit, plutôt que de faire des requêtes en base, que je devrais refaire la prochaine fois, je vais faire un script PHP, que j'intégrerais au blog.
Et puis, je me suis dit, pourquoi ne pas joindre l'utile à la curiosité, et de tenter de faire ça "ON AIR".
Me voilà donc partie.

Ce qu'il nous faut
Windows !! Il est aussi possible de faire ça sous Mac, et pour Linux il faut pour le moment se contenter d'une version alpha.
Je ne décrirais donc le processus que pour Windows.
Il faut aussi préalablement avoir installé le runtime de Adobe AIR.
(Si vous l'avez déjà vérifiez que vous avez la dernière version, c'est à dire la version 1.0.1)
Puis, télécharger le SDK.


Installation
Une fois téléchargé et dézippé, placer le à la racine de Windows (par exemple: C:\AdobeAIRSDK), pour faciliter l'étape suivante.
Maintenant, il faut modifier la valeur de la variable d'environnement Path, pour que celui trouve le chemin du répertoire bin du SDK .
Pour cela, il faut aller dans le Poste de travail, puis Propriétés, onglet Avancées.
Cliquer sur le bouton Variables d'environnement, puis modifier variable Système PATH et la modifier. Au bout de la valeur existante, mettre un ";" et la nouvelle valeur (par exemple ";C:\AdobeAIRSDK\bin").
Redémarrer
Pour vérifier le bon fonctionnement, ouvrir l'interpréteur de commande MS-DOS, et taper la commande
adl


La création de l'application Tout d'abord , il faut créer le fichier PHP qui sera lu par l'application AIR sur le serveur de destination (par exemple "my_stats.php").
En local, créer le dossier de l'application (par exemple "C:\AdobeAIRSDK\stat_jdc").
Créer le fichier de description de l'application "application.xml" puis le fichier HTML lié (par exemple, "stat_jdc.html").
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>examples.html.statJDC</id>
    <version>0.1</version>
    <filename>statJDC</filename>
    <initialWindow>
        <content>statJDC.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>400</height>
    </initialWindow>
</application>
Attention, à ne pas mettre de "_" dans le nom de l'application (tag ID) , sinon le fichier ne sera pas valide.
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>Statistiques JDC</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 stat_request(type_stat) {
		myAjax.open("GET", "http://blog.jusdecitron.com/ecrire/my_stats.php?type_stat="+type_stat);
		myAjax.onreadystatechange = stat_result;
		myAjax.send();
	}

	function stat_result() {
		if (myAjax.readyState == 4) {
			var myStat = myAjax.responseText;
			document.getElementById('stat').innerHTML = myStat;
		}
	}

	function getstat(type_stat) {
		stat_request(type_stat);
	}
    </script>
</head>
<body>
    <h1>Statistiques pour JDC</h1>
	<select onchange="getstat(this.value)">
		<option>-- Choose </option>
		<option id="nbtips" value="nbtips">Nombre de billets</option>
		<option id="nbcomments" value="nbcomments">Nombre de commentaires</option>
		<option id="nbtipspercat" value="nbtipspercat">Nombre de billets par rubrique</option>
		<option id="nbtipspermonth" value="nbtipspermonth">Nombre de billets par mois</option>
		<option id="averagenbtips" value="averagenbtips">Nombre de billets par semaine (en moyenne)</option>
	</select>
	<div id="stat">
		Cadre non mis à jour!!
	</div>
</body>
</html>
Pour tester, il faut lancer l'interpréteur MS-DOS, se placer dans le dossier de l'application , puis lancer la commande suivante:
adl application.xml
Et voilà.

MyStat On AIR

La compilation
Une fois que l'on sait que l'application fonctionne, il faut la compiler pour qu'elle tourne de façon autonome.
Pour pouvoir compiler, il faut tout d'abord générer un certificat:
adt -certificate -cn SelfSigned 1024-RSA certif.pfx {MOTDEPASSE}
Un fichier "certif.pfx" apparait alors dans le dossier de votre application.
Maintenant, pour compiler il faut lancer la commande suivante:
adt -package -storetype pkcs12 -keystore certif.pfx statJDC.air application.xml statJDC.html
On vous demande alors votre mot de passe (celui qui vous a servi à générer le certificat).
L'application "statJDC.air" arrive alors dans le dossier de votre application.
Vous n'avez plus qu'à le lancer pour installer votre application, et accéder ainsi à vos données directement en cliquant sur le raccourci de votre bureau.
En ce qui me concerne , il me reste à mettre une couche de CSS pour rendre la chose un peu plus jolie.


PS: J'ai essayé de mettre une icône personnalisée à mon application en utilisant les balises <icon>dans le fichier de description XML
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>examples.html.statJDC</id>
    <version>0.1</version>
    <filename>statJDC</filename>
    <initialWindow>
        <content>statJDC.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>400</height>
    </initialWindow>
	<icon>
   		<image16x16>icons/statJDC-16.png</image16x16>
		<image32x32>icons/statJDC-32.png</image32x32>
		<image48x48>icons/statJDC-48.png</image48x48>
	</icon>
</application>
Mais malheureusement je me heurte à l'erreur à la compilation indiquant que mes images sont introuvables alors qu'elles existent. Si quelqu'un a une idée ... je prend.

Source:
Documentation: livedocs AIR
Quick Start: ici
Tutoriel Adobe AIR: Découverte et installation
Tutoriel Adobe AIR: Première application

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Ajouter un rétrolien

URL de rétrolien : http://blog.jusdecitron.com/index.php?trackback/65

Haut de page