Toolbar

Toolbar is a particular box intended to contain buttons (but which can contain all kinds of components), which is horizontal by defaultt, and which has supports to "grippy", that is a dotted box that allows to group buttons and that is compacted at a click.
Along with toolbar, other tags exists that are specific to it.

Components of toolbar

toolbarbutton

It is a button intended to be contained in a toolbar and which is treated differently by the XUL interpreter.

toolbargrippy

Icon for collpasing or expanding the contents of a toolbar.

toolbarseparator

Separator for toolbars. The difference with a basic separator is the use of themes to vary the appearance.

toolbarspacer

Empty separator, displays a blank space between buttons.

toolbaritem

If one wants to place into the toolbar elements other than buttons and separators, one encapsulates them into a toolbaritem. For example a text input field.

Example

We will create a small interface with a toolbar, some buttons and other graphic components and commands will be added to test it.

The toolbar is defined:

<toolbox> 
    <toolbar>
    </toolbar>
</toolbox>

Two buttons are added, open and save, only the name changes compared to buttons as previously described:

<toolbox> 
   <toolbar> 
        <toolbarbutton image="open.gif"/> 
        <toolbarbutton image="save.gif"/>
   </toolbar>
</toolbox>

To add an element other than a button, actually a label and a text input field, it is encapsulates into a toolbaritem:

<toolbaritem> 
    <description value="To enter a URL"/>
    <textbox/> 
</toolbaritem>

To associate commands to buttons, that is as with menus, one assign a id to each button and one creates event handlers by the addEventListener method to which one passes the id in parameters.

• Demo code.zip.