Infinite Extensibility with XBL
Pages: 1, 2, 3, 4
Adding JavaScript methods
Inside the <body> tag within the <interface> tag, I have created a JavaScript function that will take in the values I pass into it and either increase or decrease the flex attribute until it matches the final value I request. I'm doing a basic DOM call of getElementById() to get the element I want to effect. Basically this JavaScript code is now very reusable. If I want to reuse this <jack> widget elsewhere, I no longer need to worry about bringing along other .js files or trying to remember how I implemented it. It'll just "work." This opens many doors for developers to create whole libraries of widgets and code that could be distributed to others -- or for you to build up your own specialized behaviors.
 |
Figure 1. Imagine that you had a box suspended in air by some springs on all sides. If you change the tension on those strings, you could move the box around. |
The other component of the XUL file, which I failed to mention up until now, takes advantage of this new method I have added to my tag. The code is listed here.
All this code does is add some glue to the buttons in my XUL. I have created four buttons, one for each direction I'd like the box to go. So for instance, if the direction is "up," I would get the top jack's flex (jack2), decrease it from whatever it is to 0, and also get the bottom jack's flex (jack3), and increase it from whatever it is (currentFlex) to that number plus 20. To get a better idea of this, see Figure 1.
The finished product
A XUL slider.
Figure 2 shows a screenshot of what you would see in Mozilla.
 |
Figure 2. The results in Mozilla (click for full-size view). |
Try this out for yourself and watch how the group of buttons move around on the screen. This is just a toy example, and even the uses for the <jack> tag are quite open. You might create sliding drawers that contain pressing news, or you could make some simple animations where elements drop down from the top of the screen.
The point here though is not so much this new tag we created, but the fact that I could create whole new functionality in the browser without a stitch of C++ code! XUL gives you a lot of power in creating user interfaces for your web applications but only contains a limited set of UI widgets for you to build on. XBL gives you a whole new toolset to build up your own widgets -- with their own specialized behavior -- that can allow you to create interfaces of whatever complexity you desire! I've seen others create new classes of widgets, like a small calendar that pops up, allowing you to select a date, or a calculator widget that you could call up by just pressing some hotkey.
Another fascinating direction you might take is to combine XBL bindings to user stylesheets. You could create bindings via CSS in your user stylesheet which could, for instance, override the "back" button such that web pages fade in and out (via setting the CSS opacity setting), or you could add a new behavior to links so that whenever you roll over them, you see a popup window of all their properties. The combinations are quite mind boggling!
If you would like to try this out for yourself, I've included a ZIP file containing the three files you need for this exercise here.
Where to go from here
|
Useful Links: • XBL - The Extensible Binding Language - from mozilla.org's XPToolkit Project. |
Where do you go from here? I would recommend getting a good solid background in XUL and beginning to read up on the XBL documentation in the links below. Note that XBL is still a very new technology. For instance, there's a good chance that the CSS behavior:url() expression may be changed to -moz-behavior: url(), so that it more fully delineates this technology as coming from Mozilla and allows other implementations access to that name, if there eventually comes a standard for developing anonymous content.
I've only scratched the surface here. XBL has many more aspects that can lead you to do even more interesting things. If you come up with something cool, please send me an email: andrew@andrewwooldridge.com.
Andrew Wooldridge is a XUL and JS developer at Netscape Communications Corp.
Also Featured This Week
Mozilla is Not Netscape (and Other True Facts)
Discuss this article in the O'Reilly Network Browsers Forum.
Return to the Mozilla DevCenter.
