Today's the day

向软件大牛炫耀我会焊单片机,向硬件大牛炫耀我会写 Rails,向软硬件大牛炫耀我生物,向软硬件生物大牛炫耀我会折腾期货 -_-bbb

firefox扩展开发(四) : 更多的窗口控件
firefox扩展开发(六) : 关于event对象

firefox扩展开发(五) : 驱动XUL界面

galeki posted @ 2007年6月02日 23:42 in Firefox扩展开发 with tags firefox 扩展开发 XUL javascript , 13135 阅读

前面几节,讨论了怎么用XUL创建窗口控件,这样我们就能创建出漂亮的程序界面,但是现在点击窗口中的控件,却什么也不会发生,接下来我们来看看怎样驱动界面中的控件。

大家都知道,在HTML中,同样也有简单的控件,比如按钮、单选、复选框,主要用HTML中的<input>标签来实现,HTML中是怎样驱动这些控件的呢?一般是通过诸如onclick、onfocus、onmouseover等等事件属性,通过事件驱动,再配合javascript来完成,比如:

<input type="button" onclick="alert('我被点击了!')" />

如上代码在HTML中创建一个普通的按钮,点击它时,弹出“我被点击了!”的对话框。

在XUL中,驱动控件的方法和HTML基本相同,并且,也是通过javascript来完成,在XUL里,最有用的事件属性是oncommand,当控件被激活时就会出发这个事件,比如按钮被点击,单选复选框被点击,菜单项被点击等等,比如:

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.  
  8.     <label value="下面是一个普通的按钮:)"/>
  9.     <button label="普通的按钮" oncommand="alert('我被点击了!')"/>
  10.  
  11. </window>

点击按钮,和HTML中一样,弹出窗口显示:

通过javascript的事件冒泡,可以在上层元素中捕获下层元素的事件信息,并进行识别处理:

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.  
  8.         <vbox oncommand="alert(event.target.tagName + ' 被点击');">
  9.           <button label="普通的按钮"/>
  10.           <checkbox label="我是单选框"/>
  11.         </vbox>
  12.  
  13. </window>

当事件被激活,event.target中包含了被激活对象的信息,其中tagName就是对象标签的名称,可以通过它识别事件实在哪个标签(也就是控件)上被激活的。效果如下:

在XUL中,负责事件处理的javascript代码,可以像上面那样内联在xml标签中,也可以像HTML那样,从外部的js文件中引用:

button.js 文件:
  1. function show_ok()
  2. {
  3.     alert("我被点击了!");
  4. }

在XUL文件中,用<script>标签引用外部的js文件:

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.    
  8.     <script src="button.js" />
  9.     <label value="下面是一个普通的按钮:)"/>
  10.     <button label="普通的按钮" oncommand="show_ok()"/>
  11.  
  12. </window>

 效果和第一张图片一样。

你也可以通过熟悉的getElementById函数取得想要的对象,然后再用addEventListener函数动态的为元素添加事件处理函数,这样的好处就是完全分开了XUL和javascript,负责不同功能的两种语言不再纠缠在一起:

my_button.js 文件:
  1. function show_ok()
  2. {
  3.     alert("我被点击了!");
  4. }
  5. var button = document.getElementById("my_button");
  6. button.addEventListener('command', show_ok, true);
  7. /*
  8. * 参数1为事件名称,oncommand即为command
  9. * 参数2为事件处理函数
  10. * 参数3为true 表示不捕捉冒泡消息
  11. */
  12.  
  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  7.    
  8.     <label value="下面是一个普通的按钮:)"/>
  9.     <button label="普通的按钮" id="my_button"/>
  10.     <script src="my_button.js" />
  11.  
  12. </window>

 效果和上面一样。

值得注意的是,首先得在XUL中指定对象的id属性,<script>标签也得在想引用的元素后面出现才可以,因为如果在前面,那时候下面的元素还没有被创建,getElementById也找不到它。

sorama 说:
2007年6月03日 04:46

 很好啊,加油!:)

Avatar_small
galeki 说:
2007年6月03日 06:32

多谢关注!努力中~

hawkxp 说:
2007年6月03日 23:38

太好了,关注中

djstava 说:
2007年10月30日 19:07 XUL文件如何引用JS文件中的变量值?请教!!!
Avatar_small
galeki 说:
2007年11月06日 09:43 唉,好久没看,都忘记了……
Piggest 说:
2008年1月25日 01:33 太强了,写的太好了,你懂plugins的开发吗? 我也想学学,就是有点摸不着门路
Avatar_small
galeki 说:
2008年1月25日 14:20

多谢支持~ 我也是新手,刚学了这一点点

生如夏花 说:
2008年5月08日 05:55 一口气看完。。
闲耘 说:
2008年11月02日 21:38

真正的实战系列,好文,虽然还有些问题,但是等我看完这个系列再向您请教。

闲耘 说:
2008年11月02日 21:39

真正的实战系列,好文,虽然还有些问题,但是等我看完这个系列再向您请教。


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter