XML Binding Language (XBL) is a mechanism for extending the presentation and behaviour of a document. The XBL 2.0 specification recently reached Last Call and it has some very cool features to look forward to using in a few years. It’s somewhat based upon the original XBL 1.0 specification created and implemented by Mozilla, though it has been significantly redesigned and is not backwards compatible with it.

While reading this, keep in mind that XBL is still a working draft and any feature I discuss may change significanly between now and when it becomes a recommendation. Presently, there are no implementations of XBL 2.0, so you can’t use it yet.

Bindings

A binding is a way to attach presentation and behaviour to an element. The concept is similar to the way we already style elements using CSS and attach event listeners to them with JavaScript, but the idea is to add an extra layer of abstraction in between to simplify the process. Bindings are a not a way to replace existing authoring tools like CSS and JavaScript, but rather an enhancement to them.

There are four main aspects of a binding: implementations, templates, handlers and resources. In this whopping 5 part series, I intend to give you a brief overview of each of these components to explain their purpose and functionality.

Implementations

Describe a set of methods, properties and fields on an element.

Handlers

These offer an improved way to declare event listeners.

Templates

A way to enhance the presentation (particularly layout) beyond what is possible with existing CSS techniques.

Resources

Additional stylesheets, images, video, audio or any other content associated with the binding.

Sample Bindings

Bindings can be attached to elements in several ways: a selector in the element attribute of the binding element, the ‘binding‘ property in CSS or using a script.

The element Attribute

The element attribute specifies a selector. The same type of selector you use with CSS, so it’s very easy to understand. This binding will be attached to all elements that match the selector: #nav li.

<xbl xmlns="http://www.w3.org/ns/xbl">
  <binding element="#nav li">
    <implementation>...</implementation>
    <template>...</template>
    <handlers>...</handlers>
    <resources>...</resources>
  </binding>
</xbl>

The ‘binding‘ Property

The ‘binding‘ property can be used in in your CSS to attach a binding, in exactly the same way you apply any other other style to an element.

bindings.xml:

<xbl xmlns="http://www.w3.org/ns/xbl">
  <binding id="foo">
    <implementation>...</implementation>
    <template>...</template>
    <handlers>...</handlers>
    <resources>...</resources>
  </binding>
</xbl>

The stylesheet:

#nav li { binding: url(bindings.xml#foo); }

Using a Script

Elements will implement the ElementXBL interface, which defines three methods: addBinding(), removeBinding() and hasBinding(). The addBinding() method can be used to attach a binding to an individual element using a script, like this:

var e = ...; // Get the element somehow
e.addBinding("bindings.xml#foo");