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.

See also

• Grid.
• Groupbox.