« Xul, c’est cool ! »
Le 13 octobre 2007
Développement Web
Introduction
XUL (prononcez “zoul”, comme “cool”) est une technologie inventée par la fondation Mozilla : elle permet de créer des interfaces à l’aide d’une application du langage XML. Il s’agit d’une technologie open-source et conforme aux standards du W3C. Le fait de passer par XUL permet entre autres d’utiliser le look’n’feel du système sur lequel on se trouve et de créer facilement des applications portables d’un système à l’autre. XUL est complètement interprété, et son code source est facilement modifiable, analysable et partageable.
Ainsi, Firefox, Thunderbird, Sunbird, Mozilla exploitent tous XUL, ce qui leur permet d’être présents sur tous les systèmes d’exploitation. La programmation repose essentiellement sur Javascript, le DOM et des composants XPCOM pour accroître encore les possibilités.
Globalement, on peut créer avec XUL :
- de vraies applications stand-alone, les exemples ne manquent pas.
- des plugins pour ces applications qui s’intègrent facilement (cf. la kyrielle de plugins pour firefox).
- des applications internet riches (ou RIA pour Rich Internet Application).
La seule limite de XUL est de nécessiter l’utilisation du moteur gecko pour fonctionner, ce qui signifie dans le cas des RIA qu’il faut voir le site avec Firefox, Epiphany ou autre ... Et que Internet Explorer est laissé pour compte puisqu’il exploite pour sa part une technologie propriétaire nommée XAML et qui s’intègre au framework .NET. Évidemment, Microsoft ne pouvant jamais rien faire comme tout le monde, XAML n’est standard en aucune façon.
Notons enfin l’existence d’une troisième alternative nommée Flex, qu’on ne présente plus : il s’agit de la solution proposée par Adobe qui permet d’utiliser le plugin Flash 9, présent sur de nombreuses plate-formes, de programmer en Action Script 3 et de compiler le tout. Problème de cette méthode : elle n’est pas standard, et reste totalement inaccessible.
A vous de voir ce que vous ferez de XUL : pour ma part j’imagine assez bien l’utiliser dans une arrière-boutique de site, et c’est dans cette optique que je me suis décidé à l’apprendre.
Premiers Pas
Développer une application XUL est une opération qu’on peut entreprendre à plusieurs niveaux et qui peut se révéler plus ou moins compliquée, suivant l’utilisation qu’on en fait. Tout dépend de l’utilisation qui va être fait de l’application en elle même :
- On peut développer une application ou un plugin à l’intérieur de Firefox, à la manière de FireBug ou FireFTP, cela nécessite d’utiliser les adresses "chrome". Je n’ai pas encore essayé cette façon de faire.
- Créer un fichier xul et y accéder en tapant son adresse dans le navigateur, soit comme un fichier local (file ://) ou distant (http://). C’est le principe utilisé pour les RIA et c’est celui que j’ai exploité pour l’instant. Attention cela dit, car pour des raisons évidentes de sécurité, on ne peut pas tout faire avec ce genre d’application (accès au disque etc.).
Voilà ce qu’il faut placer dans le fichier principal, pour déclarer une interface rédigée en XUL :
<?xml version="1.0" ?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="xul-c-cool"
title="XULReader"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
(...)
</window>
Ce code permet de faire plusieurs choses :
- déclarer le fichier XML, c’est l’objet de la première ligne.
- adjoindre une feuille de style particulière permettant de donner une apparence standard aux widgets et à l’interface.
- déclarer la fenêtre qui va contenir les différents widgets (textbox, label, button, etc.) avec <window>. On fixe également un titre à l’application, l’orientation de cette dernière, et l’espace de nom (xmlns) spécifique à XUL.
Et après ?
Après ? Vous pouvez placer les boutons, les boîtes de texte, les arborescences, les listes qui vous conviennent facilement : tout le système de XUL repose sur une déclaration et un positionnement très intuitif des éléments de l’interface.
Comme une démonstration vaut mieux qu’un long discours, je vous renvoie à la petite application que j’ai développée hier soir en quelques heures (le temps de faire joujou) : xulReader, un lecteur de flux RSS. Donnez lui un flux RSS standard, cliquez sur un article, ouvrez-le puis changez d’onglet pour le lire. Faites CTRL-U pour afficher la source de l’application, elle est pas mal commentée ;).
Le peu de programmation Javascript nécessaire au fonctionnement de l’application est placé directement dans la page, à la fin du document. Comme vous le verrez si vous en avez l’habitude, il n’y a strictement rien de plus qu’une manipulation classique du DOM dans la plupart des cas et une requête Ajax basique pour récupérer le flux.
Edit du 17/10/07 : Je vous renvoie à l’article de Killian Ebel qui parle de son jReader, un petit lecteur de flux RSS en Java.
Ressources
Voilà quelques adresses qui m’ont été bien utiles lors de mes développements :
- Le tutoriel de XULFr.org : un grand classique, point de départ très pratique si vous n’êtes pas à l’aise en Anglais.
- Référence XUL exhaustive et tutoriels en Anglais : la référence. La navigation me semble plus pratique que dans le site précédent, à voir ce qui vous convient le mieux ;).
- XUL, les cahiers du programmeur : petit coup de projecteur sur un des seuls livres en Français existant sur XUL. Accrochez-vous cela dit, car il est très technique, et va assez loin dans ses développements. Idéal pour approfondir à mon sens, mais sans doute trop complexe pour commencer.
Dandelionmood.com a déménagé !
Votez pour cet article sur 
Vos réactions
- Killian, le 14 octobre 2007
Vraiment excellent ta petite application, ça a l’air vraiment simple vu comme ça. La seule chose que je reproche à XUL - pour comparer aux autres technologies - c’est la faiblesse dans la personnalisation des interfaces...
Pour ça, Flex a quand même une grande longueur d’avance. De plus, il n’y a pas vraiment d’outil "officiel" à ce que je sache pour développeur correctement du XUL. J’aimerais bien apprendre, mais il y a d’autres technologies pour moi qui en valent plus la peine !
- Géraldine, le 18 octobre 2007
- J’adhère totalement au concept.
- Laurentj, le 30 novembre 2007
- @killian : vu que le design se passe par CSS, tu peux personnaliser autant que tu veux une interface en XUL. Sans compter que tu peux le mélanger avec du HTML, du SVG, et donc au niveau présentation, tu peux aller très loin.