This article, the second in a series about the XML variant called XUL, gets you started on creating the main interface for an application. Among other things, it covers sub-menus, toolbars, and the main content window.
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:
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.
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:
XML 
Overlays in XUL
