本文配套源码
原文标题: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++;"/>