Mon module Netvibes (1ère partie)

Tout d'abord au cas où vous ne connaîtriez pas Netvibes : Netvibes est un portail Web français personnalisable, représentatif de ce qu'on appelle le Web 2.0. Netvibes offre à ses utilisateurs un site web personnel constitué par des pages onglets. Ce site est, à toute fin pratique, un portail web individuel qui donne accès à une multitude de services. Chaque service se présente comme un bloc. La page d'accueil de ce site se décompose en modules, représentés graphiquement par des blocs (rectangles). Grâce à l'utilisation d'AJAX, l'utilisateur peut très simplement réorganiser sa page en déplaçant, supprimant ou ajoutant des blocs.




Voilà pour la définition de Netvibes selon Wikipedia. Maintenant que vous y voyez un peu plus clair, je vais vous parler de l'UWA. L'UWA, pour Universal Widget API (titre pompeux je vous l'accorde), est donc une interface de programmation (API pour Application Programming Interface). Les widgets conçus avec fonctionnent non-seulement sur Netvibes, mais également d'autres plates-formes, parmi lesquelles iGoogle, Apple Dashboard, Opera, Windows Live et Windows Vista... Et c'est là tout l'intérêt de l'UWA. On conçoit un widget qui, par la suite, tournera sur toutes les plates-formes du genre (iPod Touch et iPhone compris).

J'utilisais au début iGoogle étant friand des services de google (docs/reader/notebook principalement). Je ne me rappelle plus vraiment comment je suis passé à Netvibes. Ce que je sais, c'est que j'y suis toujours, sûrement pour la variété des widgets et la rapidité du site. J'ai toujours trouvé les widgets qui m'intéressaient jusque là. Mais dernièrement, j'ai voulu ajouter un widget tout simple qui me permettrait d'afficher un compte à rebours suivant une date donnée. J'ai bien sur trouvé quelques widgets fonctionnant selon mes désirs mais l'affichage trop complexe ne me satisfaisait pas. Devant la simplicité du widget à concevoir je me suis lancé dans la réalisation de mon tout premier module pour Netvibes.

Bien sur, il a fallu bien potassé la maigre documentation fournit par Netvibes et pas mal creuser du coté du forum. Une fois assimilé dans les grandes lignes le fonctionnement de l'UWA - voici un PDF résumant bien les fonctions principales - je me suis lancé un peu à l'arrache. Au final ça donne ça (lien direct), et vous il suffit d'afficher la source pour voir la totalité du code source :



On ne peut pas dire que cela soit un très gros module. Ce n'est pas non plus très compliqué. Il faut d'abord inclure deux lignes, en gros, la librairie UWA et sa feuille de style :

<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />

Une partie <widget:preferences> qui définie littéralement les préférences du widget. Ici :

<widget:preferences>
<preference name="title" type="text" label="Title"
defaultValue="Name of your countdown" />
<preference name="month" type="range" label="Month"
defaultValue="1" step="1" min="1" max="12" />
<preference name="day" type="range" label="Day"
defaultValue="1" step="1" min="1" max="31" />
<preference name="year" type="range" label="Year"
defaultValue="2007" step="1" min="2007" max="2100" />
<preference name="hour" type="range" label="Hour"
defaultValue="0" step="1" min="0" max="23" />
<preference name="minute" type="range" label="Minute"
defaultValue="0" step="1" min="0" max="59" />
</widget:preferences>

Puis un code javascript :

function countdown() { ... }

widget.onLoad = function() {

var title = widget.getValue('title');

widget.setTitle(title);

widget.setPeriodical('updateTime', countdown, 1000);
}

Tout con. Je vous avais prévenu. Je récupère le titre de l'événement dans les préférences et l'insère pour titre de mon widget. Puis j'indique au widget de lancer toutes les secondes la fonction countdown. Je vous passe les détails sur celle-ci. Elles récupèrent les préférences du widget puis calcul les jours, heures, minutes et secondes restantes avant l'événement. Une fois le temps calculé, on insère dynamiquement le texte dans le widget à l'aide de :
widget.setBody('<div class="countdown">'+nb_jour+ ':'+nb_heure+':'+nb_mois+':'+nb_secondes+'</div>');
Et voilà, on a un widget qui tourne sur toutes les plates-formes. Avouez que ça n'a pas l'air très compliqué ? Le plus dur étant de trouver les bonnes fonctions (ici setPeriodical) étant donné que leur doc est... vide.

Parmi tous les widgets que j'utilise, mon préféré est celui de ben, TV Series qui permet de consulter les prochains épisodes à venir des séries que l'on suit. Le souci ? Réalisé depuis la vieille API Netvibes, celui-ci n'est pas fait en UWA. Du coup ma copine ne peut pas le rajouter à son iGoogle, et moi je ne peux pas le rajouter à mon Vista. J'ai donc décidé de créer mon propre module qui fera probablement la même chose que celui de ben, sauf que le miens sera fait en UWA et offrira donc une portabilité intéressante.

Dans mon prochain billet j'aborderais plus en détails la conception de ce module que j'ai décidé d'appeler TV Shows (oui je tape dans l'original).

Edit : Tags autorisés : [ b] [ /b], [ i] [ /i], [ u] [ /u], [ code] [ /code] : On m'aurait menti ?