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 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.
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 false |
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 |
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
, binding
Container box for scrolling contents
None.
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.
autorepeatbutton
, scrollbox
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 arrows.
arrowscrollbox
, scrollbox
Child element in a XUL template that optionally matches in the data
predicate
, object
,subject
,template
,
rule
,condition
,action
,bindings
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
, condition
,bindings
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 XUL template.
action
, template
, rule
, condition
,binding
Generic container and layout element
None.
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
.
hbox
, vbox
Notifies elements when a change occurs in the UI Contained by broadcasterset
checked
, accesskey
, oncommand
, value
,label
,disabled
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.
broadcasterset
, command
, observes
Container for broadcaster elements. Contains broadcaster
None.
The purpose of this nonvisible element is to group a set of broadcasters logically. The XUL document can contain one or multiple sets.
broadcaster
, commandset
Web-content container
src
, name
, content
, onclick
,type
,disablehistory
,disablesecurity
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.
editor
, iframe
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 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.
autorepeatbutton
, toolbarbutton
Provides heading for a groupbox element. Contained by groupbox
,
radiogroup
None.
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
,radiogroup
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.
radio
Widget used to choose a color Additional Attributes onchange
,
type
, id
, palettename
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
None.
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
None.
The children of this element are one or more column
elements, the number of which determines the actual number of grid
columns.
column
, grid
, row
, rows
Defines functionality that can be called from multiple sources Contained by commandset
disabled
, accesskey
, observes
, label
,checked
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.
commands
, commandset
Container for a group of command sets
None.
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.
command
, commandset
A container for multiple command elements. Contains command
oncommandupdate
, commandupdater
,events
An invisible, document-level element that acts as a logical grouping for commands or other command sets.
command
, commands
Defines the conditions within a template rule. Contains content
,member
,
triple
None.
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 by conditions
None.
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.
template
, rule
, action
, conditions
,member
,triple
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.
stack
Holder for block of text that can wrap to multiple lines
crop
, onmouseover
,onmouseout
, value
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.
caption
, label
Root element for secondary XUL window
ondialogaccept
, ondialogcancel
, ondialoghelp
,onunload
,onload
,
title
, buttons
, windowtype
, persist
,y
,x
,screenY
,screenX
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.
window
, page
Styled text heading for UI panel. Contained by dialog
title
, 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.
window
, dialog
Content area for editable web content
src
This high-level widget edits text and HTML. contentDocument
is a reference to the document contained within the editor.
contentDocument
browser
, iframe
Widget for laying out content in a structured tabular fashion.
Contains rows
, columns
None.
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.
column
, columns
, listbox
, row
,rows
,tree
Visible widget used on a grippy bar to expand or collapse a UI region. Contained by splitter
None.
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.
Box with frame surrounding it. Contains caption
None.
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
Box container whose children are laid out horizontally
None.
The hbox
element is a shorthand for <box
orient="horizontal">
. It is the preferred way to achieve
horizontal orientation in box layout.
box
, vbox
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.
browser
, editor
Display of a supported type image
src
The XUL image is analogous to the HTML <img>
element. The supported types in Gecko are PNG, JPG, GIF, and BMP.
Definition for a keyboard shortcut. Contained by keyset
modifiers
, command
, key
, keycode
,observes
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.
keyset
Container for a keyset or group of keysets. Contains keyset
None.
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.
key
, keyset
Container for one or more key elements Contains key
None.
key
elements no longer need to be contained within a keyset
parent. Still, keysets can help organize groups of keys-particularly
related ones.
key
, keybinding
Simple text display element and label for a control element
control
, for
, accesskey
, crop
,value
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.
caption
, description
Used for display of a flat list of items
datasources
, sortResource
,
sortDirection
, rows
, seltype
, ref
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.
listcell
, listcol
, listcols
,listhead
,listheader
,listitem
Single cell of a listbox. Contained by listitem
label
, flexlabel
, crop
, disabled
,image
,checked
The listcell
is the element within a listbox
that actually displays data.
listbox
, listcol
, listcols
, listheader
,listitem
Listbox column definition. Contained by listcols
This element represents a column in a listbox
.
listbox
, listcell
, listcols
,listheader
,listitem
Container for listbox columns (listcol
). Contained by listbox
.
Contains listcol
This element contains any number of individual listbox
columns.
listbox
, listcell
, listcol
, listheader
,listitem
Container for column header in list boxes (listheader). Contained by listbox. Contains listheader
listhead
element is analogous to the HTML thead
element, and contains the header cells for an XUL listbox table.
listbox
, listcell
, listcol, listcols
,listheader
,listitem
Text header for listbox column. Contained by listhead
sortActive
, sortDirection
, resource
,sortable
listheader
element displays the header text.
listbox
, listcell, listcol
, listcols
,listhead
,listitem
Listbox row definition. Contained By listbox. Contains listcell
value
, description
, accesskey
, label
,context
,type
,name
listitem
is a row in a listbox
. The number
of listcell
children corresponds to the number of columns
in the listbox
.
listbox
, listcell
, listcol
, listcols
,listhead
,listheader
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
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.
conditions
, rules
, bindings
, template
A menu element for containing menu items
label
, accesskey
, disabled
,image
,disabled
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
.
menubar
, menubutton
, menuitem
, menulist
,menupopup
,menuseparator
Containing element for one or more menus Contains menu
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.
menu
, menubutton
, menuitem
, menulist
,menupopup
,menuseparator
,
grippy
Single selectable choice in a menu. Contained by menupopup
label
, accesskey
, crop
, image
,disabled
,checked
menuitem
is the basic element used to display a single
item in a menu (e.g., <menuitem
label="File"/>
).
Drop-down list of selectable items. Contains menupopup
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.
menu
, menubar
, menubutton
, menuitem
,menupopup
,menuseparator
Pop-up container for menu items. Contained By menu
,
menubutton
, menulist
. Contains menuitem
popupalign
, datasources
, onpopupshowing
,sortResource
,onpopuphiding
,sortDirection
,context
,position
,popupanchor
,ref
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.
Line separating menu items. Contained By menupopup
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
.
menu
, menubar
, menubutton
, menuitem
,menulist
,menuspopup
Broadcast event and attribute listener
element
, attribute
,onbroadcast
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 content
xmlns
, title
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.
page
, window
Root element of XUL file loaded in a content frame
context
, headertitle
,onload
,onunload
,
title
,xmlns
page
is the root element for a XUL document that is meant
to be loaded within another XUL document, such as a preference panel.
dialog
, overlay
, window
Box container as child window
onpopupshowing
,
onpopuphiding
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.
menupopup
, popupset
Container for popup elements
popup
element, popupset
helps you organize and overlays groups of
popups.
Visual progress indicator of a time-consuming operation
value
, mode
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
, accesskey
,value
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
radiogroup
makes all radio
elements
within it belong to a single group from which only a single element can
be selected.
Window-resizing element
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.
grid
, rows
Definition for grid rows. Contains row
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
.
grid
, row
, columns
, column
Defines rules for rendering data as XUL. Contained by template
rdf:type
, parent
, isempty
, iscontainer
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.
template
, action
, conditions
Declaration of script used in XUL file
src
, type
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.
Widget for scrolling in a container Contains scrollbarbutton
, slider
curpos
, increment
, maxpos
, pageincrement
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
sborient
, type
scrollbarbutton
can use its src
attribute
to point to an image that should be drawn over it.
Box for scrolling content
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
separator
is a
general-purpose divider. In menus, use menuseparator
.
A scrollbar without buttons
curpos
, increment
, maxpos
,pageincrement
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.
scrollbar
, scrollbarbutton
Blank space separating element
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
persist
, state
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.
grippy
, toolbar
Shows children one on top of one another, all at the same time
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.
deck
, box
Box container for status elements. Contains statusbarpanel
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 statusbar
persist
, label
statusbarpanel
s 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.
Holder of localized properties for use in script. Contained by stringbundleset
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. Contains stringbundle
stringbundleset
is an optional container for groups of stringbundle
elements. Like commandset
use for commands, stringbundle
organizes sets of related stringbundle
s, particularly when
those sets are overlaid into the UI.
A single selectable tab of a tabbox. Contained by tabs
accesskey
, crop
,disabled
,label
,image
tabbox
.
tabbox
, tabpanel
, tabpanels
, tabs
Box container for tab panels Contains tabs
, tabpanels
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
, tabs
Tabbed holder for a set of web content views
contentcontextmenu
, contenttooltip
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
).
A single panel of a tabbox. Contained by tabpanels Contains XUL content
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.
tab
, tabbox
, tabpanels
, tabs
Container for tabpanel elements. Contained by tabbox.
Contains tabpanel
,box
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 tabbox. Contains tab
tab
, tabbox
, tabpanel
, tabpanels
A high-level widget used to build content dynamically from data. Contains rule
xmlns:nc
, xmlns:chrome
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.
Accepts text input from user
multiline
,
maxlength
,disabled
,readonly
, type
,size
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
thumb
element appears in the slider
and
the scrollbar
.
scrollbar
, scrollbarbutton
, slider
Holder of buttons for quick-access UI functionality Contains toolbarbutton
, toolbarseparator
grippyhidden
, tborient
, tbalign
,tbpack
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.
toolbarbutton
, toolbarseparator
, toolbox
Specially adapted button for use in a toolbar. Contained by toolbar
accesskey
, dir
, disabled
, dlgType
,group
,image
,label
,
orient
,type
,value
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
menuseparator
in a menu
, toolbarseparator
divides elements in a toolbar
.
toolbar
, toolbarbutton
, toolbox
Optional container for menu bars and toolbars. Contains menubar
, toolbar
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.
menubar
, toolbar
Pop-up window for context-sensitive help
noautohide
, onpopupshowing
,onpopuphiding
,position
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
,treechildren
multiple
, datasources
,enableColumnDrag
,containment
,
sortResource
, sortDirection
, border
, seltype
,sortActive
,flags,
context
, persist
, hidecolumnpicker
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.
treecell
, treechildren
, treecol
,treecols
,treeitem
,treerow
A single cell in a tree. Contained by treerow
src
, indent
, observes
,url
,value
,label
,
sortActive, sortDirection
, tag
, mode
, resource
,allowevents
,properties
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>
).
The main body of a tree; a container for treeitems. Contains treeitem. Contained by tree
treechildren
element defines the subset of the tree
where the content is actually contained (in contrast to treecols
,
which defines aspects of the layout).
tree
, treecell
, treecol
, treecols
,treeitem
,treerow
A single column of a tree. Contained by treecols
sort
, resource
, primary
, sortSeparators
,label
,sortActive
,
sortDirection
, hideheader
, accesskey
,type
treecol
typically does not contain content. Instead,
it defines the header for the columns whose contents are defined in the treerow
s.
tree
, treecell
, treechildren
, treecols
,treeitem
,treerow
Container for tree columns. Contained by tree. Contains treecol
treecol
elements, or columns, in a tree. A tree should have only one treecols
.
tree
, treecell
, treechildren
, treecol
,treeitem
,treerow
A treerow container. Contained by treechildren. Contains treerow
rdf:type
, container
, open
treeitem
element is a container for a treerow
,
and makes treerow
a selectable element within the tree
.
tree
, treecell
, treechildren
, treecol
,treecols
,treerow
A single row of a tree. Contained by treeitem. Contains treecell
treeitem
, this element represents a
single row of a tree.
tree
, treecell
, treechildren
, treecol
,treecols
,treeitem
Substructure of a template that matches RDF statements in the data
predicate
, object
,subject
triple-predicate
, object
,
and subject-
match RDF statements that appear in the data
processed in the template.
template
, member
, content
, conditions
Box container with vertically laid out children
box
, hbox
Root element of a top-level XUL window document
windowtype
,
xmlns:rdf
,xmlns:web
,titlepreface
,
onload
,onunload
,xmlns
, titlemodifier
,xmlns:html
,title
,onclose
,titlemenuseparator
,contenttitlesetting
,y
,x
,screenY
,screenX
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"
.
overlay
, page
Window used to step though a task. Contains wizardpage
onwizardaccept
, onwizardcancel
, xmlns
,onwizardfinish
,xmlns:nc
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 wizardpage
s.
wizardpage
, window
, dialog
A single panel (step) of a wizard. Contained by wizard
label
, pageid
, onpageadvanced
, onpageshow
,onpagecancel
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 wizardpage
s by setting the onpageshow
and onpagecancel
event handlers on individual pages and
using the onwizardaccept
and onwizardcancel
event handlers on the wizard
parent element.
wizard
, window
, dialog
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.
A single XBL binding. Contains content
,implementation
,
handlers. Contained by bindings.
id
, extends
, display
, applyauthorstyles
,styleexplicitcontent
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.
An XBL document's root element. Contains binding
,resources
, stylesheet
id
, type
<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.
Container for JavaScript code to be executed by an XBL method. Contained by method
id
Insertion point for children of a bound element, or inherited binding . Contained by content
id
, includes
, type
Container for code to be executed when a binding is created. Contained by implementation
action
, class
, id
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
id
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
action
, class
, id
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
id
Holder property for simple data. Contained by implementation
class
, id
name
, readonly
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.
implementation
, property
Script access point for an element's property. Contained by property
id
, type
property
it is
attached to is accessed. This is most commonly used to return the value
of the property.
property
, setter
Single event handler for an XBL element. Contained by handlers
id
, event
,action
,phase
,attachto
,
button
,modifiers
,keycode
,charcode
,
type
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. Contains handler. Contained by binding.
id
, type
An image resource in a binding. Contained by resources
class
,id
, src
This element preloads images; all included image resources are loaded when the binding is used.
resources
, stylesheet
Container for binding methods and properties. Contains method
, property
.
Contained by binding.
id
, name
, implements
, type
<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>
binding
, method
, property
Script function to be accessed on a binding object. Contains body
, parameter
.
Contained by implementation
id
, name
, type
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.
body
, implementation
, parameter
Single parameter declaration for a method. Contained by method
id
, name
<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
id
, name
, readonly
, onget
,onset
,element
,attribute
,
property
,type
<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
.
field
, getter
, setter
Container for list of resources that can be used by a binding.
Contains image
, stylesheet
Contained by binding
<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.
image
, stylesheet
Change a binding property's value. Contained by property.
id
, type
getter
, property
Captures an external stylesheet for use by anonymous content. Contained by resources
src
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.
image
, resources
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.
onfocus
event.
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.
oncommand
attribute (which covers clicking)
is recommended to avoid excluding keyboard selection. Here are some
commonly used properties associated with this event:
ondblclick
event.
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.
oncontextmenu
is similar to the oncreate
and onpopupshowing
events.
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.
onclick
event's detail property with a value of 2.
popup
or menupopup
element.
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.
ondragdrop
event.
onfocus
is onblur
.
textbox
elements, this event is activated when displayable keys change the text
in the box.
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.
image
elements or elements that display images.
popup
when the pop-up window is hidden.
popup
while it is hidden.
popup
just before it opens. It is commonly used to dynamically set the
contents of the popup
when it is requested in the UI.
popup
after it is opened.
onoverflow
event. It is activated
when a layout element's content changes to fit into its given
constraints after being in an overflow state.