Partie 1 : Mon premier gadget

Par Christophe Lauer, Microsoft France

La page d’accueil personnalisable Live.com vous permet d’accéder simplement et rapidement à toutes vos informations et contenus préférés à partir d’un point unique, configurable, personnalisable et extensible par l’ajout de gadgets supplémentaires. S’adressant à vous en tant que développeur, cet article a pour but de vous expliquer comment créer, mettre au point, et publier des gadgets personnalisés que vous pourrez ensuite ajouter à votre page Live.com et rendre publiquement disponible.

Cet article explique :

• Comment développer des gadgets pour la page d’accueil personnalisable Live.com

• Les outils et ressources utiles pour les développeurs

• Le processus de développement, de tests et de mise en ligne des gadgets

Ce qu’il faut savoir (pré-requis) :

• Les bases en développement web (HTML, CSS, …)

• Notions de Javascript, et idéalement des notions sur les principes de fonctionnement d’AJAX

• Aucune connaissance d’un des langages de la plate-forme .NET n’est nécessaire

Sur cette page

Introduction
Qu’est-ce qu’un gadget Windows Live ?
Préparer son environnement de travail
Mon premier gadget
Mettre son gadget en ligne

Introduction

Bien que la documentation technique couvrant les différents aspects du développement de gadgets web pour Windows Live.com et Windows Live Spaces existe et soit assez conséquente, celle-ci est actuellement disséminée en plusieurs endroits, et aucune ne couvre l’ensemble du processus de développement de bout en bout, tout en présentant les ressources utiles voire essentielles. Une autre raison d’être de cet article était qu’il n’existait pour le moment aucune documentation en français sur le sujet.

Cet article a donc vocation à servir de point de départ aux développeurs voulant faire leurs premiers pas dans le développement de gadgets pour Live.com, et également de fournir les réponses aux questions les plus courantes que vous vous posez au moment où vous évaluez l’intérêt et la faisabilité de réaliser un gadget web.

Nous allons donc couvrir les différentes phases du développement de gadgets web, en allant de la préparation de l’environnement de développement, au développement et à l’utilisation des APIs de la plate-forme Live jusqu’au déploiement du gadget en passant par des check-lists et des recommandations, ainsi que quelques trucs et astuces qui pourront vous faire gagner du temps.

Haut de page

Qu’est-ce qu’un gadget Windows Live ?

Vous pouvez considérer les gadgets web comme des petites applications autonomes qui se concentrent sur des tâches ou des services élémentaires, et qui présentent leur information aux utilisateurs de façon très concise au travers d’une interface utilisateur simple et aérée.
Les gadgets ont généralement les caractéristiques suivantes :
- Se concentrent sur une tâche ou un objectif unique
- Sont compacts, simples, et leurs fonctionnalités sont volontairement limitées
- Présentent les fonctionnalités et des informations essentielles
- Bien qu’uniques par leur design, leur comportement et leur « look and feel », les gadgets s’intègrent de façon harmonieuse dans leur environnement
- Créent une expérience cohérente pour l’utilisateur
- Ne remplacent pas une application

Fig. 1 : Exemples de gadgets Web : interface compacte, intuitive et une fonctionnalité centrale

Haut de page

Préparer son environnement de travail

Pour commencer, il vous faudra disposer d’un serveur HTTP sur lequel vous pourrez déposer les différents fichiers qui constituent votre gadget. Il est nécessaire que ce serveur HTTP soit une machine publiquement « visible » sur internet. Ceci signifie que vous ne pourrez pas utiliser le serveur HTTP intégré à votre machine de développement, ni un serveur présent sur votre réseau d’entreprise.

Ensuite, bien que ça ne soit pas nécessaire, il est conseillé d’utiliser un outil de développement tel que Microsoft Visual Studio 2005 pour l’aide et le confort qu’il peut vous apporter.

Si vous ne disposez pas d’une licence de Visual Studio, sachez que vous pouvez télécharger la version gratuite nommée Visual Web Developer 2005 Edition Express qui vous sera précieux en phase de mise au point de votre gadget.

Vous pouvez télécharger VWD 2005 Express depuis cette page : http://www.microsoft.com/france/msdn/vstudio/express/vwd/telechargez.mspx

