Tutorials > " . "XUL Tutorial"; $pagetitle="1.1 - Introduction"; $customsidebar = "xultu-sidebar.php"; include "header.php"; ?>


This tutorial guides you to learning XUL (XML User-interface Language) which is a cross-platform language for describing user interfaces of applications.

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 and some limited functionality. The actual finding of files will be 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 at these sections.

What is XUL and why was it created?

XUL (pronounced zool and it rhymes 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. This may not be important for some, but users may want to use an application on other devices such as handheld devices or set-top boxes.

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 quicky 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. Style sheets can be applied to modify the appearance of the user interface (much like the skins or themes feature in WinAmp or some window managers).

What kinds of user-interfaces can be made with XUL?

XUL provides the ability to create most elements found in modern graphical interfaces. It is generic enough that it could be applied to the special needs of certain devices and powerful enough that developers can create sophisticated interfaces with it.

Some elements that can be created are:

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.

XUL content may be loaded from a local file or a remote site. It may also be packaged into an installer which the user may download and install. This last method gives the application additional privileges, such as reading local files and modifying user preferences.

XUL is usually stored in files with a .xul extension. You can open a XUL file with Mozilla as you would any other file, using the Open File command from the File menu or typing the URL into the address bar.

When loading XUL content from a remote site, you must set up your Web server to send XUL files with the content type 'application/vnd.mozilla.xul+xml'.

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 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. Most examples should work in Mozilla 1.0 or later.

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 Element Reference to find out about other features supported by specific elements.

(Next) First, let's look at how XUL files are organized.