Ajax JavaScript CSS HTML 5 Firefox

XUL
XML-based User Interface Language

Creating portable widgets in XML for standalone applications.

(Should be pronounced "zool")

XUL provides user interface bases for a cross platform application. As DHTML was created for web page interface, XUL has been created for interface of applications.

XUL was defined to build the user interface of the Mozilla open source browser.
The name comes from a character of the Ghostbuster movie.

What is XUL made of?

XUL describes a content with a behavior, then a presentation for this content, and then the interface can be localized for a given country or human language.
Components of each level are these:

  1. content level: XUL, XBL, JavaScript,
  2. behavior: event handling,
  3. presenting: CSS, images,
  4. locale: DTD, properties files.
    The object model may be applied to several levels.

When using XUL, you have to deal with RDF (for templates), XPCom, XPConnect and JavaScript. XBL is optional.

Components of XUL:

RDF

The Resource Description Framework, is intended to write XML files that matches the structure of component that use them.
It allows, in XUL, to build a structured list from an RDF file by describing just one element.

XBL

XBL means for eXtensible Binding Language.
Its goal is to modify tags of XUL, or replace them or add new ones. Thus, to change the interface for an application.
The language defines XML elements for widgets, events, properties, methods.

XTF

eXtensible Tag Framework is a replacement to XBL in gecko and thus in XUL as well. It allows to define new XML elements, but in new versions of XUL only. (Firefox 1.5).
XTF elements may be written in C.

Overlays

The goal is to split a GUI into small, reusable components.
This is a mechanism to add components to a XUL application. Overlay is a set of XUL files used to describe extra content to user interface and adapt the interface at convenience of the user.

The AOM

The Application Object Model is, for a XUL interface, what the Document Object Model is for a HTML page. DOM describes web pages, and AOM describes applications. AOM allows to manipulate objects (widgets) written in XML to build a graphical interface.

XPCom

(Cross Platform Component Object Model). Its goal is to use native code from XUL applications, and improve performance. The JavaScript part of a XUL interface may be rewritten in C and compiled to binary and them used with XUL, thanks to XPCom.
This is a framework for modular software. XPCom components may be written in any programming language, and used by any language.

XPConnect

Its goal is to allow XUL applications to use compiled libraries.
It is an interface for allowing JavaScript programs to use XPCom files. JavaScript objects can use binary objects in a XPCom file, and conversely.

XPInstall

Its goal is installing XUL application from Internet or Intranet.
It is an installer for XUL components, working over networks.

XUL templates

The goal is to put data at runtime inside a XUL document.
According to Mozilla, a XUL template is "a collection of rules that is used to build XUL and HTML content from one or more RDF datasources".
A template describes a content pattern model, and the conditions to apply it.
The browser creates the XUL or HTML document by copying the template and filling it with values taken from the RDF datasource.

<template>
  <rule>
 <conditions>
   ...
 </conditions>
 <action>
   ...
 </action>
  <rule>
  <rule> .....etc...
</template> 
Syntax of templates

Conditions may be empty or include one or more tests.
For each occurrence the set of conditions is matched, the action is performed.

Other components

XUL makes use also of DOM, HTML, CSS, JavaScript.

How to launch a XUL application

You can load a file with a XUL extension from Mozilla (or Firefox) as a HTML page.
Some projects I have tested don't work in this way and require a special installation, described below...
If XULRunner is installed, it is launched from within the command window, with a configuration file as parameter. For example, demo.XUL has a configuration file named demo.ini:

 xulrunner demo.ini

The format of the configuration file is given in the XULRunner archive.

How to use XUL as graphical interface for a program

  1. You must know the available XUL widgets.
  2. The definitions (XUL, RDF and other files) must stay in the chrome directory of Mozilla.
  3. Your application must be registered in the chrome install file.
  4. The application is started by a command as: mozilla -chrome followed by the path of the main XUL file.

See among the sites below for more details.

mozilla
|--chrome
   |--mygui
  |--content  // XUL, RDF, js files
  |--locale   // dtd text files
  |--skin // CSS files<
Tree of XUL GUI files

The framework

The development environment based upon XUL to make Mozilla applications, it is made of these parts:

XUL or XAML?

XUL is multi-platform an run natively, while XAML requires .NET or a compatible environment as Mono.
Specifically, XAML uses class names as tags and their property as XML attributes. So, XML becomes a class, as in C Sharp, easier to implement, but more limited.
XUL uses XPCom to extend JavaScript, while code is inserted directly into xaml.
And XUL is interpreted and has bitmap images, while XAML is compiled and vector based.
HTML tag may be integrated directly into a XUL source, while XAML use its own tags, equivalent to those of HTML.
To conclude, coding XAML is simpler, but it does not run natively.
An article compares XUL and XAML and all other XML interface languages.

Drawbacks of XUL

Specifications

XUL relies on these specifications form W3C: XML 1, HTML 4.0, CSS 2, DOM 2.
And ECMAScript 1.5 from ECMA.
The XUL format is defined by Mozilla.

Resources and documents