Les Gadgets pour Windows VISTA

Frédéric Queudret est Architecte au Microsoft Technology Center de Paris.
Alexandre Decaesteker est Développeur Web au Microsoft Technology Center de Paris.
Le Microsoft Technology Center de Paris a participé à la conception, le développement et la certification de plus de 30 gadgets français pour le lancement mondial de Windows Vista.

Le volet Windows Avant de rentrer dans le sujet des gadgets, il est nécessaire de présenter au préalable le moteur des gadgets à savoir le volet Windows (Windows Sidebar).

Ce volet est exécuté au démarrage de Windows. Il est aussi accessible par les accessoires. Ci-contre une capture d’écran montrant une partie des gadgets fonctionnant sur un poste de travail. Ceux-ci réalisent des fonctions plus ou moins simples telles que donner la date et l’heure, affichez les films cinéma du moment...
L’utilisateur peut accéder directement à l’information dont il a besoin et s’il veut rajouter un gadget au volet il lui suffit de cliquer sur le « + ». Si le nombre de Gadgets devient important, l’utilisateur peut naviguer à l’aide des deux boutons « < » et « > » qui s’activent automatiquement.

Présentation des Gadgets pour Windows Vista
Les Gadgets sont conçus pour permettre à un utilisateur d’être plus efficace et lui offrir la possibilité de personnaliser son bureau. Malgré une certaine ressemblance avec les Gadgets Live.com, les Gadgets pour le volet Windows sont développés de manière différente mais à partir des mêmes technologies comme le DHTML et le Javascript. Nous allons voir dans cet article les notions de base pour développer son propre gadget et le mettre à disposition des utilisateurs sur la galerie officielle des Gadgets pour Windows Vista.
Un Gadget est généralement conçu pour offrir un ensemble restreint et utile de fonctionnalités à son utilisateur. Cette mini-application peut-être de type informationnel (exemple des flux RSS), applicatif (par exemple une fonction précise d’une application plus globale) ou utilitaire (comme une horloge par exemple). Les utilisateurs ont ainsi à leur portée un moyen simple, personnalisé et ludique parfois d’accéder rapidement aux informations dont ils ont besoin. L’utilisateur peut installer autant de gadgets qu’il souhaite, en télécharger de nouveau à partir de la galerie officielle ou à partir de sites Web proposant leurs propres gadgets pour Vista ou en créer à sa guise soit en le développant soit en le générant à partir d’environnement de création de Gadget comme c’est le cas avec PowerGadgets (http://www.powergadgets.com). Pour ce dernier, cela devient un jeu d’enfant de connecter un service Web ou une base de données à un Gadget et afficher des graphiques, le tout en .NET ! Autre possibilité : utiliser Media Player directement dans votre Gadget ou d’autres ActiveX est tout à fait supporté.

Concevoir un Gadget pour Windows Vista

Avant de développer un Gadget, il est important de connaître les contraintes ergonomiques ainsi que la structure d’un Gadget. Graphiquement, le gadget doit respecter une largeur de 130 pixels pour éviter de déborder du volet. Cela n’est pas une limite physique et le gadget peut-être plus long mais dans ce cas cela risque de déplaire à l’utilisateur et ne pas lui servir très longtemps. Par principe, il convient de respecter cette largeur limite de 130 pixel dans le volet et une limite de 400 pixels hauteur / largeur lorsque le Gadget est flottant (sur le bureau). De ce fait, la conception ergonomique d’un gadget doit se faire de façon judicieuse et privilégier soit les pictogrammes / graphiques soit le texte suivant ce qui est le plus efficace.

Implémenter son premier Gadget

La première chose importante à savoir est que le Gadget est une mini-application installée localement sur la machine, donc le code source est accessible dans un répertoire et surtout modifiable par l’utilisateur qui l’installe. Les fichiers nécessaires au chargement d’un Gadget sont peu nombreux : un fichier de description au format XML (Manifest) et une page HTML de démarrage. Les fichiers supplémentaires permettent d’ajouter des scripts, des images, des styles, etc. Ci-dessous, une arborescence d’un gadget :

Le fichier Manifest contient l’ensemble des informations décrivant le gadget, comme son nom, sa description, son auteur, son logo, etc. Dans la plupart des cas, les propriétés s’expliquent d’elle-même. Voici un exemple de fichier manifeste type :

<?xml version="1.0" encoding="utf-8"?>
<gadget>
<name> SidebarShell </name>
<namespace>mtcparis.gadgets</namespace>
<version>1.0.0.0</version>
<author name="Microsoft Technology Center">
<info url="http://go.microsoft.com/fwlink/?LinkId=55696" text="www.microsoftgadgets.com"/>
<logo src="logo.png"/>
</author>
<copyright>© 2006</copyright>
<description>Description du SidebarShell.</description>
<icons>
<icon height="48" width="48" src="icon.png"/>
</icons>
<hosts>
<host name="sidebar">
<base type="html" apiVersion="1.0.0" src="gadget.html"/>
<permissions>full</permissions>
<platform minPlatformVersion="1.0"/>
<defaultImage src="drag.png"/>
</host>
</hosts>
</gadget>

Pour la page de démarrage, l’étape de création est identique à celle d’une page web de base car, comme nous l’avons déjà dis plus haut, les gadgets s’appuient sur de s technologies web. Ci-dessous, un exemple type de page pour un gadget de base que l’ont viendra compléter tout au long de cet article. Notez que dans cet exemple le style CSS de la page est directement inclus dans notre fichier HTML, mais il est bien entendu possible de l’inclure via la balise <link />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html >
<head>
<title>SidebarShell</title>
<style type="text/css">
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: absolute;
font-size: 12px;
line-height:normal;
border: solid 1px #000000;
overflow: hidden;
width: 130px;
height: 200px;
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Pour installer cette version de base, vous devrez zipper l’ensemble des fichiers de votre gadget et renommer le .zip en .gadget. Double-cliquez simplement sur ce fichier .gadget et Vista vous proposera de l’installer et le chargera dans le volet.
Le JavaScript constitue le langage privilégié pour permettre d’apporter à notre gadget une certaine interactivité. Un certains nombre de méthodes et de propriétés sont disponibles pour permettre d’interagir avec les gadgets : http://msdn2.microsoft.com/en-gb/library/aa965853.aspx

Gestion des modes d’affichage d’un gadget

Un gadget dispose de deux modes de visualisation : ancré (attaché au volet) ou flottant (sur le bureau). L’utilisateur passe de l’un à l’autre en faisant un glisser/déplacer. Dans le mode flottant, le gadget peut se redimensionner pour profiter afficher plus d’informations. Ce comportement doit être implémenté par le développeur de gadget en gérant les événements System.Gadget.onDock et System.Gadget.onUndock.

Il est possible de gérer une troisième possibilité d’affichage pour votre Gadget grâce à une fenêtre volante (Flyout en anglais). L’exemple ci-dessous montre une fenêtre volante ouverte sur la gauche d’un gadget en mode ancré.

(Gadget téléchargeable sur http://gallery.live.com/liveItemDetail.aspx?li=a7a1a635-5acb-479f-a5fd-01a50e38f437&l=1)  

La fenêtre volante affiche du contenu HTML (une page HTML supplémentaire présente dans notre gadget). Il est ensuite nécessaire d’associer cette page à notre gadget de la manière suivante :

// init flyout file
System.Gadget.Flyout.file = "flyout.htm";

Il est maintenant possible d’afficher cette fenêtre volante en fonction d’un événement géré comme le clic sur un lien :

<a href="javascript:System.Gadget.Flyout.show=true;">Cliquer pour ouvrir la fenêtre volante</a>

Sachez qu’il est possible de partager des informations entre le gadget et la fenêtre volante de la manière suivante :

System.Gadget.Flyout.document.parentWindow.gMyText = "Hello World !";

Gérer les paramètres d’un Gadget

Les gadgets offrent la possibilité de sauvegarder des informations entrées par l’utilisateur permettant de paramétrer ou personnaliser le gadget. Il est important de savoir que ces informations sont propres à une instance de gadget. Qu’est-ce que ça veut dire ? Si vous lancez un deuxième gadget de même type il faudra le reconfigurer car il n’aura pas accès aux informations du premier gadget. De plus, si vous fermez un gadget vous perdrez son paramétrage car cela revient à le désinstaller. Un fichier Settings.ini est utilisé par le volet Windows pour stocker les informations sur les gadgets. Ce fichier se trouve dans le répertoire : Settings.ini se trouvant dans le répertoire : %userprofile%\AppData\Local\Microsoft\Windows Sidebar\.

L’implémentation d’une page de paramétrage repose encore une fois sur un page HTML (par exemple settings.html). Il est possible de préciser la page HTML à utiliser dans le code Javascript du gadget :

System.Gadget.settingsUI = "settings.html";

Enfin plusieurs fonctions sont à notre disposition pour lire et écrire des valeurs de configuration comme montré ci-dessous :

var gSettingsData = '';
function loadSettings() {
// méthode lancée à chaque lancement de la page des paramètres
// on sauvegarde la configuration à la fermeture de la page
System.Gadget.onSettingsClosing = procSettingsClosingEvent;
// récupération des données existante
gSettingsData = System.Gadget.Settings.read("theSettingsData");
// affichage des données existante
txtbSettingsData.value = gSettingsData;
}
function procSettingsClosingEvent(event){
// méthode qui ferme la fenêtre et enregistre les paramètres
if (event.closeAction == event.Action.commit)
{ // sauvegarde des paramètres
System.Gadget.Settings.write("theSettingsData", txtbSettingsData.value);
}
event.cancel = false;
}

Publier vos Gadgets !

Nous voici prêts à publier nos gadgets et à les faire connaître au monde entier. Le site officiel pour les gadgets Vista est http://gallery.live.com mais il est aussi possible de les mettre à disposition sur n’importe quelle url. Lorsqu’un utilisateur Vista clique sur une url avec une extension .gadget, Windows lui proposera automatiquement l’installation du gadget. Sachez que La publication sur la galerie officielle est sujette à une revue de code afin de vérifier que l’implémentation du gadget est conforme à son utilisation.
Le Web fourmille d’informations sur les gadgets Vista aussi nous ne pouvons lister toutes les ressources mais voici des points de départ qui vous aideront :

• The Gadget Builder Depot (Références, Tutoriels…) : http://www.deitel.com/Default.aspx?tabid=2007
• Blog de Frédéric Queudret: http://blogs.msdn.com/fredeq/
• Blog d’Alexandre Decaesteker : http://blogs.developpeur.org/alex/archive/2007/12/06/volta-g-n-rateur-de-site-multi-tiers.aspx

Dans un premier temps nous vous conseillons de télécharger les différents Gadgets référencés par cet article sur la galerie officielle. Une fois installés sur votre machine, vous pourrez vous faire une idée des différentes techniques utilisées en ouvrant leurs fichiers source, et vous en inspirer pour décupler votre créativité et en faire profiter vos futurs utilisateurs !

Haut de page