Boxes
The contents of a XUL interface are organized with box tags It is a container
being used to subdivide a page in subsets, in which one places graphic components.
One box can contain others boxes, and so on.
In addition to the basic the box, two types of boxes exist:
- hbox: in a hbox, elements are aligned horizontally.
- vbox: in a vbox, elements are aligned vertically.
hbox
As example, we will place two texts which must be aligned side by side:
<hbox>
<description value="Alice in Wonderland" />
<description value="Oliver Twist" />
</hbox>
vbox
The example for a horizontal alignment is the same one, but with the vbox tag:
<vbox>
<description value="Alice in Wonderland" />
<description value="Oliver Twist" />
</vbox>
Combination of boxes
By combining several boxes, box like simple container, vbox and hbox like
directed containers, one can define the visual composition of a graphic interface.
For example, we have defined a screen with two horizontal panels and in the
right panel, two other panels one below the other:
<box>
<hbox>
<box>
<description value="Left panel" />
</box>
<vbox>
<box>
<description value="Top right panelt" />
</box>
<box>
<description value="Bottom right panels" />
</box>
</vbox>
</hbox>
</box>
More boxes that necessary for the example were used in fact, but in a real application, using many graphic components, these containers will be essential.
- Demo code.zip.