XUL 教程

待我称王封你为后i 2022-01-29 01:19 84阅读 0赞

转自：[https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/XBL%E4%BB%8B%E7%BB%8D][https_developer.mozilla.org_zh-CN_docs_Mozilla_Tech_XUL_Tutorial_XBL_E4_BB_8B_E7_BB_8D]

[« 上一页][Link 1][下一页 »][Link 2]

[XUL][]有一个姐妹语言，[XBL][]（可扩展绑定语言）。这种语言被用于声明 XUL 窗口控件的行为。

### Bindings[节][Link 3] ###

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

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

类似 XUL，XBL 是一种 XML 语言，所以它有与之相似的语法规范。下述例子展示了 XBL 文件的基础结构：

<?xml version="1.0"?>
    <bindings xmlns="http://www.mozilla.org/xbl">
      <binding id="binding1">
        
      </binding>
      <binding id="binding2">
        
      </binding>
    </bindings>

`bindings` 元素是 XBL 文件的根元素，包含了一个或多个 `bindings` 元素。每个 `bindings`元素都声明一个单独的 binding，`id` 属性可以用来确定 binding，就像上述的例子一样。模板有两个 binding，分别叫做 `binding1` 和 `binding2`。一个可与滚动条关联，另一个则与菜单关联。一个 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 示例[节][Link 8] ###

`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 创建内容][XBL 1]。

[« 上一页][Link 1][下一页 »][Link 2]

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

[https_developer.mozilla.org_zh-CN_docs_Mozilla_Tech_XUL_Tutorial_XBL_E4_BB_8B_E7_BB_8D]: https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/XBL%E4%BB%8B%E7%BB%8D
[Link 1]: https://developer.mozilla.org/zh-CN/docs/XUL_Tutorial:Property_Files
[Link 2]: https://developer.mozilla.org/zh-CN/docs/XUL_Tutorial:Anonymous_Content
[XUL]: https://developer.mozilla.org/en/XUL
[XBL]: https://developer.mozilla.org/en/XBL
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/XBL%E4%BB%8B%E7%BB%8D#Bindings
[Link 4]: https://developer.mozilla.org/zh-CN/XUL_Tutorial/Adding_Style_Sheets
[Link 5]: https://developer.mozilla.org/zh-CN/XUL_Tutorial/Creating_a_Skin
[Link 6]: https://developer.mozilla.org/zh-CN/XUL_Tutorial/Scroll_Bars
[Link 7]: https://developer.mozilla.org/zh-CN/XUL_Tutorial/Input_Controls#Checkboxes_and_Radio_Buttons
[Link 8]: https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/XBL%E4%BB%8B%E7%BB%8D#Binding_Example
[XBL 1]: https://developer.mozilla.org/en/XUL_Tutorial/Anonymous_Content