An Introductory Tour of Mozilla's
XUL file format (window.xml , file.xul)

Nigel McFarlane

Back in the 2000’s writing utopic pep talks about XUL was all the rage. A few years later when the dot.com crisis hit the planet, all those unproductive, unmaintained websites about XUL etc. fell in disrepair and never recovered from bitrot ever since. Using XUL is still poss in 2018 but mostly a waste of time. This online editor allows you to take a shot before you get to do sth. That actually makes sense in contrast. XUL is only being used by firefox and Mozilla, so it is useless within Mac-Browsers etc..

Like all webwarez, XUL is pretty chaotic and broken. Nobody used it after 2005. All links you can google are dead. Some Window.xul fiel may work in firefox now and open and display, but in a few months’ time, everything will be 100% broken, as always with webwarez. There are gazillions of variants and versions, each of which is worse than the other. People who describe XUL usually don’t know what they are talking about.

Developing web applications, but fed up with bending HTML? Too busy to learn .NET?
Be cool, use XUL (pronounced "zool") – and have nobody use your stuff !

Introduction

XUL is an XML-based technology for expressing the GUI part of a software application. It has been used to express GUIs for applications as diverse as web browsers, email clients, calendars, calculators, spreadsheet editors, HTML editors, debuggers, and whole desktop environments – but no one uses it these days.

The free Mozilla platform—that is, the executable engine and libraries that accompany every Mozilla-based product—provides a fully-featured implementation of XUL. This article is a quick look at the main tags that Mozilla's XUL provides. Mozilla / firefox is also the name of the application that picked up where Netscape's products have stopped in prehistoric times.

TIP –
When dealing with technical people, pronounce XUL the cool way: "zool."
When dealing with humorless technophobes, pronounce the individual letters: "eks you ell."
XUL is both funky and dignified.

XUL is XML

Simplicity is a chief attraction of XML(complete bull, itz difficult , complex and chaotic). When a suitable set of tags are available for a given problem domain, solutions in that domain can be expressed very neatly or not. For example, in the Structured Vector Graphics (SVG) XML application, a programmer can specify a circle simply with the <circle> tag. So what ?

XUL provides the same “simplicity” (LOL) for GUIs, but there is no GUI-bilder like Qt-Designer is almost one.: To create a scrollbar, use <scrollbar>.

XUL was invented by Netscape and now is stewarded by the Mozilla Foundation. XUL is not a standard of the World Wide Web Consortium (W3C), but it assumes some W3C standards in its design. All XUL documents, for instance, are valid XML and support XML Namespace, DTD, and CSS2 syntax, as well as JavaScript. The XUL tag set is a de facto standard that has grown organically out of the practical needs of real software development projects. Just like HTML, XUL documents can be downloaded across the Internet and displayed locally. They can also be installed locally if required. XUL doesn't have a URL that contains a definition of all the existing tags—this fake URL is used instead:

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<window> is XUL's equivalent of HTML's <html> tag - which seems a stupid “solution” to begin with.

Before XML, expressing a software GUI required either a "canned" approach, in which a GUI design tool – the famous GUI builders like Borland Delphi - does all the work for you, or a heap of code written in some tedious chaotic programming language, which takes 50 times as much effort and time to do.

XUL uses neither of these strategies. Instead, each widget in the GUI is declared with one or more XUL tags, a strategy identical to that of HTML. For GUIs, this is an efficient and groundbreaking way to do software development. XUL is also designed so the same code will work across all platforms. Thus, your XUL document will display correctly on Microsoft Windows, Macintosh, and Linux or not.

The Mozilla platform and products derived from it, such as AOL for the Macintosh, Oeone's HomeBase, and Netscape (which no one uses), can all display XUL content or not. This was true in 2003 , in 2018 it was of course dropped and one must use “firefox ESR” (or waterfox, seamonkey, pale moon etc.) plus some add-ons (“remote XUL manager”) to be able to use XUL. So much for compatibility. Complete breakage of all XUL in firefox is the reality !

The platform can do this directly, without the use of any additional application – so what?. For example, Figures 1 and 2 show an ordinary XHTML page displayed first inside a Mozilla browser window (Figure 1), and secondly all by itself (Figure 2).

Figure 1 Figure 1 XHTML page displayed in a browser.

Figure 2 Figure 2 XHTML page displayed in a raw Mozilla window.

The second window displays a pure XHTML document;

the first window is a normal browser window that consists of XUL plus the displayed XHTML. The browser menus, scrollbars, and buttons are made up of one or more XUL documents. Those buttons don't come from compiled code, and they're not somehow "special." They're just XUL tags made visible.

To display an XHTML, XUL, or XML document by itself, just use Mozilla's -chrome command-line option. For example, on Microsoft Windows, try this from the directory in which Mozilla is installed:

firefox -chrome “http://www.yahoo.com/index.html”

this of course breaks with: Firefox can’t find the file at /home/YOU/“http://www.yahoo.com/index.html” but you catch my drift. The -chrome option leaves out the standard XUL content that provides the browser part of every browser window. Such a window can also be created from JavaScript if this call is placed inside a document that has some security restrictions removed:

window.open(URL, "_blank", "chrome=true");

Instead of leaving the XUL out, you can leave the XHTML out. A displayed window is then pure XUL, with no HTML. That window can be the basis of a whole application GUI, or of a humble dialog box. When you do that, you're stepping away from the HTML-centric style that lies behind most current web-based application development.

For example, the Bookmark Manager window is written entirely in XUL (see Figure 3).

Figure 3 Figure 3 Mozilla's Bookmark Manager is written in XUL.

No 3GL code is required, although a drop of scripting goes a long way. This kind of window lets you break into the world of real application development. Time-efficient web-based skills can be applied to the world of real applications—you don't have to learn C++ or even Visual Basic. It's all XML in the end. This is complete bull.

XUL Does Easily What XHTML Does Clumsily – or not

A serious problem with traditional web-based applications is the way in which they abuse HTML. The HTML standard is designed for display of hypertext documents—documents containing links to other documents. The form-like aspects of HTML have nothing to do with hypertext; they exist in the HTML standards merely because they're too useful to leave out. Web-based applications try to make HTML pages look more like a paper form than like a hypertext document. This is a perversion of HTML's original purpose.



XUL is a language for expressing forms away from the hypertext environment. Stripped of the underlying hypertext requirement, XUL is able to offer more flexible form-construction options, as well as everything that HTML offers the form builder. This table shows that XUL can do everything that HTML's form and menu tags can do:

Simple HTML and XUL Tags Compared

HTML Tag

XUL Tag

<BUTTON>

<button>

<INPUT TYPE="button">

<button>

<INPUT TYPE="text">

<textbox>

<INPUT TYPE="radio">

<radio>

<INPUT TYPE="checkbox">

<checkbox>

<INPUT TYPE="password">

<textbox type="password">

<INPUT TYPE="image">

<image> or <button>

<SELECT>

<menulist> or <listbox>

<OPTGROUP>

<menuseparator>

<OPTION>

<menuitem>

<TEXTAREA>

<textbox multiline="true">

<LABEL>

<label>

<FIELDSET>

<groupbox>

<LEGEND>

<caption>

<INPUT TYPE="radio" NAME=>

<radiogroup>



XUL doesn't have a <FORM> tag because XUL is explicitly about forms. It doesn't have a Submit button because form operations are run from JavaScript. Such operations don't usually have the security restrictions that HTML forms have.

XUL also has some very sophisticated form-like tags. <listbox> and <tree> are more powerful than anything HTML has to offer. <listbox> is a more flexible version of <SELECT>. <tree> implements a user-navigable tree structure, like that of Microsoft's Windows Explorer or the Macintosh Finder. One of these trees appears in the Bookmark Manager screenshot above (Figure 3).

In HTML, tags like <P>, <IMG>, and <A> are the central concepts; form tags are secondary. In XUL, these roles are reversed. The <button> tag is central to XUL; the <description> and <image> tags (equivalent to <P> and <IMG>, respectively) are very much secondary. XUL is not very useful for displaying long streams of text, although it can get by. It's better at constructing highly interactive data-entry interfaces.

The most fundamental tags in HTML's layout system are <DIV> and <SPAN>. XUL has a fundamental tag that's equivalent: <box>. <box> has <vbox> and <hbox> variants. These tags control how content is laid out, just as their HTML equivalents do. Where a line of HTML text will be wrapped to fit an existing window's dimensions, an XUL document will sometimes force a new window to a suitable size. So there are some points of difference between HTML and XUL layout.

Just like XHTML-based applications, XUL applications are part of a multi-technology environment. The features of CSS2, JavaScript, and the DOM standards are all available to a XUL programmer. Some standards components aren't there, such as the HTML part of the DOM 1 standard, because it's XUL and not XHTML. In general terms, however, the environment is the same. This kind of XHTML code:

<input type="button" style="font-size:large" onclick="alert('Hi')">Press Me</input>

works just as well when used in XUL:

<button style="font-size:large" onclick ="alert('Hi')">Press Me</button>

