Fooling with XUL

With the interest and excitement surrounding Mozilla's approaching beta release, I decided it was time to put it through its paces. For a while now we have heard and seen presentations of XUL, the Extensible User Interface Language, which forms an integral part of Mozilla. Delegates at XTech 2000 were clearly excited by the project and its promise for delivering a richer user interface on the Web.

As far as buzzword-compliance goes, Mozilla boasts a host of W3C specifications, including XML, DOM, CSS, and RDF. I wanted to find out how all these bits fit together in reality, and how practical client-side development with Mozilla actually is. I attacked the problem in my favorite way, by just jumping in with an idea I wanted to implement.

One of the fun parts of the Mozilla browser is the sidebar. Working in a similar way to the so-called "Explorer" bars in Microsoft's browser, the sidebar allows for handy access to components such as bookmarks, search, and "What's Related?" I decided that a shortcut interface to the XMLhack site would be a reasonable-sized learning project to undertake.

The Finished Product

Working from back to front, I'll show the finished product and then demonstrate how I got there. The image on the right shows a list of articles with icons, which when double-clicked, cause the browser to navigate to the complete article on the web site.

The first step was to learn how to construct the user interface. Of course, I could have done this in straight HTML rather than using XUL, but I wanted to use the experience to learn about the Mozilla browser, and also for the user to feel that the component was more tightly integrated with the sidebar. Fortunately, XUL is one of the better-documented parts of the Mozilla browser, and I used Neil Deakin's XUL Tutorial as my starting point. This is an excellent document, although still a work in progress.

It is beyond the scope of this article to present a XUL tutorial, but I will mention the key concepts that are required. User interface descriptions in XUL usually span four files: the layout (.xul) file, the CSS style sheet, scripts, and localization information. For my experiments, I simply used the default styles and omitted localization, so I only had to consider two files: the .xul file itself, and a file for my JavaScript.

Creating the User Interface

Working through the XUL tutorial, I grasped the fundamentals of creating an interface in XUL. Each .xul file describes a window that contains widgets. The minimal XUL file looks like this:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="xmlhack-window" title="XMLhack Headlines"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   >
</window>

Mozilla makes extensive use of XML Namespaces, hence the somewhat baroque URI denoting that window and its contents have the XUL default namespace. The browser can interpret elements from other vocabularies (such as HTML and RDF) within XUL documents. These can be included in XUL descriptions by using namespace-qualified names.

Another thing of note to point out is the chrome:// URL scheme. This scheme allows Mozilla to find localized resources for its user interface. If you look in your Mozilla install directory, you will find the chrome directory, beneath which are the XUL descriptions for the user interface. Mozilla interprets the chrome URL to find the actual file it wants, adjusting for such things as the current locale.

So, to get going, I added some simple widgets to my skeleton user interface, following the "Find Files" example from the XUL tutorial. I placed the XUL file on my web server, pointed Mozilla at http://localhost/test.xul and got back the text contents of the file in the browser, rather than a cool user interface. Oh dear.

It turns out that a little bit of configuration to your web server is required in order to get Mozilla to recognise XUL files. In particular, XUL currently uses the Internet Media Type text/xul. I simply added this line to my Apache's mime.types file, which fixed the problem:

text/xul                xul

That issue resolved, I continued with the tutorial and had soon created a pleasing user interface. Not everything worked quite as smoothly in the browser as it did in the tutorial though! Some of the widgets aren't properly implemented yet in Mozilla, and it can vary from platform to platform. For instance, I was able to get context pop-up menus ("right-click" menus) working on Windows, but not on Linux.

Layout Mechanism

Arrangement of widgets in a XUL interface is done primarily by use of boxes. Readers au fait with the TeX typesetting system (or many other layout systems) will already be familiar with the box method. Boxes can have their contents stacked either horizontally or vertically. Layouts can be constructed by a combination of these boxes.

Each UI element has a flex attribute, which governs how it will stretch to fill the space available. There is also a spring element, which is an empty box you can use to put space in between other UI elements. This example shows how two pushbutton widgets and a spacer would be written:

<titledbutton class="push" value="OK" 
  style="min-width: 100px;" flex="1"/>
<spring flex="1"/>
<titledbutton class="push" value="Cancel" 
  style="min-width: 100px;" flex="1"/>

As the window containing these elements was expanded, each button and the spring would all enlarge to consume the new space in equal measure, owing to their having identical flex values. Note the use of CSS styles to specify minimum widget dimensions.

It's much more interesting to play with this for yourself than to have me recount all the ins and outs, so I recommend pursuing the exercises in the XUL Tutorial.

Adding Behavior

A collection of widgets is all very well, but not very useful without something actually happening when they are activated. This is achieved through the use of JavaScript. In a similar way to HTML, a XUL document is exposed to the browser via a DOM, which can be scripted. Event handlers such as onClick can be specified as attributes of interface elements, much as in HTML.

Although script can be included inline in XUL with the <html:script> element, the documentation advises against it. Instead, script should be stored in a separate file, and referenced like this:

<html:script src="myScript.js"/>

It is relatively simple to get started with writing scripts. Here's a quick example. Imagine a window with this button inside:

<titledbutton class="push" value="Hello"
    onclick="sayHello();"/>

... and this JavaScript:

function sayHello() {
  alert("Hello, World!");
}

More complex operations can be achieved through the use of the DOM. XUL provides two extension functions to the XML DOM: getElementById and getElementsByAttribute (see Introduction to XUL on Mozilla.org). Extensive use of the ID attribute on user interface elements is made within interface descriptions, in order to facilitate easy scripting and modification of the interface. The interface's DOM can be modified by scripts, enabling such things as the dynamic alteration of style and content of widgets.