Web Archeology: Java Pluglet API App Engine with Ruby, Python, and Perl
Apr 08

Web Archeology: XML Binding Language (XBL)

Tech, Web Browsing with tags: , , Add comments

Archeology

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:

7 Responses to “Web Archeology: XML Binding Language (XBL)”

  1. Ray Cromwell Says:

    Hey Dion,
    Great series. I have some suggestions for future archeological “digs”.

    1) Remember the Push Bubble in 1997? Pre-RSS, we had Microsoft Channel Definition Format, Netscape’s Javascript based Channel defs, Marimba, Pointcast, BackWeb, etc. Take That Davie Whiner, Microsoft invented XML syndicated content feeds!

    2) AppletJavascript bridge, Common DOM API, etc

    3) Netscape 4 JSSS :)

    4) “XML Data Islands”

    5) Oh, and while not much relevance tech wise, there was the PR battle of Netscape ONE vs Microsoft DNA

    6) Old Java geezers will remember AFC vs IFC before JFC

    7) Some Pulitzer prize would could be done investigating what ever happened to Netscape’s “Apollo” follow-on to Netscape Enterprise Server.

    8) In the years before OpenID and OAuth, before MS Passport and Sun Liberty Alliance, there was Netscape’s proposal that everyone use SSL client certificates, and Netscape Certificate Server. Oh, how the wheel turns!

  2. Brad Neuberg Says:

    Great examples Ray. Alot of this web archaelogy has come up as Dion and I plumb the historical record for web extension points, to chart out new ones for the future. I’m a computer history geek so I eat this stuff up (and yes you can be a computer history geek AND have a life :)

    Dion, are you up for guest posts? Ray, want to write a guest post on one of the things you bring up? One of the angles is to study not just the history but the actual mechanism as well as prior art, to act as a jumping off point as we explore new web extension mechanisms such as what Gears offers.

    Brad Neuberg

  3. Brad Neuberg Says:

    Don’t forget Internet Explorer’s data binding facilities; XUL’s RDF templates; the Netscape Communicator suite that had a webtop; and desktop.com, a DHTML based webtop!

  4. Erik Arvidsson Says:

    One of the main benefits XBL (1 and 2) has over behaviors is anonymous content. One could implement most of the things from XBL using HTCs but without anonymous content the end DOM would be polluted and very confusing.

    BTW, XBL2 is a the top of my wishlist for improving web browsers as a platform.

  5. Ray Cromwell Says:

    Brad,
    Sounds interesting. I think it might be instructive to go back and look at Netscape’s push Desktop, and compare it to Active Desktop, vs today’s RSS infrastructure and widgets, to find out what they did right, and what they did wrong.

    -Ray

  6. Tavs Says:

    You might want to see Sergey Ilinksys XBL 2.0 cross browser implementation in JavaScript. You can find it here: http://code.google.com/p/xbl/

  7. Emily Says:

    XML is potentially the answer for data interchange in all sorts of transactions, as long as both sides agree on the markup to use. (For example, should an email program expect to see tags named and , or and ?) The need for common standards will generate a lot of industry-specific standardization efforts in the years ahead. In the meantime, mechanisms that let you “translate” the tags in an XML document will be important. Such mechanisms include projects such as the Resource Description Framework initiative (RDF), which defines meta tags, and the Extensible Stylesheet Language specification (XSL), which lets you translate XML tags into other XML tags.

Leave a Reply

Spam is a pain, I am sorry to have to do this to you, but can you answer the question below?

Q: What is the number before 3? (just put in the digit)