An Introduction to XUL Part 3

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.

<?xml version=”1.0″?>
<window id=”boxes” title=”The Box Model” width=”500″ height=”300″   screenX=”50″ screenY=”100″ 
 xmlns=”http://www.mozilla.org/keymaster/gatekeeper/
 there.is.only.xul”>
  <button label=”Button1″/>
  <button label=”Button2″/>
  <button label=”button3″/>
</window> 

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:

<hbox>
<vbox>
<button label=”Button1″/>
<button label=”Button2″/>
<button label=”button3″/>
</vbox>
<vbox>
<button label=”Button4″/>
<button label=”Button5″/>
<button label=”button6″/>
</vbox>
</hbox> 

This very flexible layout method is aptly named by the creators of XUL as the box model.

{mospagebreak title=Flex and Grids}

Flex

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.

Grids

Another positional element is the grid element, which allows you to specify both vertical and horizontal positions of elements.  The grid is commonly used with elements and their corresponding labels to ensure that everything lines up correctly within your interface.  The grid syntax is very easy to master; everything in the grid should be contained within an opening and closing grid element set, individual rows are defined within a rows opening and closing element set and individual columns are defined within a columns opening and closing element set.  Care should be taken when designing grids as it is easy to misplace elements.  Add the following code to a new XUL file and execute it in the normal way:

<grid>
  <rows>
    <row>
      <button label=”button1″/>
      <button label=”button2″/>
      <button label=”button3″/>
    </row>
  </rows>
     <columns>
          <column>
            <button label=”button4″/>
            <button label=”button5″/>
            <button label=”button6″/>
          </column>
        </columns>
</grid> 

Now, the dilemma that you face here is that button 4 has overlaid and obscured button 1.  Generally, you would only add content to rows or columns rather than both to avoid this kind of conflict.  Try changing it to this to get the desired (in this example) effect:

<grid>
  <rows>
    <row>
      <button label=”button1″/>
      <button label=”button2″/>
      <button label=”button3″/>
    </row>
    <row>
     <button label=”button4″/>
    </row>
    <row>
      <button label=”button5″/>
    </row>
    <row>
      <button label=”button6″/>
    </row>    
  </rows>
</grid> 

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.

{mospagebreak title=Groupbox, Stack and Deck}

Groupbox

Another positional model that can be used is that of the <groupbox> which stacks child elements in a column and draws a bow around them.   The syntax for this is equally simple, and although one has been provided, an example is not strictly necessary:

<groupbox>
  <caption label=”Groupbox”/>
    <description value=”Item1″/>
    <description value=”Item2″/>
    <description value=”Item3″/>
</groupbox>
 

Without a stylesheet to make it look nice, this example is pretty bland, but it demonstrates the use of the groupbox element.

Stack & Deck

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.

<stack>
  <description value=”Bottom Stack!”/>
  <description value=”Top Stack!”/>
</stack>
<spacer height=”10″/>
<deck>
  <description value=”Bottom Deck!”/>
  <description value=”Top Deck!”/>
</deck>

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.

{mospagebreak title=Content Elements}

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.

What I did was to go to the Google homepage (because it has a relatively simple homepage but features many links and has some functionality) in a browser, and save the page as google.htm to my XUL directory.  Do whatever you want, but get an HTML file that at least has links to other pages on it.  Now, create a basic window (I mean add the opening and closing window element to a blank text file with the necessary namespace) with nothing in it except the following line of code:

<iframe src=”google.htm” flex=”1″/>     

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.

I feel it appropriate to mention at this point that true to its XML roots, XUL is also able to work with and process HTML tags and render them within its windows accordingly.  In order to use the tags that it supports you need to make sure that the XHTML namespace is imported.  This requires the addition of the namespace to the opening window tag, and an HTML prefix preceding each HTML element you wish to use.  Create the following file for confirmation of this:

<?xml version=”1.0″?>
<window
  id=”html”
  title=”Render HTML”
  width=”500″
  height=”300″
  screenX=”50″
  screenY=”100″
  xmlns=”http://www.mozilla.org/keymaster/gatekeeper/
  there.is.only.xul”
  xmlns:html=”http://www.w3.org/1999/xhtml”> 

<html:div>
  This is HTML!
</html:div>
<html:ol>
  <html:li>This is an html list item!</html:li>
  <html:li>So is this!</html:li>
</html:ol>

</window>

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.

Google+ Comments

Google+ Comments