This appendix is an easy-to-use reference that contains
information about XUL elements, XBL elements, and event
attributes. Details about how each element and event works
within a Mozilla application are covered in the rest of the
book; to learn how to use XUL or XBL, read Chapter 3 and Chapter 7.
Once you know how to use XUL and XBL, this reference allows
you to look up all available tags and elements quickly. Each
entry listed below includes a brief description of the element
or event, its purpose, what attributes the element or event
has, and what other related elements or events you can look at
to get more information.
XUL Element Set
XUL isn't yet identified as a specification, and the
still changing. The elements and attributes given here
represent a stable subset of the XUL widget set. XML allows you
to define new elements and attributes arbitrarily (which is
partly what makes a powerful extension like XBL possible) in
your markup. Although it's discouraged in practice, Mozilla
application developers-even those working on the Mozilla source
itself-often use this flexibility to manage data in one-off
attributes. For example, you may find XUL buttons in the source
with attributes like "loading," which is not part of the XUL
specification. In fact, XBL's presence, XML's flexibility, and
DOM interfaces blur the distinction between valid XUL and other
XML markup. This reference tries to document all widgets in the
XUL 1.0 release, any additional attributes these elements have,
and their use
in Mozilla application development.
All XUL elements have the attributes shown in Table C-1.
Table C-1: Common XUL element
Specifies how child elements are aligned: baseline,
center, end, start, or stretch
(Boolean) Specifies whether events should be passed to
the child elements
The element class of the ; often used for class-based
(Boolean) Specifies whether the element is collapsed or
displayed; defaults to false
(Boolean) Specifies whether the element can have child
Used in templates; points to RDF property represented
by this XUL element
Points to the context menu that this element should
Used in templates; points to the RDF data that gets
Used for debugging XUL; adds borders to make the
element and its layout easily visible
Specifies the direction of the children: normal or
(Boolean) Used for template; specifies that the
container has no children
Specifies whether the children should be of the same
size: always or never
Provides an integer or percent value that specifies the
flexibility of an element relative to its siblings within a
Provides an integer that can group elements and give
them the same degree of flexibility
Specifies an element's height
(Boolean) Specifies whether the element is displayed;
A unique identifier for the element
Names the ID of the element after which this element
should be overlaid; this attribute works only in
Names the ID of the element which this element should
be overlaid before; this attribute works only in
Specifies an element's position within a container in
pixels to the left
Specifies an element's maximum height
Specifies an element's maximum width
Specifies an element's minimum height
Specifies an element's minimum width
Points to a broadcasting element whose state this
(Integer) Specifies the element's order within the
Shows the element's orientation: vertical or
Shows how children should be distributed within this
container: center, end, or start
Shows which of the element's attributes should be
persisted/stored for reuse
Shows the element's position within a list (e.g.,
menuitems in a menu)
Specifies the RDF data root to begin processing (used
Provides style rules for the current element
Specifies an existing template to use for this content
(used in templates)
Specifies a pop up or tooltip ID to be used for this
Specifies text to be displayed in the element's tooltip
(doesn't require a separate tooltip attribute)
Shows the current element's position within a container
in pixels from the top
Specifies the root in the XUL where content processing
begins (used in templates)
Specifies an element's width
Child element in a XUL template structure that draws content
for matched data
The action element
defines the content drawn into the XUL when the rules defined
in a template's conditions structure are met. The
content to be drawn is an action element's child.
template, rule, condition,
Container box for scrolling contents
A box with arrows
that allow scrolling
through its contents. The box scrolls when the user's mouse
hovers over the arrows. It is commonly used in large menus that
overflow a provided space.
Provides arrows for a scrolling area
This element is used to
internally bind the
arrowscrollbox element and it surrounds a
scrollbox area to provide the navigation arrows. The
scrolldir attribute, which can have a value of
up or down, determines the direction of the
Child element in a XUL template that optionally matches in
In contrast to the rule element, which must match to
trigger the action, binding allows you to create an
optional rule for data matching.
action, template, rule,
Substructure in a XUL template that collects the optional
binding rules Additional Attributes None.
Individual bindings must be
defined with a bindings parent to be a part of a valid
action, template, rule,
Generic container and layout element
This element can contain any
type of content and any number of elements. Its default
orientation is horizontal, unless otherwise overridden
by the orient attribute, and the contents are laid out
in the order they appear in the file. The box is the
basic layout unit in a XUL interface. Many, if not most, XUL
elements inherit from box.
Notifies elements when a change occurs in the UI Contained
A broadcaster acts as a host for
detecting changes that occur in the UI and notifying those
elements of the changes via attribute changes. The elements
that use it are said to observe the broadcaster. The observed
attribute is typically the oncommand attribute, but
can be any attribute.
broadcasterset, command, observes
Container for broadcaster elements
The purpose of this nonvisible
element is to group a
set of broadcasters logically. The XUL document can contain one
or multiple sets.
A content widget or frame used
to load in web content for
read-only viewing. This element is used by the main Mozilla
browser, so it handles HTML, XML, and plain text. To load a
page, set the src attribute to a URL. Other features
include the attachment of a context menu that uses the
context attribute and various methods and properties
exposed for web navigation and display.
A widget that activates some functionality when pressed
accesskey, dir, disabled,
dlgType, group, image,
label, orient, type, value
A button typically gives the user
an option to click it to
function call or inline script and is contained in the
onclick attribute or the oncommand event
handler. It can optionally have an image associated with a URL
contained in the image attribute or by using the
list-style-image CSS property. There are various types
of buttons, determined by the type attribute, including
checkbox, menu, menu-button, and
radio. Leave this out for a normal button.
Provides heading for a groupbox element
Contained by groupbox,
This element is most commonly used to provide a text label for
a groupbox by setting the label attribute.
However, it is flexible about other content it can contain,
such as checkboxes or radio buttons.
description, groupbox, label,
Indicates a specified feature's on/off state
accesskey, label, checked
A checkbox appears as a small
box that can be checked on
or off. When checked on or off, the checked attribute
is set to true or false. It can be set
initially for a default value. To associate text with a
checkbox, set the label attribute.
Widget used to choose a color Additional Attributes
type, id, palettename
When activated, this widget presents a choice of colors to the
user in a grid format. The user selects a color by clicking on
it. The palettename attribute determines the displayed
colors. Three values for this attribute represent three types
of palettes: standard, grey, and web.
A column in a grid Contained by columns
column is a column entry in a grid, of which
there can be one or more contained in a columns
element. The content of cells in a column is determined by the
children of each row element.
columns, grid, row, rows
Container for the number of columns in a grid Contains column
The children of this element are one or more column
elements, the number of which determines the actual number of
column, grid, row, rows
Defines functionality that can be called from multiple
sources Contained by commandset
disabled, accesskey, observes,
The command element provides a place to organize
functionality used in more than one place in the interface-from
a context menu, a keyboard shortcut, and a regular menu, for
example. The element is identified and shared by using its
ID value and an interested element's (i.e., a menu
that wants the command) observes attribute. It also
oncommand event handler.
Container for a group of command sets
commandsets no longer need to be contained within a
commands element. Still, the commands group
can help you organize your code and user overlays to import
commands, especially related sets.
A container for multiple command elements Contains command
An invisible, document-level element that acts as a logical
grouping for commands or other command sets.
Defines the conditions within a template rule Contains content, member, triple
Within a template, the conditions,
action, and sometimes the bindings elements
comprise a single rule. The children of the conditions
element must be matched to the processed data for that rule's
action to make content.
template, rule, action,
member, triple, content
Binds variables in a template Contained
The content element is the portion of a template's
conditions element that associates a variable, often
representing a URI (e.g., <content uri="?uri"/>)
with the data.
Box container that displays one child element at a time
Additional Attributes selectedIndex
deck uses the attribute selectedIndex
to determine which child
element to display. The others are hidden until they are
displayed by index. deck is often used dynamically via
the DOM to cycle through child elements, such as buttons.
Holder for block of text that can wrap to multiple lines
The description element replaces
<html:label> and other HTML-namespaced elements
to wrap text in XUL interfaces. Text in a description
can be defined as content with the open and close tags or
provided in the value attribute. Note that the text
does not wrap when placed in the value attribute.
dialog is a version of the window element
built for displaying a
secondary dialog window in the application. Like
window, dialog is the root element in a XUL
file. Event handlers such as ondialogaccept and
ondialogcancel are included as conveniences for
handling user input.
Styled text heading for UI panel
Contained by dialog
This is a formatted horizontal panel that contains text
specified by the title attribute. This element is the
heading that appears at the top of the right panel in the
Mozilla global preferences dialog.
Content area for editable web content
This high-level widget edits text and HTML.
contentDocument is a reference to the document
contained within the editor.
Widget for laying out content in a structured tabular
fashion Contains rows,
The number of column elements
that are placed in rows determines the number of columns and
the content for each row is placed in the row element.
The number of row children must correspond to the number of
column, columns, listbox,
row, rows, tree
Visible widget used on a grippy bar to expand or collapse a
UI region Contained by splitter
grippy appears as a child of a splitter and
provides the little "handle" that opens and closes the
sidebar and other collapsible elements in the
Box with frame surrounding it Contains
The border that appears around and organizes elements in the
interface (e.g., in dialogs where selectable elements are
grouped together); often comes from a groupbox parent.
Box container whose children are laid out horizontally
The hbox element is a shorthand for <box
orient="horizontal">. It is the preferred way to
achieve horizontal orientation in box layout.
Web content area
name, src, type
Like browser, iframe allows you to
display web content, XML, and
other data using the src attribute, but has less
intrinsic browsing functionality available (such as browser
history). You can use any number of iframes in a document.
Display of a supported type image
The XUL image is analogous to the
element. The supported types in Gecko are PNG, JPG, GIF, and
Definition for a keyboard shortcut
Contained by keyset
modifiers, command, key ,
A key is often defined with a commandkey and
a modifier (e.g., P + Ctrl), and uses an
oncommand event handler to fire the given command when
Container for a keyset or group of keysets Contains keyset
This element is used in an overlaid file to contain a group of
platform-specific key sets. It uses the ID attribute
to overlay itself into XUL files that pick up sets of key
Container for one or more key elements Contains key
key elements no longer need to be contained within a
keyset parent. Still, keysets can help organize groups
of keys-particularly related ones.
Simple text display element and label for a control
control, for, accesskey,
This text element can just display text in the UI. Unlike the
description element, the text will not wrap. If you
use it with a control element (the association occurs through
the for attribute, the value of which must match the
element's id) such as a textbox, the focus
moves to the control element when the label is
The menuseparator is a line through the menu that
divides menu items into different groups. You can use the
position attribute on the menuseparator to
make sure it appears in a particular place, or you can use the
common attribute insertAfter.
The observes element observes the state of a
broadcasting element and its attributes. observes can
be a separate element, defined as a child of the interested
observer, or it can be an attribute on any element that wants
to watch changes in a broadcasting element.
Root element in a separate file that contains reusable XUL
Like page, window, dialog, and
wizard, overlay is a XUL document's root
element. Overlay documents contain content blocks that are
overlaid dynamically at runtime into XUL content whose IDs
match theirs. For example, a menupopup with the
ID "file" and a menuitem child in an overlay
adds that new menuitem into any menupopup
with the ID "file" that it finds in the base XUL.
Root element of XUL file loaded in a content frame
page is the root element for a XUL document that is
meant to be loaded within another XUL document, such as a
dialog, overlay, window
Box container as child window
popup is a pop-up window that can be hooked up to any
UI content. It is often used for context menus and invoked by
elements that use its ID attribute in their
popup or context attribute.
Container for popup elements
While not strictly necessary as a container for the
popup element, popupset helps you organize
and overlays groups of popups.
Visual progress indicator of a time-consuming operation
This high-level widget uses its value attribute to
fill in a meter that usually represents how long a particular
task takes. You can change the value attribute
dynamically to update the fill or set the mode to
"undetermined" (as opposed to the default "determined" mode) to
display a busy meter that doesn't chart actual progress.
Single on/off choice represented as selectable circle Contained By radiogroup
selected, group, label,
Within a radiogroup element, a single radio
widget is selected to indicate user choice. radio
elements can also be used singularly to check an option on or
off in the interface.
Framed box for containing radio elements Contains radio
The radiogroup makes all radio elements
within it belong to a single group from which only a single
element can be selected.
A bar that changes the cursor when hovered over to signify that
the bar can be dragged to resize the a window. The
direction attribute specifies which way the window is
resized, and can have values such as topleft,
top, right, and bottomright. For
example, a value of bottomleft resizes the window down
and to the left.
Container for grid cells laid out consecutively Contained By rows
row is a single row in a grid. It is
analogous to the <TR> element in HTML.
Definition for grid rows Contains row
The rows element is a child of the grid
element that contains any number of individual row
elements. It is a sibling of columns within the
grid, row, columns, column
Defines rules for rendering data as XUL
Contained by template
rdf:type, parent, isempty,
The children of the rule element define a rule: the
conditions stated in the conditions element must be
met, the bindings provides optional matching, and the
content in the action element is rendered if the rule
template, action, conditions
Declaration of script used in XUL file
The script element can contain script content (e.g.,
<script>alert("it")</script>) and can also
attribute may also use chrome:// type URLs to point at
Widget for scrolling in a container Contains
curpos, increment, maxpos,
The scrollbar element uses the curpos and
maxpos attributes to determine where the
scrollbarbutton element is drawn within its length.
increment specifies how much the scrollbar should move
on user input. pageincrement specifies how many pages
it should move.
Button used to move position of scrollbar thumb Contained By scrollbar
The scrollbarbutton can use its src attribute
to point to an image that should be drawn over it.
Box for scrolling content
The scrollbox is a regular box with scrollbars that
display automatically when the content inside the box overflows
the size of the box itself.
box, hbox, vbox
Bar between elements
The separator is a
In menus, use menuseparator.
A scrollbar without buttons
The slider element provides simpler user input-a
thumb button and no arrows-for scrolling large
content. Like scrollbar, it uses curpos and
maxpos to display its position.
Blank space separating element
This element is a general-purpose blank space. The use of a
spacer with flex to take up available space
within a box and shrink its siblings is a staple of
the box layout model that XUL uses.
Element for dragging and resizing associated elements
Users can drag a splitter to resize an associated
element or panel that holds content and click a
splitter to collapse the specified element within a
box. To specify which element you manipulate with a
splitter, set this element's collapse
attribute accordingly: before to control the element
before it in the parent; after to control the element
Shows children one on top of one another, all at the same
In contrast to the deck, stack is a
box that displays all
of its children at once. You can use a stack to
display elements and blend them together, as when you use
different stack children as background images and visual
Box container for status elements
In Mozilla, the statusbar is placed at the bottom of
the main windows, where it is hooked up to the
window.status property and can be used to display
status text. It is divided into panels, one of which is the
taskbar where some main component icons are displayed.
Single unit of a statusbar Contained by
statusbarpanels are subdivisions of the
statusbar at the bottom of main browser windows. They
can contain other content, text using the label
attribute and an image using the list-style-image CSS
Holder of localized properties for use in script Contained by stringbundleset
Like the script element, stringbundle uses
the src attribute to locate a file for use. In this
case, the files is a string bundle (properties file) that is
used for holding localizable strings used in the UI.
Container for stringbundle elements
stringbundleset is an optional container for groups of
stringbundle elements. Like commandset use
for commands, stringbundle organizes sets of related
stringbundles, particularly when those sets are
overlaid into the UI.
A single selectable tab of a tabbox
Contained by tabs
crop, disabled, label,
Individual tabs correspond to panels in the tabbox.
tabbox, tabpanel, tabpanels,
Box container for tab panels Contains tabs,
tabbox is the container in which the tabs and
tabpanels are defined. It lays out children like a regular box
to the orientation specified, which defaults to vertical. The
panels are defined in the tabpanels element.
tab, tabpanel, tabpanels,
Tabbed holder for a set of web content views
tabbrowser derives from the browser widget.
Like browser, it lets you view HTML pages and other
content. tabbrowser has additional methods on it that
manage tabbed windows (e.g., addTab,
A single panel of a tabbox Contained by
Contains XUL content
A tabpanel is one of the special box elements
that correspond to a particular tab within a tabbox.
It can hold any XUL content to be displayed on a particular tab
tab, tabbox, tabpanels,
Container for tabpanel elements
Contained by tabbox
The tabpanels container corresponds to the
tabs element that holds all individual tabs, and is a
container for the tabpanel associated with that tab.
This child panel can be either an optional tabpanel
element that holds XUL content, or just the XUL content.
tab, tabbox, tabpanel, tabs
Container for tab elements Contained by
This element is a required container for individual tabs.
tab, tabbox, tabpanel,
A high-level widget used to build content dynamically from
data Contains rule
The template element has several rule
children, each of which defines rules for matching data in a
datasource and rendering that data as XUL content. A template
is defined within the regular XUL content.
textbox is a user-input element. Expand it beyond its
single-line default by setting multiline to
true. You can also disable it, and set its size.
Object used to move content in scrollable area
The thumb element appears in the slider and
scrollbar, scrollbarbutton, slider
Holder of buttons for quick-access UI functionality Contains toolbarbutton,
grippyhidden, tborient, tbalign,
Toolbars usually have horizontal orientation at the top of an
application window, but this does not have to be the case. You
can use the orient attribute to set it vertically and
run its content down and not across. While the most common
content for a toolbar is buttons and menus, it can contain any
type of content.
Specially adapted button for use in a toolbar Contained by toolbar
accesskey, dir, disabled,
dlgType, group, image,
label, orient, type, value
This is a button designed especially for a toolbar, with
special stylings for this purpose. The current theme determines
a toolbarbutton's look. See toolbar.css in the
theme JARs to view styles and bindings for this common button.
toolbar, toolbarseparator, toolbox
Visible separator for elements contained in a toolbar Contained by toolbar
Like the menuseparator in a menu,
toolbarseparator divides elements in a
toolbar, toolbarbutton, toolbox
Optional container for menu bars and toolbars Contains menubar,
toolbox can organize several toolbars into one parent
element. toolbox inherits from box, so you
can use box layout attributes to control the positioning and
layout of toolbars within.
Pop-up window for context-sensitive help
The tooltip element defines text to be displayed. It
is associated by ID with elements that want to use its
content in the pop ups they display. However, elements can also
use the tooltip attribute to display a tooltip more
directly for themselves.
Hierarchical holder of information represented as rows Contains treecols,
The tree element is a high-level widget that displays
tabular data. More complex than listbox, tree
allows you to define nested content, different views, and data
display, and provides methods that sort and manipulate its
The treecell contains the actual content to be
displayed in a tree. That content can be in the form of a value
for the label attribute. It can also be content in the
treecell's start and end tags (e.g.,
The window is an XUL document's basic root element.
The contents of a XUL document, including the script
elements, commands, keys, and broadcasters, appear as children
of the window. Overlays, the XML and stylesheet-processing
instructions, and the DOCTYPE declaration appear
before and outside a document's root element. The window should
have a unique ID and use minimally, the XUL namespace to
identify markup elements as XUL: xmlns="
Window used to step though a task
Like dialog, wizard is a specialized version
of the window root element. It easily creates
multistep dialog windows that help users set up accounts,
password data, and other customizable information. A
wizard contains one or more wizardpages.
wizardpage, window, dialog
A single panel (step) of a wizard
Contained by wizard
The wizardpage can contain
arbitrary XUL content.
One or more wizardpages are defined in a wizard
window. The intrinsic functionality of a wizard window allows
you to step through wizardpages by setting the
onpageshow and onpagecancel event handlers on
individual pages and using the onwizardaccept and
onwizardcancel event handlers on
wizard parent element.
wizard, window, dialog
XBL Element Set
The XBL 1.0 specification published on the
mozilla.org web site appeared to be a beacon for application
developers. Because the specification was available early in
the development process, XBL seemed to be a tighter, more
comprehensible language that was easier to learn and master
than XUL. Since then, XBL development has strayed from the
specification quite a bit, however, and now people consider XBL
as opaque as XUL without good documentation that helps people
learn and to create a roadmap for use based on continuing
This reference section tries to capture basic elements and
attributes in XBL. Because it binds rather than creates
content, XBL is smaller and inherently more formal than XUL.
Nonetheless, as you will see, the language has quite a bit of
range and complexity. Each entry in this section describes the
XBL element and its purpose, its position in the hierarchy
(i.e., which elements it contains and which elements it is
contained by), and lists the element's attributes. Chapter 7 introduces XBL and shows how to
use it. However, once you are familiar with the basics of XBL,
you can consult this reference to find the XBL items you
A single XBL binding Contains
handlers Contained by bindings
Attributes id, extends, display,
This element defines a single XBL binding that can be attached
to a bound document. It enables the creation of self-contained
widgets that can contain content, implementation, and handlers.
This element must have an id attribute value; this
value is how it is associated-either through a CSS style rule
or a DOM method-to the bound element that acts a placeholder
for the binding that is filled out during attachment. The
extends attribute inherits from a XUL element or
An XBL document's root element Contains
stylesheet Attributes id, type
This root container can hold one or more bindings, represented
by the <binding> markup. The Mozilla code base
references an XBL document through its name, which has an
.xml extension. The document id has to be
unique. The other children of <bindings> are
<resources> and <stylesheet>,
which contain style and image information to be used by the
method Contained by method
This element is designed as a holder for the method's script.
It defines a logical block and differentiates the script from
the parameter element, which also lies within the method.
Script contained in a method has to be in a body element, which
in turn should contain a CDATA section. <![CDATA[...]]>
otherwise conflict with the XML parser.
Insertion point for children of a bound element, or
inherited binding Contained by content
Attributes id, includes,
This element needs to be placed in the binding content at the
point where you want to place children of the bound element
when the binding is rendered. If the children tag contains its
own elements, then that element will be default content. If the
element the binding attaches to contains children, the default
content is ignored.
Container for code to be executed when a binding is created
Contained by implementation
This behavior element is contained in the
implementation element and holds code that will be
carried out when the binding attachment first takes place. If
you picture a binding as an object, your vision is
initialization code. The code can alternatively be contained as
the action attribute's value.
Container for anonymous content to be inserted into a bound
document Contains children; any
markup content Contained by binding
This container for the anonymous binding content is placed at
the point where the element using it is in the bound document.
children is the only XBL element allowed as a child of
content. All other content is either HTML or XUL,
depending on the context in which you use the binding.
Container for code to be executed when a binding is
destroyed Contained by implementation
Contained in the binding's implementation, this
element carries out code placed within it when the binding is
detached or destroyed. This detachment and destruction occurs
when the bound element matches a different style rule, the
bound element is removed from the document, or the document is
closed or destroyed. The code can alternatively be a value of
the action attribute.
Insertion point for bound elements in anonymous content Contained by content
This element allows placement of a
bound element at a point in
the anonymous content (other than the top level that is the
default for it). To use it, place it at the point in the
binding content where you want the bound element to be
rendered. This element is part of the XBL 1.0 specification,
but is not yet implemented.
Holder property for simple data
Contained by implementation
Attributes class, idname, readonly
This element is a simple data holder and an alternative to a
property. It differs from property because it
does not use a getter or setter. It is useful
for holding static/constant values for use elsewhere in the
Script access point for an element's property Contained by property
Attributes id, type
This element executes script when the property it is
attached to is accessed. This is most commonly used to return
the value of the property.
Single event handler for an XBL element
Contained by handlers Attributes
id, event, action, phase,
attachto, button, modifiers,
keycode, charcode, type
This element defines an
event handler on a binding that reacts to a mouse movement or
keyboard press on the binding. Some executed code is contained
in the handler. This code can go directly under the element or
in the action attribute. The attachto
attribute determines where the event is received-in the
element, document, or window. The default receiver is the bound
element. The phase attribute has three possible
values-capturing, bubbling, and target-that determine which
part of the event flow and default is bubbling The
button, charcode, keycode, and
modifiers attributes act as filters. For example, the
value of button must match the label of the button
that triggers the event. The section "Event Attributes," later
in this chapter, contains a complete list of events.
Container for event-handler elements
Contained by binding
Attributes id, type
This element is placed under the binding element and contains
the event handlers used by that binding.
An image resource in a binding
Contained by resources Attributes
This element preloads images; all included image resources are
loaded when the binding is used.
Container for binding methods and properties Contains method,
property Contained by binding
Attributes id, name, implements,
This element holds a binding's <method> and
<property> elements that, as a whole, make up a
binding's behavior. The optional implements attribute
can hold a list of comma-separated XPCOM interfaces that are
used by the implementation's methods and properties. The
optional type attribute represents the scripting
only implemented language that scripts Mozilla's XPFE.
Script function to be accessed on a binding object Contains body,
parameter Contained by implementation
Attributes id, name, type
This element supplies a single function to the bound element or
binding object. The most important attribute is name,
which calls the method and is compulsory. The method can have
the <parameter> element define parameters. A
<body> element contains the code that will be
body, implementation, parameter
Single paramter declaration for a method Contained by method
Attributes id, name
Each <parameter> element
lists a single parameter
for a method. The name attribute is compulsory and is
used by the method code to access the parameter's value.
Definition of a single binding object property Contains getter,
setter Contained by implementation
Attributes id, name, readonly,
onget, onset, element,
attribute, property, type
This element defines a bound element's or binding object's
property. The name attribute is compulsory because it accesses
the property. <getter> and
<setter> child elements are optional and get and
set the property value, respectively. The onget and
onset attributes are alternatives. The
element attribute is a reference to the anonymous
content's node id. When the property is set, it is
also set on that node. The property can be set to
field, getter, setter
Container for list of resources that can be used by a
binding Contains image,
stylesheet Contained by binding
Along with <content>,
<implementation>, and <handlers>,
this element is one of the binding element's top-level
children. It defines the binding's resources. Stylesheets and
images are the current resources available to bindings. It is
common for a single binding to contain all resources, which
another binding can then inherit.
Change a binding property's value
Contained by property Attributes
This element commonly sets the
value of the property, and
optionally executes other script for the property.
Captures an external stylesheet for use by anonymous content
Contained by resources Attributes src
This element defines a stylesheet
to be used by a binding.
An element's bound element and explicit children as well as
anonymous content can use stylesheet. The src
attribute has a URL value that points to the stylesheet. If you
use the xml-stylesheet processing instruction on a
binding, it can be applied only at a document level. It
cannot be applied at a binding level, which is covered by the
Events are built-in constructs that
constructs have been crucial to DHTML for many years. They are
designed to capture and handle actions triggered by the user,
such as a mouse click or the pressing of a certain key. Event
handlers have been brought into the world of XUL/XBL and allow
dynamic, interactive Mozilla applications. In XUL, events can
exist on any attribute, and typically bubble up through the
hierarchy. An event attribute of the empty string generates a
JS strict warning (if this is turned on in the user
preferences), and removing an event attribute from a XUL event
does not remove the event listener (although it does in
The events are listed in the form
on<eventName>, which is how events are used as
attributes on XUL elements. The attribute contains lines of
script or a function call, when a script is too long. Here is
an example of an event attribute that carries out a function
each time a menulist value changes:
The syntax is different in XBL. Here the event is specified
as the value of the name attribute, which is attached
to the handler element. One or more of these elements
can optionally be contained in a binding. The given value is
the event's name, minus the "on" prefix. The executed code is
contained in the body of the handler inline, or in the
action attribute, as shown in this example:
<handler name="focus" action="this.activate( )"/>
Chapter 7 provides a closer
look at events in XBL. All the events listed here are available
for use in XUL and XBL.
Usually used for input element
such as a textbox,
this event triggers actions when the focus leaves a widget.
This action is the opposite of the onfocus event.
This event is activated when the
attributes being "listened to" are changed. It can be placed on
the observes element, which is placed in an element
that is being listened to, or on an element that uses the
observes attribute. Refer to Chapter 3 for more information on
broadcasters and observers.
This event is fired when the value
of a particular
widget's (element) attribute that uses it changes. A menulist
selection is one example. It can also be used on an observer
when the attribute the observer listens to changes.
Relevant to any element that can be
clicked on, such as
a button, this event occurs when the mouse is clicked on an
element that uses it. For some widgets that use this event,
using oncommand attribute (which covers clicking) is
recommended to avoid excluding keyboard selection. Here are
some commonly used properties associated with this event:
This property tells you which mouse button was clicked.
Its values are 0 for the left mouse button, 1 for middle
button, and 2 for right button.
This property counts how many clicks occur over an
element before the mouse is moved. The values for this
property start at 1 and increment for every click.
Instead of catching double clicks this way, you can use the
Usually used to evaluate script when
a window is closed
with the close button or via a window.close( ) call,
evaluates to "true," the window closes; otherwise, the window
This event is sent when an element
Activation can mean more than one thing. You can activate by
selecting a menu item, hitting Enter on the keyboard when an
element has focus, or clicking on an element. Use this event if
you want to cover the most possibilities available for
This event is used on a command set
one of its commands is updated, such as when its disabled
This event occurs when a request
for a context menu-usually a right click, depending on the
platform-and is activated before the menu appears.
oncontextmenu is similar to the oncreate and
Called on a popup element, this event carries
out some code
before the popup appears. It can be useful for
dynamically determining which items appear in the resulting
This event cccurs when there are two
mouse clicks on an element. You could also use the
onclick event's detail property with a value of 2.
Designed to carry out functions after a
disappears, this event can be used with a popup or
When a drag and drop session completes
and the user
releases the mouse over the element, this event is triggered.
The accessed code can acknowledge the drop and carry out an
operation after accepting the dragged object.
The ondragenter event is sent when the
first moves over an element during a drag and drop session.
This element differs from the mouseover event because
it occurs during a drag and drop session.
This element is activated when the
away from an element during a drag and drop session. It occurs
after the ondragdrop event.
The event is triggered at the beginning
drag and drop session when the user holds the mouse button on
the dragged object.
When an object is dragged over an
event is commonly used by an element to determine whether the
drop can occur.
This event is triggered when an element
receives focus in
the UI. When it has focus, it can accept keyboard events. The
opposite of onfocus is onblur.
Used on textbox elements, this event is
displayable keys change the text in the box.
This event occurs when the user presses
a key on an
element that has focus and the key press is not released.
Similar to onkeydown, this event occurs
on a focused
element when a key is pressed. The distinction is that with
this event, the key is released soon after being pressed. The
check for which key was pressed can be using the
This event is activated when the key press
is released on a
This event is activated on a XUL window
or dialog after it has
fully loaded. It should be attached to the elements of the same
name. It can also be attached to image elements or
elements that display images.
This event occurs when a mouse
on an element but not released.
A reoccuring event, this event
fires when a mouse moves over an element.
When the mouse moves away
element, this event occurs.
A hover event, this event fires
mouse initially moves into an element's space.
This event occurs when a
mouse is clicked
and the button is released on an element immediately
Relating to a box or layout
event is activated when the content contained in the box is too
big for its given size and and "falls over the edge."
This element is called when an
element's overflow state changes. This can indicate that it did
not have enough space to display it contents fully but does
now, or that it does not have enough space and thus overflowed.
This event is activated on a popup
pop-up window is hidden.
This event is activated on a popup
This event is activated on a popup
before it opens. It is commonly used to dynamically set the
contents of the popup when it is requested in the UI.
This is event is activated on a popup
When you activate or select an
in a widget, this event is fired. This event applies to such
widgets as trees and listboxes.
This event can be used in tandem
onoverflow event. It is activated when a layout
element's content changes to fit into its given constraints
after being in an overflow state.
This event is activated when a window
or dialog closes.
It should be used on the root elements of these