Attention : Le contenu de ces pages n'a pas été mis à jour depuis longtemps. Il est probablement obsolète pour Firefox 4.0/Gecko 4.0 et supérieur. Pour du contenu plus récent, allez consulter developer.mozilla.org.

Etape1

Premier jet

Créons notre premier fichier xul. On ne va pour l'instant afficher qu'un seul composant : celui qui va contenir notre liste des tâches.

 <?xml version="1.0"  encoding="ISO-8859-1"?>
 <window xmlns="[[http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"]]>
      <tree id="liste-taches" flex="1">
        <treecols>
	       <treecol id="col-priorite" label="Priorité" flex="1" />
	       <treecol id="col-description" label="Description" flex="4"/>
	       <treecol id="col-effectue" label="Effectué" flex="1" />
        </treecols>
        <treechildren id="liste-donnees-taches" flex="1">

        </treechildren>
     </tree>
 </window>

Vous pouvez tester directement cet exemple en cliquant ici : etape1.xul. Ou bien sauvegardez ce source XUL sous le nom etape1.xul . (mettez bien la balise <?xml ?> au tout début de votre fichier, sans saut de ligne ni d'espace avant).

Ensuite, ouvrez Mozilla, cliquez sur fichier/ouvrir fichier, et choisissez etape1.xul.

Voici ce que vous devriez avoir :

Quelques explications

l'entête xml

Un fichier XUL est un fichier XML. Comme tout fichier XML, il contient un en-tête obligatoire <?xml ?>. Celui ci indique que le contenu est du XML, et indique également l'encodage (le jeux de caractères à utiliser). Ici, c'est ISO-8859-1 qui indique le jeu de caractères européens. Si vous omettez l'encodage, Mozilla prendra UTF-8 par défaut. Or, la majorité de nos éditeurs sauvegardent en ISO-8859-1. Du coup, les caractères accentués seront affichés sous forme de caractères bizarres si on n'indique pas l'encodage ISO.

Vous devez respecter également la notation XML. À savoir :

le langage est sensible à la casse pour les noms et attributs de balises. Ainsi <Window> n'est pas identique à <WINDOW>, ni à <window>. Les balises ouvrantes et fermantes doivent donc avoir strictement le même nom avec les bonnes majuscules/minuscules.
les balises fermantes sont obligatoires
pour les éléments qui n'ont pas de balises fermantes, il faut les terminer par un /. (comme la balise <treecol> de notre exemple).
les valeurs des attributs doivent être obligatoirement encadrées par des quotes ou doubles quotes (le double quotes est préférable)
les balises ne doivent pas se chevaucher, et rester sous forme d'arbre. Ex: <tree><treecols>...</tree></treecols> est un document XML mal formé et donc incorrect.

L'élément racine d'un fichier xul : window

La plupart des fichiers XUL ont un élément racine identique : <window> (Comme les fichiers HTML qui ont un élément racine <html>).

Cette balise doit contenir toutes les autres et indique que votre fichier xul décrit une fenêtre.

Cette balise contient un attribut xmlns, qui indique l'espace de nommage implicite XML de cette balise et de ses balises filles.

Le composant pour afficher notre liste : tree

Notre fenêtre ne contient pour le moment qu'un composant de type tree. D'où la balise <tree>. C'est un composant qui contient une liste d'éléments (lignes), organisés eventuellement sous forme arborescente. Chaque élément possède trois propriétés que l'on affiche en colonnes.

La balise <treecols> permet de lister les colonnes et d'afficher un en-tête pour chaque colonne, representé par un bouton cliquable. Chaque colonne est décrite par une balise <treecol>, qui contient chacune un attribut label (libellé de la colonne), un id, et un attribut flex, dont nous verrons l'utilité plus loin dans le tutoriel.

Il y a enfin une balise <treechildren>, qui contient tous les éléments. Pour l'instant, il n'y en a pas.