Infinite Extensibility with XBL
Pages: 1, 2, 3, 4
Getting started
Setting up the browser
For these examples I recommend you download the latest milestone release of Mozilla, which at this time is M17. Set up a profile and try it out a little before continuing on. There's no special setup of the browser this time, as we will be opening the XUL files directly from File | Open File.
Authoring tools
All you will need for this exercise is a simple text editor. I recommend BBEdit on Mac and HomeSite on Windows. Perhaps someday in the future we'll have a XUL-specific authoring tool, but for now we must work in the prehistoric era.
XBL basics
Simple XBL syntax
Before I go into the creation of our own special XBL widget -- I call it a "jack" -- let me give you a few examples of what an XBL binding looks like:
<binding id="thumb" extends="xul:box">
<content>
<xul:spring flex="1"/>
<xul:image inherits="src"/>
<xul:spring flex="1"/>
</content>
</binding>This is the binding for the little slider thumb on all Mozilla scrollbars. XBL has its own syntax which is completely independent of XUL.
Simple XBL examples
Here are some other examples:
This is a binding for the simple tab element in a tab widget:
<binding id="tab">
<content>
<xul:image inherits="src" class="tab-left"/>
<xul:text flex="1" inherits="value,crop,accesskey"
crop="right" class="tab-text"/>
</content>
</binding>This is the binding for a <text> widget in XUL:
<binding id="text">
<handlers>
<handler type="click" value="var
forElementID = this.getAttribute('for');
if(forElementID) var forElement =
document.getElementById(forElementID);
if(forElement) forElement.focus();"/>
</handlers>
</binding>And now a much more complicated binding. It's the binding that controls how a popup menu works. Don't worry about making sense of the tags right now...view this binding here.
Designing the new "tag"
The need
When I decided to learn how XBL worked, I came to it with a problem. I wanted to create a way to have elements on the screen "slide" around in XUL, much as they do in HTML via absolute positioning. Instead of going to ask the Mozilla developers to try to support some new tags with new syntax, I can now just build it myself. So first I specified my need: I needed a way for an element on the screen to move from one location to another. I knew about the <spring> tag, which allows you to create a buffer zone between elements -- say between two buttons on the screen. And I also knew that I could "expand" and "contract" this spring tag by changing a property on it called flex. So if I could come up with something that simplified this expansion and contraction, I could go a long way towards what I wanted. So I came up with a new tag that will serve my needs and also serve as an example for you to try out as well.
