« 上一页Anonymous_Content">下一页 »
在这一节，我们将讲解用XBL创建content。
XBL Content
XBL被用来自动在另一个元素中添加一组元素。当内部元素用XBL描述时，XUL文件只需要指定外部元素。对于创建由其它控件构成的单独的控件来说这是很有用的，但只被认为是单独的控件。这里讲解了向由外部元素指定的内部元素添加属性的机理。
Declaring Scrollbar Example
以下的例子指出了滚动条是怎么声明的（从实例简化1bit）
<bindings xmlns="https://www.mozilla.org/xbl"
xmlns:xul="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="scrollbarBinding">
<content>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton type="increment"/>
</content>
</binding>
</bindings>
这个文件包含一个用binding元素声明的单独的binding。ID属性应该设置为binding的标识符。这会在css文件中设置-moz-binding属性时用到。
content标签被用来声明将被增进滚动条的anonymous content。content标签里的所有元素将被添加进被绑定界面元素内部。这种 binding将被绑定到滚动条，虽然没必要这样。将CSS -moz-binding 属性的设置为binding的URI的任何元素都将使用它。
使用上述 binding会导致下面的XUL的行会如下扩展，假设滚动条与上述的XBL相关联：
<scrollbar/>
expands to:
<scrollbar>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton type="increment"/>
</scrollbar>
含有content标签的元素被无记录的添加到滚动条。虽然无记录内容被显示在屏幕上，但在正常方式下，不能通过脚本得到它。对于XUL，就像只有一个元素，尽管它实际上由大量元素构成。
检查 Mozilla窗口中的滚动条，就会发现它由一个arrow按钮、一个slider、内部thumb和一个末尾的second arrow 按钮组成。它们都是XBL上面出现过的元素。这些元素将依次绑定在运用基础XUL元素的其它bindings上。请注意 content元素需要XUL姓名空间（他们出现在XUL之前：），因为他们是XUL元素，而且在XBL中无效。这个命名空间声明在bindings标签内。如果您不想使用XUL元素的命名空间， Mozilla将假定元素都是XBL，不理解这里，您的元素可能不会正常工作。
Filename Input Field Example
另一个例子是关于输入一个文件名的域：
<binding id="fileentry">
<content>
<textbox/>
<button label="Browse..."/>
</content>
</binding>
连接这个元素的binding将会导致输入浏览按钮之后的文本时它包含一个域。这个内部内容被匿名的创建了，而且用DOM不能查看到。
Override the Bound Element
Anonymous content被匿名的创建在 binding连接到一个元素的任何地方。如果您在XUL里放置子元素，他们将覆盖由binding提供的元素。例如XUL段，假设它早期与滚动条XBL绑定：(如果在xul文件中，给被绑定界面元素添加子元素，那么会覆盖掉binding中的元素。例如下面的xul片断，假设它被绑定到了前面的scrollbar的binding上)
<scrollbar/> <scrollbar> <button label="Overridden"/> </scrollbar>
第一个滚动条，因为它没有自己的内容，它将从在XBL文件里声明的binding来生成它的内容。第二个滚动条有它自己的内容，因此它将不会运用XBL内容，这产生了不完全是滚动条的产品。请注意比如滚动条这样的内建元素，从toolkit包的bindings目录得到它们的XBL。
这只应用于在content标签内定义的元素。不论content是否从XBL而来或不论XUL是否提供自己的content，XBL的属性、方法和其它方面仍然可用。
Using the Children Element
当您想将XBL的内容和由XUL文件提供的内容一起都显示出来，可能需要重复几次。您能运用children元素来实现。在XUL中添加的子元素被添加来替代children元素。当创建自定义菜单控件时，这是很容易操作的。例如，一个简单的可编辑的menulist元素，可能如下创建：
XUL:
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
</menu>
CSS:
menu.dropbox {
-moz-binding: url('chrome://example/skin/example.xml#dropbox');
}
XBL:
<binding id="dropbox">
<content>
<children/>
<xul:textbox flex="1"/>
<xul:button src="chrome://global/skin/images/dropbox.jpg"/>
</content>
</binding>
这个例子用旁边的按钮创建了一个输入域，menupopup将添加到由children元素指定位置。请注意对DOM结构来说，这些内容将与在XUL文件中显示的一样，因此menupopup将成为menu的一个子元素。对于开发者来说xbl的内容是看不到的，所以也没必要知道它的位置。
结果内容应该是：
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
<textbox flex="1"/>
<button src="chrome://global/skin/images/dropbox.jpg"/>
</menu>
includes Attribute
某些情况下，您可能希望只包括特定类型的内容。或者您只希望在不同的位置放置不同类型的内容。includes属性能够用来使只有某些元素才能在children的内容里出现。它的值应该设定到一个单独的标签名。或者到一个由“|”分隔的标签列表
<children includes="button"/>
所有的button将会被添加到被绑定元素的children所指明的位置。其它元素将不会与这个标签匹配。您能够放置多个children 元素到一个binding中，来在不同的地方放置不同类型的内容。如果XUL中一个元素没有匹配任何children元素，那个元素（和其他任何不匹配的元素）将会被用来替代这个绑定的内容。
这里有另一个例子。让我们来介绍一下创建一个控件，并用两边的zoom in 和zoom out 按钮显示图象的方法。这将用一个box来创建，它包含图象和两个按钮。因为每个用法不同，这个图象元素得放置在XBL外部。
XUL:
<box class="zoombox">
<image src="images/happy.jpg"/>
<image src="images/angry.jpg"/>
</box>
XBL:
<binding id="zoombox">
<content>
<xul:box flex="1">
<xul:button label="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black">
<children includes="image"/>
</xul:box>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
XUL文件中详述的子元素将放置在children标签位置。有两幅图象，因此两个都将被添加到彼此的旁边。显示结果等价如下：
<binding id="zoombox">
<content>
<xul:box flex="1">
<xul:button label="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black">
<xul:image src="images/happy.jpg"/>
<xul:image src="images/angry.jpg"/>
</xul:box>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
从 DOM的观点来看，子元素仍然在初始的存储单元。这就是说，外部的XUL box有两个子元素，它们是这两幅图像。里边带边框的box有一个子元素，就是children 标签。当使用带XBL的DOM时，这是一个重要的区别。这也可以应用于CSS选择器规则。
多个子元素
您也能够使用多个children元素而且可以把某些元素放置在一个地方，其它元素放置在其它地方，通过添加一个includes属性和将它设置成标签的垂直的bar-separated列表，您能够使得只有在那个列表里的元素被放置在那个地方。例如，下面的XBL将导致文本标签和按钮出现在与其他元素不同的地方。
<binding id="navbox">
<content>
<xul:vbox>
<xul:label value="Labels and Buttons"/>
<children includes="label|button"/>
</xul:vbox>
<xul:vbox>
<xul:label value="Other Elements"/>
<children/>
</xul:vbox>
</content>
</binding>
第一个children元素只含有标签和按钮元素，正如它的includes属性指示的一样。第二个children元素因为它没有includes属性，它将包含所有的剩余的元素。
See also Anonymous Content section of the XBL reference.
(Next)在下一节，我们将研究属性如何被继承到 anonymous content中.
« 上一页Anonymous_Content">下一页 »