XUL Tutorial

[an error occurred while processing this directive]

Home: Tutorials: XUL Tutorial

XUL Tutorial

The XUL Tutorial was created by Neil Deakin

Last updated on September 3, 2001

Welcome to the XUL tutorial. This tutorial describes XUL, the XML-based User-interface Language. This language was created for the Mozilla application and is used to define its user interface.

The XUL implementation and the Mozilla browser are ever-changing. Some of the information contained within this tutorial may be outdated. The default skin has changed since some of the screen shots were taken, so the images may not match up to recent builds.

The sections on boxes and popups have been changed due to recent XUL syntax changes.

Element Reference

Quick Reference

Zip archive of all files

Giant Document Version (650KB)

1. Introduction

1.1 Introduction
1.2 Adding XUL Files
1.3 The Chrome URL
1.4 Manifest Files

2. Simple Elements

2.1 Creating a Window
2.2 Adding Buttons
2.3 Adding Labels and Images
2.4 Input Controls
2.5 Adding HTML Elements
2.6 Using Spacers
2.7 More Button Features

3. The Box Model

4. Common Elements

4.1 Progress Meters
4.2 Scroll Bars
4.3 Stacks and Decks
4.4 Bulletin Boards
4.5 Tabboxes
4.6 Toolbars
4.7 More Toolbar Features
4.8 Content Panels
4.9 Splitters

5. Menus

6. Grids, Trees and RDF

6.1 Grids
6.2 Trees
6.3 More Tree Features
6.4 Tree Example
6.5 Introduction to RDF
6.6 Templates
6.7 RDF Datasources
6.8 Advanced Rules
6.9 Persistant Data

7. Events

8. XPCOM and XPConnect

8.1 XPCOM Interfaces
8.2 XPCOM Example
8.3 Manipulating RDF Datasources
8.4 Using the Clipboard
8.5 Drag and Drop
8.6 Drag and Drop JavaScript Wrapper
8.7 Drag and Drop Example

9. Outliners

10. Skins and Locales

11. Bindings

12. Specialized Window Types

12.1 Features of a Window
12.2 Creating Dialogs
12.3 Open and Save Dialogs
12.4 Creating a Wizard
12.5 More Wizards
12.6 Overlays
12.7 Cross Package Overlays

13. Installation

14. XUL Example

Other Documents

Key Code Reference
Template Syntax Examples
Mozilla's Custom Style Properties
XUL Specification
The in-progress XUL specification.
XUL Reference
A reference to the XUL elements and the attributes used for each. Contains descriptions and examples.

Recent Changes

Reworked some of the element reference. (August 31)
Changed the autocomplete textbox information. (August 30)
Updated the text and button sections. (August 19)
Incorporated the popup syntax changes. (August 12)
Rearranged some sections. (August 6)
Created a version which has all sections in one giant document. (August 6)
Updated the box documentation to incorporate recent changes. (August 4)