Browse DevX
Sign up for e-mail newsletters from DevX


XUL Defines New User Interface Options : Page 3

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

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 Files\Mozilla\mozilla.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 <HTML> tag as a container for all other content. XUL uses the uses the <window> element for the same purpose. The <box> element is an invisible layout hint like HTML's <div>. The <toolbox>, <tabbox>, <menubar> and <toolbar> all are, roughly speaking, container objects. The file uses the <grid> 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 <description> 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 <scrollbox> element.

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