XUL Tutorial - More Toolbar Features

Here, we'll look at some more features of toolbars.

Toolbar Alignment

Toolbars are normally placed along the top of an application window so the default alignment is to align the buttons horizontally in a row. Of course, since a toolbar is just a special type of box, this makes sense. You can, however, place toolbars vertically if you want. Here is an example of a toolbar placed along the left side of a window.

<toolbox orient="horizontal">
  <toolbar orient="vertical">
    <button value="Back"/>
    <button value="Forward"/>
  </toolbar>
</toolbox>

The only changes that have been made are to add two orient attributes. Notice in the image that the buttons have been placed vertically and the grippy has appeared along the top. Functionally, the toolbar is the same.

The toolbar has been changed so that it uses vertical orientation because we want the buttons to be placed vertically. The toolbox has been given horizontal orientation because, if there were multiple toolbars, we want them to appear next to each other in a row rather than on top of one another. If the orient attribute had been left off the toolbox, the toolbars would be oriented vertically. By looking at the code above, you may have noticed that a horizontal orientation was explictly specified on the toolbox. This means, of course, that unlike most boxes, toolboxes default to be vertical oriented.

You can place toolbars on the right or bottom sides of a window by putting them at the end of the content. In fact, you can put them in the middle of the window if you wanted to.

(Next) Next, we'll look at adding content panels.

Examples: 4.7.1