An Introduction to XUL | WebReference

An Introduction to XUL

An Introduction to XUL

By Nigel McFarlane.

A web development career is a busy place to be, and you might have missed some recent developments in XML content display. It's not just about HTML, XHTML or CSS anymore.

This article describes a few features of the cutting edge Web technology called XUL. XUL is a good choice for web pages that ask the user to perform complex data-entry tasks. XUL is available in Mozilla-based browsers, with various clones and alternatives now increasingly available. Here, we use the familiar task of going through a Website's e-commerce checkout, where our shopping cart of selected goodies is reviewed, paid for, and scheduled for delivery.

Over time, your web development skills should slowly improve. If you're used to writing quick-and-dirty informal HTML pages, then you're several steps behind current practices. After informal HTML is proper, standards compliant HTML 4.01. After proper HTML 4.01, the next step is CSS. And after CSS, there's XML and the world of XHTML. All these standards have extensive support in browsers now, except for Internet Explorer which is looking a bit old. If you want to reach forward to the shiniest and newest browser technology, then XUL is the place to be.

Let's first have a look at a traditional Web-based checkout. A great example, or at least a very widely used one, is that of the bookstore. Figure 1 shows a page from the Amazon checkout process.

Figure 1:'s shopping cart checkout system

This checkout page looks much like any other. Firstly, a series of steps is required. Visually, these appear as a horizontal menu line across the top. All of the menu line items are disabled or faded except for the one representing the current step. That tells the user where they are in the process. Secondly, an ordinary HTML form is used to collect data from the user. Finally, there's lots of blank space in the page, so that the user won't be confused by cluttered detail.

All of that is straightforward, but it overlooks some serious problems with the page from a user-interface and useability perspective. Most of these are navigation problems. The user can't see the entire form: the right-hand scroll bar must be used to reveal the page. Although we're used to that, it's an irritating and inconvenient arrangement. It's also unclear how the user is to go back and forward through the checkout steps: should the big Back and Forward brower buttons be used, or should the user click on the faded items on the menu line? Faded items generally hint that they are disabled, so that's also confusing. Why put them there if they can't be used? Finally, if the user navigates the page with the Tab key, then not only are the form elements navigated to, but so is all kinds of other junk, such as links at the bottom of the page and the location bar at the top. While large blank areas and a clean layout are helpful, they're no substitute for the compact and efficient design that is normal with non-Web applications. XUL is designed to overcome some of these problems. It brings some of the benefits of traditional forms-and-menu applications to the Web. To be successful with XUL, you need to do a little setting up. To begin, install any Mozilla browser, such as the Mozilla Application Suite, Firefox or Camino. Second, add this line to your Apache httpd.conf configuration file and restart the server:

AddType application/vnd.mozilla.xul+xml .xul

Any files behind the server with a .XUL extension will now be recognised by Mozilla as XUL files.

Here, we show two features of XUL: tabboxes and forms. Figure 2 shows the effect that we're aiming for in our page.

Figure 2: Improved shopping cart checkout system

The XHTML for this page is shown in Listing 1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
      <title>Test Checkout Page</title>
   <h2>Welcome to the Test Checkout</h2>
   Provide us with your purchase details and then click to purchase.
          <input type="submit" value="Purchase Now"/>
         <input type="hidden" name="username"/>
         <input type="hidden" name="password"/>
         <input type="hidden" name="fullname"/>
         <input type="hidden" name="address"/>
         <input type="hidden" name="contact"/>
         <input type="hidden" name="creditcard"/>
         <input type="hidden" name="wrapping"/>
         <input type="hidden" name="wraptype"/>

   <iframe style="border:none" width="450px" src="checkout.xul"/>


Listing 1. XHTML page with an XUL checkout window.

This page could also be written in a combination of old-fashioned plain HTML, provided the XUL content was kept inside the <iframe> tag as shown.


Created: March 27, 2003
Revised: May 25, 2004