Supported Xul Components

Common Attributes

Name

Description

id

Used to reference the xul element in code

flex

a relative value describing the size of an element relative to its siblings

Tabs and Tab Panels

tabbox

The root element of a tab box

tabs

The parent element of the tab descriptions

tab

A tab displayed to the user

Custom Attributes

Name

Description

label

The Label displayed on the tab

tabpanels

The parent element of all tab panels

tabpanel

An individual tab panel

Tab Example:

<tabbox  id="tabbox">
                <tabs id="tabs">
                   <tab id="firstTab" label="First Tab" />
                   <tab id="secondTab" label="Second Tab" />
                </tabs>
                <tabpanels id="tabpanels">
    <tabpanel id="firstTabPanel">
    <!- Content goes here ->
   </tabpanel>

    <tabpanel id="firstTabPanel">
    <!- Content goes here ->
   </tabpanel>
</tabbox>   

Text Box

The textbox element can act as a single or multiline editable text box

Custom Attributes

Name

Description

maxlength

The Label displayed on the tab

multiline

true if the text box should span multiple lines

value

the value displayed in the textbox

Trees and Tables

The Tree and Table components in XUL share the same parent element, tree.

tree

This element is the parent of all related tree and table elements.

Custom Attributes

Name

Description

editable

true or false, denotes if the tree is editable, used in relation to bindings

hiddenrootnode

If in tree mode, determines if the root node should be rendered or not

preserveselection

(Not implemented in Swing)

onselect

the controller method to call when an item is selected in the tree or table

treecols

This element is the parent element for treecol

treecol

This element describes a column in a tree or table

Custom Attributes

Name

Description

label

The column name

primary

???

type

The type of the column, IE text (TODO: Need full list of types supported per environment)

pen:binding

The binding method name to get the column value

pen:childrenbinding

The binding method name to get a list of children for this column

editable

If true, denotes that this column is editable

pen:disabledbinding

???

pen:tooltipbinding

The binding method name to get the tooltip value

pen:expandedbinding

The binding method name to get the expanded boolean value

treechildren

TODO

treeitem

TODO

treerow

TODO

treecell

TODO

Tree and Table Examples

TODO

menulist

The menulist is used for dropdowns

menulist

This element is the root element for dropdowns

Custom Attributes

Name

Description

pen:binding

The get and set method to bind the menulist to

oncommand

The controller method to call when a user selects an element in the menu list

menupopup

This element contains menu items

menuitem

This element acts as a single dropdown or menu item

Custom Attributes

Name

Description

label

the value that appears as the menu item

Example

<menulist id="list" pen:binding="name">
    <menupopup>
        <menuitem label="Value 1" />
        <menuitem label="Value 2" />
    </menupopup>
</menulist>

Example binding, usually defined in a controller's init. This populates the menulist with the contents of the method getListItems() in the controller:

XulMenuList<String> list = (XulMenuList<String>) document.getElementById("list");
Binding b = bf.createBinding(this, "listItems", list, "elements");
b.fireSourceChanged();

label

This is used to display static text within the UI.

Custom Attributes

Name

Description

value

The text to display.

disabled

If true, display the label in a disabled state.