First came IE behaviours (HTC), which allowed you to bind script and binary behaviour to tags via CSS, for IE only of course. Mozilla decided that it needed a language to tie behaviour to XUL widgets and XML elements in general, and they created the first version of XBL.

I met Jonas Sicking of Mozilla for the first time recently, and found out that he is working on XBL 2.0, a spec that was edited by none other than Ian Hickson. That man is a machine!

XBL 2.0 cleans up the original work from Mozilla, and gives you a really nice way to add scripting behaviour to tags.

The example application below gives you a good view of how you could implement ‘an inaccessible implementation of the proposed HTML5 details disclosure element: it opens and closes when clicked, and reflects its current state in the element’s “open” attribute.’

<xbl xmlns="http://www.w3.org/ns/xbl">
 <binding element="details">
  <template>
   <div>
    <div><content includes="legend:first-child">Details...</content></div>
    <div state="hidden" id="container"><content/></div>
   </div>
  </template>
  <handlers>
   <handler event="click" phase="default-action">
    this.open = !this.open;
   </handler>
   <handler event="DOMAttrModified" attr-name="open" attr-change="addition" phase="target">
    this.shadowTree.getElementById('container').setAttribute('state', 'visible');
   </handler>
   <handler event="DOMAttrModified" attr-name="open" attr-change="removal" phase="target">
    this.shadowTree.getElementById('container').setAttribute('state', 'hidden');
   </handler>
  </handlers>
  <implementation>
   ({
     get open() { return this.boundElement.hasAttribute('open'); },
     set open(val) {
       if (val)
         this.boundElement.setAttribute('open', 'open');
       else
         this.boundElement.removeAttribute('open');
       return this.open;
     },
   })
  </implementation>
  <resources>
   <style>
    #container[state=hidden] { display: none; }
   </style>
  </resources>
 </binding>
</xbl>

What I find interesting is how you bind this behaviour via CSS a la IE behaviours:

details { binding: url(details.xml#details); }

You can also do so programatically:

$$('details').each(function(el) {
  el.addBinding("details.xml#details");
});

Once you have this behaviour setup, you are fully embedded in the DOM. You see ‘details’ as a true node, rather than a processing hack that would put in divs and spans in their place. You will notice the shadowTree that let’s you have a full DOM behind the scenes.

Imagine if this spec was implemented by a series of browsers. Is there a way to have a shim that could take XBL 2 and map it to IE behaviours? That is a question for Dean Edwards ;)

In general, this seems like a great extension point to let us take generic behaviour and reuse it. It could be a great way to add functionality to older browsers too, just as we were able to add alpha transparency to IE via binary behaviours.

Do you see value?

Other posts on Web archelogy:

• Java Pluglet API