Home > Tutorials > XUL Tutorial > XUL Tutorial

• Single Document Version
• Download the XUL Tutorial
  
• Element Reference
• Quick Reference
  
• Key Code Reference
• Template Syntax Examples
• List of major changes to XUL in Mozilla between various versions.

1. Introduction
   1. Introduction
   2. Adding XUL Files
   3. The Chrome URL
   4. Manifest Files
2. Simple Elements
   1. Creating a Window
   2. Adding Buttons
   3. Adding Labels and Images
   4. Input Controls
   5. List Controls
   6. Adding HTML Elements
   7. Using Spacers
   8. More Button Features
3. The Box Model
   1. The Box Model
   2. Window Element Positioning
   3. Box Model Details
   4. Groupboxes
   5. Adding More Elements
4. Common Elements
   1. Progress Meters
   2. Scroll Bars
   3. Stacks and Decks
   4. Stack Positioning
   5. Tabboxes
   6. Toolbars
   7. Content Panels
   8. Splitters
   9. Persistent Data
5. Menus
   1. Simple Menu Bars
   2. More Menu Features
   3. Popup Menus
   4. Scrolling Menus
6. Grids, Trees and RDF
   1. Grids
   2. More Listbox Features
   3. Trees
   4. More Tree Features
   5. Introduction to RDF
   6. Templates
   7. Trees and Templates
   8. RDF Datasources
   9. Advanced Rules
7. Events and Scripts
   1. Adding Event Handlers
   2. Document Object Model
   3. Keyboard Shortcuts
   4. Focus and Selection
   5. Tree Selection
   6. Custom Tree Views
   7. Commands
   8. Updating Commands
   9. Broadcasters and Observers
8. XPCOM and XPConnect
   1. XPCOM Interfaces
   2. XPCOM Examples
   3. Manipulating RDF Datasources
   4. Using the Clipboard
   5. Drag and Drop
   6. Drag and Drop JavaScript Wrapper
   7. Drag and Drop Example
9. Skins and Locales
   1. Adding Style Sheets
   2. Styling a Tree
   3. Modifying the Default Skin
   4. Creating a Skin
   5. Localization
   6. Property Files
10. Bindings
    1. Introduction to XBL
    2. Anonymous Content
    3. XBL Attribute Inheritance
    4. Adding Properties
    5. Adding Methods
    6. Adding Event Handlers
    7. XBL Inheritance
    8. XBL Example
11. Specialized Window Types
    1. Features of a Window
    2. Creating Dialogs
    3. Open and Save Dialogs
    4. Creating a Wizard
    5. More Wizards
    6. Overlays
    7. Dynamic Overlays
12. Installation
    1. Creating an Installer
    2. Install Scripts
    3. Additional Install Features

The following changes have been made to XUL between Mozilla 0.9.9 and Mozilla 1.0:

• The tree and outliner have been merged into a single set of elements. The back end code is from the outliner but the tags are from the tree. It supports inline content, template built content and content from a custom view.
• The class='menu-button' on a button seems to work again.

The following changes have been made to XUL between Mozilla 0.9.8 and Mozilla 0.9.9:

• The listbox element has been added, which is a simplified tree. It is suitable for basic lists. It supports multiple columns but not nested rows.
• You should now use the xbl namespace for the inherits attribute in an XBL file.

The following changes have been made to XUL between Mozilla 0.9.7 and Mozilla 0.9.8:

• For template-built outliners, the datasources and ref attributes should now be placed on the outliner element.
• The outlinerbody element has been renamed to outlinerchildren.
• The attribute flags="dont-build-content" should be used on the outlinerchildren element for RDF-built content.
• The columns in the outliner should be surrounded by an outlinercols element.
• A number of new tree selection methods have been added and some have been removed. For a list, see the element reference.
• The rows of an outliner should be put inside outlineritem elements.
• The CSS property -moz-border-colors can be used to set a series of colors for each pixel of a wide border. This can be used to draw more complex border styles, reducing the need for extra boxes.
• The CSS property -moz-image-region can be used to grab a specific region of an image and use it for the element's image. This means that memory can be saved as each element can use a different part of the same image.

The following changes have been made to XUL between Mozilla 0.9.6 and Mozilla 0.9.7:

• The syntax for tooltips has changed. Use the tooltiptext attribute on an element to set the text for the tooltip on an element.
• To create a custom style for tooltips, use the tooltip element, which is a type of box. Set its default attribute to true to use the element as the default for all tooltips in the window.
• The tree now has a scrollByLines method which can be used to scroll the view by a certain number of rows.
• In many elements, to disable a feature set with a boolean attribute, leave the attribute out entirely instead of setting the attribute to false. Attributes that work this way include checked, selected, disabled open, cycler enableColumnDrag
• The method isCellCropped(row,colID) has been added to the outliner box interface (nsIOutlinerBox), which should return true if the text in a cell is cropped.
• The validate attribute can now be used on the menuitem, toolbarbutton and treecell elements.

