Programming Firefox

Chapter 2. XUL Basics

The XML User Interface language, XUL, is a document format and vocabulary used to describe cross-platform user interfaces that the Firefox engine renders.

HTML and XHTML (HTML’s XML-compliant kin) are used to build web pages—combinations of text, images, and multimedia, with interactivity built in by adding JavaScript event handlers to interface elements or server scripts acting on client-provided forms. XUL interface elements, or widgets, are designed to wrap interactivity around web pages. The Firefox browser itself is a collection of XUL buttons, frames, and menus defined by XUL source. The Gecko rendering engine is the drawing logic that displays all XUL interfaces.

This chapter provides an introduction and basic overview of XUL interfaces (most of these elements will be discussed in greater detail later in this book), including:

• The structure of a XUL file

• Introduction to the box model

• Setting dimensions and positioning

• Simple interface elements (buttons, labels, text)

• Menus and toolbar buttons

• Containers (group boxes, tab boxes)

• Content display

• Utility widgets

File Structure

XML files may include the XML preamble that identifies the file type:

<?xml version="1.0"?>

As XML files, XUL interfaces must be well formed—that is, the elements must have opening and closing tags.

In the case of XUL windows, the root element must be a window:

<window>
    ... some children
</window>

The term element refers to the basic unit of a XUL document. Elements are represented via their