XUL Defines New User Interface Options

ozilla 1.0 and Netscape 7.0, the re-write and upgrade to Netscape’s 4.x Communicator suite, is more than just standards support and new code. During the re-write, the Netscape (now mozilla.org) engineers decided to emphasize XML as the foundation of (nearly) everything in the new browser code. One important result is the XML-based XUL language.

In this article I’ll show you how kick XUL’s tires a bit and explore how it works. I’ve used Mozilla here rather than Netscape 7.0, because of the availability of friendly development tools such as the DOM Inspector and the debugger. Otherwise, the two browsers are the same.

What You Need
To run the code that accompanies this article, you’ll need Mozilla version 1.0 or later. Netscape 6.x contains Mozilla 0.94, and won’t work for this demo. Recent changes to some XUL tags require a full 1.0 release. You can download the official version, or last night’s build, at www.mozilla.org. If you’re willing to provide feedback, you can do the Mozilla developers a favor and try a talkback version. If you manage to crash the browser, the talkback release generates a diagnostic file that Mozilla developers can use for a post-mortem.

The Who-What-Where of XUL
Most XML standards describe some kind of document, but XUL is the “not a document” XML standard. Before document-centric architectures we had plain ol’ user-interfaces (GUIs), coded using Visual Basic, HyperCard or C/C++, to name just a few. When the Web came along, focus shifted strongly toward displaying documents in HTML. In the XML world, XUL is a hybrid solution that provides a way to describe scrollbars, toolbars, tabbed interfaces, and other standard UI controls. However, because XUL files consist of plain-text XML, XUL avoids the problem of 3GL code tortuously exploiting some low-level library like Win32, Swing or GTK.

Even though it’s XML-based, you won’t find XUL on http://www.w3.org with the other XML-standards. XUL is entirely a Mozilla invention. But you’ll find XUL implemented inside all recent AOL/TimeWarner browsers. Mozilla, Netscape 6+, CompuServe 7+ and derived products, are packed with XUL documents. Indeed, the difference between Mozilla and Netscape 7.0 is partly bundling, and partly just different uses of XUL.

Author’s Note: XUL might be officially pronounced “zool”, after a character in the film Ghostbusters?, but this author can’t handle it any more. It’s “eks-you-ell” in my head, to match the pronunciation of all the other X-standards, such as XLink and XHTML.XUL is Critical in Mozilla
You’ll need Mozilla to see the examples in this article, so download it if you don’t already have it installed. You can install Mozilla multiple times in different directories, but be careful of upgrade issues. Read the release notes first.

Author’s Note: Very important! If you have two installations (say an official 1.0 and an experimental 1.1), then, on Windows, running both at once doesn’t work well. If you want to read some HTML and at the same time play with XUL, use IE to view the HTML and use Mozilla for development. You can do both with Mozilla, but if you have an obscure problem, debugging isn’t as clean.
Figure 1: A blank document in Mozilla. Note that the URL is “about:blank”, meaning there’s no document loaded. Everything except the window frame and the title bar is generated by XUL.

Here’s how to find some XUL. By default, when running Windows, Mozilla installs to the C:Program FilesMozilla directory. For the purposes of this article, I’ll assume that that’s where Mozilla’s installed. However, if you upgraded from an earlier version of Mozilla, the upgrade process can put key files in C:WindowsApplication DataMozilla…. If you have that directory, substitute it wherever you see C:Program FilesMozilla… in the following discussion. In either case, when you start the browser, you see a normal HTML window. Type the URL about:blank into the address bar. That displays a blank page with no HTML in the window, as shown in Figure 1. Everything else visible in the screenshot, except for the Microsoft Windows blue title bar, is XUL, including the toolbars, background, menus?in short, everything visible except the window frame.

Figure 2: After removing Mozilla’s access to the “chrome” folder and thus the XUL files that define the browser’s interface, launching the browser shows only the window frame and title bar, but no controls or content.

Here’s a second (highly experimental) test. Shut down all instances of Mozilla, and temporarily rename the folder C:Program FilesMozillachrome to something else, such as chromeX. Then relaunch Mozilla. You’ll see a tiny window as shown in Figure 2.

By renaming the chrome folder, you removed Mozilla’s access to all the default XUL files, and consequently, to Mozilla’s entire user interface. Clearly XUL plays a critical role in the browser.

Don’t forget to undo the renaming operation.

