Ma première Gadget (pour live.com)
Enfin je ne sais encore si on dit une ou un, disons une pour les prochaines lignes?
Une Gadget, c’est une espèce de « Webpart » client qui va pouvoir être ajoutée sur votre portail live.com afin d'y ajouter du contenu. Plusieurs sont proposées par défaut : lecture d’un flux RSS, de votre boite Hotmail, affichage de la météo, de votre horoscope etc etc etc...
Ce qui devient intéressant, c’est que tout ceci repose sur de l’Atlas (coté framework client) et sur un espèce de système d'interface en Javascript pour faciliter le développement de sa propre Gadget.
Un article a récemment été publié pour donner un exemple illustré de A à Z : http://microsoftgadgets.com/blogs/gadgetnews/articles/1019.aspx
De plus, vous pouvez télécharger les sources de Gadgets mises à la disposition par des développeurs sur le site http://microsoftgadgets.com, il y en a qui sont assez impressionantes (notamment un demineur).
A partir de cet article et des sources diffusées j’ai tenté, non sans mal, de me lancer dans la création d'une petite Gadget.
N’ayant pas vraiment d’idée en tête, mais plutôt une sacrée envie de bidouiller, je suis parti d’un exemple simple. En temps qu’ancien joueur de WorldOfWarcraft, j'appréciais de connaître mon classement PVP chaque semaine, et l’avoir en page d’acceuil aurait été pratique.
Après avoir développé un Webservice afin de récupérer les informations nécessaires sur le site de wow-europe.com (quand celui-ci veut bien marcher), il ne me restait plus qu’a développer la Gadget en elle même.
Une gadget la plus simple du monde est composée de deux fichiers :
Un « manifest », fichier en XML qui va servir à « référencer » votre Gadget sur live.com et un fichier Javascript qui va être chargé de générer l’html et les comportements requis.
Exemple de Manifest: http://gadgets.santin.org/wow/wowpvp.xml
Globalement, le « manifest » est tout simplement un fichier XML ou vous retrouvez les URL des fichiers javascripts, des feuilles de styles utilisées par votre Gadget et qui va indiquer le nom de l’objet Javascript à utiliser (ici wowpvp.getpvp).
Il ne reste plus qu’a écrire le code Javascript
//création et référencement du namespace de notre gadget
registerNamespace("wowpvp");
//classe a implementer
wowpvp.getpvp = function(p_elSource, p_args, p_namespace)
{
wowpvp.getpvp.initializeBase(this, arguments);
//premiere méthode a implementer
this.initialize = function(p_objScope) {
//appel de la méthode parent
wowpvp.getpvp.getBaseMethod(this, "initialize", "Web.Bindings.Base").call(this, p_objScope);
//implementer ici la génération de l'html
//utiliser l'argument p_elSource qui représente la DIV affichée pour ajouter vos contrôles
};
//deuxieme méthode a implementer
this.dispose = function(p_blnUnload) {
//appel de la méthode parent
wowpvp.getpvp.getBaseMethod(this, "dispose", "Web.Bindings.Base").call(this, p_blnUnload);
};
}
//référencement de cette classe
wowpvp.getpvp.registerClass("wowpvp.getpvp", "Web.Bindings.Base");
La il s’agit d’un exemple minimum, qui ne fait d'ailleurs rien. Pour ma part j’ai rajouté l’appel asynchrone a mon Webservice pour récupérer des données en fonction de mes deux champs Textbox ainsi que la prise en charge des cookies afin de sauvegarder la dernière recherche. Le mieux est d’aller voir le code complet du Javascript (je me suis pas mal inspiré de choses déjà implémentées dans d’autres gadgets).
Et voila le résultat :
Enfin pour résumer, le développement de Gadgets c’est pour vous si :
Vous aimez le Javascript et surtout la génération d’html depuis du javascript. Vous aimez utiliser les CSS - Vous avez du temps à perdre et Cyril dans votre liste MSN
Longue vie à Atlas coté serveur!
