Gadget Vista - Consommer un WebService avec Atlas
Comme vous le savez surement, les gadgets Vista sont des mini pages HTML, l'interactivité doit alors se faire en JavaScript :-) Certains fous essayent de créer des gadgets en WPF ca fonctionne plus ou moins bien puisqu'on ne peut pas interagir avec l'utilisateur : [WPF] Gadgets WPF pour la SideBar: Pas si simple que cela en a l'air... Il faut donc utiliser JavaScript, bonne nouvelle non ? ;-)
Ce qu'il y a d'intéressant avec les gadgets c'est de pouvoir communiquer avec l'exterieur, en programmation lorsqu'on parle de communication on pense inévitablement aux Services Web. Mais comment consommer un WebService dans une gadget Vista avec JavaScript ?
Il faut tout simplement utiliser l'objet XMLHttpRequest, contrairement aux application web classique on peut faire des requêtes cross-domain, c'est à dire que vous pouvez appeler n'importe quel WebService. Mais consommer un WebService XML en JavaScript sans framework est un poil compliqué surtout lorsqu'on sait à quel point il est facile de faire cela grâce à Atlas. Intégrons alors Atlas dans une gadget Vista :-)
En guise d'exemple j'ai concu un WebService très compliqué qui se trouve à l'adresse http://localhost:50951/AJAXCTPEnabledWebSite1/ws/calcul.asmx
1 [ScriptService]
2 public class Calcul : System.Web.Services.WebService
3 {
4 public Calcul() { }
5
6 [WebMethod]
7 public double Square(int i)
8 {
9 return i * i;
10 }
11 }
12
Pour appeler la méthode Square dans notre gadget Vista, référençons tout d'abord MicrosoftAjax.js (qui correspond à Microsoft Ajax Library) ainsi que le fichier http://localhost:50951/AJAXCTPEnabledWebSite1/ws/calcul.asmx/js qui créer un objet permettant d'appeler des méthodes du WebService très facilement. Appelons la méthode Square du WebService Calcul comme dans une classique application Atlas :
1 <html>
2 <head>
3 <title>Calcul Gadget</title>
4 <style>
5 body {
6 width:130;
7 height:50;
8 }
9 </style>
10 <script type="text/javascript"
11 src="Atlas.Debug/MicrosoftAjax.js"></script>
12 <script type="text/javascript"
13 src="http://localhost:50951/AJAXCTPEnabledWebSite1/WS/Calcul.asmx/js"></script>
14 <script type="text/javascript">
15
16 window.pageLoad = function(){
17 Calcul.set_path("http://localhost:50951/AJAXCTPEnabledWebSite1/WS/Calcul.asmx");
18
19 $get('btn1').onclick = function(){
20 Calcul.Square(parseInt($get('tb').value), function(e){
21 $get('result').innerHTML = e;
22 });
23 }
24 }
25
26 </script>
27 </head>
28 <body>
29 <input type="textbox" name="tb" id="tb" style="width:20px"/><button id="btn1">Go</button>
30 <br />
31 <span id="result"></span>
32 </body>
33 </html>
34
Cela a presque fonctionner du premier coup, en effet l'adresse du WebService retourné par le fichier Calcul.asmx/js est une adresse relative, en forçant la propriété path de l'objet Calcul on peut appeler un WebService et bénéficier de toutes les fonctionnalités des WebServices et Atlas. Bref Atlas et les gadgets Vista cohabitent plutot bien donc autant en profiter.
Pour en savoir un peu plus sur les WebService et Atlas vous pouvez consulter la démo qu'Azra et moi avons fait pour la rencontre CodeS-SourceS/ASP-PHP.net Ajax & Atlas - Slides et demo de la rencontre CodeS-SourceS/ASP-PHP.net ou alors consulter la documentation How To: Call a Web Service from JavaScript using Server Types
Pour débuter dans la création de gadget Vista voici un article d'introduction : Gadget Development Overview ainsi que la documentation MSDN : Windows Sidebar reference