En outre, que vous utilisiez une des versions professionnelles de Visual Studio 2005 ou bien la version gratuite Visual Web Developer 2005 Express, sachez que vous pouvez également télécharger un modèle de projet qui vous facilitera la tâche en créant pour vous les squelettes de code de vos gadgets.

Pour cela, téléchargez simplement ce modèle depuis l’adresse suivante, puis copiez le fichier ZIP téléchargé (sans le décompresser) dans votre répertoire My Documents\Visual Studio 2005\Templates\ProjectTemplates\

Ceci est détaillé sur cette page : http://microsoftgadgets.com/livesdk/docs/projtemplate.htm

Haut de page

Mon premier gadget

Il y a plusieurs possibilités pour débuter. Vous pouvez démarrer depuis le code existant d’un gadget fourni en tant qu’exemple avec le Live Gadget SDK, ou bien vous pouvez partir d’un squelette de code d’un nouveau gadget tel que celui généré par Visual Studio 2005 après avoir installé le modèle de projet adéquat tel que décrit juste avant.

Pour commencer par les choses les plus simples, nous allons nous aider de Visual Studio 2005 auquel nous avons ajouté le modèle de projet Windows Live Gadget Project.

Démarrons Visual Studio 2005. Cliquons sur Fichier / Nouveau Site Web puis choisissons le langage C#. On voit un nouveau type de projet apparaître : Windows Live Gadget, comme indiqué sur la copie d’écran ci-dessous :

Voilà, on laisse le nom par défaut « Gadget1 » et on clique sur OK. Visual Studio génère rapidement quelques fichiers et nous affiche une page de documentation au format HTML qui nous présente ce qu’il nous a préparé.

Passons quelques instants à détailler le contenu de notre nouveau projet, car essentiellement, tout est là !

Notre projet comporte quatre fichiers :

GetStarted.html
Très simple, c’est la page de documentation auto-générée qui nous est présentée par Visual Studio juste après la phase de génération du squelette de projet.

Gadget1.css
Il s’agit de la feuille de style CSS qui sera appliquée à notre gadget. A noter qu’il est fortement conseillé de suivre les conventions de nommage telles que présentées dans le document Developer’s Checklist concernant les éléments et règles de la CSS d’un gadget, ceci de façon préventive afin d’éviter des conflits au cas où votre gadget serait un jour chargée en mode « inline ».

Par exemple, pour un gadget qui serait nommé Microsoft.Live.HelloWorld, il faudrait préfixer tous les sélecteurs CSS par le nom du gadget dans lequel les points sont remplacés par des caractères de soulignement, et le tout précédé d’un point, soit au final : .Microsoft_Live_HelloWorld

Autant prendre ces bonnes habitudes dès le départ !

Gadget1.js
C’est le composant essentiel de votre gadget. C’est le fichier contenant le code Javascript qui va définir non seulement le comportement (la logique, l’interactivité, les fonctionnalités) de votre gadget, mais qui va également définir son interface graphique.

Gadget1.xml
C’est un fichier XML, comme son extension l’indique, qui va contenir un ensemble de méta-données sur notre gadget et qui va permettre le déploiement de notre gadget, puis son ajout sur les pages des utilisateurs. Ces méta-données comportent entre autre la liste des fichiers et ressources nécessaires au bon fonctionnement de notre gadget (fichier source Javascript, feuilles de style, images, icones et éventuellement ressources diverses). Tous les fichiers référencés dans ce fichier XML doivent bien entendu être exposés sur un serveur web public pour pouvoir être ensuite récupérés par les navigateurs web des utilisateurs du gadget. Les méta-données comportent également le nom du gadget, un libellé de description et éventuellement un icone qui sera affichée dans la page Live.com dans le cadre entourant notre gadget.

Une petite remarque au passage, contrairement à ce que fait le modèle de gadget Windows Live de Visual Studio 2005, il est conseillé de renommer ce fichier XML en gadget.xml. C’est une règle pour pouvoir faire référencer son gadget dans la galerie Windows Live.

