Infinite Extensibility with XBL

by Andrew Wooldridge

When I first started getting involved in Mozilla development, I was excited. Finally, I would be able to create applications leveraging my knowledge of HTML, JavaScript, and style sheets. I had been frustrated in college with the difficulty of grasping C++ and the tedium of coding, compiling, running, debugging, etc. etc. I was pretty confident I had a good grasp of what XUL was and how to wire things up with JavaScript and make it look pretty with CSS. Then along came something new about Mozilla that took me almost a week to finally grasp what it meant, and over a month to fully realize its implications. What is it? It's something new called XBL (Extensible Bindings Language). OK, this isn't something very new, but I believe that many folks still taking delight in playing with all the other fun features of Mozilla may have yet to encounter this.

Now before I go on, I must say that what I am about to talk about is not some tacked on feature that just "seemed cool." It's a fundamental component of Mozilla, and it can be the basis of a radical new way for you to think about web applications.

What XBL is and how it relates to XUL

Ready? Let's get started. First off, let me tell you what XBL is. I need to explain this carefully because if you don't get this right off, you may have trouble understanding some of the concepts I'll be going through. But give it some time and it'll sink in. XBL allows you to "bind" a set of content and behavior to some other element. This content is "anonymous," meaning that the document only sees the original element, not the composite of elements inside it. Huh? Let's go with an analogy which I used myself to explain it to a friend. Do you remember those Transformer toys? You could put five or six of them together, and build a single larger Transformer that was more than just the sum of the smaller toys. This is somewhat how XBL works. You can take elements -- like, say, buttons, images, scrollbars, and other elements - and put them together to build a "composite" element. The interesting thing is that the inner workings of this composite element are hidden from your document.

Also Featured This Week

Mozilla is Not Netscape (and Other True Facts)

Stop Beating the Lizard

Previous Features

More from the Mozilla DevCenter

For instance, I might create a chess game in XUL and fashion a tag called <chesspiece>. I may in my XBL tell this <chesspiece> tag to be built up out of perhaps an <image> tag and a <text> tag, and have behaviors like oncheckmate or oncapturepiece -- just like a image tag might have an onload and onmouseover. In my XUL document, I just have the <chesspiece> tag. But when it appears on the screen, the browser will "build" that chesspiece tag out of the elements I specified in the XBL. This allows you to build new composite elements out of simpler ones. And it allows you to add a layer of abstraction to your code that you may not have been able to do up until now. So now, instead of begging some programmer somewhere to add that new "tag" you've always wanted, you can do it yourself with much less trouble. This is one of the things I think XML was totally created to do -- allow you to build your own language. XBL gives you the power to give shape to that language using basic components.


XBL expresses itself through the CSS style system. For instance: Perhaps I have some spreadsheet tag with a CSS class of bigtable. I would have a CSS style rule which applies some XBL binding through the bigtable class. Any element having a class of bigtable would show on the screen as a big HTML table with borders and every other column shaded. I could get even more interesting and have another class of type piechart which might display the content of the tag as an SVG (scalable vector graphic) pie chart. I could get even more interesting by putting a button underneath this tag, which changes its class via JavaScript from bigtable to piechart. If I did this, I could magically transform my data from a table view to a pie view -- all by just swapping out a class attribute on a single tag. This is just the beginning ...

JavaScript and XBL

XBL doesn't just allow you to create a special view of some element, it can also effect JavaScript as well. You can trigger JavaScript code from within a binding, you can create your own special properties on some tag and run some js code whenever that property is get or set, and you can create your own event handlers -- to send and receive new kinds of events you design. You could do wild things like say tell a <pieceofwood> tag to burstIntoFlames() -- and the underlying XBL might be an image of a log that is swapped with an animated gif of a burning log.

Does it make any sense yet? I'm betting you are reading this and scratching your head, wondering "what's the big deal" and "what is he talking about?" Instead of trying to convince you of anything, I'm going to walk through the construction of a fictional "tag" using XBL and describe the process as I go. Perhaps after you follow this toy example, you might begin to see the real power behind this component of Mozilla.

Pages: 1, 2, 3, 4

Next Pagearrow