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.
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 very flexible layout method is aptly named by the creators of XUL as the box model.
A common attribute of elements placed in boxes is Flex, which makes the room the element uses an attribute of flexible. In the example above, all of the buttons are the same size and there is a lot of left over space to the side of them. Try adding a flex=”1″ attribute to the second opening vbox element. Now the second set of buttons will take up all of the remaining available space in the window. This is commonly used with spacers to make other elements appear in appropriate places within windows. You may at this point be thinking that the value of flex is of a Boolean type, with 1 for true and 0 for false. This is not the case; the flex attribute is of the integer type. If you have multiple elements with the flex attribute, the attribute with the highest flex value will take up the most space.
Much better! Again, the flex attribute is more than welcome if you need to make elements stretch to fit the available space within the window. In the example above however, the flex attribute may have unexpected results without the addition of columns. Try adding the flex attribute to the first and last opening row elements to see how the buttons are affected.
Without a stylesheet to make it look nice, this example is pretty bland, but it demonstrates the use of the groupbox element.
Other layout methods include the stack and deck elements, both similar but with a subtle difference; both elements place interface elements in a physical stack, placing them on top of each other, but while the stack elements offers transparency, so elements at the bottom of the stack can still be visible, the deck does not, and elements will be seen to cover entirely or overlap depending on their placement.
The code above will draw a window with the stack at the top and the deck below. The stack elements are all displayed at once, hence the incomprehensible garble. Notice how we have specified two decks, but only one deck is displayed, and this is the bottom one. When the selectedIndex attribute is not defined, the default value is zero. Indices, as we all know, tend to be zero based, so the above deck has a max index of 1. In order to display the top deck, simply add a selectedIndex=”1″ attribute to the opening deck tag. Now the top deck will be displayed. Clearly, the use of a script to modify the selectedIndex value could produce effects similar to basic animation.
All I’ve talked about so far are elements; interface elements and layout elements. What I haven’t mentioned yet are content elements. We’ve seen buttons, labels, controls etc, but nothing in which to actually store content. What that content actually is depends on what the application does, for a browser, such as Mozilla, the main content is HTML pages. As XUL came around in order for Mozilla to actually be constructed, HTML pages are easily displayed using an iframe element. To test this out fully, you’ll need a web page to display. You could create one of your own, or to save yourself some time you could work with something that’s already out there.
Note that the attribute must be included, or the page will not open within the iframe. Now, save it as iframe.xul or similar and then execute it with the command line. Your window should appear with the Google homepage loaded in it. The links should work and you can even do actual searches with it. You’ve just created a browser, with just a couple of lines of code! If your window is smaller than the size of the page you’ve selected for this example, Mozilla will even include working scrollbars for you, with no additional code. You’re not restricted to displaying just web pages either, change the src attribute of the iframe to one of the XUL files you’ve already created and watch in awe as that is loaded just as easily. It will even render simple text files, which you can prove by changing the src to a file ending in .txt. The files that you’re opening should be located in the same directory as the iframe.xul file, or should include the full path to them if they’re not.
So you see, there are several very basic ways to include content within your XUL files. The next article introduces RDF, and explains how more complex elements can be access via a chrome URL from within Mozilla to give added functionality and power to your XUL applications.