{toc}

Je continue mes tests avec Xul, la technologie Mozilla pour la construction d'application. Voici un petit memo. J'ai aussi mis un accès centralisé à mes petits tests.

Intérêt de ces technologies

Les technologies Mozilla pour la construction d'applications se conjuguent au pluriel. Il y a Xul, XBL, le JavaScript, le CSS et on peut utiliser très facilement des langages de description au format RDF. L'ensemble est assez intéressant en particulier pour développer des logiciels éducatifs libres:

  • Liberté et facilité de déploiement. Le moteur qui les fait tourner est le moteur de Mozilla. Il suffit d'avoir un Firefox installé pour pouvoir les utiliser, quelque soit la plate-forme. Si vous faite une telle application elle sera automatiquement multiplateforme. Vous n'aurez pas besoin de la compiler, elle est prête à fonctionner.
  • Ces technologies sont issues d'Internet. Il y a de fortes similitudes entre la programmation d'applications Xul/Javascript et la programmation en HTML dynamique, qui est fréquente sur le web. Les deux utilisent l'interface DOM pour accéder aux éléments de l'interface. Il est donc facile de trouver des exemples et des idées lorsque veut se lancer.
  • La puissance d'expression est décuplée par le moteur de template de Xul, qui permet de générer des éléments à partir de sources RDF. J'ai utilisé cette possibilité[1] pour le memo.
  • Les éléments peuvent être étendus par le système de liaison XBL, qui permet de raisonner comme en programmation objet. L'exemple du memo utilise aussi cette facilité.
  • On peut faire des applications utilisables sur le web ou en local après installation.
  • Avec Firefox 1.5, on peut ajouter la puissance de représentation graphique de SVG.

La suite est une description technique de deux exemples. Vous pouvez arréter ici la lecture si la programmation elle-même ne vous intéresse pas.

Exemple simple: «Déplace la souris»

C'est l'exemple le plus simple en xul, il serait évident de refaire le même en HTML: il n'utilise xul que pour afficher et positionner les éléments initiaux (image, un bouton, et le sourire), et il utilise Javascript pour générer et positionner les boutons à partir du modèle. L'intérêt du Xul est ici la facilité de description d'interface, avec tous les éléments montrés dans la table périodique des éléments Xul.

Vous pouvez lire le code de cet exemple avec eregistrant la cible de ce lien, ou en l'affichant et en demandant à voir le source de la page.

Exemple plus complet: «Memo»

Ce deuxième essai utilise Xul avec un template, RDF, XBL, plus un fichier CSS.

Xul avec un template, et RDF

RDF est un format de fichier destiné à contenir des descriptions de toutes sortes. Le fichier utilisé contient la liste des images à utiliser dans le memo. Chaque image a sa description, indiquant une référence RDF permettant de le retrouver et le nom du fichier qui la contient. Une liste des images (utilisant ces références) à utiliser dans le memo se trouve à la suite des descriptions de toutes les images.

Ce RDF est utilisé dans le fichier Xul via un template: c'est un modèle qui sera répété pour chacune des images. Ainsi la description de l'ensemble image + carte n'est écrite qu'une fois, elle est générée automatiquement pour les dix images.

Ce système, template+RDF, rend très facile la construction d'applications qui utilisent des listes d'éléments. On peut l'utiliser directement avec le JavaScript pour faire tourner l'application. Mais j'ai utilisé un autre système pour me simplifier la vie: XBL.

XBL pour une description «objet»

XBL permet d'ajouter à tout élément, fut-ce un ensemble contenant une carte et une image (le <deck /> de mon exemple) des variables et des méthodes auquel on peut alors accéder en javascript. Il faut raisonner comme en programation objet et voir l'élément qui a ces méthodes comme un objet autonome, qui peut contenir d'autres objets avec leurs propres méthodes et variables.

