What is XUL?

XUL is the user interface description language for the open source browser Mozilla. The acronym stands for ''XML-based User interface Language", and is pronounced "zool", to rhyme with ''cool''.

XUL is one component of XPToolkit, Mozilla's Application Object Model (AOM) that can be used for constructing fairly complex network transparent applications. ''Network transparent'' in this case means that the same application can be accessed via a LAN, the Internet, or any other network transport that can speak HTTP.

Why XUL?

XUL was conceived when the programmers at Netscape realised that supporting three different architectures in many different variants would make code maintenance a nightmare, and slow development of Mozilla to a crawl. To quote Peter Trudelle, a Netscape manager:

In the beginning, there were 3 front ends (FE's): Mac, Windows, UNIX. Each took a suite of developers to maintain. Adding a new feature (even just a button) required 3 engineers to waste at least a day (more often a week) slaving away until the feature was complete. This had to change.

And thus XPToolkit was written, and Mozilla's browser, mail, news and chat applications were then written using XPToolkit. XPToolkit's development was one of the main reason's for the two year delay that ultimately caused Netscape to lose the browser wars.

Now the effort has paid off, however - Mozilla officially compiles and runs on more than seventeen platforms, and has allegedly been built successfully on another ten, including obscure systems like GNU/Hurd, BeOS, and OpenVMS.

How it works

At the end of this writeup is a basic interface for the E2 user search written in XUL, plus instructions for viewing it. It's completely static and very basic. Right now I'm just going to explain parts of it bit at a time.

As with all XML-based formats, XUL starts with the good 'ole <?xml version="1.0"?>. For the sake of brevity I'm going to skip things like stylesheets, and focus on the explainable parts. Thus, the next significant element is the root element:

<window id="usersearch" title="Everything User Search" orient="vertical"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

So far so simple. If there was any associated code, it would refer to the window object by the ''id'' attribute. The title is the window title. The ''orient'' attribute defines in what direction the child elements are to be arranged. For example, if this form consisted of nothing but two buttons, they'd be displayed on top of each other. If we had orient="horizontal", they'd be side by side.

The ''xmlns'' attribute sets the default namespace for this document. ''xmlns'' stands for ''XML NameSpace''. You can see a similar attribute in the HTML source of standards-compliant web-pages such as http://w3.org. Their equivalent runs as follows:

<html xmlns="http://www.w3.org/1999/xhtml" >

It tells XML parsers what type of XML it's processing, what version it is, etc. In the above example, it tells the parser that it's parsing the XHTML. It's basically a unique identifier. For a more coherent explanation, see spiregrain's writeup in namespace.

The attribute value in the <window> element above is a play on the line from GhostBusters, ''there is no Dana, only Zuul.'' In Mozilla, there is no data, only XUL. Those wacky developers.

Like in Swing, layout is not literal - you can leave the positioning of buttons and other widgets to Mozilla. You can do per-pixel positioning if you wish, but there's rarely a need for it. The various <hbox> and <vbox> elements set the layout mode for their child elements.

This is a simple label-textbox pair:

<label control="username" value="User name"/>
<textbox id="username" value="anonymous noder"/>

This is the equivalent HTML:

<label for="username">User name</label>
<input name="username" id="username" value="anonymous noder" />

You can see the two are very similar, and this isn't too surprising given that the developers are writing a browser with this stuff. The input following this one, a <menulist>, is roughly equivalent to a <select>. However XUL can get considerably more complex than this, as a look at the XML starting with <tree flex="1" ... /> will tell you.

The <tree> component is a general component. It can do trees, but it also does tables, and hybrid ''treebles''. If you have Mozilla installed, you can see one of these in the top-left quarter of the DOM Inspector. If you had it installed, it's at:

(menu)Tools-->(menu item)Web Development-->(menu item)DOM Inspector.

XUL's native language is ECMAScript v3, aka JavaScript 1.3, although XUL libraries are in the works for Python and Java. Scripts are imported using a <script src="..." /> tag just like in web-pages. XUL can display embedded HTML as well as MathML, and hopefully one day SVG.

XUL has bindings to XML-serialized RDF (Resource Description Framework). RDF is a data/metadata description language that uses predicate logic. The bindings between XUL and RDF mean that you can tell an XUL form to populate itself with RDF taken from either a local repository (i.e. a client's hard-drive) or from a web server via HTTP.

Because XUL can be loaded from a web-server via HTTP, this implies that you can write dynamic XUL. And because web scripting languages such as ASP and JSP work just as well in XML as they do in HTML, you could, technically speaking, serve XUL forms generated on the fly.

Other cool stuff

If written correctly, making your application usable in more than one language is easy, due to ground-up support for localisation packages. The nightmare often associated with localisation is one of the reasons that a lot of software - such as the Mac version of MS Office - aren't available in Hebrew or Arabic.

Highly nontrivial investment is required for converting an application to display right-to-left and top-to-bottom languages. In Mozilla, this work has been done once, and all you need to do is provide text in a supported character set of your choice.

Since Mozilla is skinnable, XUL is displayed in whatever skin the user chooses. Skins in Mozilla are written in a dialect of CSS designed for adjusting the look and feel of widgets, as opposed to that of HTML. XUL forms can bring along their own CSS if they want.

Since XUL is a type of XML, you can use XSLT to transform it into other document types, XML-based or otherwise. This means that you could hypothetically transform XUL into HTML, or generate xforms XML3 or xDocsInfoPath4, UIML, or Sun's J2EE-related XML-based method for describing Swing interfaces that I've forgotten the name of.

As you'd expect from any widget toolkit, things like drag-and-drop, clipboard operations and widget construction5 are all supported.

Gazing at the stars...

Given that XUL is easy to write1, and that the whole XPToolkit shebang is probably the most widely ported platform-transparent widget toolkit ever, and that there is support for almost all web- and XML-related protocols, you'd think that this is exactly what the open source community would use to give Microsoft .NET a sound butt-kicking.

Would that this were so.

... and tripping over the sidewalk.

There are a number of things about XUL that make developing web applications quite a bit harder than it should be. They're all fairly trivial, but together they're a right pain in the ass. Sorry to get your hopes up with all the above evangelism.

Before I go into all the things that are wrong with XUL at time of writing: I know Mozilla is open source. And that if it mattered enough to me I would learn C++ and code these features/fixes myself, instead of bitching about them. But I don't believe that saying ''get off your butt and fix it yourself'' automatically provides you with immunity from criticism. Mozilla the browser does rock my little cotton socks from tip to top. That said:

  • Masks

    If you've ever used an IDE, one of the things you'll be familiar with is input masks. Fairly essential to UI development, they can be used to control or filter user input. Mozilla has no native support for masking. This means that basic input validation has to take place in imported JavaScript, instead of in the native binary format2.

  • Plumbing

    As stated above, XUL has bindings with RDF, i.e. you can automatically populate forms. However, you cannot automatically construct RDF from an XUL window and (for example) POST it to the server from whence it came via HTTP . This has to be done by constructing RDF using DOM in JavaScript - not the ideal solution, as RDF construction is done better using a higher-level object model representing resources, properties, etc.

    In other words, anything other than server-->client communication is annoying, repetitive and leads to unwanted extra code executing client-side. Ideally more extensive bindings would be added for XML-SOAP that would allow for bidirectional communication. See below.

  • Priorities

    XUL was created to ease the cross-platform development of Mozilla, and it does this admirably. However, problems with XPToolkit not directly affecting the development of Mozilla itself tend to get put on the backburner.

    The caveat here is that the Mozilla developers are few in number, the bugs are legion, and time is money.

And that's me done whining. The first two are probably me being lazy, and spoilt rotten with crunchy Java goodness. Despite these obstacles, building applications using XUL is most certainly possible, and has been done repeatedly - see http://www.mozdev.org/projects.html

If you want to peek under the hood of Mozilla itself, take a jar file with an interesting sounding name from the chrome directory of your Mozilla installation, and extract it to a spare directory. You can change the extension to ''zip'' and use Winzip, or use a DOS prompt/CLI and type jar -xvf filename.jar, assuming you have the JDK installed.

(If anyone spots mistakes, please /msg.)

Footnotes

1: There are no IDE's currently available however. Most people would consider a UI-description language to be incomplete until it can be used to construct it's own IDE. Mozilla isn't quite there yet.

2: I'm referring to client-side validation here, which would (hypothetically) save on communication of bad data to the server, etc. Server-side validation is absolutely required when dealing with untrusted input (e.g. input that arrives via the Internet), no matter how it's displayed or entered.

3: xforms is the W3C's attempt to replace HTML forms.

4: InfoPath is Microsoft's attempt to obsolete xforms, HTML forms, and PDF forms. It's pretty cool.

5: By widget construction, I'm referring to building a ''navbar'' object from already available components. Building custom widgets isn't possible in XUL as far as I'm aware.

Sources, aka further reading

XPToolkit
introduction: http://www.mozilla.org/xpfe/xptoolkit/index.html
overview: http://www.mozilla.org/xpfe/
XUL reference: http://www.mozilla.org/xpfe/xulref/
XUL tutorial: http://xulplanet.com/tutorials/xultu/
XUL and RDF: http://www.mozilla.org/xpfe/xulrdf.htm MathML editor: http://www.newmexico.mackichan.com/mathml/mathmled.htm

RDF
primer: http://www.w3.org/TR/2002/WD-rdf-primer-20020319/
spec: http://www.w3.org/TR/1999/REC-rdf-syntax-19990222/
links: http://www.ilrt.bris.ac.uk/discovery/rdf/resources/index.html

Bugs
http://bugzilla.mozilla.org/
If you have a Bugzilla account, you can vote for bugs 122846 (the biggie), and/or 10547, 39048, and 144795.

Below is the full example plus instructions on viewing it. You can ignore it if you're not interested, or if stupid toilet jokes are beneath you.


<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="usersearch" title="Everything User Search" orient="vertical"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<hbox>

<label control="username" value="User name"/>
<textbox id="username" value="anonymous noder"/>
<label control="orderby" value="Order by"/>

<menulist id="orderby" flex="1">
  <menupopup>
    <menuitem label="Age" value="age"/>
    <menuitem label="Title" value="chocchip"/>
    <menuitem label="Reputation" value="rep"/>
    <menuitem label="Type" value="type"/>
    <menuitem label="Title Length" value="length"/>
    <menuitem label="Random" value="random"/>
  </menupopup>
</menulist>

<radiogroup id="sortorder" orient="horizontal">
<radio value="asc" label="Ascending" checked="true"/>
<radio value="desc"  label="Descending" />
</radiogroup>

<button value="search" label="Search"
tooltip="Lookup the writeups of this user"
default="true" toggled="0" crop="none" />

</hbox><hbox flex="1">

<tree flex="1" enableColumnDrag="true" multiple="false">
  <treecols>
    <treecol id="numC" fixed="true" width="50" label="No. C!" max-width="50"/>
    <splitter class="tree-splitter"/>
    <treecol id="title" flex="1" label="Writeup Title" />
    <splitter class="tree-splitter"/>
    <treecol id="type" fixed="true" width="75" label="Type"/>
    <splitter class="tree-splitter"/>
    <treecol id="created" ixed="true" width="150" label="Created" />
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="2"/>
        <treecell label="The e2 guide to toiletry through the ages."/>
        <treecell label="idea"/>
        <treecell label="yyyy-mm-dd hh:mm:ss"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="51"/>
        <treecell label="Ingredients and nutritional information of common breakfast cereals"/>
        <treecell label="thing"/>
        <treecell label="yyyy-mm-dd hh:mm:ss"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>

</hbox>
</window>

And there you go. To display this in Mozilla, save it as ''example.xul'' and put this into a bare-bones HTML page in the same directory:

<p>
<a href="#"
onclick="window.open('example.xul','example','chrome,resizable,height=400,width=600'); return false;"
>Click here</a>
</p>

That's it. Mozilla 1.0 and 1.1 can understand this for certain. Internet Explorer users - heh :-) Now YOU know how it feels :-P

Log in or registerto write something here or to contact authors.