firefox扩展开发(二):用XUL创建窗口控件
2008-06-11 16:57

1.创建一个简单的窗口

  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"。

转自:http://www.cnblogs.com/jxsoft/archive/2011/04/07/2008179.html

firefox扩展开发(二):用XUL创建窗口控件的更多相关文章

  1. firefox 扩展开发笔记(三):高级ui交互编程

    firefox 扩展开发笔记(三):高级ui交互编程 前言 前两篇链接 1:firefox 扩展开发笔记(一):jpm 使用实践以及调试 2:firefox 扩展开发笔记(二):进阶开发之移动设备模拟 ...

  2. Firefox扩展开发

    Firefox扩展开发 (插件开发) Extension开发 入门教程 5步走 五步走   首先需要知道什么是"Firefox插件".这里说的"插件"只是一个通 ...

  3. python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐(二)

    在上一篇blog:python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 中介绍了python中的tkinter的一些东西,你可能对tkinter有一定的了解了.这篇b ...

  4. 通过C# WinForm控件创建的WPF WIndow窗口控件无法输入的问题

    原文:通过WinForm控件创建的WPF 控件无法输入的问题 今天把写的一个WPF程序发布到别的机器上执行,发现一个比较奇怪的问题:在那个机器上用英文输入法无法输入数字,非要切换到中文输入法才行:但在 ...

  5. python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐

    在了解python中的tkinter模块的时候,你需要了解一些tkinter的相关知识 下面是python的API文档中的一个简单例子: import tkinter as tk class Appl ...

  6. 如何用ATL创建ActiveX控件

    演示截图: 代码简介或代码解析: 如何用ATL创建ActiveX控件 实现了一个ActiveX控件,它在一个圆内部有个正多边形,当用户在多变形内部单击将会使多边形的边数在当前的基础上+1,在多变形外部 ...

  7. 用ATL和MFC来创建ActiveX控件

    摘要:目前MFC和ATL代表了两种框架,分别面向不同类型的基于Windows的开发.MFC代表了创建独立的Windows应用的一种简单.一致的方法:ATL提供了一种框架来实现创建COM客户机和服务器所 ...

  8. 【Windows编程】系列第二篇:Windows SDK创建基本控件

    在Win32 SDK环境下,怎么来创建常用的那些基本控件呢?我们知道如果用MFC,简单的拖放即可完成大多数控件的创建,但是我们既然是用Windows SDK API编程,当然是从根上解决这个问题,实际 ...

  9. iOS开发UI篇—Quartz2D(自定义UIImageView控件)

    iOS开发UI篇—Quartz2D(自定义UIImageView控件) 一.实现思路 Quartz2D最大的用途在于自定义View(自定义UI控件),当系统的View不能满足我们使用需求的时候,自定义 ...

随机推荐

  1. PAT甲级——A1039 Course List for Student

    Zhejiang University has 40000 students and provides 2500 courses. Now given the student name lists o ...

  2. [转载] DSP6000图像位移与变形典型算法

    原文地址:转载:DSP6000图像位移与变形典型算法作者:Jane 李现路:DSP6000图像位移与变形典型算法 一.图像的平移算法 图像平移的数学表达式原理: 初始坐标为(x0,y0)的点经过平移( ...

  3. Django项目: 项目环境搭建 ---- 一、创建django项目

    项目环境搭建 一.创建django项目 1.创建python虚拟环境 在虚拟机上创建python虚拟环境,因为实际项目部署,实在linux mkvirtualenv -p /usr/bin/pytho ...

  4. Elasticsearch快速开始

    Elasticsearch是一个分布式RESTful风格的搜索和数据分析引擎 查询:Elasticsearch允许执行和合并多种类型的搜索——结构化.非结构化.地理位置.度量指标.搜索方式随心而变 分 ...

  5. JasperReport生命周期3

    JasperReports的主要目的是为了在一个简单而灵活的方式创建页面为导向,准备好打印文档.下面的流程图描述了一个典型的工作流程,同时创建报表. 如在图片的生命周期具有以下明显的阶段 设计报表在这 ...

  6. pytorch 多GPU训练过程中出现ap=0情况

    原因可能是pytorch 自带的BN bug:安装nvidia apex 可以解决: $ git clone https://github.com/NVIDIA/apex $ cd apex $ pi ...

  7. windows console 控制台自启动

    var fileName = Assembly.GetExecutingAssembly().Location; System.Diagnostics.Process.Start(fileName);

  8. 针对老式浏览器(主要是IE6、7、8)的css3-mediaqueries.js自适应布局

    <meta name="viewport" content="width=device-width, initial-scale=1" /> vie ...

  9. JDK8日期时间操作小汇总

    统一使用java.time.*包下的类 1.获取当前的日期.时间.日期加时间 LocalDate todayDate = LocalDate.now(); //今天的日期 LocalTime now ...

  10. 彩色图像与二值图像(mask)点乘

    问题描述:给出一幅彩色图像和一张mask二值图像,其中mask和彩色图像大小相同,感兴趣的部分为1,其余部分为0,请用mask与彩色图像点乘,将感兴趣区域显示出来. 点乘的本质是mask中是二值图像, ...