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

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

2008-06-11 17:00

在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">
8. <label value="下面是一个普通的按钮:)"/>
9. <button label="普通的按钮" oncommand="alert('我被点击了！')"/>
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">
8. <vbox oncommand="alert(event.target.tagName + ' 被点击');">
9.    <button label="普通的按钮"/>
10.    <checkbox label="我是单选框"/>
11. </vbox>
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">
8. <script src="button.js" />
9. <label value="下面是一个普通的按钮:)"/>
10. <button label="普通的按钮" oncommand="show_ok()"/>
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. */

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">
8. <label value="下面是一个普通的按钮:)"/>
9. <button label="普通的按钮" id="my_button"/>
10. <script src="my_button.js" />
12. </window>

效果和上面一样。

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