XUL有一个姐妹语言,XBL(可扩展绑定语言)。这种语言被用于声明 XUL 窗口控件的行为。

Bindings

你可以用 XUL 来为应用程序定义用户界面的外观。你可以通过 应用样式自定义元素的外观。你也可以通过改变样式以 创建新皮肤。所有元素的基础外观,比如 滚动条复选框,都可以通过调整样式或设置元素参数来进行修改。然而,XUL 没有提供改变元素的工作方式(或添加一个可重用的新元素)的方法。例如,您可能想改变滚动条的运行方式,就需要用到 XBL

一个 XBL 文件包含一组绑定(binding)。每个绑定描述一个 XUL 控件的行为。例如,一个绑定可以和一个滚动条相关联。这个行为除却描述滚动条的属性于方法之外,还描述了组成滚动条的 XUL 元素。

类似 XUL,XBL 是一种 XML 语言,所以它有与之相似的语法规范。下述例子展示了 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 文件的根元素,包含了一个或多个 bindings 元素。每个 bindings 元素都声明一个单独的 binding,id 属性可以用来确定 binding,就像上述的例子一样。模板有两个 binding,分别叫做 binding1binding2。一个可与滚动条关联,另一个则与菜单关联。一个 binding 可以和任意 XUL 元素相关联。如果你使用 CSS 类,就能按需使用各种不同的 binding。注意上面模板中的 bindings 元素的命名空间。它声明了我们所使用的 XBL 语法。

将绑定文件的链接正确设为 CSS 中 -moz-binding 的值,就可以把一个 binding 绑定到元素上。例如:

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

URL 指向了 “chrome://findfile/content/findfile.xml” 文件中的 ID“binding1”。“#binding1”语法用于指向特定的 binding,很像指向 HTML 文件中的 anchor 标签的语法。通常你会(借助此语法)把所有的 binding 放进一个单独的文件里。例中结果是“binding1”将会描述所有的滚动条元素。如果您没用-moz-binding URL中的标签,就会用到XBL文件中的第一个binding。

binding 声明了五种类型:

  1. 内容:添加到 binding 绑定到的元素的子元素
  2. 属性:添加到 binding 绑定到的元素的属性。它们能通过脚本存取。
  3. 方法:添加到 binding 绑定到的元素的方法。它们能从脚本调用。
  4. 事件:元素将响应的例如鼠标单击和按键这类事件。 binding能添加脚本,来提供默认操作。另外,能够定义新事件。
  5. 样式:被 XBL 定义的 binding 绑定到的元素所拥有的自定义样式的属性

Binding 示例

box 很通用,您能用它来创建自定义的窗口控件(虽然您能用任何元素,甚至自己构造的)。给一个 box 标签分配一个 class 属性,您就可以将 binding 连接到只属于该类的 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 的窗口,这个 box 已经声明过含有一个 okcancelbuttons 类。与文件相关的样式表阐述了含类 okcancelbuttons 的box有在XBL文件中定义的特定的binding。除 box 之外,可用其它元素,甚至自定义的标签。

部分 XBL 的细节将在下一章描述。不过呢,总结来说,它使得在box里自动增加了两个按钮。一个 OK 按钮,一个 Cancel 按钮。

在下一节中,我们将看看该如何 使用 XBL 创建内容

/*以下疑似是历史残余链接…*/

文档标签和贡献者

标签: 
此页面的贡献者: RainSlide, ziyunfei, Freebendy, alzhu
最后编辑者: RainSlide,