Microsoft en partenariat avec CodeS-SourceS organise un concours de création de Gadget.
Trois critères « Créativité, design et utilité » serviront à récompenser trois personnes qui gagneront chacune un écran plat 16/9 HD et une Xbox 360.
Toutes les informations relatives au concours sont présentes sur le site Microsoft qui lui est dédié : http://www.microsoft.com/france/msdn/msn/gadgets/default.mspx (y compris le règlement complet)
Des tutoriaux en Français sur la création de Gadget existent :
En complément du tutorial présent sur MSDN, voici quelques astuces sur la création de Gadget. Cette page évoluera au fur et à mesure des besoins, tout au long du concours.
Vous pouvez aussi poser vos questions relatives au développement de Gadgets pour live.com dans le forum: http://www.javascriptfr.com/forum.v2.aspx?TID=191
Astuce 1 : créer automatiquement les fichiers de base d’un Gadget
Pour créer rapidement les fichiers nécessaires a votre Gadget il existe un Template pour Visual studio 2005 créé par Donavon.
Il vous suffit de télécharger le fichier Gadget.zip et de le déposer sans le déziper dans le répertoire :
- « Mes Documents\Visual Studio 2005\Templates\ProjectsTemplates\ » si vous utilisez Visual Studio 2005 Web express
- « Mes Documents\Visual Studio 2005\Templates\ProjectsTemplates\Visual Web Developer\ » si vous utilisez Visual Studio 2005 édition standard ou professionnelle
Il vous suffit maintenant de lancer Visual Studio 2005, de créer un nouveau site web « Fichier / Nouveau / Site Web », de choisir C# comme langage (le template est configuré pour C#, mais cela n’aura pas d’impacts pour la suite vu qu’un gadget est composé de base de XML, JavaScripts et CSS), de sélectionner « gadget » dans « Mes templates » et de renseigner le nom de votre gadget (ici « BonjourGadget »).
Un projet contenant les fichiers nécessaires à votre premier gadget sera automatiquement créé. Ces fichiers sont tous pré-renseignés en fonction du nom de votre gadget afin d’éviter toute perte de temps et de vous permettre de développer rapidement.
Astuce 2 : Etablir une communication entre un gadget et un serveur
Pour aller au delà du simple « HelloWorld » affiché dans un gadget, il peut être utile de récupérer des informations dynamiquement sur un serveur (appel AJAX). Les gadgets utilisant le Framework Atlas, ce genre de comportements est facilité.
Voici comment faire à partir de l’exemple présenté dans l’astuce 1 « BonjourGadget ».
La première chose est de générer un fichier XML que le gadget pourra interroger.
Pour prendre un exemple simple, imagions une page qui recevra en paramètre (querystring) un nom et qui me renverra un fichier XML contenant « Bonjour [Nom] il est [heure du jour] ».
La page XML peut être générée selon n’importe quel langage de programmation Web (ASP.NET, ASP, PHP...). Pour cet exemple je vais utiliser un Webservice ASP.NET 2.0.
Il suffit donc d’écrire un peu de code C# (ou VB) afin de créé la réponse :
L’avantage des Webservices est qu’ils utilisent le format XML pour communiquer, mais une fois de plus, n’importe quel langage peut être utilisé pour formater la réponse.
Dans cet exemple, en appelant la page « BonjourGadget.asmx/HelloWorld?nom=Florent », le serveur répondra avec la page suivante :
Le serveur étant capable de communiquer, il va maintenant être nécessaire de rajouter du code au Gadget afin de lui permettre d’appeler le serveur et de traiter sa réponse.
La première chose à faire est de définir le contenu du Gadget. Dans notre exemple nous aurons besoin de :
Ces éléments étant toujours présents, ils doivent être ajoutés lors de l’initialisation du Gadget :
Il ne reste plus qu’a appeler le serveur lors du click sur le bouton :
Et voici le résultat :
Astuce 3 : définir le contenu d’un gadget directement en html
Comme vous avez pu le constater dans les différents exemples présents dans le tutorial ou dans ces astuces, la définition de l’interface d’un gadget se fait directement en code JavaScript. Ce type de développement peut sembler fastidieux pour des non adeptes de ce langage, il existe donc un Framework permettant d’automatiser la génération de ce code à partir du html. Ce Framework a lui aussi développé par Donavon .
Pour reprendre l’astuce 3, l’html représentant l’interface est le suivant :
Le Framework de Donavon va permettre de définir ce html directement dans le fichier « XML » manifest et de faire la correspondance coté JavaScript. Il est nécessaire pour utiliser ce Framework de bien spécifier l’ID de chaque éléments Html que vous voudrez retrouver dans le code JavaScript.
Voici donc le manifest. (le Framework « BindContent.js » doit aussi être référencé dedans) :
Coté JavaScript, la correspondance se fait en appelant la méthode « Donavon.Util.BindContent ». Celle ci prend en paramètre l’objet p_elSource représentant le rendu graphique du Gadget ainsi que l’objet p_args.xml représentant les données du manifest. En retour, l’objet éléments créé représente les contrôles Html. Pour manipuler le bouton par exemple, il suffira d’utiliser : « elements.ID_BouttonServeur.* ».
L’exemple de l’astuce 2 donnera par exemple :
Cette astuce permet vraiment d’économiser des lignes de code JavaScript. Cependant, le Framework étant en cours de développement, il contient encore quelques bugs.
Autres astuces à venir :
En attendant, vous pouvez poser vos questions relatives au développement de Gadgets pour live.com dans le forum: http://www.javascriptfr.com/forum.v2.aspx?TID=191