Today's the day

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

firefox扩展开发(一) ： 扩展的基本结构
firefox扩展开发(三) ： 排列窗口控件

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

galeki posted @ 2007年5月20日 22:30 in Firefox扩展开发 with tags firefox 扩展 开发 XUL , 15019 阅读

在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创建出一个窗口所具备的基本控件的方法，但是这些空间只能按照次序从上到下的显示，而且，每个元素将占满窗口的整个宽度，接下来，我们要看一下怎么布局窗口中众多的控件。

 

Small_feed 评论 (31)
1
[回复]
kuzhengchun 说:
2009年2月06日 23:53

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

2
[回复]
kuzhengchun 说:
2009年2月06日 23:53

楼主能抽空回答一下吗

3
[回复]
Avatar_small
galeki 说:
2009年2月07日 14:29

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

4
[回复]
test 说:
2011年6月09日 08:49

firefox4.0好像不能打开这种xul为扩展名的文件。

5
[回复]
thomasyoung 说:
2020年11月03日 17:45

Treat Assignment Help is one of the most trusted names in UK offering Marketing Dissertation Help . Our dissertation writing experts will help you to choose right quantitative analysis tool during your assignments. For More Services: Programming Language Assignment Help | Biology Dissertation Help | Assignment Writing Services

6
[回复]
no excuses runner 说:
2021年3月11日 20:08

Nothing compares to Weber using Genesis sort of grills. That is certainly the type gas grills which have been that will always make sure that they deliver a high performance part of down interval 먹튀검증업체

7
[回复]
no excuses runner 说:
2021年3月16日 17:07

Wow, excellent post. I'd like to draft like this too - taking time and real hard work to make a great article. This post has encouraged me to write some posts that I am going to write soon. 먹튀검증사이트

8
[回复]
no excuses runner 说:
2021年3月20日 19:51

If you are looking for more information about flat rate locksmith Las Vegas check that right away. 꽁머니 사이트

9
[回复]
Weight Loss 说:
2021年3月30日 14:52

Persons appreciate shopping for amazing, appealing, fascinating and from time to time attractive aromas for them selves and pertaining to others. This can be executed conveniently along with inexpensively in an on-line perfume shop. Onewheel Pint Accessories

10
[回复]
no excuses runner 说:
2021年4月03日 18:49

I love significantly your own post! I look at all post is great. I discovered your personal content using bing search. Discover my webpage is a great one as you.I work to create several content this post. Once more you can thank you and keep it create! Enjoy! Onewheel Accessory

11
[回复]
no excuses runner 说:
2021年4月05日 18:23

This was a shocking post. It has some look at here fundamental data on this subject. IT Support companies near me Beverlywoods Los Angeles, California

12
[回复]
Faddy 说:
2021年4月06日 16:49

Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. 안전놀이터

13
[回复]
Best Maldives Hotel 说:
2021年5月18日 02:52

Find the right Luxury hotel for your honeymoon Rawnaq Tourism recommends the Best Maldives Hotels depending on your individual needs

14
[回复]
no excuses runner 说:
2021年7月24日 14:33

No Deposit Casino Sites 2021 are quite a popular choice for players online, casino with no deposit is a very effective way to play online games without spending any capital start. No Deposit Casino Sites 2021

15
[回复]
ทดลอง บาคาร่า 说:
2022年4月23日 10:53

I have bookmarked your website because this site contains valuable information in it. I am really happy with articles quality and presentation. Thanks a lot for keeping great stuff. I am very much thankful for this site. โปรบาคาร่า

16
[回复]
บาคาร่า เครดิตฟรี 说:
2022年6月06日 08:34

I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details. บาคาร่า เครดิตฟรี

17
[回复]
COOK 说:
2023年1月09日 19:17

I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing. เว็บแทงบอล

18
[回复]
COOK 说:
2023年1月09日 22:34

Absolutely stunning jacket. The quality is incredible for the price range. I really appreciate that the company is deciding to put the customer’s needs first with going out if their way to may you feel special and important. You are treated like you in a higher end market. 100% recommend and will be purchasing from them again. Leather Jacket NYC

19
[回复]
harry 说:
2023年1月18日 17:46

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. asianbookie bandar

20
[回复]
COOK 说:
2023年1月26日 05:32

i am for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot. I hope to present something back and help others such as you helped me. ikaria juice

21
[回复]
COOK 说:
2023年2月13日 17:12

Absolutely stunning jacket. The quality is incredible for the price range. I really appreciate that the company is deciding to put the customer’s needs first with going out if their way to may you feel special and important. You are treated like you in a higher end market. 100% recommend and will be purchasing from them again. Black Leather Jacket Mens

22
[回复]
COOK 说:
2023年2月13日 17:51

Thank you for another great article. Where else could anyone get that kind of information in such a perfect way of writing? I have a presentation next week, and I am on the look for such information. Best Business

23
[回复]
COOK 说:
2023年2月14日 04:26

That appears to be excellent however i am still not too sure that I like it. At any rate will look far more into it and decide personally! Bill Gates’s Net Worth

24
[回复]
COOK 说:
2023年2月20日 04:42

This article was written by a real thinking writer. I agree many of the with the solid points made by the writer. I’ll be back. 먹튀

25
[回复]
harry 说:
2023年2月27日 18:14

i am for the first time here. I found this board and I in finding It truly helpful & it helped me out a lot. I hope to present something back and help others such as you helped me. pialabola

26
[回复]
COOK 说:
2023年3月06日 04:54

That appears to be excellent however i am still not too sure that I like it. At any rate will look far more into it and decide personally! Trb System

27
[回复]
COOK 说:
2023年3月12日 05:14

I am glad you take pride in what you write. This makes you stand way out from many other writers that push poorly written content. Trbsystem

28
[回复]
harry 说:
2023年3月19日 18:17

I got what you mean , thanks for posting .Woh I am happy to find this website through google. unogoal

29
[回复]
COOK 说:
2023年3月23日 20:15

Wow! This could be one of the most useful blogs we have ever come across on thesubject. Actually excellent info! I’m also an expert in this topic so I can understand your effort. Ikaria lean belly juice ingredients

30
[回复]
Banaswadi Escort Ser 说:
2023年4月26日 15:03

You won't have to worry about our rates being too high or not providing a worthwhile experience. With us, it is about quality over quantity and we are sure you will see the difference.

31
[回复]
Basaveshwara Nagar E 说:
2023年4月26日 15:13

The intention of our call girls is clear and to the point. They just want to give a broad satisfied smile on the face of our customers. The specialty of our call girls is to be in their respective fields.


登录 *


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