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.
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>
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.