Browse DevX
Sign up for e-mail newsletters from DevX


XUL Defines New User Interface Options : Page 5

XUL is a new Netscape/Mozilla XML dialect that describes the elements of a traditional user interface. Faster and cleaner than HTML, it might just be the quickest way yet to code a UI.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 Files\Mozilla\chrome\mytest\content

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


to the end of that file:

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


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 <frames> or <iframes>.

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.

Nigel McFarlane  is a software engineer and technical writer. He spends most of his time in the Telecommunications and MIS problem domains. Reach him by e-mail at nrm@kingtide.com.au.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date