XBL绑定组建的实例

高级java工程师

浏览: 405550 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

starry129

huizhou55

suming

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Chrome CSS XML

可以利用绑定方法创建具有复合功能的控件

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" class="boxBinding" value="age"/>
<button maxwidth="200px" label="通过content属性改变内容" oncommand="changeC();"/>

<spacer height="30px"/>
<box id="mybox2" class="boxBinding2">
      <label value="第二個綁定,xbl中的标签不会显示"/>
      <textbox value="xul中的textbox" />
</box>

    <spacer height="30px"/>
<box id="mybox3" class="boxBinding3">
      <label value="在xbl中用children标标签，xul,xbl标签同时显示"/>
      <textbox value="xul中的textbox" />
      <button label="show" oncommand=""/>
</box>

<spacer height="30px"/>
<abox id="mybox4" class="boxBinding4">
      <label value="children 的includes可以过滤显示xul中的元素"/>
      <textbox value="xul中的textbox" />
      <textbox value="xul中的textbox" />
      <textbox value="xul中的textbox" />
      <image src="xulplanet.png"/>
</abox>

<spacer height="30px"/>
<box id="mybox5" class="boxBinding5"/>

<spacer height="30px"/>
<box id="mybox6" class="boxBinding6"/>
</vbox>
</window>

//xblDemo.css
.boxBinding
{
-moz-binding: url("xblDemo.xml#boxBinding");
}

.boxBinding2
{
-moz-binding: url("xblDemo.xml#boxBinding2");
}

.boxBinding3
{
-moz-binding: url("xblDemo.xml#boxBinding3");
}

abox
{
-moz-binding: url("xblDemo.xml#boxBinding4");
}

.boxBinding5
{
-moz-binding: url("xblDemo.xml#boxBinding5");
}

.boxBinding6
{
-moz-binding: url("xblDemo.xml#boxBinding6");
}//xblDemo.xml
<?xml version="1.0"?>

<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">

<binding id="boxBinding">
<content>
    <xul:label   value="Name:" xbl:inherits="value"/> 
    <xul:textbox value="default value" xbl:inherits="value=content"/>
    

</content>
</binding>

<binding id="boxBinding2">
<content>
    <xul:textbox value="I am xbl: textbox"/>
   
</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:vbox>
</content>
</binding>

<binding id="boxBinding4">
<content>
    <xul:vbox>
      <children/>
      <xul:textbox value="I am xbl: textbox"/>
      <children includes="image|textbox"/>
      
    </xul:vbox>
</content>
</binding>

<binding id="boxBinding5" extends="#boxBinding2">

</binding>

<binding id="boxBinding6" extends="#boxBinding2">
<content> 
     <xul:textbox value="这是content中的绑定标签"/>
     <xul:button label="调用父类的方法" oncommand="fun();"/>
     
</content>
<implementation id="aa">

</implementation>
</binding>

</bindings>   [/color]

分享到：

javascript实现页面跳转的几种方式 | java实现集合合并

2011-04-07 13:55
浏览 1116
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论