Le processus de référencement des gadgets dans la Galerie Windows Live n’est pas traité dans cet article et pourra faire l’objet d’un article ultérieur. Pour plus d’informations sur la soumission de gadgets à la Galerie Windows Live, visitez la page suivante :
http://gallery.live.com/devcenter.aspx#Dev_2

Bien. Je sens que vous êtes maintenant impatient de passer au code. Ok, allons-y et revenons donc au fichier Gadget1.js. Ouvrons rapidement ce fichier dans Visual Studio 2005 et observons-en le contenu.

Ce fichier Javascript va essentiellement définir un espace de noms et une classe Javascript représentant notre gadget. Dans notre cas, le nom de notre gadget est Gadget.Gadget1.

Le constructeur de notre gadget commence par définir quelques variables d’instance : m_this, m_el et m_module, puis définit quelques méthodes : initialize() et dispose().

Bien entendu, la méthode initialize() est celle qui est invoquée par la plate-forme Live.com quand un gadget doit être instancié. C’est dans cette méthode qu’on trouve le commentaire suivant :

//TODO: perform any initialization/setup work

C’est à cet endroit qu’en tant que développeur je vais devoir effectuer le travail d’initialisation de mon gadget : création des éléments de l’interface utilisateur par manipulation de l’arbre DOM.

Pour une introduction au Document Object Model, vous pourrez vous reporter à l’article suivant :

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dom/domoverview.asp

Continuons encore pour le moment sur la voie de la simplicité. Ajoutons simplement la ligne de code suivante à notre gadget :

m_el.innerText = "Hello, world!";

Voilà, nous avons un premier gadget rudimentaire, mais qui fonctionne et que l’on peut déployer et intégrer dans sa page Live.com. Il n’en faut pas plus.

Haut de page

Mettre son gadget en ligne

Essentiellement, publier un gadget est un processus très simple. Il suffit de rendre disponible les différents fichiers listés dans le fichier Gadget.xml dans un répertoire visible d’un serveur Web. Vous pouvez utilisez tous les moyens à votre disposition, le plus simple étant sans doute d’utiliser la fonctionnalité de publication par FTP intégrée à Visual Studio 2005 ainsi qu’à Visual Web Developer Express.

Notez l’URL complète conduisant au fichier Gadget.xml et ensuite vous avez deux possibilités :

Ajouter votre gadget via l’interface de Windows Live

Dans ce cas, vous allez simplement cliquer sur le lien « Ajouter du contenu » en haut de votre page Live.com, après vous être authentifié avec votre compte Windows Live ID, puis vous cliquez ensuite sur le menu « Options avancées » et vous obtiendrez ceci :

Fig. 3 : Ajouter du Contenu, Options avancées

Entrez l’URL complète vers le fichier Gadget.xml de votre gadget et appuyez sur le bouton Ajouter.

La plate-forme Live.com vous demande une confirmation, et indique que vous allez ajouter un gadget de provenance inconnue à votre page d’accueil, ce qui peut dans le cas général représenter une menace de sécurité. Dans notre cas, vous pouvez simplement cocher la case « Remember my preference » et cliquer sur le bouton « install Gadget » sans arrière-pensée.

Ensuite, votre nouveau gadget s’affiche dans votre page Live.com et affiche fièrement « Hello, World ! »

Ajouter le gadget via un lien HTML

Alternativement, vous pouvez installer un gadget en utilisant une URL de la forme suivante :

http://www.live.com/?add=http://monserveur/monapplication/gadget.xml

Cette forme est très pratique car elle vous permet de placer un lien sur n’importe quel site web de façon à faciliter l’installation de votre gadget par les utilisateurs finaux. Vous pouvez placer un tel lien sur votre site web d’entreprise, votre blog ou encore toute autre page web.

Vous êtes observateur, vous aurez noté que c’est cette forme qui est utilisée par la galerie Windows Live pour vous proposer d’ajouter un gadget donné à votre page Live.com.

Voilà, que vous ayez utilisé l’une ou l’autre des deux méthodes, vous avez maintenant ajouté votre gadget HelloWorld à votre page Live.com et vous devriez voir simplement l’affichage « Hello, world ! » dans le corps de votre nouveau gadget Gadget1.

Haut de page