XUL and XHTML run together 2007/09/03

I have been spending an inordinate amount of time these days with XULRunner, Mozilla's awesome cross-platform SDK used to build Firefox and Thunderbird.  XULRunner is bit of an oddity, more akin to a web browser than the Java Virtual Machine or the Ruby interpreter.  While it is most definitely focused on the development of desktop applications, it feels too similar to developing websites in many cases.

XUL is a specific subset of XML that is understood by XULRunner and is used to visually layout desktop applications.  Interaction with a XUL app is handled by Javascript in much the same way that Javascript handles interactions with websites today.  You can even include the XHTML namespace in your XUL app to really start to blur the lines between the desktop and the browser:

<window id="main" title="&title;" width="750" height="500"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">

But let's stop right there.  XUL is not XHTML.  They do not work the same way and any attempts to make them do so will result in only frustration.  This is where my biggest criticism of XUL comes.  Visually, the code looks like a website but functionally the code works much more like Java Swing/AWT or Visual C++ resources.  Websites work in blocks while XUL works in boxes.

Here's a bit of a crash course in boxes.  There are two basic types of boxes, vertical and horizontal.  A vertical box will stack its child elements vertically, expanding them to fill the entire width available.  A horizontal box will do just the opposite.  Vertical boxes will by default only use as much vertical space as necessary, but with the flex="1" attribute they can be made to fill all available vertical space, too.  Horizontal boxes similarly can be made to take all available horizontal space.

Throw all your old CSS techniques out the window now.  What I found to be most helpful to me while laying out a XUL app was actually to turn CSS off.  In contrast to the semantically pristine XHTML 1.1 we've all been writing lately, XUL layouts very much depend on the markup.  This is both a blessing and a curse — our typical CSS kung fu doesn't really matter but now we don't have to worry about graceful degradation since we control the runtime used with our app.

The takeaway here is to throw semantics out the window for XUL apps.  Focusing on building what you want and keeping your code maintainable are two big enough challenges.