XUL Tutorial - Toolbars

A toolbar is usually placed along the top of a window and contains a number of buttons that perform common functions. XUL has a method to create toolbars.

Adding a Toolbar

Toolbars may be placed on any side of the window, either horizontally or vertically. Of course you wouldn't normally put a text field in a vertical toolbar. Actually, since toolbars are just boxes they can actually go anywhere you want, even in the middle of a window.

Typically, however, a set of toolbars would appear along the top of a window. When more than one toolbar is placed next to each other, they are typically grouped together in something called toolbox.

Along the left side of the toolbar is a little notch which, if clicked, will collapse the toolbar so that only the notch is visible. The notch is called a grippy. When mutliple toolbars are all placed in the same toolbox, the grippies will collapse into a single row. This shrinks the total amount of space that is used. Vertical toolbars have their grippies along their top edge. The user will usually collapse the toolbar if they want more space for the main window.

Note that the modern skin does not include grippies on its toolbars unless you also include the stylesheet 'chrome://communicator/skin/'. However, the classic skin includes grippies by default.

Here is a example of a simple toolbar inside a toolbox.

<toolbox>
  <toolbar>
    <button value="Back"/>
    <button value="Forward"/>
  </toolbar>
</toolbox>

This has created a toolbar containing two buttons, a Back button and a Forward button. The one toolbar has been placed inside the toolbox. This has involved three new tags, which are described here.

• toolbox
  A box that contains toolbars.
• toolbar
  A single toolbar that contains toolbar items such as buttons. Toolbars can be collapsed using the grippy on its left or top side.

The toolbar is the main element that creates the actual toolbar. Inside it are placed the individual toolbar items, usually buttons, but they can be other elements.

In the example above, only one toolbar was created. Multiple toolbars can be created just as easily by adding more toolbar elements after the first one.

The toolbox is a container for toolbars. In some applications, you will have several toolbars along the top of the window. You can put them all inside a toolbox.

The toolbox has an additional use besides being the parent of toolbars. It also provides the collapsing grippies found at the edge of the toolbar. When multiple toolbars are placed in a single toolbox, the grippies will collapse into a small space. You do not have to put toolbar elements inside a toolbox.

The grippies on the toolbox are created using another element, a toolbargrippy. It doesn't really make any sense to use it outside of a toolbar as it will have no special purpose as it will have nothing to collapse. However, you may wish to style it differently.

A toolbox with three toolbars in it:

The same set of toolbars but two have been collapsed.

<box orient="vertical" flex="1">
  <toolbox>
    <toolbar>
      <button id="opensearch" value="Open"/>
      <button id="savesearch" value="Save"/>
    </toolbar>
  </toolbox>
  <tabcontrol orient="vertical">

(Next) Next, we'll look at some more features of toolbars.

Examples: 4.6.1