Le document présente la création et l'utilisation des gadgets, spécifiquement pour la sidebar de Windows Vista, en expliquant leurs caractéristiques techniques et leur fonctionnement. Les gadgets, qui s'exécutent localement, sont basés sur HTML, CSS et JavaScript, et offrent des interactions utilisateur via des fonctionnalités comme les flyouts et les paramètres de configuration. Il aborde également des aspects pratiques de développement, comme la localisation et le format de distribution des fichiers .gadget.

1. Gadget Academy

2. Présentation Création
Considération
Les gadgets
Fichier Gadget
Les deux familles de Le Manifest
Gadgets chez Microsoft
HTML/CSS
Point technique JavaScript
Concurrence Ancrage
Localisation
Flyout
Setting
Diffuser votre gadget
Ressources

3. Selon Wikipedia
(www.wikipedia.org), « un gadget
est un objet souvent ingénieux,
mais presque toujours inutile
sur le long terme »
Les gadgets que l’ont retrouve sur
toutes les plateformes de gadget
virtuel vont du réveil au calendrier
en passant par de l’affichage
d’informations en temps réel pour
les plus sophistiqués

4. Les Live gadgets sont des gadgets qui s’exécutent
en ligne, et notamment sur la plateforme Live.com,
MSN Spaces, ….
Les Sidebar gadgets s’exécutent pour leur part sur
le bureau de l’utilisateur et uniquement sous Vista.

5. Tout d’abord un gadget n’est pas dans le menu « Démarrer », un gadget ne
se lance qu’a partir de la sidebar
Les gadgets ne sont pas des applications entières (pas de menu, pas de bar
d’outils, pas de boutons pour maximiser ou minimiser la taille de la fenêtre…)
Les gadgets ne sont pas des pages web, bien que les technologies sous
jacentes sont utilisés pour le web, en soit un gadget s’exécute localement via la
sidebar et ont accès à des fonctionnalités propre à l’OS.
Un gadget est multi-instance, un gadget que l’utilisateur installera sur sa
sidebar pourra être lancé plusieurs fois en même temps sur le poste de
l’utilisateur

6. Un gadget s’appuie sur du HTML, du JavaScript, du XML
et des feuilles CSS
Nous avons accès à tout un ensemble de méthodes et de
propriétés nous permettant d’interagir avec notre
environnement.
La sidebar s’appuie sur Internet Explorer 7 pour exécuter les
gadgets

7. La Sidebar de Windows Vista
Les Widgets de Yahoo
Google desktop
Le Dashboard d’Apple
Samurize
SpringWidgets de Fox Interactive

8. Source de la gadget
Source disponible pour l’utilisateur final
Ne stocker pas d’informations personnelles vous
concernant dans le gadget
Prévoir un mode déconnecté dans vos gadgets pour
éviter le bug !
Ergonomie du gadget
Ne doit pas dépasser 130px de large env. pour rentrer
dans la sidebar

9. Un gadget se distribue via un fichier .gadget.
Ce fichier en réalité est une archive au format .zip contenant
les fichiers de votre gadget (css, images, JS et html)

10. Il s’agit d’un fichier au format XML qui va contenir
l’ensemble des informations décrivant le gadget, comme son
nom, sa description, son auteur, son logo …

11. L’étape de création est identique à celle du page web de
base, car les gadgets s’appuie sur des technologies web

12. Le JavaScript constitue le langage privilégié pour permettre
d’apporter à notre gadget une certaine interactivité
En plus des capacités de ce langage de script, on y à
ajouter un certains nombre de méthodes et de propriétés
permettant d’interagir avec Vista
L’utilisation du JavaScript est aussi très importante dans un
autre domaine, à savoir la gestion du dimensionnement de
votre gadget

13. Un gadget dispose de deux modes de visualisation que l’ont
va appeler ancrage
un gadget est ancré (dock en anglais) à la sidebar,
un gadget peut se désolidariser (undock) de la sidebar
C’est à nous de définir le comportement du gadget lorsqu’il
va être sorti de la sidebar (via du code JavaScript)

14. La sidebar offre un mécanisme totalement automatisé qui s’occupe de
gérer la localisation
Pour un gadget de langue et de culture française il faut nommer un sous
répertoire « fr-FR » et pour la langue anglaise avec une culture
américaine « en-US ».
Nous mettrons dans ses répertoires uniquement les ressources
localisés, ainsi qu’un manifeste décrivant le gadget.
Il n’est pas la peine de modifier ses liens relatifs dans les fichiers
localisés car la sidebar le gère d’elle-même par rapport à la racine du
gadget.

15. Avez-vous déjà eu besoin d’affichez
plus d’informations sur votre gadget
sans que l’utilisateur ai besoin de le
dédocké ? Alors la Flyout (fenêtre
volante)
La flyout est (encore une fois) une page
HTML avec donc la possibilité d’utiliser
du JavaScript et des CSS.
La flyout se lancera lors d’un
évènement, il faut donc que le gadget
ais le focus pour que son affichage se
passe bien.
La flyout se fermera d’elle-même
lorsque le gadget va perdre son focus.

16. Les gadgets offrent la possibilité de sauvegardé des informations
entrées par l’utilisateur permettant de personnaliser le gadget. (ex:
localité pour la météo, fuseau horaire pour l’heure…)
Ses informations sont propres à une instance de gadget
Les informations que nous entrons via le gadget en utilisant les
« Settings » sont stockées dans le fichier Settings.ini
Les méthodes System.Gadget.Settings.read() et
System.Gadget.Settings.write() nous permettent d’y accéder très
facilement !

17. une seule direction http://gallery.live.com

18. Sites techniques et communautaire
http://gallery.live.com
http://microsoftgadgets.com/
Blogs
http://blogs.msdn.com/sidebar
http://blog.khamlon.info
http://blogs.msdn.com/fredeq
Forums
http://microsoftgadgets.com/forums/10/ShowForum.aspx
http://www.aeroxp.org/board/index.php?showforum=50
http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=1063
&SiteID=1

19. Votre potentiel, notre passion TM
© 2007 Microsoft France