Faire un Widget Netvibes & iGoogle avec UWA, AJAX & eZ Publish : Introduction à UWA (Partie 1)

• Publié le 19 Avril 2009
• 4 commentaire(s)
• Catégorie : Technologies Web

Vous aurez remarqué (ou pas) dans la colonne droite, un nouveau bloc qui permet d'ajouter un Widget gandbox.fr à Netvibes ou iGoogle. On retrouve les grandes fonctionnalités du site, dans une version "light". Mon parti pris reste cependant de naviguer exclusivement dans le Widget, sans sortir du portail au moindre clic (comme on le voit trop souvent).

Une fois ajouté à votre portail personnel, ce Widget (ou Gadget pour iGoogle...) permet de :

• Suivre les derniers billets ajoutés
• Suivre les derniers commentaires ajoutés
• Naviguer dans la rubrique "ma Cave" par recherche libre, par région, par appellations, par domaines, par cuvées, etc.
• J'avais initialement prévu une authentification sur le Widget, pour pouvoir mettre à jour mes stocks de vins, mais UWA ne permet pas encore ce genre de fonctionnalité de façon fiables (j'y reviendrai)

L'intérêt fonctionnel de ce Widget est très discutable (voir nul). C'est surtout un prétexte pour expérimenter le développement d'un Widget un peu avancé via UWA (Universal Widget API). Ce premier billet décrit la logique de fonctionnement, et la prise en main d'un développement avec UWA, un prérequis indispensable avant d'aborder la couche eZ Publish.

Le concept UWA

UWA (Universal Widget API) affiche une promesse de taille : Développer votre Widget, et déployez le sur tous les supports (Netvibes, iGoogle, Windows Vista, Apple Dashboard, Live.com, iPhone, Opera, blogs, MySpace, etc.).

Les grands principes de UWA :

• Le développement d'un Widget sur un modèle unifié : Une simple page XHTML, contenant un namespace additionnel "widget" pour gérer la déclaration des préférences (les fameuses options des Widgets). Voir l'anatomie d'un Widget UWA, et le Hello World.
• Une interface transformant votre XHTML unifié vers du XHTML / XML spécifique au portail devant interpréter le Widget. Cette interface est invoquée dans l'URL d'ajout du Widget
• Un FrameWork JavaScript permettant de manipuler le Widget, le DOM, les préférences utilisateurs, certains éléments d'interfaces (les tabView par exemple), et d'autres éléments pas toujours documentés (je reviendrai sur ce point précis).

Exemple de traduction de UWA vers iGoogle :

Décomposant les différentes étapes pour l'ajout de mon Widget UWA sur iGoogle :

• Mon URL pour atteindre le Widget : http://www.gandbox.fr/mywidget/gandbox_V1.0.html
• L'URL pour traduire mon Widget au format UWA vers le format iGoogle : http://www.netvibes.com/api/uwa/compile/google.php?moduleUrl=http://www.gandbox.fr/mywidget/gandbox_V1.0.html
• L'URL pour ajouter mon Widget final en Gadget iGoogle, avec le bon URL encoding :

<a class="object-left" target="_blank" href="http://www.google.com/ig/add?moduleurl=http%3A%2F%2Fwww.netvibes.com%2Fapi%2Fuwa%2Fcompile%2Fgoogle.php%3FmoduleUrl%3Dhttp%253A%252F%252Fwww.gandbox.fr%252Fmywidget%252Fgandbox_V1.0.html" title="Ajouter gandbox.fr à Google Homepage // ">
 <img src="http://www.netvibes.com/img/uwa-google.png" alt="Ajouter à Google Homepage"/>
</a>
 
 

On remarque cependant qu'il n'y a rien de miraculeux. La transformation se contente de transposer les éléments externes du Widget (paramètres, titre, etc.), pour finalement afficher le Widget en IFRAME.

Dispositif de développement en local

Version standalone

Comme le précise la documentation, il faut ajouter la feuille de style CSS et le FrameWork JavaScript :

<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>
 
 

Concernant le documentation : Il est conseillé d'exploiter cette version : Documentation UWA la plus à jour.

Mode Debug

Les META permettent de configurer certains comportements du Widget, comme la description, l'auteur, la version de l'API, la fréquence de rafraîchissement, etc. (voir la liste complète sur le documentation). Une directive permet d'activer le mode debug :

<meta name="debugMode" content="true" />
 
 

Il est ensuite possible d'envoyer du debug JavaScript sur la console (en utilisant FireBug par exemple) :

widget.log('mon debug');
 

Fixer le Proxy Ajax en PHP

Il est nécessaire pour les appels AJAX de définir quel fichier PHP doit être exploitée. La directive 'UWA.proxies.ajax' est un peu capricieuse en local, mais rien de grave. Le mécanisme étant trivial (appeler un fichier PHP relatif au domaine, avec l'URL externe en paramètre), il est très simple de définir soit même les URL complètes :

var _URL_PROXY = '';
var _URL_GANDBOX = 'http://www.gandbox.fr';
 
if (document.location && document.location.hostname == 'localhost') {
 UWA.proxies.ajax = 'ajaxProxy.php';
 _URL_PROXY = 'http://localhost/html/widget/ajaxProxy.php?url=';
 _URL_GANDBOX = 'http://gandbox.loc';
}
 
if (document.location && document.location.hostname == 'www.gandbox.fr') {
 UWA.proxies.ajax = 'ajaxProxy.php';
 _URL_PROXY = 'http://www.gandbox.fr/mywidget/ajaxProxy.php?url=';
 _URL_GANDBOX = 'http://www.gandbox.fr';
}
 
 

Par ailleurs, le fichier ajaxProxy.php proposé dans la documentation est trop pauvre pour une exploitation avancée des appels AJAX (gestion des appels en POST par exemple), il est conseillé d'exploiter un autre script :

• Exemple d'un ajaxProxy.php plus avancé (non testé)
• Exemple d'un ajaxProxy.php très complet, avec gestion de cache (celui que j'exploite pour mon Widget)

Résultat en image

• Voir le code complet du Widget : http://www.gandbox.fr/mywidget/gandbox_V1.0.html

• Tags :
• UWA
• Widget
• AJAX
• eZ Publish