[Table of Contents] [Previous: Overview of a Package] [Next: Menu Bars and Menus]

Below is a sample XUL document that describes a window with a menu bar and an HTML content area. The menu bar has a menu, File, with a single menu item that dumps Hello world! to the console when selected.

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!DOCTYPE window> <window id="main-window" xmlns:html="http://www.w3.org/TR/REC-html40" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu name="File"> <menuitem name="Hello World!" onclick="dump('Hello world!\n');"/> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%" /> </window>

The first line of the XML file is standard and just indicates the version of XML. The second line is a processing directive that loads XUL's global style sheet (a CSS file). If you're curious about what the wacky chrome: URL means, you can skip ahead to packages. This CSS file contains rules that describe how the XUL components inside the XML file look by default.

You can load as many style sheets as you wish using repeated processing directives, although you should always make sure to load the xul.css file initially.

The root tag of the XUL document follows. It sets up the XUL and HTML namespaces using the xmlns attribute. The form specified above makes XUL the default namespace, which means that it isn't necessary to put xul: in front of any XUL tag names.

A root tag of window indicates that the XUL document is intended to be a top-level window or loaded inside an embedded HTML frame/iframe.

Notice that the window tag has an id attached to it. Most nodes in XUL have these identifiers, which enable the nodes to be retrieved easily using the AOM's getElementById method.

Identifiers are also useful for CSS, since rules can be applied to individual elements in XUL using the same # syntax that is possible for HTML elements.

#main-window {
  display: block;
  width: 100%;
  height: 100%;
}

For example, the above style rule would apply to the main window and dictates that the window should consume the full width and height available to it in a content area.

The next line of the XUL file declares the menubar. The menu bar contains a single menu tag called File. This menu contains a single menu item that has a simple JavaScript onclick handler attached to it. This handler fires when the menu is selected by the user, and it dumps the text Hello world! to the console. (See Menu Bars and Menus for details.)

Finally there is an HTML iframe. Note that the frame is qualified with the prefix html:, since it is an HTML object being used inside a default XUL namespace. The frame also has a special attribute called flex, which indicates how much the frame is allowed to stretch to consume available space inside its window. (See The Box System for details).

Notice that all attributes and tag names are in lower case. This is a requirement. DO NOT USE UPPERCASE TAG NAMES OR ATTRIBUTE NAMES FOR HTML OR XUL ELEMENTS IN XML! If you do they won't be recognized.