spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / xul / 1 To page 1To page 2current page
[previous]

An Introduction to XUL

Senior Web Analytics Engineer
Professional Technical Resources
US-OR-Beaverton

Justtechjobs.com Post A Job | Post A Resume
Developer News
Mandrake Linux Founder Back, Virtually
Amazon: We're a Technology Company
Sun Expands MySQL With Closed Source

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.

About the Author

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 To page 1To page 2current page
[previous]

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Working with the DOM Stylesheets Collection · Administering RBAC in PHP 5 CMS Framework · xref: Automatic Cross Referencing Script
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Combine BottomCount() with Other MDX Functions to Add Sophistication · Creating a Daemon with Python · The Coming Voice-over-WiMAX Revolution

Created: March 27, 2003
Revised: May 25, 2004

URL: http://webreference.com/programming/xul/1