Integration Between XUL And XHTML

Some of the integration between XUL and XHTML is quite beautiful:

• First, since the Mozilla platform is responsible for rendering both XML dialects, the dreaded delay that occurs when Java's applet system initializes never occurs.
• Second, navigation is the same for the XUL applet as it is for the entire browser -- the user does not need to learn a new set of interactions.
• Third, Mozilla's excellent CSS2 stylesheet support, originally intended for XHTML, also applies to XUL. This means that such an applet normally picks up the default look-and-feel of the browser (in this case the Modern theme).

The required stylesheets are hauled in using the ?xml-stylesheet? declarations from the top of Listing 1. The first declaration hauls in the standard stylesheet for the current theme and the second declaration adds a stylesheet that is custom-created for the applet. Its code looks like this:

.ok { color : green; }
.warn { color : red; }

.title { margin-bottom : 20px; }

hbox { -moz-box-align : end; }

This is standard CSS2, except for -moz-box-align which is a Mozilla extension that provides an XUL layout hint. In this case, that hint says to right-justify the content.

In the case of a Java applet, a CSS-rendering library separate from Mozilla's library is required if stylesheet support is to be available. Use of such a library radically expands the size of the applet.

Figures 2 and 3 are two more screen shots of the applet at hand, one embedded and the other as a separate dialog window.

Figure 2. The applet embedded

Figure 3. The applet as a separate dialog window

XUL ignores several irritating restrictions of HTML. You can stack form elements atop each other and the ones beneath are properly hidden (the deck tag does that, much like a hypercard stack). That is how this applet allows several sets of content to alternate in one pane. In HTML, that is impossible to specify statically and requires messy Dynamic HTML if it is to be achieved at all. You can change the color or content of the status bar at the bottom, another task that's also not possible in HTML.

XUL is not some faked-up form of Dynamic HTML either; the menu system can overlay surrounding HTML that's outside the iframe area and it can flood over onto the desktop like a normal popup menu. In short, XUL is a real GUI. Not shown in this example is XUL and HTML mixed together in the one document -- that is also possible using XML Namespaces.