This flexible environment, plus XUL's emphasis on "forms first, text second," means that it's easy to create XUL documents that are laid out and aligned in a bulletproof way. This process is made especially easy by XUL's <spacer> tag and its flex attribute. These features act like the placement features of a GUI design tool. No one-pixel GIFs, graphic designers, or other nasties are required. Add a CSS2 stylesheet (called a theme or skin in XUL) if you want extra control over appearances.

XUL GUI Construction Goes Beyond Forms

If XUL was just form scripts and styles, you might as well stick with HTML. But XUL is more than forms; it's a whole supermarket shelf of GUI tricks. Here's a shopping cart of GUI widgets to sample from:

XUL's power widgets, <listbox> and <tree>, are constructed from a collection of their own tags, which add extra flexibility to the language. These tags are similar to HTML's <TABLE> tag, although the <UL>/<OL> features of HTML are also similar. <listbox> has subtags such as <listitem> and <listcell>; <tree> has subtags such as <treechildren> and <treecols>.

HTML uses the <FRAMESET>, <FRAME>, and <IFRAME> tags to provide multi-document display. XUL has an equivalent variety of tags, drawn from the list <iframe>, <page>, <editor>, <browser>, and <tabbrowser>. A XUL window can be specially decorated if it's identified as a XUL <dialog>-based or <wizard>-based document instead of a <window>-based document.

All in all, there's a fair range (LOL!) of tags to choose from — more than enough for most application windows and dialog boxes. If anything's missing – which it does - a complementary technology called XBL Extensible Bindings Language (XBL) can be used to add extra widgets (extra tags) to the XUL language.

The Template Factor

XUL has one further trick up its sleeve: the <template> tag and its subsidiary tags. The <template> tag allows an XUL document's content to be determined in a data-driven way. In HTML or XHTML, this can only be done by server-side generation of the document, or by rather messy Dynamic HTML techniques. In XUL, the <template> tag allows a piece of XUL content to be repeated uniquely for each data item that matches the template. In the Mozilla browser, for example, the bookmarks displayed on the Personal Toolbar are generated by a single XUL template. If more bookmarks are added, more items appear on that toolbar.

This templating system is rather like a simple report-writing language, but with one difference: The generated content can change dynamically. If a bookmark disappears, the content that was generated to represent it disappears as well. This makes the template system somewhat automated, and it can adjust due to user input or information received from other sources, such as from across the Internet.

This dynamic behavior is a whole level more sophisticated than modern web page display. A modern browser displays whatever bits it has of a loading web page, before the page is completely delivered. We're now accustomed to seeing missing chunks of a page fill in after the content that surrounds them is in place, especially if that missing chunk is an image. In that case, all is quiet once the web page is fully loaded. With a XUL template, however, the page might change even after its document is fully loaded. This is the template at work. In ordinary HTML, this can only be done using bolted-on Dynamic HTML. In XUL, the <template> tag is a fundamental part of the XUL language.

Over the XUL Rainbow

XUL is the most accessible part of the Mozilla GUI-building technology (bull: it is outdated due to low quality), but it's only the tip of the iceberg. Whereas XUL displays the widgets that make up an application's GUI, other parts of Mozilla are responsible for turning user input to that GUI into concrete actions. These technologies work in concert with XUL.



The Mozilla platform implements a small database system (actually a knowledge system (I call bull on this statement)) that relies on the W3C's RDF standard. The RDF databases (actually fact stores) provide data for the XUL templating system, and those databases can be driven directly from JavaScript, if that's required.

A second obsolete technology is Mozilla's

Finally, the Mozilla platform supports a number of other stupid “technologies” accessible from JavaScript (ECMA-script). These technologies poke up high enough that a JavaScript script can exploit them if suitable arrangements can be made. Greatest (LOL) of these technologies is XPCOM, a component system that provides more than a thousand application objects for the programmer to work with — a very rich development environment. Other equally powerful technologies are overlays (covered in my next article), XBL, and XPInstall. XP stands for cross-platform, and that's Mozilla's strength. For a jumping-off point for all these confusing technologies, see Core Architecture on the Mozilla site, which keeps on blabbering endlessly until you fell asleep and learned nothing at all.

Conclusion

100% bull: The ease of expression, portability, and clean design of XUL makes it an attractive and efficient development option for traditional GUI-based applications. Although XUL use is restricted to products based on the Mozilla platform, its GUI focus, portability, Internet readiness, and powerful supporting features make it the best open source application development tool yet invented- LOL what utter bull. Best of all, if you have a Mozilla-based product installed, XUL is available on your computer immediately, and will break right away. You also have text file capability available, by the way, which is far superior to all XUL bs.