可扩展标记语言用户界面语言--XUL的定义及标签(详细)

前言: 最近博主在帮国企维护一个老项目,拿到手后很苦恼,10多年前的用的技术没见过啊,前端用的是XUL,哈哈哈,刚开始也是云里雾里的,一脸懵啊,后来慢慢就步入正轨~
XUL是什么 可扩展标记语言用户界面语言。它是为了支持Mozilla系列的应用程序(如Mozilla Firefox和Mozilla Thunderbird)而开发的使用者界面标示语言。顾名思义,它是一种应用可扩展标记语言(标准通用标记语言的子集)来描述使用者界面的标记语言~
基本解释: 虽然XUL并不是一种公开的标准,但它重用了许多现有的标准和技术,包括CSS、JavaScript、DTD和RDF等。所以对于有网络编程和设计经验的人士来说,学习XUL比学习其他使用者界面标示语言相对简单。
好处: xul提供了一套简易和跨平台的widget定义。节省了编程人员在开发软件时所付出的努力。
一个XUL界面一般包含以下三部分:
内容:定义使用者界面的XUL档;
Skine(皮肤):定义程序外观的层叠样式表和图像档;
Locale(区域):定义界面字串的DTD档(为了软件本地化)。
以下是本博主在网上收集的xul资料
来自:https://wangjinlongaisong-126-com.iteye.com/blog/925385
XUL的元素及属性描述: 1、 一个 XUL 文件可以有任何名字,但它必须拥有一个 .xul 的扩展名。
2、 简单声明一个XUL文件,通常在每个XUL文件都会添加这一行。
3、 这一行是用来指定使用的样式表的。这是XML用于导入样式表的语法。
4、 < window>< /window>这个标签用来描述一个窗体,每个用户界面的窗体都在一个单独的文件中描述,类似HTML中的< body > < /body>标记
5、 标签的几个属性:
(1) id 属性用作标识以便被窗体脚本引用。
(2) title 属性描述显示时将在窗体的标题栏上显示文本。
(3) orient 的属性确定窗口中元件的排布。其值有:horizontal窗体应该横过窗体水平放置;Vertical 表示元件将成一列放置
(4) xmlns=http://www.mozilla.org/keymaster/gateKeeper/there.is.only.xul 这一行声明了XUL的名空间,将它放在窗口元件表示它的所有子元件都是XUL,Mozilla内部会识别这个 URL;
(5) < !-- 其他元件写到这里 -->表示注释
6、 打开窗口 window.open(url,windowname,flags) 其中url 表示文件路径,windowname 表示窗体的名字,flags 是指chrome 文档
7、 < button>的属性:
(1) id 用来表识按钮的唯一标识。
(2) class 按钮的样式表
(3) label 标签会显示在按钮上
(4) image 在按钮上显示指定路径的图片
(5) disabled 如果这个属性被设置为true,按钮就会被禁止,如果这个属性没有表示这个按钮会被启动
(6) accesskey 设置快捷键,通常是字母
8、 标签元素< label>属性:
(1) value 属性被用于制定要显示的文本
(2) Control 属性去设置关联的标签,设置control属性的值会触发与这个值对应的id的元素
9、 标签元属< description>描述
在没有一些特定的关联操作的文本时你可以使用 description 标签,这个元素使用于在对话框的上面或实例的一组控制的文本提示信息. 既可以在 value 属性中指定单行的文本也可以在开合标签之间填充一大块的文本
10、 文本输入框的属性:< textbox>
(1) id 属性:控件的唯一标识
(2) class属性:输入框的样式表
(3) value属性:指定输入框的文本
(4) disabled属性:文本输入框是否禁用
(5) type 属性:可以将这个属性设置为password,创建一个输入框隐藏用户输入内容,通常为密码框
(6) maxlength 属性: 输入框允许输入的字符最大数量;
(7) multiline 属性: 其值若为true 表示文本框将显示多行。若为 false 文本不显示多行
11、 单选按钮< radio>的属性:
(1) id 属性:控件的唯一标识
(2) label 属性: 单选按钮的文本
(3) disabled 属性:其值可以是true或false,若为true表示按钮被禁用,反之为启 用
(4) accesskey 属性:用于选中元素的快捷键
12、 单选按钮组< radiogroup>属性:若在一个组中< radion>只能选择一个
13、 多选框< checkbox>属性:
(1) id 属性:控件的唯一标识
(2) checked属性:表示受否被选中,其值有true或false
(3) label 属性:指定标签的文本
(4) selected 属性:和checked属性类似,其值有true或false
14、 列表控件< listbox>属性:
描述:listbox元素用于创建多行的列表框,它的工作方法类似于在HTML中 的select元素,和< listitem>连用创建下拉列表,< listitem>相似于HTML中的< option>。
(1) id属性: 控件的唯一标识
(2) rows属性:指定一次显示几行
例子如下:


