什麼是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下面的內容添加到哪個元素裡面）