XBL绑定组建的实例
可以利用绑定方法创建具有复合功能的控件
1.被绑定的标签常由样式表指向绑定元素定义的.xml,
如: xbltest.css中
#shortcutlistbutton_popup
{
min-width:200px;
min-height:300px;
-moz-binding:url(chrome://proj/content/bindings/startmenu.xml#startpopup);
}
其中-moz-binding 表明这是一个绑定样式,具体绑定到的位置由url指定.
2.在使绑定的控件所在的.xml页中要先引入xbl命名空间
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
......
</bindings>
3.在<bindings></bindings>之间可以有多个<binding>标签,每一个binding标签表示一个绑定
<content>标签中为绑定的内容,当绑定xul标签时,在xbl中每一个标签名称前要加xul: 在xbl中的标签没有id属性,所以不可以直接在.xul或.js中访问,在xbl中标签作为匿名控件具有anonid属性,在xbl中可以通过
document.getAnonymousElementByAttribute(this,'anonid','toolBarBtn').来得到匿名标签.
在xul中可以通过用 绑定的xul控件.属性=newvalue的方式来改变在xbl中描述的标签的属性.
4 <implementation>标签中存放一系列的属性和方法,<method>表示方法
<resources>中可用于引入源如:
<resources>
<stylesheet src="hello.css"/>
<image id="img" src="1.jpg"/>
</resources>
例:xblDemo.xul
[color=red]<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="xblDemo.css" type="text/css"?>
<window xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="" >
<script>
function changeC()
{
document.getElementById("mybox").setAttribute("content","9");
var obj=document.getElementById("mybox");
alert(obj.getAttribute("content"));
}
</script>
<vbox flex="1" style="overflow:auto">
<label value="下面是绑定一个box"/>
<box id="mybox" value="age"/>
<button maxwidth="200px" label="通过content属性改变内容" oncommand="changeC();"/>
<spacer height="30px"/>
<box id="mybox2" />
</box>
<spacer height="30px"/>
<box id="mybox3" />
<button label="show" oncommand=""/>
</box>
<spacer height="30px"/>
<abox id="mybox4" />
<textbox value="xul中的textbox" />
<textbox value="xul中的textbox" />
<image src="xulplanet.png"/>
</abox>
<spacer height="30px"/>
<box id="mybox5"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="boxBinding">
<content>
<xul:label value="Name:" xbl:inherits="value"/> <!--xbl:inherits使xul中的标签具有绑定元素的属性,此处为具有value属性-->
<xul:textbox value="default value" xbl:inherits="value=content"/>
<!--前面的value="default value"是绑定控件具有的默认值,可以通过inherits继承到xul中的绑定标签上,这里使xul中的绑定标签具有了content属性-->
</content>
</binding>
<binding id="boxBinding2">
<content>
<xul:textbox value="I am xbl: textbox"/>
<!--在本binding中,由于xul中綁定的box中已有了元素,所以在xbl中的綁定标签不起作用了,如果还想显示xbl中的标签用children标记，见下例boxbinding3-->
</content>
<implementation id="www">
<method name="fun">
<body>
<![CDATA[
alert("hello,in boxBinding2");
]]>
</body>
</method>
</implementation>
</binding>
<binding id="boxBinding3">
<content>
<xul:vbox>
<xul:textbox value="I am xbl: textbox"/>
<children />
<!--当xul中标签已存在标签，会覆盖掉xbl中的绑定标签。可以在xbl中加上children标记，使xul,xbl中标签同时显示在绑定元素中-->
</xul:vbox>
</content>
</binding>
<binding id="boxBinding4">
<content>
<xul:vbox>
<children/><!--必需有一个空的children，过滤才起作用-->
<xul:textbox value="I am xbl: textbox"/>
<children includes="image|textbox"/>
<!--children标签还可以筛选xul中的指定类型的标签-->
</xul:vbox>
</content>
</binding>
<binding id="boxBinding5" extends="#boxBinding2">
<!--在boxBinding5中，并没有直接去写绑定的标签，而是用extends去
继承boxinding2，从而使xul中的mybox5具有了textbox -->
</binding>
<binding id="boxBinding6" extends="#boxBinding2">
<content> <!--如果在binding中写上content标签，则只有写在content中的绑定标签起作用.(即使有extends继承就失效了-->
<xul:textbox value="这是content中的绑定标签"/>
<xul:button label="调用父类的方法" oncommand="fun();"/>
<!--虽然boxBinding2中的标签不会在xul中显示出来，但boxBinding2中定义的方法还可以调用-->
</content>
<implementation id="aa">
</implementation>
</binding>
</bindings> [/color]
