XUL Tutorial - Titledboxes

This section describes a way to include elements into groups.

Titledboxes

HTML provides an element, fieldset which can be used to group elements together. A border is typically drawn around the elements to show that they are related. An example would be a group of check boxes. XUL provides an equivalent element, titledbox which can be used for a similar purpose.

As its name implies, the titledbox is a type of box. That means that the elements inside it align themselves according to the rules of boxes. There are two differences between titledboxes and regular boxes:

1. A beveled border is drawn around the titledbox by default. You can change this behaviour by changing the CSS style.
2. The titledbox supports a label which is placed along the top part of the border.

Because titledboxes are types of boxes, you can use the same attributes such as orient and autostretch. You can put whatever elements you want inside the box, although typically they will be related in some way.

The label across the top of the titledbox can be created by using the title element. It works much like the HTML legend element. The title element is also a box, which means that you can put whatever you want in the label. Usually, a single text element is sufficient.

The example below shows a simple titledbox:

<titledbox orient="vertical">
  <title><text value="Answer"/></title>
  <text value="Banana"/>
  <text value="Tangerine"/>
  <text value="Phone Booth"/>
  <text value="Kiwi"/>
</titledbox>

This will cause four pieces of text to be displayed surrounded by a box with the label Answer. Note that the titledbox has a vertical orientation which is necesssary to have the text elements stack in a single column.

The title element is also a box, meaning that you could put multiple elements inside it. By default, however, titles have vertical orientation, unlike regular boxes. So, if you add multiple elements inside the title, they will be placed vertically in a column.

You might wonder why the HTML fieldset element cannot be used. You can use it if you wish, however, since it is an HTML element, the placement and size of the element will be controlled by HTML layout rules. The box model will not be used, meaning that flexibility is not used. The titledbox element is a box so it allows this. In addition, the titledbox is more optimal for XUL layout. You should use XUL elements if they are available.

We'll add a titledbox to the find files dialog in the next section.

(Next) Next, we'll use what we've learned so far and add some additional elements to the find files dialog.

Examples: 3.5.1