Les boites
Le contenu d'une interface XUL est organisé avec des balises box.
Il s'agit d'un conteneur servant à subdiviser une page en sous-ensemble,
dans lesquels on place les composants graphiques. Une boite peut contenir
d'autres boites, et ainsi de suite.
Outre le type box de base, deux types de boites existents:
- hbox: dans une hbox, les éléments seront alignés sur
un plan horizontal.
- vbox: dans une vbox, les éléments seront alignés verticalement.
hbox
A titre d'exemple, nous allons placer deux textes qui doivent être alignés l'un à coté de l'autre:
<hbox>
<description value="Alice au pays des merveilles" />
<description value=" Oliver Twist" />
</hbox>
Voir l'exemple hbox dans le fichier zip.
vbox
L'exemple pour un alignement horizontal est le même, mais avec la balise vbox:
<vbox>
<description value="Alice au pays des merveilles" />
<description value="Oliver Twist" />
</vbox>
Voir l'exemple vbox dans l'archive.
Combinaison de boites
En combinant plusieurs boites, box comme simple conteneur, vbox et hbox comme
conteneurs orientés, on peut définir la composition visuelle
d'une interface graphique.
Nous allons définir un écran avec deux panneaux horizontaux
et dans le panneau de droite, deux autres panneaux l'un au-dessous de l'autre:
<box>
<hbox>
<box>
<description value="Panel gauche" />
</box>
<vbox>
<box>
<description value=" Panel droite haut" />
</box>
<box>
<description value=" Panel droite bas" />
</box>
</vbox>
</hbox>
</box>
Plus de boites que nécessaire pour l'exemple ont été utilisées en fait, mais dans une application réelle, dotée de nombreux composants graphique, ces conteneurs seront indispensables.
Démo: box.xul