by Andrew Wooldridge
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
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
oncapturepiece -- just like a image tag might have an
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.
CSS and XBL
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. 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 ...
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.