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 third part of this series covers layout and content elements.
Now that you’re a little more familiar with the elements that make up the interface, it’s time to look at some of the more advanced layout elements you have at your fingertips with XUL. In most of these examples, I’ve omitted the default opening and closing window elements to reduce repetition. You should by now have several saved files that contain the XML declaration and XUL namespace etc, so unless it is subject to the discussion, I’ve focused purely on the element being described. You may find it beneficial to set yourself up a basic XUL file containing just the opening window element with the necessary namespace that you can open, modify and save under a different name to reduce the amount of typing you need to do.
Vbox and Hbox
The two most basic layout elements within XUL are the vbox and hbox, which divide the application window into vertical or horizontal boxes respectively. Interface elements are then added as children to these elements. There is no limit to the number of children that can be placed inside a box, and boxes will quite happily nest as necessary to give the look you are trying to achieve. One important fact to note is that boxes will not wrap, so placing more elements in a vertical box will increase the height of your application window, and placing more elements in a horizontal box will increase the width of your window. The hbox and vbox elements are shorthand equivalents of using the box element with an orient attribute. So <hbox> is equal to <box orient="horizontal"> and <vbox> is equal to <box orient="vertical">. If the box element is used without specifying the orient, the default attribute is horizontal. Similarly, the <bbox> element is shorthand for a box element that has an align="baseline" attribute. Incase you’re wondering, the baseline value of the alignment attribute causes children of the box element to be aligned so that their labels line up.
This is extrememly similar to one of the windows created in the first article in this series, but do it again to remind yourself how the buttons are laid out in the window. Now, in the same file, add an opening and closing set of <hbox> tags so that they encapsulate the three buttons and run the file again. See the difference? Now put an opening and closing set of <vbox> elements within the hbox, and the buttons go back to a vertical stack. Placing another vbox enclosed set of buttons inside the outer hbox gives you two columns:
