XUL_教程/XBL介绍

Introduction to XBL

 

XUL姐妹语言,XBL(eXtensible Bindings Language)。这种语言被用来声明XUL窗口控件的行为。<o:p xmlns:o="#unknown"> </o:p>


Bindings

您能够用XUL来为应用程序定义用户界面的外观。您能对元素的外观应用样式。您也能通过改变样式创建新的皮肤。所有元素的基础外观,比如滚动条和复选框,都能通过调整样式或设置元素参数进行修改。然而,XUL没有提供方法来改变元素工作的方式。例如,您想改变滚动条运行的方式,需要用到XBL<o:p xmlns:o="#unknown"> </o:p>

 

一个XBL文件包含一组binding。每一个绑定描述了XUL控件的行为。例如,一个绑定可能与一个滚动条相连。这个行为,除了描述组成滚动条的XUL元素,还描述了滚动条的属性和方法。<o:p xmlns:o="#unknown"> </o:p>


类似XULXBLXML语言,因此它有相似的语法规则。下述例子指出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文件的根元素,它包含了一个或多个binding元素。每个binding元素声明了一个单独的 bindingID属性能够用来确定 binding,就像上述的例子一样。模板有两个 binding,分别叫做 binding1 binding2。一个可能与滚动条相联系,另一个与菜单联系。一个 binding能够与任何的XUL元素相联系。如果您用 CSS类,就能用各种需要的不同的 bindings。注意上面模板中的binding元素的命名空间。这声明了我们使用的XBL的语法。


通过指定css-moz-binding的值为绑定文件的url,就可以把一个binding绑定到元素上.例如:

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

URL指向'chrome://findfile/content/findfile.xml'文件中的'binding1'<o:p xmlns:o="#unknown"> </o:p>

'#binding1'语法用来指向特定的 binding,这很像指向HTML文件的标签的方法。将所有的binding放进一个简单文件的里。例中结果是'binding1'将会描述所有的滚动条元素。如果您没用-moz-binding URL中的标签,就会用到XBL文件中的第一个binding<o:p xmlns:o="#unknown"> </o:p>

 

binding声明了五种类型:<o:p xmlns:o="#unknown"> </o:p>


      1. 内容:添加到binding绑定到的元素的子元素

       2. 属性:添加到binding绑定到的元素的属性。它们能通过脚本存取。<o:p xmlns:o="#unknown"> </o:p>

3. 方法:添加到binding绑定到的元素的方法。它们能从脚本调用。<o:p xmlns:o="#unknown"> </o:p>

4.事件:元素将响应的例如鼠标单击和按键这类事件。 binding能添加脚本,来提供默认操作。另外,能够定义新事件。<o:p xmlns:o="#unknown"> </o:p>

5. 样式:XBL被定义的binding绑定到的元素拥有的自定义样式的属性<o:p xmlns:o="#unknown"> </o:p>


Binding Example

<font class="Apple-style-span" color="#000000">Box</font>很通用,您能用它来创建自定义的窗口控件(虽然您能用任何元素,甚至自己构造的)。给一个<font class="Apple-style-span" color="#000000">box</font>标签分配一个类属性,您就可以将 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/gat...re.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/gat...re.is.only.xul">
  <binding id="okcancel">
    <content>
      <xul:button label="OK"/>
      <xul:button label="Cancel"/>
    </content>
  </binding>
</bindings>

这个例子创建了一个单box的窗口,这个box已经声明过含有一个 okcancelbuttons类。与文件相关的样式表阐述了含类okcancelbuttonsbox有在XBL文件中定义的特定的binding。除<font class="Apple-style-span" color="#000000">box</font>之外,可用其它元素,甚至自定义的标签。

 

XBL部分的细节将在下一章描述。然而,总结来说,它使得在box里自动增加了两个按钮。一个OK按钮,一个Cancel按钮。<o:p xmlns:o="#unknown"> </o:p>


在下一节,我们将讲述用XBL创建content


 

Document Tags and Contributors

Contributors to this page: Freebendy, alzhu
最后编辑者: Freebendy,