15、 多列列表框:
描述:列表框也支持多列。每个单元格可以有独有的内容,即使只使用文本。当用户选择列表中的一个项目时,当前的行将被选中。你不能只选中其中的一个单元格。
例子如下:

上面例子中的< listcols>元素用来定义列字段集,< listcol>元素用来定义每列的外观,< listitem >元素用来定义一行,类似HTML中的< row>标签; < listcell>用来定义每个单元,类似HTML中的< td>标签;使用< listhead >和< listheader>来定义表头
16、 下拉列表:
描述:XUL中的下拉列表类似HTML中使用select元素创建的下拉列表。XUL中的menulist元素可以实现这种效果。
< menulist>的属性:
accesskey 属性:设置快捷键;
disabled 属性:设置控键是否被禁用;
open 属性:其值为true或false,如果为true,菜单列表显示,否则隐藏;
label属性:设置文本;
aditable属性:其值为true或false , 如果为true表示此菜单列表可以编辑,如为false则不能编辑。
例子如下:

17、 进度条< progressmeter>属性:
Id 属性: 进度条的唯一标识符。
Mode属性: 进度条的类型。如果设置为determined,进度条就是确定型进行度,在任务完成时填满。如果设置为undetermined,这个进度条就是不确定型进度条。如果不指定这个属性默认为确定型。
Value 属性: 当前进度条的尺度值。只能在确定型的进度条中使用这个属性。这个值的范围为0%到100%的百分值。
例子演示:

18、 增加HTML元素到窗口
(1) XHTML命名空间:
描述:为了在XUL文件中使用HTML元素,必须声明要用到的XHTML命令空间。这个方法是Mozilla从XUL中区分HTML标签的。
例子演示:

注意事项:
1、 必须在每个标签的开始增加一个html:的前缀;
2、 标签必须用小写
3、 “双引号”必须完成所有属性值括起来。
4、 在没有内容的xml标签的末端(>)前一定要加上结束(/);
(3) 使用HTML元素:
例子演示:
A simple table

19、 使用定位格:< spacer>元素
描述:spacer用于在窗口中放置一片空白,它多用于用户调整窗口大小
时它可以拉伸或者收缩。
< spacer>元素的属性:
用于指定元素可以改变自身的尺寸去填充它所在的盒子(窗口),它说明在一个盒容器的子容器中填入多少的空白空间。
例子演示:
< spacer flex=”1”> < button id=”find-button” label=”Find”/>

