Groupboxes

This section describes a way to include elements into groups

Groupboxes

The groupbox element is used to group related XUL elements together, much like the HTML fieldset element is used to group HTML elements. The groupbox is a type of box, and the elements it contains are aligned according to the XUL box rules. However, there are several differences between groupboxes and regular boxes:

• The groupbox can be labeled using the caption element.
• The groupbox is displayed in a special way—usually with a beveled border and a caption, although you can change the appearance using CSS.

You can create a caption for your groupbox by inserting a caption element as the first child. Groupboxes are box elements, so you can use the box attributes, such as orient and flex.

A simple groupbox example

The example below shows a simple groupbox:

var el = env.locale; Example 1 : Source View

<groupbox>
  <caption label="Answer"/>
  <description value="Banana"/>
  <description value="Tangerine"/>
  <description value="Phone Booth"/>
  <description value="Kiwi"/>
</groupbox>

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

More complex captions

You can also add child elements inside the caption element to create a more complex caption. For example, Mozilla's Font preferences panel uses a drop-down menu as a caption. Although any content can be used, usually you would use a checkbox or dropdown menu.

var el = env.locale; Example 2 : Source View

<groupbox flex="1">
  <caption>
    <checkbox label="Enable Backups"/>
  </caption>
  <hbox>
    <label control="dir" value="Directory:"/>
    <textbox id="dir" flex="1"/>
  </hbox>
  <checkbox label="Compress archived files"/>
</groupbox>

In this example, a checkbox has been used as a caption. We might use a script to enable and disable the contents of the groupbox when the checkbox is checked and unchecked. The groupbox contains a horizontal box with a label and textbox. Both the textbox and groupbox have been made flexible so the textbox expands when the window is expanded. The additional checkbox appears below the textbox because of the vertical orientation of the groupbox. We'll add a groupbox to the find files dialog in the next section.

Radio Groups

You can use the radiogroup element to group radio elements together. The radiogroup is a type of box. You can put any element you want inside it, and apart from its special handling of radio buttons, it works like any other box.

Any radio buttons placed inside the radio group will be grouped together, even if they are inside nested boxes. This could be used to add extra elements within the structure, such as in the following example:

var el = env.locale; Example 3 : Source View

<radiogroup>
  <radio id="no" value="no" label="No Number"/>
  <radio id="random" value="random" label="Random Number"/>
  <hbox>
    <radio id="specify" value="specify" label="Specify Number:"/>
    <textbox id="specificnumber"/>
  </hbox>
</radiogroup>

Note that the radiogroup element does not draw a border around it. You should place a groupbox element around it if a border and caption are desired.

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