XUL_教程/匿名内容

此页有脚本错误。在网站编辑解决此问题前,你可以查看以上的部分内容。

 

{{ PreviousNext("Introduction to XBL }}", "Anonymous Content")

在这一节,我们将讲解用XBL创建content。

XBL Content

XBL被用来自动在另一个元素中添加一组元素。当内部元素用XBL描述时,XUL文件只需要指定外部元素。对于创建由其它控件构成的单独的控件来说这是很有用的,但只被认为是单独的控件。这里讲解了向由外部元素指定的内部元素添加属性的机理。

Declaring Scrollbar Example

以下的例子指出了滚动条是怎么声明的(从实例简化1bit)

<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://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将导致文本标签和按钮出现在与其他元素不同的地方。

{{ Xultu-s("ex_xblcontent_1.xml") }}

<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中.

{{ PreviousNext("Introduction to XBL }}", "Anonymous Content")

{{ languages( { "fr": "fr/Tutoriel_XUL/Contenu_anonyme", "ja": "ja/XUL_Tutorial/Anonymous_Content", "pl": "pl/Kurs_XUL/Tre\u015b\u0107_anonimowa" } ) }}

Document Tags and Contributors

Contributors to this page: Sheppy, francejason
最后编辑者: francejason,