firefox扩展开发(一) ： 扩展的基本结构

firefox扩展开发(二)：用XUL创建窗口控件

galeki posted @ 2007年5月20日 14:30 in Firefox扩展开发 with tags firefox 扩展 开发 XUL , 5168 阅读
firefox扩展开发(三) ： 排列窗口控件

在Firefox中，所有的界面都是基于XUL文件描述的，XUL本身是一个XML文件。就连Firefox本身，也是基于XUL的，不信的话，可以在firefox的地址栏中敲入： chrome://browser/content/browser.xul ，看看会出现什么情况吧。

1.创建一个简单的窗口

多说无益，让我们看一个简单的XUL文件示例：

  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. </window>

把上述的代码保存为test.xul，然后在firefox的“文件” --> “打开文件” 中打开这个文件，就可以看到（下图）。

哎，怎么啥都没有？ 因为我们还没有往窗口中加入任何东西，所以除了标题栏之外，是一片空白。实际上，上面的XUL文件，是每个窗口的基本框架。

第1行是XML文件的基本表示，第2行引用渲染窗口控件的样式表文件，这里我们先跳过对这行的解释，只要知道“chrome://global/skin/” 引用的是firefox全局默认的样式表即可。

第3行的<window>元素，就是窗口的根元素，你可以把它想象成HTML中的<html>元素。属性id的值可以随便取，和HTML中的id属性相同，必须要保证全局唯一，因为之后我们要通过id来引用每个窗口。title属性就是窗口的标题，xmlns是名称空间，说明之下的内容是XUL。

窗口中所有的内容，都要放在<window>和</window>之间，就像HTML中所有的元素必须放在<html>和</html>之间一样。

2.让我们往窗口里添点东西吧

所有一般程序具有的窗口控件（按钮、单选复选框、文本输入框、下拉菜单……），在firefox的窗口中都可以实现，只不过，不同的窗口控件在XUL中变成了不同的XML标签，控件的属性（大小、文本、排列方式……）变成了标签的属性值而已。

2.1按钮

我们先来添加个按钮，打开test.xul，添加下面的代码：

  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.     <button label="普通的按钮"/>
  9.  
  10. </window>

按钮在XUL中就是<button>这个标签，label属性为按钮上显示的文字。

2.2文字

在窗口上显示的文字，用<label>标签来显示：

  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="普通的按钮"/>
  10.  
  11. </window>

2.3文本输入框

文本输入框，为<textbox>标签。让我们清除刚才添加的代码，下面的代码显示了<textbox>的几种用法。

  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.         <textbox id="username"/>
  10.         <label value="密码"/>
  11.         <textbox id="password" type="password" maxlength="10"/>
  12.  
  13.         <label value="个人简介"/>
  14.         <textbox multiline="true"
  15.                  value="在这里填入你的个人简介。"/>
  16.  
  17. </window>

第11行，密码输入框要设置type属性为"password"；第14行，如果需要多行的输入框，需要指定multiline为"true"。

2.4单选和复选框

单选框为<radio>，复选为<checkbox>。

单选框的分组，只要把单选框标签包含在<radiogroup>中即可。看代码:

  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.         <textbox id="username"/>
  10.         <label value="密码"/>
  11.         <textbox id="password" type="password" maxlength="10"/>
  12.         <label value="你喜欢的颜色"/>
  13.         <radiogroup>
  14.             <radio id="blue" label="蓝色"/>
  15.             <radio id="yellow" selected="true" label="黄色"/>
  16.             <radio id="red" label="红色"/>
  17.         </radiogroup>
  18.         <checkbox label="保存我的信息"/>
  19.         <label value="个人简介"/>
  20.         <textbox multiline="true"
  21.                  value="在这里填入你的个人简介。"/>
  22.  
  23. </window>

 

2.5下拉选项

  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.         <menulist>
  9.           <menupopup>
  10.             <menuitem label="红色"/>
  11.             <menuitem label="蓝色"/>
  12.             <menuitem label="黄色" selected="true"/>
  13.           </menupopup>
  14.         </menulist>
  15.  
  16. </window> 

每个选项包含在<menuitem>中，<menuitem>再被包含在<menupopup>和<menulist>中。

2.6进度条

用<progressmeter>表示。进度条分为两类，一种是有明确完成进度的，一种是没有完成进度的，通过设置mode="determined"和
mode="undetermined"来实现。

看一下效果就明白了：

  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.         <progressmeter
  9.             id="progress1"
  10.             mode="determined"
  11.             value="60%"/>
  12.         <progressmeter
  13.             id="progress2"
  14.             mode="undetermined"/>
  15.  
  16. </window>

至此，我们介绍了用XUL创建出一个窗口所具备的基本控件的方法，但是这些空间只能按照次序从上到下的显示，而且，每个元素将占满窗口的整个宽度，接下来，我们要看一下怎么布局窗口中众多的控件。

 

Trackback URI Small_feed 评论 (3)
1
回复
kuzhengchun 说:
2009年2月06日 15:53

我按照楼主所示的进行操作，显示乱码，在windows下，是不是要加编码说明

2
回复
kuzhengchun 说:
2009年2月06日 15:53

楼主能抽空回答一下吗

3
回复
Avatar_small
galeki 说:
2009年2月07日 06:29

虽然我在 windows 下测试没有出现乱码，不过最好加上编码说明，并保证和文件的编码一致。


* 登录
*

simple_captcha.jpg
(输入验证码)