Voici le fichier XBL que j'utilise: memo_stack représente la pile contenant toutes les cartes, et memo_cell un deck[2] contenant l'image du dos de carte et l'image à mémoriser. le binding XBL de memo_cell a un constructeur (appelé automatiquement lors de la création) qui le clone (il y a deux cartes identiques) et fixe la position aléatoirement[3]

Un autre intérêt de ce système est que la gestion des évènements[4] se trouve dans ce binding au même endroit que les autres méthodes, ce qui rend la conception et la lecture plus logique. Méthodes, variables et gestion des évènements regroupés pour chaque élément dans le même binding, c'est une programmation propre. Dans mon exemple, chaque deck (image + carte) a une méthode flip qui permet de changer l'image. Lorsqu'il reçoit le clic de souris, sa méthode cardClicked est appelée (c'est le rôle du handler) et celle-ci appelle 'la méthode flip s'il y a lieu. Tout cela reste dans le binding de l'élément qui a reçu le clic, le JavaScript global du fichier Xul principal est rédut au minimum.

XBL permet aussi d'ajouter automatiquement des éléments à l'interface. J'utilise cela pour mettre l'image du dos de carte dans le deck. On a alors une partie du contenu graphique, les variables, les méthodes, les évènements gérés au même endroit pour chaque élément.

Un dernier détail sur xbl: la liaison entre le fichier XBL et son binding avec une objet du fichier Xul s'effectue via le CSS. Un seul regret sur ce système: il faut deviner à la lecture du fichier xul que les bindings sont à aller chercher via le fichier CSS indiqué au début. Ce n'est pas très lisible quand on n'a pas l'habitude. Un fois que les fichiers XBL sont repérés c'est assez facile,

Quelques possibilités pour des applications libres en Xul.

Ces exemples sans prétention ont pour but de montrer que Xul/XBL/Javascript est une excellente solution pour développer des logciiels éducatifs libres:

  • Type de programmation très logique. Utilisation du JavaScript qui est très courant sur le web.
  • Possibiltés d'interface très complète, avec gestion des images, génération automatique avec des listes en RDF.
  • Possibilité graphique de SVG en plus.
  • Utilisation du Javascript avec toutes ses fonctions, comme celles de manipulation de texte.
  • Pas de compilation: une fois écrite l'application fonctionne directement dans n'importe quel firefox, quel que soit le système (Windows, MacOS, Linux).
  • De nombreuses ressources sur Internet, tant au niveau Xul/XBL qu'au niveau Javascript.

Les manques de l'ensemble Xul/XBL/CSS/JavaScript:

Personnellement je pense que ce n'est pas génant de faire le fichier Xul à la main, en général on n'accumule pas des milliers d'éléments. N'oubliez pas la table périodique des éléments pour avoir des exemples avec leur code. Le faire à la main permet aussi de réfléchir aux interaction et aux bindings et au contenu qu'on pourra passer dans le XBL, ce que vous ferez toujours mieux qu'un logiciel

  • Un logiciel de création d'animation de type Flash. pour utiliser avec le SVG[5].

Ne pas dépendre de technologies non libres est un principe à garder en tête lorsque vous voulez faire du logiciel libre. SVG ne remplacera pas encore Flash. Mais Xul/SVG peut remplacer à peu près tout le reste. Si vous cherchez à développer des applications libres, Xul devrait faire partie des soultions à étudier. Vous pourriez commencer en étudiant quelques exemples, le tutoriel Xul, et en plaçant dans vos marque-pages le site francophone sur Xul avec son forum pour vos questions, sans oublier l'indispensable table périodique des éléments Xul, mise à jour au 6 avril 2006: et la réintroduction à JavaScript.

Mise à jour

Notes

[1] je n'ai utilisé qu'une toute petite partie de ce que peut faire le système de template.

[2] ensemble dont un seul élément est affiché à la fois.

[3] via une autre méthode du binding (setpos).

[4] comme les clics de souris

[5] d'ailleurs il parait que la fondation Mozilla a des sous à investir. Ils devraient y penser.