The following changes have been made to XUL between Mozilla 0.9.5 and Mozilla 0.9.6:

• The window element now defaults to vertical orientation.
• The groupbox element now defaults to vertical orientation.
• The page element has been added which is just like window, except it is intended to be used for XUL files that are intended to be loaded into an iframe.
• Controls now have a value attribute which can be used to hold a value specific to the element that can be used by a script.
• The deprecated elements text, html and spring have been removed.
• The deprecated attribute autostretch has been removed. Use the align attribute instead.
• The deck element now has two properties, selectedIndex to get and set the index of the selected panel, and selectedPanel to get the child panel that is currently displayed. The tabbox and tabpanels elements also have these properties.
• The tabbox has a selectedTab property to get the selected tab element. The tabs element has a similar property but it called selectedItem instead.
• The menulist, radiogroup and tabs elements now have three additional methods for manipulating child elements:
  • appendItem ( label , value ): add a new child item with the given label.
  • insertItemAt ( index , label , value ): add a new child item at a specific index.
  • removeItemAt ( index ): removes the child item with the given index.
• The tabbrowser now supports site icons. It also adds several new methods:
  • reloadTab ( tab ): reload the content of a given tab.
  • reloadAllTabs ( ): reload the contents of all of the tabs.
  • getBrowserForTab ( tab ): get the browser element for a given tab.
• RDF-built outliners can have an additional statedatasource attribute on the outlinerbody element, which indicates a separate datasource to store outliner persistence of which nodes are open or closed. The default is 'rdf:local-store' which is the local store held in the user's profile directory. The attribute is ignored for XUL loaded outside of chrome.
• The image element now has a validate attribute which can be used to indicate whether the image may be loaded from the cache. It may be set to the value always, to load the image every time or never to load from the cache if possible.
• The image element now fires the onload and onerror events.
• The following attributes and properties are valid on all XUL elements: align, dir, flex, flexgroup, ordinal, orient, pack, hidden, collapsed, allowevents, observes, menu, contextmenu, tooltip, width, height, minwidth, minheight, maxwidth, maxheight, persist, left, top, datasources, ref, tooltiptext, statustext

The following changes have been made to XUL between Mozilla 0.9.4 and Mozilla 0.9.5:

• The menubutton element has been deprecated. It has been replaced with an special type attribute on the button element.

          <button type="menu-button" label="Choose">
            <menupopup>
              <menuitem label="Audio"/>
              <menuitem label="Video"/>
            </menupopup>
          </button>

• The toolbarbutton element has been added, which functions just like a regular button except that it is designed for being placed on a toolbar. Themes may display these buttons differently.
• The image tag now has a src property that holds the image URL.
• The label on the radiogroup is now specified with the caption element.
• The radiogroup element defaults to vertical orientation. The tabbox defaults to vertical orientation. The tabs element defaults to horizontal orientation.
• The tabbrowser element has been added which is just like the browser element, except that it supports multiple pages displayed in tabs.
• The direction attribute of the resizer has been renamed to resizerdirection.
• The popup element has been deprecated. You can instead use the menupopup for menus and the tooltip element for tooltips. The new floatingwindow can be used for floating windows.
• The dialog element has been added. This element should be used in place of window for windows that are dialog boxes. The default OK and Cancel buttons and handling for them are added automatically.
• The accessible property has been added to a number of elements: button, checkbox, image, label and description. This property holds an object that handles accessibility for the element.
• The following attributes and properties have been added to the button element:
  • type: the type of button. Possible values are: menu, menu-button, checkbox and radio. Leave the attribute out for a normal button.
  • dlgType
  • group
  • open
  • checked
  • checkState
  • autoCheck
• The outliner element now has an attribute and property enableColumnDrag. When set to true, the user may change the order of the columns by dragging them.
• The following attributes have been added to all popup elements:
  • popupBoxObject: the nsIPopupBoxObject that implements the popup.
  • autoPosition
  • enableKeyboardNavigation(bool)
  • enableRollup(bool)
  • moveTo(x,y): move the popup to a new position.
  • sizeTo(width,height): change the size of the popup.
• The tabs and tabpanels elements now get sent a 'select' event whenever the currently selected tab changed, either from the user or programmatically.
• The outliner view object now has an isSeparator function that takes one argument, a row index. This function should return true if a particular row is a separator. A separator will be drawn as a solid horizontal line.
• The DOM2 TreeWalker interface has been implemented and one can contsruct a TreeWalker by calling the createTreeWalker method of a document.