| home / programming / xul / 1 | [previous] |
|
|
This line is also new:
<?xml-stylesheet href="chrome://global/skin/"?>
This thing is from the XML standard (XUL is an application of XML). XUL doesn't have a <style> tag, it uses <?xml-stylesheet?> instead. The funny looking URL starting with chrome: points to a set of CSS styles that are always locally available within Mozilla. These styles automatically give XUL documents a pleasant and well-tested look-and-feel. This look-and-feel matches the current theme of the whole browser. Note the similarity in appearance between the browser toolbar and the tabbox. In fact, both GUI features are constructed from XUL.
A few of the XUL tags shown are non-obvious. <grid> is similar to XHTML's <table>, and <vbox> and <hbox> are used a little like XHTML's <div> and <span>.Because Mozilla has extensive support for W3C and ECMAScript standards (such as CSS, DOM and JavaScript), most of the mucking around with JavaScript in XHTML also applies to XUL. Both use document.getElementById() to find the DOM node for a given tag, for example, and both support style properties like color and font. We won't cover that detail here, as there's plenty of support available in XUL for those standards.
Finally, it might seem odd to embed a tabbox in an HTML page. Indeed, it's
much more common to see a tabbox as the sole content of a dialog box. Such things
frequently appear in Control Panels, or in popups when a particular
menu option are selected. Figure 4 shows what the tabbox looks like when displayed
in its own window. That can be done using window.open() from JavaScript, if
necessary.

Figure 4: XUL tabbox displayed in its own window.
That dialog looks like any tabbox dialog that the desktop operating system might create. If you're running Mozilla as you read this, you might like to compare this last screenshot with the Mozilla Form Manager dialog window. To start that window under the full Mozilla Application Suite, look under Tools: Form Manager: Manage Sites. They're both implemented in XUL.
Overall, XUL opens up new possibilities for user-interface design on the Web; offering features that create better form-based navigation than HTML. In fact, XUL helps Web developers to explore creative and technical Web challenges beyond the rigid world of HTML.
Nigel McFarlane is a freelance science and technology writer, analyst and programmer.
His most recent work is "Rapid Application Development with Mozilla"
published by Prentice Hall PTR. See his website at www.nigelmcfarlane.com
or you can contact him by e-mail at nrm@kingtide.com.au
| home / programming / xul / 1 | [previous] |
Created: March 27, 2003
Revised: May 25, 2004
URL: http://webreference.com/programming/xul/1