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.