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
It is a button intended to be contained in a toolbar and which is treated differently by the XUL interpreter.
Icon for collpasing or expanding the contents of a toolbar.
Separator for toolbars. The difference with a basic separator is the use of themes to vary the appearance.
Empty separator, displays a blank space between buttons.
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.
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.