2007年7月30日星期一

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


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

galeki posted @ 2007年06月02日 03:42PM in Firefox扩展开发 with tags firefox 扩展开发 XUL javascript
firefox扩展开发(六) : 关于event对象

前面几节,讨论了怎么用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.  
  7.     <label value="下面是一个普通的按钮:)"/>
  8.     <button label="普通的按钮" oncommand="alert('我被点击了!')" />
  9.  
  10. </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.  
  7.         <vbox oncommand="alert(event.target.tagName + ' 被点击');">
  8.           <button label="普通的按钮"/>
  9.           <checkbox label="我是单选框"/>
  10.         </vbox >
  11.  
  12. </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.    
  7.     <script src="button.js" />
  8.     <label value="下面是一个普通的按钮:)"/>
  9.     <button label="普通的按钮" oncommand=" show_ok()"/>
  10.  
  11. </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.    
  7.     <label value="下面是一个普通的按钮:)"/>
  8.     <button label="普通的按钮" id= "my_button"/>
  9.     <script src="my_button.js" />
  10.  
  11. </window>

 效果和上面一样。

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


--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

没有评论: