Apprendre XUL, c'est un peu apprendre à nouveau HTML, mais dans le but de construire les éléments d'une application plutôt que de mettre en page le contenu d'une page. Les éléments XUL sont en effet très divers, et rangé par groupe de fonctionnalités : boîte, grille, liste, menu, raccourcis clavier...

Nous allons prendre le temps de présenter les principaux éléments de XUL, en s'efforçant autant que possible de donner des exemples. Ce faisant, nous nous construirons donc un dictionnaire d'où tirer le vocabulaire nécessaire à la construction d'interfaces XUL.

Les fenêtres
window
C'est l'élément de base de tout document XUL : il permet de définir une fenêtre, par défaut affichant ses éléments horizontalement (l'un après l'autre). C'est l'équivalent de la balise body du HTML. Il ne peut y avoir qu'un seul élément window par fenêtre/fichier.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="identifiant" title="Ceci est un titre" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
...
</window>

page
Comme window, mais réservé aux fichiers XUL chargés au sein d'une iframe (contenue par window).

dialog
Remplace window dans le cas où le fichier XUL sert à afficher une boîte de dialogue.

Overlay
Permet de définir un bloc réutilisable par plusieurs fenêtres, comme des menus. Cela permet de simplifier les fichiers, et de modulariser les fonctionnalités. Ils disposent d'une déclaration XUL à part :
<?xul-overlay href="chrome://global/content/globalOverlay.xul"?>

wizard
Un type particulier de fenêtre, toujours accompagné de wizardpage, chargé de guider l'utilisateur à travers d'une série d'étapes, chacune ayant un écran différent.
<wizard id="instal" title="Installation du logiciel" onwizardcancel="return annulerInstal();" onwizardfinish="return terminerInstal();" xmlns="http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul">
  <wizardpage id="wPage1" pageid="page1">
...
  </wizardpage>
  <wizardpage id="wPage2" pageid="page2">
...
  </wizardpage>
  <wizardpage id="wPage3" pageid="page3">
...
  </wizardpage>
</wizard>

Les blocs
Sans être des éléments visuels, ce sont les conteneurs de base permettant de positionner les éléments de plus haut niveau.
box
Cet élément sert à regrouper un nombre indéfini d'éléments - on peut bien entendu orienter leur placement (gauche-droite, vertical, ...). box est la version la plus simplifié de cet ensemble, mais pas le plus pratique à utiliser car il faut tout y définir (dans le cas où l'agencement par défaut ne convient pas).

hbox, bbox et vbox
Ces trois éléments ont été créés pour simplifier légèrement la création de bloc :
- hbox est en fait box, mais le h est un rappel que l'agencement est horizontal
- pareillement, vbox correspond à box si on lui donnait pour attribut orient="vertical",
- bbox, enfin, correspond à hbox (donc, box) auquel on aurait attribué align="baseline", c'est-à-dire que les étiquettes ("label") des éléments qu'il contient sont alignés.

<vbox>
  <description>Bla bla bla</description>
  <image src="lapin.png">
</vbox>

Quelques éléments de mise en page
stack
Permet de grouper des blocs d'éléments les uns derrière les autres. C'est le dernier élément ajouté qui est placé "en haut de la pile".
<stack>
  <button label="Matin" left="0" top="0" />
  <button label="Midi" left="15" top="15"/>
  <button label="Soir" left="30" top="30"/>
</stack>

deck
Comme stack, mais n'affiche un élément à la fois, cet élément étant déterminé par l'attribut selectedIndex.
<deck selectedIndex="2">
  <button label="Matin" left="0" top="0" />
  <button label="Midi" left="15" top="15"/>
  <button label="Soir" left="30" top="30"/>
</deck>
n'affichera que le bouton "Midi", le second dans la liste. La disposition peut ensuite être modifiée en travaillant selectedIndex via le DOM.

scrollbox et arrowscrollbox
Permettent de grouper des éléments au sein d'un bloc, et de faire apparaître (explicitement ou implicitement) des flèches de déplacement dans le cas où le contenu prendrait plus de place que son contenant.
<scrollbox width="200" height="200">
  <button width="150" label="grosbutton" />
  <button width="150" label="grrrrosbutton" />
</scrollbox>

Forum

Réagissez dans les forums de JDN Développeurs

iframe
A la manière de son homonyme en HTML, iframe permet de créer, au sein d'un document, une "fenêtre" où se charge un document externe (HTML, XUL, ...).
<iframe id="options" src="quizz.xul" />

Nous aborderons les éléments graphiques lors d'un prochain article...