XUL Tutorials     Main Xul Tutorial XUL Downloads     Browsers     Skins     Submit File XUL Resources     Xul Directory About XulPlanet     Feedback     Search

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 with-in 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.

Recent Changes

• 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 Springs
• 3. The Box Model
• 3.1 The Box Model
• 3.2 Features of a Window
• 3.3 Window Element Positioning
• 3.4 Box Model Details
• 3.5 Titledboxes
• 3.6 Adding More Elements
• 4. Common Elements
• 4.1 Progress Meters
• 4.2 Scroll Bars
• 4.3 Stacks and Decks
• 4.4 Bulletin Boards
• 4.5 Tabbed Panels
• 4.6 Toolbars
• 4.7 More Toolbar Features
• 4.8 Content Panels
• 4.9 Splitters
• 5. Menus
• 5.1 Simple Menu Bars
• 5.2 More Menu Features
• 5.3 Popup Menus
• 5.4 Scrolling 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
• 7.1 Adding Event Handlers
• 7.2 Document Object Model
• 7.3 Keyboard Shortcuts
• 7.4 Focus and Selection
• 7.5 Tree Selection
• 7.6 Broadcasters and Observers
• 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. Skins
• 9.1 Adding Style Sheets
• 9.2 Modifying the Default Skin
• 9.3 Creating a Skin
• 10. Bindings
• 10.1 Introduction to XBL
• 10.2 Anonymous Content
• 10.3 XBL Attribute Inheritance
• 10.4 Adding Properties
• 10.5 Adding Methods
• 10.6 Adding Event Handlers
• 10.7 XBL Style
• 10.8 XBL Inheritance
• 10.9 XBL Example
• 11. Other Features
• 11.1 Localization
• 11.2 Property Files
• 11.3 Overlays
• 11.4 Cross Package Overlays
• 12. Installation
• 12.1 Creating an Installer
• 12.2 Install Scripts
• 12.3 Advanced Install Features
• Key Code Reference
• Element Reference

• Added an expanded element reference.
• Updated the chrome and packaging documentation.
• Added sections on overlays.
• Added two sections on XPInstall.
• Fixed some errors in the examples.

The following is a list of other sources of information about XUL:

• Mozilla Front-end
  Documents about XUL and Mozilla's user interface.
• XUL Reference
  A reference to the XUL elements and the attributes used for each. Contains descriptions and examples.
• The Other XUL Tutorial
  Contains lots of XUL examples, as well as tutorials on CSS, XML and RDF.
• Newsgroups List
  The list of Mozilla newsgroups.