Who ya gonna call? XUL!!

I seem to take a trenchant delight in working with languages and technologies that people have written off as being "dead". The XML User-interface Language (XUL) is one of those. In the long, slow decline of Mozilla from dominant browser to a technological backwater, an intriguing idea seemed to die with it. The idea was simple:

Create an XML based language that would describe a set of more complex interface components than those that shipped with the core HTML set. Use this as the foundation of an application framework, something that you could use to create such things as, well, web browsers. Call it the XML User-interface Language (or XUL, because it sounds very much like a demon out of Ghostbusters), and make it freely available.

This was a good concept, but Mozilla had long since lost its edge, Internet Explorer had become the dominant platform for web applications, and anyway, no one was really doing anything with XML on the browser anymore. And then something curious happened. The Mozilla team didn't give up. They kept pushing forward on new technologies, basing them largely on the W3C standards, though occasionally borrowing an idea from Internet Explorer that seemed pretty decent. They also worked to keep up with all of the major platforms (one of the beauties of code abstraction with XML), so that their browsers began to get better, incrementally at first, then faster in the last few years. XUL grew as well, as new components were integrated into the library, and the pieces began to play better with one another.

Last month, Firefox (a light-weight version of Mozilla 1.7) was announced as a release candidate, a near-final version of the application that would let people play with it in depth. As a web browser, it was pretty cool -- fast (though not as fast as it probably will be), easily extensible and skinnable, with a nod to the dominance of Google by the presence of a Google bar and a GMail extension, to RSS feeds by integrated webfeed support, and to XML with estensive XML and RDF functionality built-in (not to mention much more complete CSS support). This combination by itself was enough to make Firefox an intriguing prospect for me when I was looking at building a content-management-system client. I began to port over my code from Internet Explorer, surprised at the relatively minimal pain in doing so, but what I was developing was very much a traditional web page application. However, as I was reviewing the documentation, I kept coming across references to the foundation set used by Firefox ... XUL.

Okay, I have an admission to make. I'm not very good with C++ programming, at least as far as building windowed applications go. Oh, I understand the whole concept of pointers and references, templates make a certain amount of sense to me, and I can generally follow C++ code without a lot of effort, but I found the the whole reference counting, interface querying thing to be entirely too low-level for what I wanted to do - I may as well have been programming in assembler, for the amount of work involved. Perhaps that's why I gravitated to XML in the first place: I liked the notion of being able to abstract the pieces of an application, getting away from the routine and fairly ugly low-level programming that to me seemed should have readily been handleable by a decent compiler. Visual Basic was a big first step in this direction, but it took entirely too long for Microsoft to acknowledge the fact that VB was not a toy (and hence make it easier to access low level operations when need be). Ironically, while the revamping of the underlying interface description language (IDL) into the CLI (Common Language Interface), Microsoft walked away from the simplicity of VB, the thing that in fact made it appealing to beginning (and advanced but harried) programmers in the first place, in order to create VB.NET, which has all of the painful quirks of VB with little of the underlying simplicity.

XUL reminded me a lot of Visual Basic, but in a 2000's XML-ish sort of way. You can create web components with XUL (as I'll show shortly) but XUL ultimately is about application development - creating applications like web browsers, e-mail readers and editors, or even more staid applications such as sales force tools, systems monitors, accounting sofware, and so forth. It has a lot of the features that have become standard in application frameworks, such as layout tools with flexors that resize automatically as the page does, multi-column grid and list elements, toolbars and buttons, fully supported multi-layer menus and menu-popups, and one of the snazziest HTML editors I've ever seen, in or out of an application - and the beauty of all of this is that this capability is sitting within one of the best web browsers on the planet, meaning that once you complete your application, you can make it available as an extension to Firefox itself.

To illustrate the power of this, the following screen shot shows a XUL application I wrote for editing web content:


Screen shot of application built using XUL toolkit.

I didn't write the CNN site, by the way, though I did select the HTML content and drag it into the HTML editor en-mass, something I thought was incredibly cool. It took me about three days to write the app (though I'll admit that I'd done a lot of the groundwork before) and this while I was still learning the basic XUL API. At the moment I'm working at improving it, tying it into the CMS back end that I worked out, but the important thing to consider is that this is a "web application" - no C++, no VB, just a simple XML document and a block of Javascript code.

