2007年7月30日星期一

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

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

galeki posted @ 2007年05月20日 02:30PM in Firefox扩展开发 with tags firefox 扩展 开发 XUL
firefox扩展开发(五) : 驱动XUL界面

在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.  
  7. </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.  
  7.     <button label="普通的按钮"/>
  8.  
  9. </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.  
  7.     <label value="下面是一个普通的按钮:)"/>
  8.     <button label="普通的按钮"/>
  9.  
  10. </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.  
  7.         <label value="用户名"/>
  8.         <textbox id="username"/>
  9.         <label value="密码"/>
  10.         <textbox id="password" type="password" maxlength="10"/>
  11.  
  12.         <label value="个人简介"/>
  13.         <textbox multiline="true"
  14.                  value="在这里填入你的个人简介。" />
  15.  
  16. </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.  
  7.         <label value="用户名"/>
  8.         <textbox id="username"/>
  9.         <label value="密码"/>
  10.         <textbox id="password" type="password" maxlength="10"/>
  11.         <label value="你喜欢的颜色"/>
  12.         <radiogroup >
  13.             <radio id="blue" label="蓝色" />
  14.             <radio id="yellow" selected="true" label="黄色"/>
  15.             <radio id="red" label="红色" />
  16.         </radiogroup >
  17.         <checkbox label="保存我的信息"/>
  18.         <label value="个人简介"/>
  19.         <textbox multiline="true"
  20.                  value="在这里填入你的个人简介。" />
  21.  
  22. </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.  
  7.         <menulist >
  8.           <menupopup >
  9.             <menuitem label="红色"/>
  10.             <menuitem label="蓝色"/>
  11.             <menuitem label="黄色" selected="true" />
  12.           </menupopup >
  13.         </menulist >
  14.  
  15. </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.  
  7.         <progressmeter
  8.             id="progress1"
  9.             mode="determined"
  10.             value="60%" />
  11.         <progressmeter
  12.             id="progress2"
  13.             mode="undetermined" />
  14.  
  15. </window >


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



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

没有评论: