Adobe Air : Rich Internet Application

Les Rich Internet Application (RIA) sont des applications web qui ressemblent à des applications traditionnelles de bureau.
Elles utilisent donc souvent des technologies du web (HTML, CSS, XML, JavaScript…), mais avec des fonctionnalités en plus ( du style gestion de fichiers )
Elles sont généralement compatible sur la plupart des systèmes d’exploitation sans avoir besoin de récrire le code.
Nous allons voir comment mettre en place une application Adobe Air.

Introduction

Adobe Air est une de ces RIA, elle permet entre autres de :

d’utiliser de l’HTML/Ajax, du Flash ou du Flex
d’être utilisable sous Windows, Mac OS X et Linux ( version béta )
d’avoir son SDK disponible gratuitement
de possèder son propre moteur de rendu HTML : WebKit ( Safari et Chrome par ex )

Structure d’une application Air

L’application se distribue sous la forme d’un paquet .air qui contient :

un fichier xml qui décrit l’application (nom, auteur, version, taille …)
d’un fichier .swf (Flash et Flex) ou de fichiers HTML et JavaScript pour le contenu
des fichiers d’icones

Fonctionnalités

Sans tous les citer :

Support des frameworks JavaScript ( jQuery, ExtJS, Spry..)
Base de données locales avec SQLite
Accès au système de fichiers local
Accès au « drag n’ drop » et au presse-papier
Méthode d’installation automatique des paquets .air
Son et vidéo (avec Flash)
Rendu identique sur toutes les plateformes ( grâce au moteur HTML embarqué)

Installation

Pour pouvoir développer nous avons besoin de deux choses :

le runtime pour pouvoir executer les applications : télécharger
le SDK (Software Development Kit) pour les créer : télécharger

Le runtime est facile à installer, il y a juste à suivre les instructions. Quant au SDK décompressez le dans un répertoire de travail ( C:AIR-SDK ou ~/AIR-SDK ). Il y a à l’intérieur tout ce qui est nécessaire pour la conception d’application Air, des exmples… Vous pouvez mettre si vous voulez le dossier /bin du SDK dans le $PATH pour accéder aux outils de compilation plus simplement.

Création du projet

Créez un répertoire pour notre exemple, et deux fichiers :

helloworld.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.1">
	<!-- Identifiant de l'application - Obligatoire -->
	<id>fr.phollow.examples.01-Application-simple</id>
	<!-- Nom du fichier de l'application -->
	<filename>01 Application Simple</filename>
	<!-- Nom utilisé pour l'installeur -->
	<name>01 application Simple</name>
	<!-- Version - Obligatoire -->
	<version>0.1</version>
	<description>Un simple Hello World</description>
 
 
	<initialWindow>
		<!-- Fichier de lancement - Obligatoire -->
		<content>main.html</content>
		<!-- Visible au démarrage -->
		<visible>true</visible>
		<minimizable>true</minimizable>
		<maximizable>true</maximizable>
		<resizable>true</resizable>
		<!-- taille de la fenêtre -->
		<width>300</width>
		<height>100</height>
		<x>50</x>
		<y>40</y>
	</initialWindow>
</application>

main.html

<html>
	<head>
		<title>Premi&egrave;re application Air</title>
		<script type="text/javascript">
			function AfficherMessage() {
				alert("Hello World !");
			}
		</script>
	</head>
 
	<body>
		<h3>Premi&egrave;re application Air</h3>
			<input type="button" value="Message" onClick="AfficherMessage();"/>
	</body>
</html>

Le fichier xml nous donne donc des informations sur notre application, ainsi que le fichier qui sera executé (main.html). Pour voir notre application :
adl helloworld.xml

Vous devriez voir ceci :

En cliquant sur le bouton « Message », on active la fonction JavaScript « AfficherMessage(); », qui nous affiche « Hello World ! » dans une boite de dialogue.

Déployer notre application

Quand l’application est prête à être distribuée, il faut que l’on transforme tout nos fichiers en un executable .air . Concrètement c’est un fichier .zip couplé à un certificat ( pour signé votre application).

On fait le certificat de cette façon :
adt -certificate -cn moncertificat 1024-RSA moncertificat.p12 motdepasse

adt -certificate -cn : la commande de base pour créer un caertificat
moncertificat : le nom du certificat
1024-RSA : le type de cryptage ( RSA 1024 bits)
moncertificat.p12 : le fichier dans lequel sera stocké le certificat
motdepasse : à votre avis ?

Maintenant avec le certificat on peut compiler le paquet .air :
adt -package -storetype pkcs12 -keystore moncertificat.p12 AIRHelloWorld.air helloworld.xml main.html

Le mot de passe du certificat sera demandé, ensuite les fichiers seront compressés et vous obtiendrez votre fichier .air . En double cliquant sur le fichier vous avez la possibilité d’installer ce paquet.

Conclusion

Nous avons vu à travers cet article comment concevoir une application Adobe Air. La notre est toute simple mais je vous laisse imaginer l’étendue des possiblités offertes. Il y a quelques démonstrations sur le site d’Adobe.

Sources

Téléchargez

Tags : air + tutoriel + web

Posté par : Jérôme M. dans : air, tutoriel

Phollow.me