Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

widgets AIR en HTML + jQuery + CSS3

Compatible AIR. Cliquer pour en savoir plus sur les compatibilités.Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Compatible JavaScript. Cliquer pour en savoir plus sur les compatibilités.Par dcz.switcher (david chollez), le 15 octobre 2011

L’objectif de ce tutoriel est de réaliser un widget comme on peut en avoir sous windows 7 ou mac os (dashboard).

Plutôt que de réaliser un widget précis, je détaillerais ici uniquement la création de l’enveloppe, à vous de voir ensuite si vous voulez y afficher la météo, un calendrier ou le flux twitter de mediabox.

Prérequis Le code sera saisi dans votre éditeur préféré (dreamweaver, notepad++, sublime text …)

La génération du fichier AIR sera faite en ligne de commande en utilisant le SDK fourni par Adobe

Pour pouvoir suivre ce tutoriel vous devez savoir comment lancer le terminal sur votre système d'exploitation ainsi que quelques commandes de bases

Quelques explications sont fournies cependant.

Bonne lecture !

Préparer son environnement de travail

Télécharger les ressources externes nécessaires

Pour commencer, il faut récupérer le SDK AIR qui va transformer nos fichiers HTML, CSS et JAVASCRIPT en une application AIR

http://www.adobe.com/special/products/air/sdk/

Notre application utilisera du javascript pour l’interactivité au travers de la librairie jQuery.js

Télécharger jQuery http://jquery.com/

Arborescence des fichiers

Décompressez les archives téléchargées et placez les dans le répertoire de votre choix. Je vais opter pour ma part pour un répertoire nommé widget placé sur le bureau.

Créez ensuite 4 fichiers nommés :

  • style.css
  • widget-app.xml
  • widget.html
  • widget.js
une archive .zip contenant les fichiers est disponible à la fin de ce tutoriel.

Vous devriez donc avoir quelque chose comme ça :

Développement HTML

Pour visualiser notre travail, nous allons pouvoir utiliser notre navigateur. Dans la mesure où AIR utilise le moteur webkit, nous allons utiliser un navigateur basé sur ce moteur de rendu, les deux plus connus étant Google Chrome et Safari

fichier widget.html

On appelle les ressources externes (feuille de style et script javascript) et on crée une simple DIV

<html>
<head>
<title>widget</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>

    <script type="text/javascript" src="widget.js" ></script>

</head>

<body>
	<div class="widget">
		<div class="front">
			<h5>mediabox</h5>
		</div>
	</div>
</body>

</html>

Le fichier style.css

On met en forme notre widget à l'aide des CSS et on profite des nouveautés de CSS3 (ombres portées, fond en dégradé, coins arrondis …)

.widget {
    position : absolute ;
    margin   : 10px ;
    cursor   : move ;
}

.widget .front {
    background-color : #444;
    width            : 300px;
    height           : 150px ;
    position         : absolute ;
	
    -webkit-border-radius : 8px;
    -webkit-box-shadow    : 0 2px 8px rgba(0,0,0,0.9);

    background-image : -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.32, rgb(82,82,82)),
	color-stop(0.91, rgb(135,136,138))
    );	
}

h5 {
    color       : #2B2B2B;
    text-align  : center;
    font-size   : 30px;
    font-family :"lucida grande",tahoma,verdana,arial,sans-serif;
    font-weight : bold ;
	
    text-shadow :0px 1px 2px #999;	
    -webkit-user-select : none;
}

le fichier widget.js

Si vous utilisez déjà jquery, rien de nouveau. Une fois le DOM prêt, on pose un écouteur sur l'évènement mouseDown de l'objet portant l'id widget

Lorsque l'évènement est capturé, on utilise la méthode startMove() de la classe AIR nativeWindow

Cette méthode permet de déplacer la fenêtre AIR à la souris

Le détail de cette classe dans les liens en fin de tuto

$(document).ready(function(){
    /**
    * deplacement de la fenetre
    */
    $(".widget").mousedown( function(e){
	window.nativeWindow.startMove() ;
    }) ;
});

Si tout va bien, en ouvrant votre fichier widget.html dans un navigateur comme Chrome ou Safari, vous devriez obtenir ceci

Enfin le fichier widget-app.xml

Ce fichier contient le paramétrage de votre application, il sera utilisé par AIR pour créer votre application.

De nombreuses autres options sont disponibles : personnalisation de l’icône de l’application, position initiale … (cf : les liens utiles à la fin de cet article)

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/3.0"> 
    <id>widget</id> 
    <versionNumber>0.1</versionNumber> 
    <filename>widget</filename> 

    <initialWindow> 
        <content>widget.html</content> 
        <visible>true</visible> 

<!-- permet de ne pas utiliser la fenêtre du système -->
        <systemChrome>none</systemChrome>
        <transparent>true</transparent>

