什么是Xbl

XUL有一个姐妹语言，叫做XBL，全称是可扩展绑定语言（eXtensible Bindings Language），这门语言的主要作用就是用来定义XUL组件的行为模式。

绑定

你可以使用XUL定义一个应用程序界面的布局。你也可以通过设置样式来定制这些元素的外观。你还可以通过修改样式来建立新的皮肤。类似滚动条或者复 选框这类经常会被使用的界面元素，你可以通过修改样式表或者设置属性来修改他们的基本外观。但是XUL绝不会允许你修改这些元素的工作方式。比如说，你要 修改滚动条的作用，这是无法用XUL实现的，你需要XBL。

一个典型的XBL文件包括一组绑定列表。每一个绑定项都描述了一个XUL组件的行为模式。比如说，一个绑定项可能会关联到一个滚动条，而且描述了这个滚动条所具有的属性和方法，当使用XUL创建了滚动条以后，自动就会具有XBL描述好的属性和方法。

和XUL一样，XBL也是使用XML来描述的，所以和XUL有着相似的语法规则。下面的示例展示了一个典型的XBL文件的基本骨架：

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl

">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

bindings 元素是XBL文件的根元素，它包含了一个或者多个binding 元素。每一个bingding 元 素都描述了一个绑定项。id属性用于标识每个绑定项，就像上面的例子所展示的那样。这个例子有两个绑定项，一个叫做binding1，一个叫做 binding2。一个可能会被附加到滚动条上，另外一个可能会附加到菜单项上。每个绑定项都可以附加到任何XUL元素上。通过使用class属性，你就 可以没有限制的使用绑定项。注意上面例子中bindings 元素的命名空间，这个命名空间说明我们正在使用XBL的语法。

你可以通过CSS属性-moz-binding，将一个元素关联到一个XBL文件中的指定项上。比如下面这段代码：

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

URL表示绑定项“binding1”在“chrome://findfile/content/findfile.xml”这个文件中。 “#binding1”这种在编号前面加井号的语法用来表示特定的绑定项，就像你要指向一个HTML文件中的锚一样。你需要把所有的绑定项放到一个文件 中。上面例子的结果，就是所有的scrollbar元素都会具有你通过“binding1”定义的行为模式。如果你在-moz-binding的url后面没有使用井号定义锚点，那么系统会自动使用这个XBL文件中的第一个绑定项。

在一个绑定项中，你可以定义五种类型的元素：

1. 内容（Content）：Content下面的子元素将被填充到被绑定的目标元素下面。
2. 属性（Properties）：属性将被添加到元素上，而且可以通过脚本访问。
3. 方法（Methods）：方法将被添加到元素上，而且也可以通过脚本直接访问。
4. 事件（Events）：可以为元素添加键盘和鼠标等事件，同时在绑定项中可以添加事件的默认处理脚本。当然你也可以额外定义新的事件。
5. 样式（Styles）：可以通过XBL为元素自定义新的样式。

实例

当你建立自定义组件的时候，box 元素应该是再平常不过了，当然你可以使用任何元素，甚至是自定义的。我们为box 元素设置上class属性，这样你就可以为所有class为这个值得box 分配一个绑定。请看下面的例子：

XUL (example.xul

):


<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?>

<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

">
  <box class="okcancelbuttons"/>
</window>

CSS (example.css):


box.okcancelbuttons {
    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
}

XBL (example.xml):
<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="okcancel">
<content>
<xul:button label="OK"/>
<xul:button label="Cancel"/>
</content>
</binding>
</bindings>


　　这个例子建立了只有一个box的window。box元素的class属性已经赋值为“okcancelbuttons”。在样式表中声明class为okcancelbuttons的box元素都被分配了一个定义在XBL文件中的绑定。除了box元素，你还可以使用其他元素，你自定义的元素都可以。
　　在下一节我们将对这个例子中XBL文件的细节进行详细解说，但现在我们可以做个小结，这个例子的结果就是两个按钮被自动添加到box里面，一个OK按钮和一个取消按钮。（译者注：绑定到哪个元素，就把content下面的内容添加到哪个元素里面）