If you browse the chrome directory, you’ll see many, many .jar files. These are in ZIP format, so you can open them with WinZip or a similar tool. The .xul files inside those .jar files hold many examples of XUL.. The informed and the brave can hack these files. There are a large number of JavaScript files in there too. That’s where the coding comes in. The XUL files define the interface elements, and the JavaScript files activate that interface.Using XUL: The NetSheet Application

Figure 3: The Mozilla browser with the NetSheet1.xul file loaded. The XUL file describes a spreadsheet-like grid application.

In the rest of this article, you’ll see how easy it is to combine XUL and script to create custom interfaces. Listing 1 shows the beginning of a MS-Excel/Lotus 1-2-3/VisiCalc style spreadsheet application, written in XUL. Load it into the browser just like any Web document. Figure 3 shows the result.

When you load the file in this manner, you see the normal browser controls, plus the new content with its own controls. You can also make the browser appear less like a browser, giving a more polished effect, by loading the URL from a command prompt or from a shortcut, substituting your own installed location for Mozilla and the NetSheet1.xul file, for example::

   "C:Program FilesMozillamozilla.exe"       --chrome "file:C:/tmp/NetSheet1.xul"

When you load the file in this manner (see Figure 4), only the new XUL elements decorate the window.

You can achieve the same effect by retrieving the XUL file from a Web server or using the special chrome: URLs. Finally, you can spawn the XUL application from JavaScript, using the window.open() command, for example:

   window.open("file:C:/tmp/NetSheet1.xul", "win_name",       "chrome");

XUL Markup Elements
Here’s a quick review of the markup elements in NetSheet1.xul. At the top of each file, you’ll find some standard XML headers. The file doesn’t have to have an .xul extension?you could give it an .xml extension?but .xul is the convention. The xmlns namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul is not just a weird pun, it declares the XUL DTD. Mozilla recognizes this URI, so the declaration is not an instruction to download anything.

HTML uses an tag as a container for all other content. XUL uses the uses the element for the same purpose. The element is an invisible layout hint like HTML’s

. The , , and all are, roughly speaking, container objects. The file uses the tag in a rather quick and dirty manner to lay out the cells of the spreadsheet application.

Figure 4: When you load the NetSheet1 file as a local application, the browser’s standard toolbar disappears, and only the XUL elements described in the file appear in the browser.

Most of the other tags have names that correctly hint at their purposes. You can see XUL documents contain a lot of structure but not much “content”. What little content exists has been limited to the tag. If you carefully grab the extreme bottom-right corner of the window, you can also re-size it. The elements all shrink and stretch to fit, just as when you view any HTML document. You have full control of shrinking and stretching behavior from XUL.

You’ll see a reference to the XML stylesheet NetSheet.css included at the top of the file. If you look at that file, you’ll see that it’s a standard CSS2-compliant stylesheet. XUL uses the same styling model (“the box model”) as HTML. CSS styles are one of several ways that XUL helps keep applications flexible. In addition, XUL exposes many unique style properties, but this example doesn’t use any.

Even without any coding, the application shows a degree of interactivity. You can slide the scroll bars, click the buttons, collapse the toolbars, select menu items, change tabs, and view tool tips. You can also enter data into the cells. If you think the scrollbars aren’t working, that’s because they’re placed independently, not drawn as part of a element.Activating XUL with Script
In an HTML document, even one with ActiveX controls, JavaScript is often seen used as a dash of salt, added just for taste. Only occasionally is JavaScript used in HTML as important critical glue. In the past, JavaScript was conceived as being an extra to be embedded in a larger document, but in an XUL document, even one with ActiveX controls, JavaScript has a far more serious purpose. It provides the guts. Without JavaScript, XUL is visually pleasing but superficial. With JavaScript, the XUL visual elements gain processing substance and can connect to the many interfaces inside Mozilla. So it’s no surprise that the XUL .jar files alluded to earlier are full of JavaScript.

The enhanced example NetSheet2.xul, uses JavaScript in a manner similar to the way it’s used in HTML. The file NetSheet2.html contains a formatted version of the content so you can see what’s been added.

First, you’ll find an onload() handler, which installs the event handlers for the interface elements. You can find that code in NetSheet.js, one of several included files that contain script. Next, a bit of XUL-specific markup, the tag, saves some painful event handling by allocating “hotkeys” to specific commands. The code hooks the hotkeys in further down, where the “key” attribute appears. Two important oncommand event handlers give the View menu a real action to perform. In this example, when you choose a View menu option, the toolbars appear and disappear as they should. The Help menu also works now. In one case it opens an HTML document, and in the other an XUL document.