20、 按钮:< button>属性:
1.Image 属性:可以通过指定URL为按钮添加图像;< button label=”帮助” image=”图片路径”/>
2.Style 属性: 在按钮上指定图像的另一个方法是使用样式表(CSS list-style-image:url(‘图片的路径’);< button id=”find-button” label=”find” style=”list-style-image:url(‘图片路径’)”/>
3.dir 属性: 属性控制图像和文本方向。设置这个属性的值为reverse,图像将会放在文本的右边。使用normal值,或删除这个属性,图像将会放在文本左边。
4.Orient 属性: 属性用于在将图片放在文本的上面或下面。默认值时horizontal用于将图像放在文本的左或右。也可以使用值vertical将图像放在上方或下方。如果用在normal的意思时将图像放在文本的上方,而用在reverse的意思时将图像放在文本的下方。
5.crop 属性: 它可以用来裁剪元素的内容。当元素的宽度超过maxwidth时,超出的部分会去掉,变成…。不过这个属性只可以用在description和有label的元素中。其值有left,righr,none,center;
left:指超出的文本部分从文本的左部分裁剪。
Right:指超的出文本部分从文本的右边裁剪。
Center:指超出的文本部分不文本的中间裁剪。
None:指超出的不分文本不被裁减,默认值为none;

特殊按钮例子:
弹出菜单按钮:

21、 箱体的基本语法:

注释:
hbox元素:用来创建一个水平方向的盒子。每个放在hbox的元素将被水平地排成一行。
Hbox属性:
align属性:控制内部元素的垂直位置,其值有start,center,end,baseline,stretch;
start 是指box里面的元素靠顶端对齐。
center 是指 box 里面的元素靠中间对其。
end 是指 box 里面的元素底端对齐。
baseline 是指 box 里面的元素按照文本底线对齐。
sretch 自动扩展
vbox元素:用来创建一个垂直方向的盒子。每个放在vbox的元素将被垂直地排成一列
例子演示:
1、 登陆提示范例

2、 文本框对齐

3、 文件查找对话框示范

Enter your search criteria below and the Find button to begin the search.

22、 元素属性:
Width 属性: 指定元素的宽度。
Height 属性: 指定元素的高度。
Minwidth 属性:指定元素的最小宽度。
Minheight 属性:指定元素的最小高度。
Maxheight 属性:指定元素的最大宽度。
< box>元素:通过修改orient为"horizental",表示元素水平摆放。为"vertical" 表示元素垂直摆放。
Pack属性:
Start 对于水平box,他就是左对齐。对于竖直的box,他就是顶端对齐。
Center 居中;
End 如说是水平box,他就是右对齐。对于竖直的box,他就是底端对齐。
align 属性:
start如果是水平的box,它就是顶端对齐。如果是竖直的box,它就是左对齐。
center居中
end如果是水平的box,它就是底端对齐。如果是竖直的box,它就是右对齐。
baseline文本线对齐,只可以用在水平box上。
stretch自动扩展
23、分组框:
(1)gropbox的描述:gropbox是一个box容器,里面的元素会按照box布局规则来显示。与其他box相比,gropbox有以下特点:
1默认有边框。你可以通过修改其cess来改变边框。
2可以添加标题(caption).标题会显示在gropbox的左上方。
(2)gropbox的属性:
align:start 如果是水平的box,它就是顶端对齐。如果是竖直的box,它就是左对齐。
Center 居中;
Baseline 文本线对齐,只可以用在水平box上。
End 如果是水平box,他就是底端对齐。如果是竖直的box,他就是右对齐。
Stretch 制动扩展。
Pack属性:
Start 对于水平box,他就是左对齐。对于竖直的box,他就是顶端对齐。
Center 居中;
End 如说是水平box,他就是右对齐。对于竖直的box,他就是底端对齐。
例子演示:

(3)radiogroup的描述:radiogroup首先是一个box容器,里面可以放xul元素,但radiogroup对单选框(radio)有特殊意义。可以通过selectedItem 来访问选中的radio。
例子演示:

24、层和卡片:
Statck 元素:
statck 是按照绝对位置定位布局方式的容器。因此,align、pack、dir、orient等属性对于stack来说是无效的。Stack内部元素的位置取决于元素的left、top属性。这种布局模式类似于VB或Delphi的布局模式。需要注意的是:内部元素的left、top是指相对于stock的位置,而不是相对于window或者screen的位置。所谓的绝对定位,是指其直接孩子元素。非直接孩子元素不执行stack的布局逻辑。
例子演示:

Deck 元素:
Deck 内的元素也是层叠在一起的,但与stack不同的是,deck 一次只显示其中的一个孩子元素。当前显示哪个孩子,是由selectedIndex属性控制的。Deck 常用于向导对话框。我们可以通过设置内部元素的left、top属性来控制其显示位置
例子演示:

25、 分页组:
描述及语法:
tabbox用于界面元素的分页显示。常用于显示用户选项等界面元素多,界面大小有限的用户界面。用户可以通过选择不同的tab页来查看不同的内容。
xul中提供了5个元素来实现分页组
tabbox:最外层的容器,一般内部包含一个tabs和tabpanels。
tabs:tab的容器。当然你也可以在里面加入其他的xul元素来丰富导航 tab的界面。
tab:具体的每一个分页卡,用户通过选择不同的tab来切换显示页。
tabpanels:tabpanel的容器。
tabpanel:里面放置具体的页面内容。
tab与tabpanel的对应关系是按照他们在各自容器中的序号来确定的。tabs中的第一个tab对应tabpanels中的第一个tabpanel。
基本语法如下:
-- tab elements go here -- -- tabpanel elements go here --

由于tabbox本身是一个容器,因此,tabs的显示位置取决于它在tabbox中的顺序以及tabbox的orient、dir属性。
tabbox的大小取决于它内部最大tabpanel的大小,因此,在切换tab页的时候,tabbox的大小不会随着tab页切换而改变。
例子演示:

当前tab页的tab元素的selected属性是true。
如果我们将tabbox的orient设置为水平模式,tabs会出现在左面。
26、 表格:
描述:其组件包括grid,columns,column,rows和row。Grid包含排列整齐的组件就像表格一样。在grid内,可以声明columns,定义header及column属性;还可以声明rows。使用rows组件可以声明一套row,即为grid元素的子组件。每个子元素为指定列的一行。
例子演示:

滚动网格:当指定height属性且没有足够的空间来显示数据时,grid会变为滚动的。

可改变列的网格:如果想改变列的宽度,可以将columns的sizable属性的设为true。一旦允许用户进行此操作,用户可以拖动相邻列的编筐来改变列宽。

分页网格:1、滚动分页:滚动可以由指定height属性来实现。分页可以由mold属性设为paging来实现。

27、 内容面板:
1、 iframe面板:iframe 的用法和html中的用法基本相同。可以在窗口嵌套一个页面,只要设置iframe的src的属性就可以了。
例子演示: