Reference

Introduction

Applying built-in enhancements

XBLUI enhancements are implemented with element bindings. Applying enhancements to a web-page is done by specifying which bindings are attached to elements. There are two ways to do this:

Simple and Compound Enhancements

Some HTML elements have significance that is independent of their context in a document. input and <a href> elements are examples of this - their behavior doesn't depend on ancestor or descendant elements.

Other HTML elements are only valid when they have certain ancestor or descendant elements. Elements in the list model (e.g. ul, li) and table model (e.g. table, tr, td) are of this flavor.

Similarly, XBLUI bindings come in context-free and context-dependant flavors.

Some XBLUI enhancements are implemented with a binding attached to a single element. The WebForms2 input enhancements are examples of this - their behavior doesn't depend on bindings being attached to any other elements.

Other XBLUI enhancements are implemented with bindings attached to two or more elements. e.g. the tree enhancement is implemented with a tree binding attached to the root element of the tree, and treeitem binding attached to list-items in the tree.

Enhancements implemented as a binding attached to a single element are referred to as simple enhancements, while enhancements requiring bindings to be attached to multiple elements are called compound enhancements.

Built-in XBL documents

UI.xml
Bindings that implement common UI enhancements - tree, menu, tabbox, sortable-table.
WF2.xml
Bindings that partially implement element behaviors of WebForms2. Bindings may be attached specifically, or imported in total

User Interface bindings

These bindings are provided in UI.xml.

treeitem

Description
An item in a tree. A treeitem is also the root of a sub-tree (or branch) and has similar behavior to a tree. In fact, the tree binding sub-classes the treeitem binding.
Expected bound-element
li
Parent binding
tree
DOM Interface
  • getRefElement()
  • getView()
  • getList()
  • setOpenState(state)
  • getOpenState()

tree

Description
A hierarchical list with behavior that allows different branches of the tree to be hidden or shown.
Expected bound-element
ul, ol, or div that contains a single list as a child
Required child bindings
treeitem
DOM Interface
  • getRefElement()
  • getView()
  • getList()
  • getSelectedItem()
  • selectItem()
  • setOpenState(state)
  • getOpenState()

menu

Description
A menu is a tree where only one branch is visible at a time and sub-menus popup adjacent to higher menus.
Expected bound-element
ul, ol, or div that contains a single list as a child
Required child binding
treeitem
DOM Interface
  • getRefElement()
  • getView()
  • getList()
  • getSelectedItem()
  • selectItem()
  • setOpenState(state)
  • getOpenState()

viewBox

Description
A viewBox is like the viewPort of your browser window. You can navigate it by scrolling the box or by calling a method to jump to a specified element. This is an abstract interface. The precise behavior depends on the sub-class used.
Expected bound-element
div or any structural element
DOM Interface
  • setView(item)

scrollBox

Description
A scrollBox is a sub-class of viewBox. You can navigate it by scrolling the box or by calling a method to jump to a specified element.
Expected bound-element
div or any structural element
DOM Interface
  • setView(item)

switchBox

Description
A switchBox is a sub-class of viewBox. Navigation within the scrollBox is only possible by calling setView() or setViewByIndex(), and the view is always a child element of the bound-element. This behavior is desirable for tab-panels in a tab-box.
Expected bound-element
div or any structural element
DOM Interface
  • setView(item)
  • setViewByIndex(index)

Web Forms 2 bindings

XBLUI provides extensions to form control elements which partially implement the WHATWG Web Forms 2.0 (Working Draft).

You can apply all the available Web Forms 2 bindings by adding the following in the head of your page: 

<script type="text/javascript">
if (!document.implementation.hasFeature("WebForms", "2.0"))
 document.write('<link rel="bindings" href="http://dist.meekostuff.net/XBLUI/default/WF2.xml" />');
</script>

This will install XBLUI's Web Forms 2 enhancements only if the feature is not implemented natively.

Details of individual bindings appear below. Properties and methods listed here should behave as detailed in the specification unless otherwise noted. Properties and methods that are in the specification but not listed here are not implemented.

WF2FormElement

Notes:

WF2SelectElement

Notes:

WF2TextInput

Notes:

WF2NumberInput

Notes:

WF2RangeInput

Notes: