This tutorial is a guide to learning XUL (XML User Interface Language) which is a cross-platform language for describing applications' user interfaces.

This tutorial will demonstrate creating a simple find file user interface, much like that provided by the Macintosh's Sherlock or the find file dialog in Windows. Note that only the user interface will be created, with only limited functionality. The actual finding of files will not be implemented. A blue line will appear to the left of a paragraph where the find file dialog is being modified. You can follow along by looking for these sections.

What is XUL and why was it created?

XUL (pronounced "zool" and rhyming with "cool") was created to make development of the Mozilla browser easier and faster. It is an XML language so all features available to XML are also available to XUL.

Most applications need to be developed using features of a specific platform making building cross-platform software time-consuming and costly. A number of cross-platform solutions have been developed in the past. Java, for example, has portability as a main selling point. XUL is one such language designed specifically for building portable user interfaces. It takes a long time to build an application even for only one platform. The time required to compile and debug can be lengthy. With XUL, an interface can be implemented and modified quickly and easily.

XUL has all the advantages of other XML languages. For example XHTML or other XML languages such as MathML or SVG can be inserted within it. Also, text displayed with XUL is easily localizable, which means that it can be translated into other languages with little effort.

What kinds of user interfaces can be made with XUL?

XUL provides the ability to create most elements found in modern graphical interfaces. Some elements that can be created are:

• Input controls such as textboxes and checkboxes
• Toolbars with buttons or other content
• Menus on a menu bar or pop up menus
• Tabbed dialogs
• Trees for hierarchical or tabular information
• Keyboard shortcuts

The displayed content can be created from the contents of a XUL file or with data from a datasource. In Mozilla, such datasources include a user's mailbox, their bookmarks and search results. The contents of menus, trees and other elements can be populated with this data, or with your own data supplied in an RDF file.

There are several ways you can use XUL:

Firefox extension

An extension adds functionality to the browser itself, often in the form of extra toolbars, context menus, or customizations to the browser's user interface. This is done using a feature of XUL called an overlay, which allows the UI provided from one source, in this case, the Firefox browser, to be merged together with the UI from the extension. Extensions may also be applied to other Mozilla based products such as Thunderbird.

Standalone XULRunner application

XULRunner is a packaged version of the Mozilla platform which allows you to create standalone XUL applications. A browser isn't required to run these applications, as they have their own executable file.

XUL package

In between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. This is used when you don't want to have the larger size of a complete XULRunner application, but don't mind requiring a Mozilla browser to be installed to be able to run the application.

Remote XUL application

You could also just place XUL code on a web server and open it in Firefox, as you would any other web page, however this is discouraged and was disabled in Firefox 8.  It is still possible to enable this for selected sites to let legacy apps to continue working, but for new remote applications you should use HTML to create your user interface instead; most of the features you used to have to use XUL for are available in HTML5.

The first three types all require an installation to be performed on the user's machine. However, these types of applications do not have security restrictions placed on them, so they may access local files and read and write preferences, for example. For extensions, the XUL files and associated scripts and images used by an application would be packaged into a single file and downloaded and installed by the user. Mozilla applications such as Firefox provide an extension manager which allows packages to be installed without having to write a lot of complex code.

What do I need to know to use this tutorial?

You should have an understanding of HTML and at least a basic understanding of XML and CSS. Here are some guidelines to keep in mind:

• XUL elements and attributes should all be entered in lowercase as XML is case-sensitive (unlike HTML).
• Attribute values in XUL must be placed inside quotes, even if they are numbers.
• XUL files are usually split into four files, one each for the layout and elements, for style declarations, for entity declarations (used for localization) and for scripts. In addition, you may have extra files for images or for platform specific data.

XUL is supported in Mozilla and browsers that are also based upon on the Gecko engine, such as Netscape 6 or later and Mozilla Firefox. Due to various changes in XUL syntax over time, you will want to get the latest version for the examples to work properly. XUL is fairly similar in Firefox and to other browsers, although it has some specific differences such as support for customizable toolbars.

This tutorial attempts to cover much of XUL's functionality, however, not all features are discussed. Once you are familiar with XUL, you can use the XUL Reference to find out about other features supported by specific elements.