Adobe Air : Rich Internet Application

• air, tutoriel •

Les Rich Internet Application (RIA) sont des appli­ca­tions web qui res­semblent à des appli­ca­tions tra­di­tion­nelles de bureau.
Elles uti­lisent donc sou­vent des tech­no­lo­gies du web (HTML, CSS, XML, JavaScript...), mais avec des fonc­tion­na­li­tés en plus ( du style ges­tion de fichiers )
Elles sont géné­ra­le­ment com­pa­tible sur la plu­part des sys­tèmes d'exploitation sans avoir besoin de récrire le code.
Nous allons voir com­ment mettre en place une appli­ca­tion Adobe Air.

Introduction

Adobe Air est une de ces RIA, elle per­met entre autres de :

  • d'utiliser de l'HTML/Ajax, du Flash ou du Flex
  • d'être uti­li­sable sous Windows, Mac OS X et Linux ( ver­sion béta )
  • d'avoir son SDK dis­po­nible gratuitement
  • de pos­sè­der son propre moteur de rendu HTML : WebKit ( Safari et Chrome par ex )

Structure d'une appli­ca­tion Air

L'application se dis­tri­bue sous la forme d'un paquet .air qui contient :

  • un fichier xml qui décrit l'application (nom, auteur, ver­sion, 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 fra­me­works JavaScript ( jQuery, ExtJS, Spry..)
  • Base de don­nées locales avec SQLite
  • Accès au sys­tème de fichiers local
  • Accès au "drag n' drop" et au presse-papier
  • Méthode d'installation auto­ma­tique des paquets .air
  • Son et vidéo (avec Flash)
  • Rendu iden­tique sur toutes les pla­te­formes ( grâce au moteur HTML embarqué)

Installation

Pour pou­voir déve­lop­per nous avons besoin de deux choses :

  1. le run­time pour pou­voir exe­cu­ter les appli­ca­tions : télé­char­ger
  2. le SDK (Software Development Kit) pour les créer : télé­char­ger

Le run­time est facile à ins­tal­ler, il y a juste à suivre les ins­truc­tions. Quant au SDK décom­pres­sez le dans un réper­toire de tra­vail ( C:\AIR-SDK ou ~/AIR-SDK ). Il y a à l'intérieur tout ce qui est néces­saire pour la concep­tion d'application Air, des exmples... Vous pou­vez mettre si vous vou­lez le dos­sier /bin du SDK dans le $PATH pour accé­der aux outils de com­pi­la­tion plus simplement.

Création du projet

Créez un réper­toire 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 infor­ma­tions sur notre appli­ca­tion, ainsi que le fichier qui sera exe­cuté (main.html). Pour voir notre application :

adl helloworld.xml

Vous devriez voir ceci :

Adobe Air

En cli­quant sur le bou­ton "Message", on active la fonc­tion JavaScript "AfficherMessage();", qui nous affiche "Hello World !" dans une boite de dialogue.

Déployer notre application

Quand l'application est prête à être dis­tri­buée, il faut que l'on trans­forme tout nos fichiers en un exe­cu­table .air . Concrètement c'est un fichier .zip cou­plé à un cer­ti­fi­cat ( pour signé votre application).

On fait le cer­ti­fi­cat de cette façon :

adt -cer­ti­fi­cate -cn mon­cer­ti­fi­cat 1024-RSA moncertificat.p12 motdepasse
  • adt -cer­ti­fi­cate -cn : la com­mande de base pour créer un caertificat
  • mon­cer­ti­fi­cat : le nom du certificat
  • 1024-RSA : le type de cryp­tage ( RSA 1024 bits)
  • moncertificat.p12 : le fichier dans lequel sera sto­cké le certificat
  • mot­de­passe : à votre avis ?

Maintenant avec le cer­ti­fi­cat on peut com­pi­ler le paquet .air :

adt -package -sto­re­type pkcs12 -keys­tore moncertificat.p12 AIRHelloWorld.air helloworld.xml main.html

Le mot de passe du cer­ti­fi­cat sera demandé, ensuite les fichiers seront com­pres­sés et vous obtien­drez votre fichier .air . En double cli­quant sur le fichier vous avez la pos­si­bi­lité d'installer ce paquet.

Conclusion

Nous avons vu à tra­vers cet article com­ment conce­voir une appli­ca­tion Adobe Air. La notre est toute simple mais je vous laisse ima­gi­ner l'étendue des pos­si­bli­tés offertes. Il y a quelques démons­tra­tions sur le site d'Adobe.

Sources

Téléchargez


Post comment as
twitter logo facebook logo
Sort: Newest | Oldest