<!-- doit prendre en compte les ombres portées ajoutées en CSS -->
        <width>340</width> 
        <height>200</height> 
    </initialWindow> 
</application>

Un peu d’AIR

Le SDK AIR propose 2 executables pour générer une application, tout deux placés dans le sous répertoire bin/ : adl et adt

Le premier permet de générer une version de test (debug) et l’autre une version définitive (package)

Pour utiliser ces outils, il faut utiliser le terminal.

A ce niveau là, le plus simple est d’ajouter les chemins des 2 outils dans le “path”, ça permet d’appeler les executable depuis le terminal simplement en tapant leur nom au lieu de devoir saisir le chemin complet. En clair :

$ adl

au lieu de

$ /Users/switcher/Desktop/widget/AdobeAIRSDK/bin/adl 

Dans les liens utiles, vous trouverez un article d’Adobe pour l’ajout des outils dans le path mais dans mon exemple, je vais utiliser le chemin complet.

Lancez un terminal et déplacez vous dans le répertoire de votre widget.

Les commandes terminal à connaître ici sont :

  • ls : permet de lister les fichiers et répertoire de l’endroit où vous êtes
  • cd nom_du_repertoire : permet d’aller dans le répertoire nom_du_repertoire
  • cd .. : permet de revenir dans le répertoire parent
  • clear (ou cls sous windows) : permet de vider l’affichage du terminal

Enfin, en appuyant sur la fléche haut du clavier, vous affichez les commandes précédentes (ça évite de tout retaper à chaque fois)

Générer une version de test avec adl (AIR Debug Launcher)

Le répertoire widget étant sur mon bureau et étant sous mac os, je dois taper la commande suivante :

//je vais me placer dans le répertoire widget
$ cd /Users/switcher/Desktop/widget
//je vais lancer l’outil adl en lui donnant le chemin du fichier xml de paramétrage
$ /Users/switcher/Desktop/widget/AdobeAIRSDK/bin/adl widget-app.xml

ou si vous avez ajouté adl au path

$ adl widget-app.xml

Si tout ce passe bien, vous devriez avoir ceci dans le terminal et le widget devrait apparaître sur votre bureau !

DVFreeThread - CFMachPortCreateWithPort hack = 0x66e1d0, fPowerNotifyPort= 0x66d040
DVFreeThread - CFMachPortCreateWithPort hack = 0x13c510, fPowerNotifyPort= 0x13a930

Création de la version définitive

Première chose à faire : créer un certificat. Toujours dans le terminal, tapez la commande suivante :

$ /Applications/MAMP/htdocs/AIR/AdobeAIRSDK/bin/adt -certificate -cn SelfSigned 1024-RSA certificat.pfx mediabox
Pour savoir à quoi correspondent les différents paramètres, saisissez la commande -help :

$ /Applications/MAMP/htdocs/AIR/AdobeAIRSDK/bin/adt -help

Vous obtenez à la 2eme ligne le détail de notre commande

adt -certificate -cn <name> ( -ou <org-unit> )? ( -o <org-name> )? ( -c <country> )? ( -validityPeriod <years> )? ( 1024-RSA | 2048-RSA ) <pfx-file> <password>

Dans le répertoire /widget, vous devriez donc avoir à présent un fichier nommé certificat.pfx

Pour terminer, générez l’application (le package) AIR en précisant toutes les ressources utilisées par la commande suivante :

$ /Applications/MAMP/htdocs/AIR/AdobeAIRSDK/bin/adt -package -storetype pkcs12 -keystore certificat.pfx 

widget.air widget-app.xml widget.html style.css widget.js jquery-1.6.4.min.js

Saisissez le mot de passe définit lors de la création du certificat, dans mon exemple, j’avais choisi :

mediabox

En principe, vous devriez avoir dans le répertoire widget, un fichier widget.air !

Double-cliquez, choisissez le répertoire d’installation et voilà !

Limites à connaître

Avant de vous lancer dans la création de vos propres widgets, il est bon d'en connaître les limites.

AIR3 ne supporte pas toutes les propriétés CSS3, en particulier celles concernant la 3D Par exemple, impossible de réaliser un effet de flip du widget comme celui-ci :

En effet, la propriété -webkit-perspective n’est pas (encore ?) prise en compte

D’autres propriétés peuvent avoir un comportement légèrement différent … le seul moyen de le savoir est de tester.

Les sources

En savoir plus

Comment ajouter les commandes de compilation AIR (adl et adt) au path http://help.adobe.com/fr_FR/air/build/WSfffb011ac560372f-71994050128cca87097-8000.html

La classe AIR NativeWindow pour manipuler la fenêtre du widget http://help.adobe.com/fr_FR/FlashPlatform/reference/actionscript/3/flash/display/NativeWindow.html

Description du fichier xml de paramétrage pour AIR http://help.adobe.com/en_US/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7f84.html