XUL Tutorial - Introduction

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

This tutorial with 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.

Introduction

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 when you consider that users may want to use an application on other devices such as handheld devices or set-top boxes, it is quite useful to allow users to.

A number of cross-platform solutions have been developed in the past. Java, for example, has (or had to some) 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, other XML languages or HTML can be inserted with-in it. Also, XUL is easily localizable, which means that it can be translated into other languages easily. Style sheets can be applied to modify the appearance of the user interface (much like the skins or themes feature in WinAmp or Enlightenment).

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:

• Input controls such as text fields
• Toolbars with buttons or any content
• Menus on a menu bar or pop up menus
• Tabbed dialogs
• Trees for hierachial or tabular information
• Keyboard shortcuts

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 (unlike HTML) is case-sensitive.
• Attribute values in XUL must be placed inside quotes, even if they are numbers.
• XUL files are usually split into four files, one for the layout and elements, one for style declarations, one for entity declarations, used for localization and one containing scripts. In addition, you may have extra files for images or for platform specific data.

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