Back to XUL: The Interface - Don't forget the toolbar
(Page 3 of 4 )
Another common interface feature that is used as standard in many applications is a toolbar that features icons representing the action to which the button is linked. Again, it is very easy to add this to our interface, and varies from the above code in only a few ways:
<toolbox>
<toolbar id="buttonBar">
<toolbarbutton id="buttonOpen" image="open.gif"
tooltiptext="&openLabel;"/>
A toolbar is used instead of a menubar, and a toolbarbutton in place of a menu element. The image attribute specifies the icon to use and the tooltiptext provides an HTML style text-popup to indicate the function of the button.
I have created a set of my own icons to use here, feel free to download them and use them also if you wish. For now, these have been put into the main content window, but can be moved into a skin directory later on if necessary.
Other buttons can now be added:
<toolbarbutton id="buttonSave" image="save.gif"
tooltiptext="&saveLabel;"/>
<toolbarbutton id="buttonNew" image="new.gif"
tooltiptext="&newLabel;"/>
In the same way that you can have expanding sub-menus, you can also create buttons with expanding sub-menus built into them:
<toolbarbutton id="buttonToolbar" image="menubar.gif" type="menu"
tooltiptext="&toolbarsTooltip;">
<menupopup>
<menuitem id="buttonMenubar" label="&menubarLabel;"/>
<menuitem id="buttonToolbar" label="&toolbarLabel;"/>
<menuseparator/>
<menuitem id="buttontoolbarButton"
label="&toolbarButtonLabel;"/>
<menuitem id="buttonMenuseparator"
label="&menuseparatorLabel;"/>
</menupopup>
</toolbarbutton>
You simply enclose a menupopup with the usual menuitems within the toolbarbutton element. It couldn’t really be any easier. Notice the naming convention of elementtypeName. It is not necessarily important which naming convention you use, it is just important that you choose one and stick to it. This is to make it easier for you to code, and for others to interpret your code. This consistency is an important aspect of programming.
You can now add the rest of the code to finish the toolbar:
<toolbarbutton id="formsButton" image="forms.gif" type="menu"
tooltiptext="&formsTooltip;">
<menupopup>
<menuitem id="textboxButton" label="&textboxLabel;"/>
<menuitem id="listboxButton" label="&listboxLabel;"/>
<menuitem id="radioButton" label="&radioLabel;"/>
</menupopup>
</toolbarbutton>
<toolbarbutton image="window.gif" type="menu"
tooltiptext="&windowsTooltip;">
<menupopup>
<menuitem id="windowButton" label="&windowLabel;"/>
<menuitem id="wizardButton" label="&wizardLabel;"/>
<menuitem id="editorButton" label="&editorLabel;"/>
<menuitem id="browserButton" label=&browserLabel;"/>
<menuseparator/>
<menuitem id="iframeButton" label="&iframeLabel;"/>
<menuitem id="titlebarButton" label="&titlebarLabel;"/>
</menupopup>
</toolbarbutton>
</toolbar>
Next: The main content window >>
More XML Articles
More By Dan Wellman
