本文配套源码
原文标题：XUL Tutorial - Bindings - XBL Example
原文作者：Neil Deakin
原文地址：http://www.xulplanet.com/tutorials/xultu/xblex.html
下面是对原文的翻译：
这节将介绍一个XBL的完整例子。
幻灯片元素（A Slideshow Element）
让我们构建一个完整的使用XBL元素的例子，这是一个保存了一组对象的组件，而每页只会显示其中一个。置于下方的导航按钮用于循环显示这些对象，而在一个文本框中会显示当前的页号。你可以向页面添加任何元素，当然最好是一组图片，我们给这个组件起名叫做“幻灯片”元素。
首先，我们要决定哪些元素需要通过XBL的匿名内容显示。因为要实现翻页效果，所以使用deck元素来作为容器可能再合适不过了。循环显示的内容要 在XUL文件中定义，而不是在XBL中，但我们要把这些内容插入到XBL的deck中，这个操作会利用到children元素。在下方，我们需要添加两个 按钮用来分别显示上一页和下一页，还有一个文本组件（译者注：其实是一个label）用来显示页号。
实例11.8.1: 源代码
<binding id="slideshow">
<content>
<xul:vbox flex="1">
<xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1">
<children/>
</xul:deck>
<xul:hbox>
<xul:button xbl:inherits="label=previoustext"/>
<xul:label flex="1"/>
<xul:button xbl:inherits="label=nexttext"/>
</xul:hbox>
</xul:vbox>
</content>
</binding>
这个绑定项建立了我们需要的幻灯片结构。很多元素中都被添加了flex特性，这样他们就能自动进行布局。两个按钮上的label特性是从绑定元素上继承过来的，分别对应于各自需要的特性，previoustext和nexttext，这样就可以方便的修改按钮上显示的文字。XBL绑定项所关联到的元素的子元素将被显示在deck元素下面。selectedIndex是从元素上继承下来的特性，这样我们就能在XUL中设置初始显示的页面。
下面的XUL文件用来构建要显示的结果。
<box class="slideshow" previoustext="Previous" nexttext="Next" flex="1">
<button label="Button 1"/>
<checkbox label="Checkbox 2"/>
<textbox/>
</box>
样式表也不能少：
.slideshow {
-moz-binding: url("slideshow.xml#slideshow");
}
第一个按钮“Button 1”对应于deck中的第一页，由于没有给label组件设置值，所以label组件没有显示出来，我们当然可以为其设置一个值，但是在后面我们将会对其更多的操作。
接下来，我们将添加一个用于保存页号的属性，而这个属性从deck的selectedIndex特性中获取值，这个值对应的就是当前的页号。同样 的，我们也可以对这个属性进行修改，它将同步修改deck上的selectedIndex特性。另外，文本组件需要在页号发生改变的时候实时进行更新。
<property name="page"
onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));"
onset="return this.setPage(val);"/>
page属性的值来自于匿名内容数组的第一个元素。因为第一个元素返回的是vbox元素，所以为了获取deck元素，我们需要取vbox的第一个子 元素。这时候没有使用获取匿名内容的方法，是因为对于vbox来说deck在DOM中已经是可见的啦。总之最后我们获取的哦了selectedIndex 特性的值。为了修改当前的也号，我们需要增加一个setPage方法，这个方法将在下面定义。
在向前和向后按钮上需要增加oncommand事件处理程序，这就样可以在切换页面的时候修改页号。在这里这个操作很方便，因为我们只需要对刚刚添加的page属性进行修改就可以了：
<xul:button xbl:inherits="label=previoustext"
oncommand="parentNode.parentNode.parentNode.page--;"/>
<xul:description flex="1"/>
<xul:button xbl:inherits="label=nexttext"
oncommand="parentNode.parentNode.parentNode.page++;"/>