You can inspect the sample .js files at your leisure, they contain quite a bit of code including a JavaScript data structure for the spreadsheet the user creates and GUI event-handlers to respond to user requests. The code also supports simple macros entered in JavaScript syntax and made accessible via the eval() function. Two handy new functions, cell() and sum() let you access individual cells and get simple summary values.

Still, this is only a demo so tread lightly! Try this series of steps. Click on cell B2. Note that it highlights (a scripted CSS2 change) and that the toolbar now displays the correct cell name. Click on the input box and type in “=12“. Click on cell E5. In the toolbar text entry box, type:

   =cell("B2")*2 + Math.cos(Math.PI)

Press return, or move to another cell, and 23 should appear in cell E5 (that’s 12*2 + (-1)). You should be able to use the formula sum(“B1″,”D3”) as well, but at the moment it always returns 42. Oh well, mañana. You can type strings into cells too, although the formatting could be better.Connecting to the Back End
Now if what you’ve seen were all XUL in Mozilla had to offer, this technology would quickly come to a halt. What you really want to do is Save and Load the application, either locally to your hard disk, or to the server, or both, just like any application.

In Mozilla, as in .NET and Java, there are about 4001 ways this can be done. Here’s the simplest possible solution, which loads and saves the data to a plain text file on the local drive.

Writing to the local drive is a security issue, so you have to change tactics. A quick and dirty way to proceed follows. Create a directory such as:

   C:Program FilesMozillachromemytestcontent

Unpack the final XUL NetSheet demo step3.zip in the sample code into that directory. Shut down Mozilla. Open the file C:Program FilesMozillachromeinstalled-chrome.txt, and add the following line:

   content,install,url,resource:/chrome/mytest/content/

to the end of that file:

Save the file. After altering the file, you can now refer to the demo by this URL:

   chrome://mytest/content/NetSheet3.xul

The file NetSheet3.xul acts much the same as before, except that the File | Save As menu item also works. This is done through the new script file NetSheet3.js (see Listing 2), which contains the plumbing. Here’s a critical piece of it:

   var Picker =  Components.interfaces.nsIFilePicker;   fpobj = Components.classes      ["@mozilla.org/filepicker;1"];   fpobj = fpobj.createInstance(Picker);      fpobj.init(window, "File Save Dialog Box",       Picker.modeSave);      result = fpobj.show();

The preceding code gets a named component from Mozilla’s component registry, and then chooses a named interface to that component. The component provides the familiar File Picker popup dialog box, so you don’t have to code one from scratch. You control this component in the same way you script any object library via C/C++, VB, Java, Perl, Tcl or C#. In the end you get the filename chosen by the user. Here’s the second critical piece of code:

   o1 = Components.classes      ["@mozilla.org/network/file-transport-service;1"];   o2 = o1.getService      (Components.interfaces.nsIFileTransportService);      o3 = o2.createTransport(file_thing, fWriteModes,       fPerms,true);   o4 = o3.openOutputStream(foffset, fmaxbytes, fflags);      o4.write(content,content.length);   o4.close();

This time the component registry provides a non-GUI component used (eventually) to write the spreadsheet to disk. See the comments in the code for details.

What does this have to do with XUL? These components complement the XUL GUI elements. They provide scriptable services that turn passive XUL elements into real applications. They also provide common functionality such as File Pickers. Better still, the result is 100% portable across Windows, Linux/Unix, Mac and elsewhere.

Off the Beaten Track
Not shown in this application are some of the more bizarre combinations of XUL tags: checkboxes inside buttons; HTML pages inside grid cells; images inside scrollbars. All these are feasible, although many are probably confusing to the user. The stranger combinations are less well tested, too.

Because of Mozilla’s deep support for XML, you can mix HTML and XUL in one document. You can also combine different documents in a structured way using or .

Mozilla is a big product and there are many different technologies to explore. You can get a little done quickly with XUL as shown here, but XUL used systematically can produce a flexible and bulletproof application. XUL is a very fast GUI language, highly portable and the basis for a look-and-feel that is more application-centered than document-centered. XUL makes Mozilla-based browsers completely customizable.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: