Je me suis un peu amusé cette semaine en développant rapidement un widget Netvibes pourRefStats (annonce).
Vous pouvez voir celui-ci et l’installer sur votre page.
Et comme c’est un composant de l’application web refstats, il est sur Github.
Analysons rapidement la chose.
Nous avons tout d’abord des balises xml. Nous définissons l’auteur du plugin, la version de l’API utilisée et le fait qu’on est pas en debug.
<meta name="author" content="Damien MATHIEU" />
<meta name="description" content="Shows the evolution of your positions on Google and any other search engine via refstats.net." />
<meta name="apiVersion" content="1.0" />
<meta name="debugMode" content="false" />
Jusqu’à maintenant, pas grand chose d’intéressant. Mais si on descends un peu en dessous de l’inclusion des CSS de netvibes, on a :
<widget:preferences>
<preference name="apikey" type="text" label="API Key" defaultValue="69dc57d333617ffcaa136109a0ff5e3d" />
<preference name="engine" type="list" label="Engine" defaultValue="1" >
<option value="0" label="all" />
<option value="1" label="google.com" />
<option value="2" label="google.fr" />
<option value="4" label="google.ch" />
<option value="5" label="google.be" />
<option value="6" label="google.ca" />
<option value="3" label="Yahoo!" />
</preference>
</widget:preferences>
Pour comprendre ce que nous faisons, regardez ce que donne le widget (voir le lien « voir celui-ci » plus haut).
Et cliquez sur le bouton « Editer ». Vous constatez que nous avons les champs tels que définis dans les préférences ici.
Nous définissons ici un champ texte pour la clé d’API et une liste pour le moteur à utiliser.
Mais il existe d’autres types : text, boolean, hidden, password, range, list.
Ces options sont sauvegardées automatiquement lorsque vous validez et accessibles par la suite en javascript avec la méthode
widget.getValue('option_name');
Puisque nous parlons de javascript, attaquons-nous y.
Vous pouvez voir un
widget.onLoad = function() {
[...]
}
Cette méthode est exécutée lors du chargement du widget. Et à chaque modification des paramètres de celui-ci.
Les autres méthodes utilisées ici sont des méthodes internes au script. Je vous laisse les analyser vous même si cela vous amuse.
Vous constaterez cependant deux choses :
Les appels ajax. L’API RefStats retourne du json. Je fais donc appel à la méthode UWA.Data.getJson, qui prends deux arguments : l’url de la page à appeller.
Et la méthode à appeller avec les données une fois celles-ci reçues.
A vous après de traiter vos données, que cela soit du json avec getJson, du xml avec getXml ou du texte avec getText.
Vous constaterez également l’utilisation de la méthode widget.setBody();.
Cette méthode permet de définir le contenu du widget de manière dynamique. Ici, je redéfinis entièrement le contenu à chaque fois en me basant sur les données que j’ai en variables.
Rien ne vous empêche cependant de manipuler le dom de manière plus fine. L’objet widget possède une méthode createElement.
Bon, cet article est particulièrement concis. Mais il deviendrait trop long si je commencais à détailler entièrement ce qui est déjà indiqué dans la documentation Netvibes. Je vous laisse donc vous y référer.
Mais je pense que cela fait déjà un bon début. Rien qu’avec ça, il est déjà possible de faire deux ou trois trucs sympa 
), j’ai, 