Actually, more properly, this is an extension. It is downloaded like any of dozens, and likely soon to be hundreds, if not thousands, of other extensions from the Mozilla site (though because of the nature of this application I can't release this version publicly .... working on an open source version, however). It becomes a part of Firefox, something called up from the Tool menu. Because it is part of the browser, this means that it is also within the secure local space, meaning that you can use this toolkit to create sophisticated, multi-platform applications that can be easily downloaded and updated.

This is not all that ideal for a generalized Internet scenario. It is, however, wonderful for the development of intranet (corporate wide) applications. These are the applications that frequently cause some of the biggest headaches for developers, who have to balance between the world of stand-alone applications and the limitations inherent in HTML web-portal applications. If, instead, you can straddle both worlds with an application framework that practically lives on the web, the potential is pretty much endless.

So what does this alien language look like? Here's a sample:

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>

<vbox flex="1">

<description>
Enter your search criteria below and select the Find button to begin
the search.
</description>

<spacer style="height: 10px">

<groupbox orient="horizontal">
<caption label="Search Criteria">
<menulist id="searchtype">
<menupopup>
<menuitem label="Name">
<menuitem label="Size">
<menuitem label="Date Modified">
</menupopup>
</menulist>
<spacer style="width: 10px;">
<menulist id="searchmode">
<menupopup>
<menuitem label="Is">
<menuitem label="Is Not">
</menupopup>
</menulist>
<spacer style="width: 10px;">
<textbox id="find-text" flex="1" style="min-width: 15em;">
</groupbox>

<spacer style="height: 10px">

<hbox>
<spacer flex="1">
<button id="find-button" label="Find" default="true">
<button id="cancel-button" label="Cancel">
</hbox>

</vbox>

</window>

This is not the code for the editor, but rather for a dialog box. The root element for XUL is the <window> element, which serves the same purpose as <html> does for HTML. The other elements, including group boxes, menus, buttons and so forth, define specific widgets. For instance, the <button> element defines a button, including it's label, identifier, and default state.

The flex attribute is quite useful. It defines the degree to which the element will attempt to fill up the available space. A flex of 0 indicates that the element will take up the minimal space defined by it's default size, or by it's CSS indicated size if available. On the other hand, a flex of 1 indicates that the element will attempt to expand until other elements push back on it (for instance, a multi-line textbox will attempt to fill the entire window if it's flex is 1, stopped only by other elements. Two or more elements with the same flex will divide the space in half, while two elements of flex 1 and 2 respectively will each take up 1/3 and 2/3 of the available space as appropriate. This simple-seeming innovation can radically cut down on the amount of "resize" code that you have to write.

XUL applications can be run either from a user's local machine (through an RDF based configuration file) or it can be run from the web. The latter case puts some major restrictions of local file access, however, but other than that can work fine. You can embed XUL elements within HTML (for Firefox browsers only, of course) by using XUL's namespace:

xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'

or you can create XUL applications with XHTML interspersed. Typically, this will require that you modify your server software so that it can legitimately serve up XUL documents recognizable to firefox. In IIS, this would be done by adding the XUL mime-type:

application/vnd.mozilla.xul+xml

to the list of mime-types that IIS is aware of (select the properties pop-up menu item for your server in the IIS control panel, select the Mime-Types button, then add the appropriate associations for .xul as application/vnd.mozilla.xul+xml. With Apache, you add it to the associated mime-types by editing the httpd.conf file.

XUL Resurgent

Interest in XUL has picked up dramatically ever since Firefox came into its own as a separate application, and the combination of ease of use, cross-platform compatibility, intrinsic web awareness and a growing community of developers makes it a technology to watch.

One problem that XUL faces is that the documentation out of the Mozilla site is sketchy at best. However, XULPlanet at http://www.xulplanet.com has several good XUL tutorials and reference documents that are up to date, if not necessarily complete or exhaustive. I would strongly recommend if you're interested in XUL that you check out that treasure trove first.

XUL is, in many ways, analogous to Microsoft's XAML, and with the recent work on the part of the SVG community making its way into the Mozilla effort, I see XUL and XAML effectively going head to head as the first of a new breed of meta-application development languages. XAML is perhaps more exhaustive, but until the Mono effort gets further along, it is not as well represented on non-Microsoft platforms. Additionally, XAML puts a lot more of its emphasis on the use of C# code-behinds, an approach that makes sense for very large enterprise developers but seems like overkill for the average programmer.

XUL may not be your cup of tea, but you owe it to yourself to at least check it out ... as an application framework, it may very well become one of the big technology stories of 2005.

-- Kurt Cagle