Appendix C
Programmer's Reference
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
language is 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 attributes
false
Attribute | Description |
align | Specifies how child elements are aligned: baseline, center, end, start, or stretch |
allowevents | (Boolean) Specifies whether events should be passed to the child elements |
class | The element class of the ; often used for class-based style rules |
collapsed | (Boolean) Specifies whether the element is collapsed or displayed; defaults to false |
container | (Boolean) Specifies whether the element can have child elements |
containment | Used in templates; points to RDF property represented by this XUL element |
context | Points to the context menu that this element should use |
datasources | Used in templates; points to the RDF data that gets processed |
debug | Used for debugging XUL; adds borders to make the element and its layout easily visible |
dir | Specifies the direction of the children: normal or reverse |
empty | (Boolean) Used for template; specifies that the container has no children |
equalsize | Specifies whether the children should be of the same size: always or never |
flex | Provides an integer or percent value that specifies the flexibility of an element relative to its siblings within a container |
flexgroup | Provides an integer that can group elements and give them the same degree of flexibility |
height | Specifies an element's height |
hidden | (Boolean) Specifies whether the element is displayed; defaults to |
id | A unique identifier for the element |
insertafter | Names the ID of the element after which this element should be overlaid; this attribute works only in overlays |
insertbefore | Names the ID of the element which this element should be overlaid before; this attribute works only in overlays |
left | Specifies an element's position within a container in pixels to the left |
maxheight | Specifies an element's maximum height |
maxwidth | Specifies an element's maximum width |
minheight | Specifies an element's minimum height |
minwidth | Specifies an element's minimum width |
observes | Points to a broadcasting element whose state this element observes |
ordinal | (Integer) Specifies the element's order within the parent |
orient | Shows the element's orientation: vertical or horizontal |
pack | Shows how children should be distributed within this container: center, end, or start |
persist | Shows which of the element's attributes should be persisted/stored for reuse |
position | Shows the element's position within a list (e.g., menuitems in a menu) |
ref | Specifies the RDF data root to begin processing (used in templates) |
style | Provides style rules for the current element |
template | Specifies an existing template to use for this content (used in templates) |
tooltip | Specifies a pop up or tooltip ID to be used for this element |
tooltiptext | Specifies text to be displayed in the element's tooltip (doesn't require a separate tooltip attribute) |
top | Shows the current element's position within a container in pixels from the top |
uri | Specifies the root in the XUL where content processing begins (used in templates) |
width | Specifies an element's width |
action
Child element in a XUL template structure that draws content for matched data
Additional Attributes
None.
Description
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.
See Also
template, rule, condition, binding
arrowscrollbox
Container box for scrolling contents
Additional Attributes
None.
Description
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. See Also
autorepeatbutton, scrollbox
autorepeatbutton
Provides arrows for a scrolling area
Additional Attributes
scrolldir
Description
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 arrows.
See Also
arrowscrollbox, scrollbox
binding
Child element in a XUL template that optionally matches in the data
Additional Attributes
predicate, object, subject, template, rule, condition, action, bindings
Description
In contrast to the rule element, which must match to trigger the action, binding allows you to create an optional rule for data matching.
See Also
action, template, rule, condition, bindings
bindings
Substructure in a XUL template that collects the optional binding rules
Additional Attributes
None.
Description
Individual bindings must be defined with a bindings parent to be a part of a valid XUL template.
See Also
action, template, rule, condition, binding
box
Generic container and layout element
Additional Attributes
None.
Description
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.
See Also
hbox, vbox
broadcaster
Notifies elements when a change occurs in the UI
Contained by
broadcasterset
Additional Attributes
checked, accesskey, oncommand, value, label, disabled
Description
A broadcaster acts as a host for
other elements, 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.
See Also
broadcasterset, command, observes
broadcasterset
Container for broadcaster elements
Contains
broadcaster
Additional Attributes
None.
Description
The purpose of this nonvisible element is to group a set of broadcasters logically. The XUL document can contain one or multiple sets.
See Also
broadcaster, commandset
browser
Web-content container
Additional Attributes
src, name, content, onclick, type, disablehistory, disablesecurity
Description
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.
See Also
editor, iframe
button
A widget that activates some functionality when pressed
Additional Attributes
accesskey, dir, disabled, dlgType, group, image, label, orient, type, value
Description
A button typically gives the user
an option to click it to carry out JavaScript code routine(s). This code
can be a 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.
See Also
autorepeatbutton, toolbarbutton
caption
Provides heading for a groupbox element
Contained by
groupbox, radiogroup
Additional Attributes
None.
Description
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.
See Also
description, groupbox, label, radiogroup
checkbox
Indicates a specified feature's on/off state
Additional Attributes
accesskey, label, checked
Description
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.
See Also
radio
colorpicker
Widget used to choose a color
Additional Attributes
onchange, type, id, palettename
Description
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.
JavaScript Methods and Properties
color
column
A column in a grid
Contained by
columns
Additional Attributes
None.
Description
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.
See Also
columns, grid, row, rows
columns
Container for the number of columns in a grid
Contains
column
Additional Attributes
None.
Description
The children of this element are one or more column elements, the number of which determines the actual number of grid columns.
See Also
column, grid, row, rows
command
Defines functionality that can be called from multiple sources
Contained by
commandset
Additional Attributes
disabled, accesskey, observes, label, checked
Description
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 typically calls a JavaScript command from its oncommand event handler.
See Also
commands, commandset
commands
Container for a group of command sets
Additional Attributes
None.
Description
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.
See Also
command, commandset
commandset
A container for multiple command elements
Contains
command
Additional Attributes
oncommandupdate, commandupdater, events
Description
An invisible, document-level element that acts as a logical grouping for commands or other command sets.
See Also
command, commands
conditions
Defines the conditions within a template rule
Contains
content, member, triple
Additional Attributes
None.
Description
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.
See Also
template, rule, action, member, triple, content
content
Binds variables in a template
Contained by
conditions
Additional Attributes
None.
Description
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.
See Also
template, rule, action, conditions, member, triple
deck
Box container that displays one child element at a time
Additional Attributes
selectedIndex
Description
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.
See Also
stack
description
Holder for block of text that can wrap to multiple lines
Additional Attributes
crop, onmouseover, onmouseout, value
Description
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.
See Also
caption, label
dialog
Root element for secondary XUL window
Additional Attributes
ondialogaccept, ondialogcancel, ondialoghelp, onunload, onload, title, buttons, windowtype, persist, y, x, screenY, screenX
Description
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.
See Also
window, page
dialogheader
Styled text heading for UI panel
Contained by
dialog
Additional Attributes
title, description
Description
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.
See Also
window, dialog
editor
Content area for editable web content
Additional Attributes
src
Description
This high-level widget edits text and HTML. contentDocument is a reference to the document contained within the editor.
JavaScript Methods and Properties
contentDocument
See Also
browser, iframe
grid
Widget for laying out content in a structured tabular fashion
Contains
rows, columns
Additional Attributes
None.
Description
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 columns.
See Also
column, columns, listbox, row, rows, tree
grippy
Visible widget used on a grippy bar to expand or collapse a UI region
Contained by
splitter
Additional Attributes
None.
Description
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 interface.
groupbox
Box with frame surrounding it
Contains
caption
Additional Attributes
None.
Description
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.
See Also
box
hbox
Box container whose children are laid out horizontally
Additional Attributes
None.
Description
The hbox element is a shorthand for <box orient="horizontal">. It is the preferred way to achieve horizontal orientation in box layout.
See Also
box, vbox
iframe
Web content area
Additional Attributes
name, src, type
Description
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. See Also
browser, editor
image
Display of a supported type image
Additional Attributes
src
Description
The XUL image is analogous to the HTML <img> element. The supported types in Gecko are PNG, JPG, GIF, and BMP.
key
Definition for a keyboard shortcut
Contained by
keyset
Additional Attributes
modifiers, command, key , keycode, observes
Description
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 invoked.
See Also
keyset
keybinding
Container for a keyset or group of keysets
Contains
keyset
Additional Attributes
None.
Description
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 bindings.
See Also
key, keyset
keyset
Container for one or more key elements
Contains
key
Additional Attributes
None.
Description
key elements no longer need to be contained within a keyset parent. Still, keysets can help organize groups of keys-particularly related ones.
See Also
key, keybinding
label
Simple text display element and label for a control element
Additional Attributes
control, for, accesskey, crop, value
Description
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 clicked.
See Also
caption, description
listbox
Used for display of a flat list of items
Additional Attributes
datasources, sortResource, sortDirection, rows, seltype, ref
Description
listbox is a lightweight tabular display widget. Unlike tree, it cannot handle nested rows. It does support multiple columns, however. It is easy to use and renders content very quickly.
See Also
listcell, listcol, listcols, listhead, listheader, listitem
listcell
Single cell of a listbox
Contained by
listitem
Additional Attributes
label, flexlabel, crop, disabled, image, checked
Description
The listcell is the element within a listbox that actually displays data.
See Also
listbox, listcol, listcols, listheader, listitem
listcol
Listbox column definition
Contained by
listcols
Description
This element represents a column in a listbox.
See Also
listbox, listcell, listcols, listheader, listitem
listcols
Container for listbox columns (listcol)
Contained by
listbox
Contains
listcol
Description
This element contains any number of individual listbox columns.
See Also
listbox, listcell, listcol, listheader, listitem
listhead
Container for column header in list boxes (listheader)
Contained by
listbox
Contains
listheader
Description
The listhead element is analogous to the HTML thead element, and contains the header cells for an XUL listbox table.
See Also
listbox, listcell, listcol, listcols, listheader, listitem
listheader
Text header for listbox column
Contained by
listhead
Additional Attributes
sortActive, sortDirection, resource, sortable
Description
The listheader element displays the header text.
See Also
listbox, listcell, listcol, listcols, listhead, listitem
listitem
Listbox row definition
Contained By
listbox
Contains
listcell
Additional Attributes
value, description, accesskey, label, context, type, name
Description
A listitem is a row in a listbox. The number of listcell children corresponds to the number of columns in the listbox.
See Also
listbox, listcell, listcol, listcols, listhead, listheader
member
Matches container relationships in which the parent element is given by a container element and the child by a child element
Additional Attributes
container, child
Description
The member element
is part of the conditional structure in a XUL template. It creates a rule
by which parent-child relationships are matched and used as a basis for drawing
content in the XUL. See Also
conditions, rules, bindings, template
menu
A menu element for containing menu items
Additional Attributes
label, accesskey, disabled, image, disabled
Description
menu is the basic menu widget. It's often contained in a menubar, but may appear elsewhere. The actual menuitems are defined within a menupopup that is usually the direct child of menu.
See Also
menubar, menubutton, menuitem, menulist, menupopup, menuseparator
menubar
Containing element for one or more menus
Contains
menu
Additional Attributes
None.
Description
menubar is a special box for containing menus (though it can include other content). By default it has a grippy for expanding and collapsing the menubar.
See Also
menu, menubutton, menuitem, menulist, menupopup, menuseparator, grippy
menuitem
Single selectable choice in a menu
Contained by
menupopup
Additional Attributes
label, accesskey, crop, image, disabled, checked
Description
The menuitem is the basic element used to display a single item in a menu (e.g., <menuitem label="File"/>).
See Also
menu, menubar, menubutton, menulist, menupopup, menuseparator
menulist
Drop-down list of selectable items
Contains
menupopup
Additional Attributes
None.
Description
The menulist displays a list of menuitems, the selected one of which is displayed in the menulist itself. It is a type of drop-down menu.
See Also
menu, menubar, menubutton, menuitem, menupopup, menuseparator
menupopup
Pop-up container for menu items
Contained By
menu, menubutton, menulist
Contains
menuitem
Additional Attributes
popupalign, datasources, onpopupshowing, sortResource, onpopuphiding, sortDirection, context, position, popupanchor, ref
Description
The menupopup contains the actual menu items defined for a menu and acts much like the popup element to show the window with a list of choices.
See Also
popup, menu, menubar, menubutton, menuitem, menulist, menuseparator
menuseparator
Line separating menu items
Contained By
menupopup
Additional Attributes
type
Description
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.
See Also
menu, menubar, menubutton, menuitem, menulist, menuspopup
observes
Broadcast event and attribute listener
Additional Attributes
element, attribute, onbroadcast
Description
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. See Also
broadcaster
overlay
Root element in a separate file that contains reusable XUL content
Additional Attributes
xmlns, title
Description
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.
See Also
page, window
page
Root element of XUL file loaded in a content frame
Additional Attributes
context, headertitle, onload, onunload, title, xmlns
Description
page is the root element for a XUL document that is meant to be loaded within another XUL document, such as a preference panel.
See Also
dialog, overlay, window
popup
Box container as child window
Additional Attributes
onpopupshowing, onpopuphiding
Description
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.
See Also
menupopup, popupset
popupset
Container for popup elements
Additional Attributes
None.
Description
While not strictly necessary as a container for the popup element, popupset helps you organize and overlays groups of popups.
See Also
popup
progressmeter
Visual progress indicator of a time-consuming operation
Additional Attributes
value, mode
Description
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.
radio
Single on/off choice represented as selectable circle
Contained By
radiogroup
Additional Attributes
selected, group, label, accesskey, value
Description
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.
radiogroup
Framed box for containing radio elements
Contains
radio
Additional Attributes
disabled
Description
The radiogroup makes all radio elements within it belong to a single group from which only a single element can be selected.
resizer
Window-resizing element
Additional Attributes
direction
Description
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.
See Also
window
row
Container for grid cells laid out consecutively
Contained By
rows
Additional Attributes
None.
Description
row is a single row in a grid. It is analogous to the <TR> element in HTML.
See Also
grid, rows
rows
Definition for grid rows
Contains
row
Additional Attributes
None.
Description
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.
See Also
grid, row, columns, column
rule
Defines rules for rendering data as XUL
Contained by
template
Additional Attributes
rdf:type, parent, isempty, iscontainer
Description
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 is matched.
See Also
template, action, conditions
script
Declaration of script used in XUL file
Additional Attributes
src, type
Description
The script element can contain script content (e.g., <script>alert("it")</script>) and can also import scripts in JavaScript files, in which case the src attribute is used. The type for JavaScript is application/x-javascript, and the src attribute may also use chrome:// type URLs to point at JavaScript in the chrome.
scrollbar
Widget for scrolling in a container
Contains
scrollbarbutton, slider
Additional Attributes
curpos, increment, maxpos, pageincrement
Description
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.
scrollbarbutton
Button used to move position of scrollbar thumb
Contained By
scrollbar
Additional Attributes
sborient, type
Description
The scrollbarbutton can use its src attribute to point to an image that should be drawn over it.
scrollbox
Box for scrolling content
Additional Attributes
crop
Description
The scrollbox is a regular
box with scrollbars that display automatically when the content inside the
box overflows the size of the box itself. See Also
box, hbox, vbox
separator
Bar between elements
Additional Attributes
None.
Description
The separator is a general-purpose divider. In menus, use menuseparator.
See Also
menuseparator
slider
A scrollbar without buttons
Additional Attributes
curpos, increment, maxpos, pageincrement
Description
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.
See Also
scrollbar, scrollbarbutton
spacer
Blank space separating element
Additional Attributes
None.
Description
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.
splitter
Element for dragging and resizing associated elements
Additional Attributes
persist, state
Description
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 after it.
See Also
grippy, toolbar
stack
Shows children one on top of one another, all at the same time
Description
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 layers.
See Also
deck, box
statusbar
Box container for status elements
Contains
statusbarpanel
Additional Attributes
None.
Description
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.
See Also
statusbarpanel
statusbarpanel
Single unit of a statusbar
Contained by
statusbar
Additional Attributes
persist, label
Description
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 style rule.
See Also
statusbar
stringbundle
Holder of localized properties for use in script
Contained by
stringbundleset
Additional Attributes
src
Description
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. See Also
stringbundleset
stringbundleset
Container for stringbundle elements
Contains
stringbundle
Additional Attributes
None.
Description
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.
See Also
stringbundle
tab
A single selectable tab of a tabbox
Contained by
tabs
Additional Attributes
accesskey, crop, disabled, label, image
Description
Individual tabs correspond to panels in the tabbox.
See Also
tabbox, tabpanel, tabpanels, tabs
tabbox
Box container for tab panels
Contains
tabs, tabpanels
Additional Attributes
None.
Description
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.
See Also
tab, tabpanel, tabpanels, tabs
tabbrowser
Tabbed holder for a set of web content views
Additional Attributes
contentcontextmenu, contenttooltip
Description
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, enterTabbedMode).
See Also
browser
tabpanel
A single panel of a tabbox
Contained by
tabpanels
Contains
XUL content
Additional Attributes
None.
Description
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 panel.
See Also
tab, tabbox, tabpanels, tabs
tabpanels
Container for tabpanel elements
Contained by
tabbox
Contains
tabpanel, box
Additional Attributes
None.
Description
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.
See Also
tab, tabbox, tabpanel, tabs
tabs
Container for tab elements
Contained by
tabbox
Contains
tab
Additional Attributes
None.
Description
This element is a required container for individual tabs.
See Also
tab, tabbox, tabpanel, tabpanels
template
A high-level widget used to build content dynamically from data
Contains
rule
Additional Attributes
xmlns:nc, xmlns:chrome
Description
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
Accepts text input from user
Additional Attributes
multiline, maxlength, disabled, readonly, type, size
Description
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.
See Also
label
thumb
Object used to move content in scrollable area
Additional Attributes
sborient
Description
The thumb element appears in the slider and the scrollbar.
See Also
scrollbar, scrollbarbutton, slider
toolbar
Holder of buttons for quick-access UI functionality
Contains
toolbarbutton, toolbarseparator
Additional Attributes
grippyhidden, tborient, tbalign, tbpack
Description
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. See Also
toolbarbutton, toolbarseparator, toolbox
toolbarbutton
Specially adapted button for use in a toolbar
Contained by
toolbar
Additional Attributes
accesskey, dir, disabled, dlgType, group, image, label, orient, type, value
Description
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.
See Also
toolbar, toolbarseparator, toolbox
toolbarseparator
Visible separator for elements contained in a toolbar
Contained by
toolbar
Additional Attributes
None.
Description
Like the menuseparator in a menu, toolbarseparator divides elements in a toolbar.
See Also
toolbar, toolbarbutton, toolbox
toolbox
Optional container for menu bars and toolbars
Contains
menubar, toolbar
Additional Attributes
None.
Description
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.
See Also
menubar, toolbar
tooltip
Pop-up window for context-sensitive help
Additional Attributes
noautohide, onpopupshowing, onpopuphiding, position
Description
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.
tree
Hierarchical holder of information represented as rows
Contains
treecols, treechildren
Additional Attributes
multiple, datasources, enableColumnDrag, containment, sortResource, sortDirection, border, seltype, sortActive, flags, context, persist, hidecolumnpicker
Description
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 contents. See Also
treecell, treechildren, treecol, treecols, treeitem, treerow
treecell
A single cell in a tree
Contained by
treerow
Additional Attributes
src, indent, observes, url, value, label, sortActive, sortDirection, tag, mode, resource, allowevents, properties
Description
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., <treecell>data</treecell>).
See Also
tree, treechildren, treecol, treecols, treeitem, treerow
treechildren
The main body of a tree; a container for treeitems
Contains
treeitem
Contained by
tree
Additional Attributes
open
Description
The treechildren element defines the subset of the tree where the content is actually contained (in contrast to treecols, which defines aspects of the layout).
See Also
tree, treecell, treecol, treecols, treeitem, treerow
treecol
A single column of a tree
Contained by
treecols
Additional Attributes
sort, resource, primary, sortSeparators, label, sortActive, sortDirection, hideheader, accesskey, type
Description
The treecol typically does not contain content. Instead, it defines the header for the columns whose contents are defined in the treerows.
See Also
tree, treecell, treechildren, treecols, treeitem, treerow
treecols
Container for tree columns
Contained by
tree
Contains
treecol
Additional Attributes
None.
Description
This element is a container for a group of treecol elements, or columns, in a tree. A tree should have only one treecols.
See Also
tree, treecell, treechildren, treecol, treeitem, treerow
treeitem
A treerow container
Contained by
treechildren
Contains
treerow
Additional Attributes
rdf:type, container, open
Description
The treeitem element is a container for a treerow, and makes treerow a selectable element within the tree.
See Also
tree, treecell, treechildren, treecol, treecols, treerow
treerow
A single row of a tree
Contained by
treeitem
Contains
treecell
Additional Attributes
properties
Description
Contained within a treeitem, this element represents a single row of a tree.
See Also
tree, treecell, treechildren, treecol, treecols, treeitem
triple
Substructure of a template that matches RDF statements in the data
Additional Attributes
predicate, object, subject
Description
The children of triple-predicate, object, and subject-match RDF statements that appear in the data processed in the template.
See Also
template, member, content, conditions
vbox
Box container with vertically laid out children
Additional Attributes
None.
See Also
box, hbox
window
Root element of a top-level XUL window document
Additional Attributes
windowtype, xmlns:rdf, xmlns:web, titlepreface, onload, onunload, xmlns, titlemodifier, xmlns:html, title, onclose, titlemenuseparator, contenttitlesetting, y, x, screenY, screenX
Description
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="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul".
See Also
overlay, page
wizard
Window used to step though a task
Contains
wizardpage
Additional Attributes
onwizardaccept, onwizardcancel, xmlns, onwizardfinish, xmlns:nc
Description
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.
See Also
wizardpage, window, dialog
wizardpage
A single panel (step) of a wizard
Contained by
wizard
Additional Attributes
label, pageid, onpageadvanced, onpageshow, onpagecancel
Description
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 the wizard parent element.
See Also
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 development.
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
want.
binding
A single XBL binding
Contains
content, implementation, handlers
Contained by
bindings
Attributes
id, extends, display, applyauthorstyles, styleexplicitcontent
Description
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 another binding.
See Also
bindings
bindings
An XBL document's root element
Contains
binding, resources, stylesheet
Attributes
id, type
Description
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 document's bindings.
See Also
binding
body
Container for JavaScript code to be executed by an XBL method
Contained by
method
Attributes
id
Description
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[...]]> escapes JavaScript characters
like quotes and slashes that may otherwise conflict with the XML parser. See Also
method
children
Insertion point for children of a bound element, or inherited binding
Contained by
content
Attributes
id, includes, type
Description
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.
constructor
Container for code to be executed when a binding is created
Contained by
implementation
Attributes
action, class, id
Description
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.
See Also
destructor
content
Container for anonymous content to be inserted into a bound document
Contains
children; any markup content
Contained by
binding
Attributes
id
Description
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.
destructor
Container for code to be executed when a binding is destroyed
Contained by
implementation
Attributes
action, class, id
Description
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.
See Also
constructor
element
Insertion point for bound elements in anonymous content
Contained by
content
Attributes
id
Description
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. See Also
content
field
Holder property for simple data
Contained by
implementation
Attributes
class, id name, readonly
Description
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 binding.
See Also
implementation, property
getter
Script access point for an element's property
Contained by
property
Attributes
id, type
Description
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.
See Also
property, setter
handler
Single event handler for an XBL element
Contained by
handlers
Attributes
id, event, action, phase, attachto, button, modifiers, keycode, charcode, type
Description
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.
See Also
handlers
handlers
Container for event-handler elements
Contains
handler
Contained by
binding
Attributes
id, type
Description
This element is placed under the binding element and contains the event handlers used by that binding.
See Also
handler
image
An image resource in a binding
Contained by
resources
Attributes
class,id, src
Description
This element preloads images; all included image resources are loaded when the binding is used.
See Also
resources, stylesheet
implementation
Container for binding methods and properties
Contains
method, property
Contained by
binding
Attributes
id, name, implements, type
Description
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 language to be used. This attribute defaults
to JavaScript, the only implemented language that scripts Mozilla's XPFE.
<implementation type="application/x-javascript" implements="nsIAccessibleProvider">
...
</implementation>
See Also
binding, method, property
method
Script function to be accessed on a binding object
Contains
body, parameter
Contained by
implementation
Attributes
id, name, type
Description
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 executed.
See Also
body, implementation, parameter
parameter
Single paramter declaration for a method
Contained by
method
Attributes
id, name
Description
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.
See Also
method
property
Definition of a single binding object property
Contains
getter, setter
Contained by
implementation
Attributes
id, name, readonly, onget, onset, element, attribute, property, type
Description
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 readonly.
See Also
field, getter, setter
resources
Container for list of resources that can be used by a binding
Contains
image, stylesheet
Contained by
binding
Description
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. See Also
image, stylesheet
setter
Change a binding property's value
Contained by
property
Attributes
id, type
Description
This element commonly sets the value of the property, and optionally executes other script for the property.
See Also
getter, property
stylesheet
Captures an external stylesheet for use by anonymous content
Contained by
resources
Attributes
src
Description
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 <stylesheet> element.
See Also
image, resources
Event Attributes
Events are built-in constructs that
are part of the interaction between JavaScript and HTML. These 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 HTML).
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:
<menulist id="eventList" editable="true" flex="1" onchange="addEvent(this)">
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.
onblur
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.
onbroadcast
This event is activated when the broadcaster 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.
onchange
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.
onclick
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:
- button
- 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.
- detail
- 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 ondblclick event.
onclose
Usually used to evaluate script when a window is closed with the close button or via a window.close( )
call, this event traps the closure of a widow. If the JavaScript evaluates
to "true," the window closes; otherwise, the window remains open.
oncommand
This event is sent when an element
is activated. 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 activation.
oncommandupdate
This event is used on a command set when one of its commands is updated, such as when its disabled attribute changes.
oncontextmenu
This event occurs when a request is made 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 onpopupshowing events.
oncreate
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 menu.
ondblclick
This event cccurs when there are two consecutive mouse clicks on an element. You could also use the onclick event's detail property with a value of 2.
ondestroy
Designed to carry out functions after a pop-up window disappears, this event can be used with a popup or menupopup element.
ondragdrop
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.
ondragenter
The ondragenter event is sent when the mouse cursor 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.
ondragexit
This element is activated when the cursor moves away from an element during a drag and drop session. It occurs after the ondragdrop event.
ondraggesture
The event is triggered at the beginning of a drag and drop session when the user holds the mouse button on the dragged object.
ondragover
When an object is dragged over an element, this event is commonly used by an element to determine whether the drop can occur.
onfocus
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.
oninput
Used on textbox elements, this event is activated when displayable keys change the text in the box.
onkeydown
This event occurs when the user presses a key on an element that has focus and the key press is not released.
onkeypress
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 event.keyCode property.
onkeyup
This event is activated when the key press is released on a focused element.
onload
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.
onmousedown
This event occurs when a mouse is pressed on an element but not released.
onmousemove
A reoccuring event, this event repeatedly fires when a mouse moves over an element.
onmouseout
When the mouse moves away from an element, this event occurs.
onmouseover
A hover event, this event fires when the mouse initially moves into an element's space.
onmouseup
This event occurs when a mouse is clicked and the button is released on an element immediately afterwards.
onoverflow
Relating to a box or layout
element, this event is activated when the content contained in the box is
too big for its given size and and "falls over the edge."
onoverflowchanged
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.
onpopuphidden
This event is activated on a popup when the pop-up window is hidden.
onpopuphiding
This event is activated on a popup while it is hidden.
onpopupshowing
This event is activated on a popup just before it opens. It is commonly used to dynamically set the contents of the popup when it is requested in the UI.
onpopupshown
This is event is activated on a popup after it is opened.
onselect
When you activate or select an available option in a widget, this event is fired. This event applies to such widgets as trees and listboxes.
onunderflow
This event can be used in tandem with the onoverflow
event. It is activated when a layout element's content changes to fit into
its given constraints after being in an overflow state.
onunload
This event is activated when a window or dialog closes. It should be used on the root elements of these window documents.