Les widgets sont dans l’air du temps. Une récente affiche pour UPS dans le métro, relayée par e-Marketing Garden, montre que leur démocratisation est en marche.
D’autre part, une des grandes tendances techniques qui se dégage ces derniers mois concerne les principes d’API unifiées. Il y a entre autres OpenSocial de Google pour regrouper sous une même bannière des petits réseaux sociaux (Hi5, Orkut etc.), ou encore UWA, l’API de Netvibes destinée à l’écriture de widgets.
C’est sur cette dernière que je vous propose de nous plonger et de découvrir au travers d’un projet concret comment développer un widget universel.
Cette librairie part du constat que les principaux moteurs de widgets reposent tous sur une base technique similaire. Une description XML définit l’interface pour l’affichage et les préférences, et un moteur Javascript/AJAX offre toute la latitude nécessaire pour les traitements et l’accès aux données.
Structure technique
L’Universal Widget API possède la base technique de Netvibes (Prototype + Mootools), sur lesquels s’appuient une série de classes JS :
- détection de navigateur
- accès aux éléments du widget (préférences, contenu…)
- des composants d’interface (onglets, tableaux, icônes…)
Une couche de PHP logée chez Netvibes complète le fonctionnement :
- Proxy pour faire de l’AJAX cross-domain
- Transformation du widget pour être chargé dans des plateformes tierces (Yahoo Widgets, iGoogle…)
Documentation
La bât blesse concernant la documentation : je la trouve relativement incomplète en regard des fonctionnalités qu’offre la librairie, et il faut parfois fouiller pour trouver certaines subtilités de l’API. Alors, certes, il y a bien des explications sur le squelette XHTML à créer, et quelques fonctionnalités importantes. Mais par exemple, comment mettre une icône dans un onglet sans fouiller dans le code source de l’API ?
Voici quelques éléments importants pour essayer de vous y retrouver :
- la doc standard, qui même incomplète, n’oublie pas de préciser quelques pièges à éviter pour une compatibilité parfaite avec les différents environnements
- l’indispensable cheat sheet à emmener partout avec vous
- le forum développeurs de Netvibes
- le fichier JS (non minifié), faites le apparaitre dans un IDE Eclipse (Aptana par exemple)
- les exemples de l’écosystème, souvent très pertinents et utiles
En pratique
Voici un petit exemple de widget tout simple. Son principe est de prendre une liste fixe de phrases et d’en piocher une au hasard.
La première étape de votre widget va consister à créer un squelette XHTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">
<head>
<title>Mon widget</title>
<meta name="author" content="Coding Style"/>
<meta name="email" content="fakeaddress@hotmail.com"/>
<meta name="description" content="Mon widget"/>
<meta name="keywords" content="codingstyle, widget"/>
<meta name="inline" content="true" />
<meta name="apiVersion" content="1.0"/>
<meta name="autoRefresh" content="20"/>
<meta name="debugMode" content="true"/>
<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css"/>
<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
<script type="text/javascript"></script>
</head>
<body>
Chargement...
</body>
</html>J’insiste sur quelques notions importantes du Widget :
- N’oubliez pas la déclaration XML en haut du widget, elle vous sera utile si vous faites des préférences
- L’email et l’auteur sont impératifs si vous souhaitez qu’il fonctionne bien avec iGoogle
Ensuite, ajoutons une couche de JavaScript à la fin de l’élément head pour les traitements et les données :
var MonWidget = { _sentences: [ 'Ma phrase super marrante n°1', 'Ma phrase rigolote n°2', 'Ma phrase LOL n°3' ], getSentence: function() { var len = MonWidget._sentences.length; var idx = parseInt(Math.random() * len); return MonWidget._sentences[idx]; } } widget.onLoad = function() { var s = MonWidget.getSentence(); widget.body.innerHTML = s; }
La méthode widget.onLoad est appelée automatiquement par les moteurs de widget au chargement de la page. Le reste est du Javascript standard, et de la manipulation du DOM.
Enfin, un petit test via l’interface de Netvibes. Assurez-vous à ce titre que l’adresse que vous utilisez pour votre widget soit accessible sur Internet.
Conclusion
Au final, UWA est une API très puissante, mais documentée par des développeurs, autant dire qu’il faudra fouiller dans le source. Des contributions de type Wiki feraient sûrement le plus grand bien pour avoir un aspect exhaustif des fonctionnalités.
Mon exemple ici ne montre qu’un widget extrêmement succinct, mais il peut servir de base pour un widget beaucoup plus élaboré (préférences utilisateur, utilisation d’AJAX et du lecteur RSS, utilisation des composants graphiques de Netvibes - onglets, tableaux…). A noter que quelques fonctionnalités importantes manquent encore, comme la possibilité d’avoir des préférences dynamiques, qui m’ont posé un gros problème sur un widget perso.
Commentaires récents