Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the second part of this series, Dan Wellman covers implementing more kinds of buttons. He also begins talking about creating Menu Bars, Tooltips, and Status Bars.
You can tidy things up a little and give the elements some room by using the <spacer> and <separator> elements. The syntax is similar for each of these things:
<spacer height="20"/>
The above line of code will give you a space 20 pixels high in the place that you put it. Try adding the above line before and after the various buttons near the top of the window to give the buttons a bit of room, but remember to resize the window accordingly. The <separator> element works in very much the same way but the default size of the gap between the separated items is smaller than that of a spacer. Note that when this item is used, an actual line is not drawn between the separated items.
Along the bottom of most applications is an information or status bar that displays pictures or text relevant to the task in hand, in browsers for example, this bar can display icons for when pop-ups are blocked, cookies are rejected or a secure area is accessed. Creating one of these information bars in XUL is, as you’ve probably guessed, a very easy thing to do. Each holder for the icon or text is known as a statusbarpanel, and each statusbarpanel must be placed in a statusbar container. Add the following code at the bottom of your working file:
When executed, your application window will now have the status bar at the bottom, with the labels inside each panel. This is another element set that can be further contained within a toolbox, and doing so will put a line across the bottom of the status bar. It’s not much I know, but it’s an additional feature. There are few attributes of the statusbarpanel elements, just crop and the choice of either label or source. The crop attribute is used to specify how any text in the statusbarpanel is cropped when the element is too small for its label. The label simply puts text in the element and the source is used to specify a picture that is used instead of text.
/ 10 
