firefox附加组件开发者指南（三）——XUL简介（下）

其他XUL功能

Overlay

XUL的一个与众不同的特性就是overlay。可以将多个XUL文档联合起来，并当做一个单独的XUL文档来处理。在Firefox中，这用来对各种功能进行模块化并实现了扩展。
通过在XML声明中插入一个xul-overlay处理指令和根元素的开始标签，通过xul-overlay指定的XUL文档会在当前当前的XUL文档读取的同时进行读取。实际显示的XUL文档是原始XUL文档和由xul-overlay指定的文档结合体。
将清单25的内容保存为文件base.xul。看看使用这个XUL文档的显示例子。
清单25：base.xul

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xul-overlay href="overlayDocument.xul"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="box1">
<label id="label1" value="Text label"/>
</hbox>
<hbox id="box2">
<label id="label2" value="Text label"/>
</hbox>
</window>

附加元素

当定义XUL文档打开为overlay的时候，使用overlay元素作为根元素。将清单26命名为overlayDocument.xul并保存在base.XUL文件相同目录下。
我们在Firefox窗口中打开base.xul。在读取base.xul的同时读取了文件overlayDocument.xul，结果如图19所示，overlayDocument.xul文件附加到 base.xul之后。
清单26：overlayDocument.xul文件

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Button 1"/>
<button label="Button 2"/>
<button label="Button 3"/>
</overlay>

图19：清单25和26的输出

合并与插入元素

通过在overlay的XUL文档中插入id属性到要添加的元素，基本文档中相同id值的元素就会将它们的属性和值合并到overlay文档中。
用清单27中的内容覆盖overlayDocument.xul并重新存储。
清单27：代替overlayDocument.xul的内容

<?xml version="1.0" encoding="UTF-8"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="box1" align="center" style="border: 1px solid; margin: 1em;">
<button label="Button 1"/>
<button label="Button 2" insertbefore="label1"/>
</hbox>
<button label="Button 3"/>
</overlay>

再次在Firefox窗口中打开base.xul。如图20所示，style属性从具有id为”box1”元素的overlay文档合并到了基文档中具有相同id的标签上，插入到box中。
图20：清单25和27的输出

更多的，声明了insertbefore=”label”的”button2”按钮插入到了id为label1的元素之前。相反的，如果想要直接插入到后面，就开业使用insertafter属性。也可以使用position元素的方法来准确定位到任何位置。例如，使用position=”4”可以将其插入作为第四个元素。

外部实体

XUL作为XML的一种形式，也可以使用基于DTD的实体参考，如清单28所示。注意外部DTD文件只限于使用chrome URL来给出。网页或本地目录的常规DTD文件不会打开。
Note: You may use a relative path to access a chrome URL from an XUL document.
清单28：读取外部实体

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<!DOCTYPE window SYSTEM "chrome://testapp/locale/testapp.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="&button.1.label;"/>
<button label="&button.2.label;"/>
</window>

清单29：testapp.dtd

<!ENTITY button.1.label "Firefox">
<!ENTITY button.2.label "Thunderbird">

属性声明的替代CSS

Gecko渲染引擎包含很多-moz-开头的CSS属性；这些是XUL的自定义属性，下面表4中显示了与常规XUL属性的对应。事实上，那些XUL属性是通过这些CSS属性来操作的。
为这些CSS属性声明的值与XUL属性使用的是相同的整型值或者按键值。然而不推荐将这些属性用于常规的XUL开发中，这些在自定义Firefox的UI时非常有用，不需要对userChrome.css编写脚本。例如，如果你将清单30中的内容命名为userChrome.css并保存到用户profile文件目录下的chrome目录，tab工具栏就会出现在内容区域的下方。
表4：css属性与XUL属性的对应

XUL attribute	CSS property	Example
orient	-moz-box-orient	-moz-box-orient: vertical;
align	-moz-box-align	-moz-box-align: start;
pack	-moz-box-pack	-moz-box-pack: stretch;
flex	-moz-box-flex	-moz-box-flex: 1;
ordinal	-moz-box-ordinal-group	-moz-box-ordinal-group: 2

清单30：一个将tab工具条放到底部的用户样式表

tabbrowser .tabbrowser-strip {
-moz-box-ordinal-group: 2;
}
tabbrowser tabpanels {
-moz-box-ordinal-group: 1;
}

文件类型对应的图标

Firefox中使用一种特殊的URI结构moz-icon来产生文件类型的图标，这些图标是Firefox运行的系统中的标准图标。例如，要为后缀为.pdf的文件显示一个16×16的图标，就可以使用moz-icon://.PDF?size=16。
你也可以使用内容类型作为关键词而不使用点后缀来作为图标的参考；例如，你可以使用moz-icon://goat?size=16&contentType=text/plain来显示一个纯文本的图标。
表2中提到的按钮图标也可以使用moz-icon URI来调用，使用的标记为moz-icon://stock/gtk-button name?size=button。注：在unix环境中这不起作用。

微调按钮

你可以为textbox元素添加一个type=”number”的声明就可以将文本框指定为一个熟人数字值的控件。这也会导致如图21所示的微调按钮的出现。与这个相关的属性是min和max用来设置最小和最大值，以及increment来设置党点击一次微调按钮时显示的值的变化量。
图21：用于数字输入的文本框

滑动条

scale元素用起来与windows中的音量控制滑块非常相似，用滑块可以通过上下或左右移动滑块来改变值（如清单31和图22所示）。
Note: Although this control is also known as a slider, the slider element already exists in XUL as a part of a scrollbar, so this element has been named "scale".
清单31：scale元素

<hbox>
<scale orient="horizontal" min="-100" max="100" value="0"/>
<scale orient="vertical" min="0" max="100" value="50"/>
</hbox>

图22：清单31的输出

译文PDF版下载