笔记就先写到这,今天起开始翻译XUL Planet的《XUL指南》,哈
四、XUL常用元素
4.1 创建窗体
当准备好开发工具之后,就可以开始写XUL了。先看一段XUL文件1
2
3
4
5
6
7
8
9
10
"chrome://chrome/skin/contact.css" type="text/css"?>
<window
id="QQ_setup"
class="sb_faceplate"
title="QQ2006设置"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
解释一下
<?xml version="1.0" encoding="GB2312"?>
XUL也是XML文件,每个XML都必须有一个声明,这里声明了版本和编码<?xml-stylesheet href=""chrome://chrome/skin" type="text/css"?>
<?xml-stylesheet href=""chrome://chrome/skin/contact.css" type="text/css"?>
指明样式表所在位置,chrome是Mozilla一种协议,就像http一样,只有当包被注册到Mozilla后才可以通过chrome访问资源,所以在测试XUL时,可以用相对或绝对路径,比如<?xml-stylesheet href="../skin/contact.css" type="text/css"?>
作用是一样的<window
每个文件只能有一个window标签,相当于html的bodyid="QQ_setup"
用于唯一识别元素,可以为JS所调用class="sb_faceplate"
引用的样式表类名title="QQ2006设置"
窗体标题
1 | xmlns:html=http://www.w3.org/1999/xhtml |
引入XUL所用的名字空间。照抄就行。
除了上面,还有其它属性,常用的有
hidechrome="true"
窗口标题栏是否隐藏height="200"
窗口高度sizemode="maximized | minimized| normal"
窗口初始化模式,最大化、最小化和普通
4.2按钮 <button>
<button id="button" label="Find" default="true"/>
按钮比较简单,label是显示的文字,如果有多种语言版本,就要在文件头载入DTD文件,然后用引用形式显示文字,后面将做介绍,default是布尔值,表示窗口打开时按回车所触发的按钮
4.3文本标签
<label value=" DisplayName " class="label"/>
Value是显示文本,同时可以用class来为标签定义样式
<description value=" DisplayName " class="label"/>
Description基本上跟label是相同的,比如上面2行代码显示效果是一样的,但description标签可以显示多行文字,例如1
2
3
4
5<description>
This is a multi-line description.
It should wrap if there isn't enough room to put it in one line.
Let's put in another sentence for good measure.
</description>
跟html一样,多个空格将被当成一个空格,回车和 \n
也是不起作用的,只有当文本宽度超过上级元素围的宽度了,才会换行,但是也可以用width属性来定义宽度,例如1
2
3
4
5<description style="max-width:20px;">
This is a multi-line description.
It should wrap if there isn't enough room to put it in one line.
Let's put in another sentence for good measure.
</description>
例外,文本标签可以使用control属性来跟按钮、输入框之类的元素绑定,下面代码点击label后会触发button,accesskey是快捷键,用Alt+D即可使该label为当前焦点1
2<label control="DisplayName" value=" DisplayName " accesskey="d" class="label"/>
<button id=" DisplayName " label="MyName"/>
4.4图片 <image>
<image src="cat.png" width="20" height="26"/>
Image标签跟html一样,不过这不是常用的作法。常用的作法是放在skin目录下,通过样式表来控制。
例如:<image id="cat" />
同时在CSS里面指定属性1
2
3
4
5#cat{
height: 20px;
width: 26px;
background-image: url(images/cat.gif);
}
当然,你也可以用这样显示图片,但我觉得这样并不灵活,比较难控制1
2
3
4
5#cat{
height: 20px;
width: 26px;
list-style-image: url(images/cat.gif);
}
4.5输入组件