[color=indigo]XUL是一种基于XML的语言，它是一种用来开发Firefox的GUI的标记语言。使用HTML和脚本语言来创建GUI——在此基础上出现了革命性的XUL，Windows Vista的XAML以及Adobe Flash的Flex是和XUL类似的技术。用XUL标记的应用程序在不同平台下的Firefox中具有相同的外观。
被设计用于标记网页的HTML语言没有多少标记应用程序的能力，而XUL则是专门为标记UI设计的，通过XUL，你不需要编写脚本，只需通过编写标签，就可以插入精致的GUI组件。
XUL不是W3C标准。学习和使用XUL需要参考：
* XUL参考手册：https://developer.mozilla.org/en/XUL_Reference
* XUL维基：http://wiki.mozilla.org/XUL
XUL在Mozilla开发的Firefox、Thunderbird，和其它基于Firefox或Geckoy引擎的Web浏览器，甚至一些基于Web的内容中得到使用。
把一段XUL代码保存为以.xul结尾的文本文件，然后把文件拖放到Firefox窗口中，就可以看到这段代码的运行效果。
通过命令行可以让Firefox只显示XUL文件的内容而不显示Firefox的UI，具体命令如下：
$ firefox -chrome file_URL.xul
XUL就像一个XML应用程序。一个XUL文档的根元素总是“window”元素，其名称空间的URI是：http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
如果默认的字符编码是UTF-8，则编码指定和XML声明可以忽略，不过在这个入门教程中我们保留它以学习XUL文档的完整结构。
因为XUL文档也是一个XML文档，它可以包含XHTML、SVG、MathML和其它元素。如果你引用了外部实体，那么XML文档的内容就被模块化了。再加上一些XML相关的技术，如DOM、XLink、XSLT，你就在可以不同的应用程序中使用它。
XUL文档的一般结构：
01.<?xml version="1.0" encoding="UTF-8"?>
02.<?xml-stylesheet href="chrome://global/skin/"?>
03.<window xmlns="http://www.mozilla.org/keymaster/getkeeper/there.is.only.xul">
04. <!-- Content go here. -->
05.</window>
复制代码
XUL使用CSS来指定它的元素的外观，因为XUL是一种XML，样式表要使用xml-stylesheet处理指令来读取。
XUL的盒子模型——
理论上说，XUL有两种摆放UI组件的盒子：水平的(使用hbox元素)和垂直的(使用vbox元素)。
水平的和垂直的盒子的例子：
01.<label value="Horizontal layout"/>
02.<hbox>
03. <button label="horizontal1"/>
04. <button label="horizontal2"/>
05.</hbox>
06.<label value="Vertical layout"/>
07.<vbox>
08. <button label="vertical1"/>
09. <button label="vertical2"/>
10.</vbox>
11.<hbox>
12. <button label="mixed1"/>
13. <vbox>
14. <button label="mixed2"/>
15. <button label="mixed3"/>
16. </vbox>
17. <button label="mixed4"/>
18.</hbox>
复制代码
注：需要把上述代码嵌入XUL文档的基本结构中才可以正常工作。
XUL中还有一个grid元素，类似HTML中的table元素，以及一个stack元素，用来对其它元素进行分层。所有屏幕上可见的小组件都使用盒子来布局，这使复杂的界面设计能够实现。
常用属性：
* id和class：和XHTML中的id和class的作用完全相同。id为元素指定唯一的名字，class用来对元素进行分类。通过id和class，你就可以在CSS和JavaScript中方便地访问某个元素或某些元素。
* orient：一个盒子的内容总是按照初始的垂直或水平的方式排列。不过通过使用orient属性，你可以显式地设置或改变它们的布局方式。
* align和pack：align和pack属性制定了一个盒子中的内容的布局方式。有效的取值包括：start(顶部或左边), center, end(底部或右边), stretch(扩展元素，使它和最大最宽的元素能够匹配)。align决定了元素在垂直方向的排列方式，pack决定了元素在水平方向的排列方式。测试代码为orient.xul，通过修改其中align和pack属性的值为start/center/end可以进行演示。
* flex：通过设置flex属性的值，可以扩展元素，直至填充整个窗口的高或宽。有效的取值是正整数。如果只有一个元素设置了flex属性，那么只要取值为1它就可以充满整个坐标(水平或垂直的)，如果有两个元素设置了flex属性，那么它们将按照取值的比例共同充满整个坐标。测试代码为flex.xul，通过修改其中的flex属性的值可以进行演示。
* ordinal：默认情况下，元素是按照它们在代码中出现的顺序在盒子中依次排列的。不过你可以用ordinal属性来调整元素的排列顺序。有效的取值为正整数，值小的排在前面。如果两个元素的ordinal属性的值相同，那么还要看它们在代码中出现的顺序。测试代码为ordinal.xul，通过修改其中ordinal属性的值可以进行演示。
* width和height：指定元素的尺寸。测试代码为size.xul，通过修改其中width和height属性的值可以进行演示。
* hidden和collapsed：hidden和collapsed属性就好像开关，可以控制元素是否显示。设置hidden="true"将禁止该元素的显示，这和CSS中的display: none效果是一样的。这个属性很有用，例如一个上下文菜单中某个不应该显示的项目就应该应用这个属性。设置collapsed="true"将使元素的高和宽都显示为0，当时元素还被认为是存在的，这和CSS中的visibility: collapse的效果是一样的。这个属性也很有用，比如页面内容不多不需要显示垂直滚动条时就可以应用这个属性。
* disabled：可以暂时禁止用户对某个元素的输入，这时元素将显示为透明的或灰白色。
提示：使用hidden、collapsed和disabled这类属性时需要注意，有的脚本或CSS可能会把他们的值当作true，只要它们的值被设置了，而不会去在意值是否是false。因此，当你在DOM函数中想要改变这些属性的值时，你不能使用setAttribute('disabled', false)，而应该使用removeAttribute('disabled')。
* tooltiptext：在元素上显示一段简要的解释性的工具提示。测试代码为tooltiptext.xul。
*persist：记录并保存元素状态被用户操作改变之后的状态，这样当XUL再次打开时，保存的元素的状态将被恢复。这些状态实际上是保存在用户配置的localstore.rdf中的。
orient.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<box flex="1" align="center" pack="center">
04. <button label="Happy"/>
05. <button label="Sad"/>
06.</box>
07.</window>
复制代码
flex.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <label value="label1" flex="1" style="border: 1px solid;"/>
05. <label value="label2" flex="2" style="border: 1px solid;"/>
06.</hbox>
07.</window>
复制代码
ordinal.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <label value="label1" flex="1" style="border: 1px solid;"/>
05. <label value="label2" flex="2" style="border: 1px solid;"/>
06.</hbox>
07.</window>
复制代码
size.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<vbox>
04. <button label="button1" ordinal="5"/>
05. <button label="button2" ordinal="7"/>
06. <button label="button3" ordinal="1"/>
07.</vbox>
08.</window>
复制代码
tooltiptext.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <button label="Button" width="200" height="200" tooltiptext="It's a triangle."/>
05.</hbox>
06.</window>
复制代码
以上为“Chapter 3: Introduction to XUL—How to build a more intuitive UI”的学习笔记的第一部分。[/color]
被设计用于标记网页的HTML语言没有多少标记应用程序的能力，而XUL则是专门为标记UI设计的，通过XUL，你不需要编写脚本，只需通过编写标签，就可以插入精致的GUI组件。
XUL不是W3C标准。学习和使用XUL需要参考：
* XUL参考手册：https://developer.mozilla.org/en/XUL_Reference
* XUL维基：http://wiki.mozilla.org/XUL
XUL在Mozilla开发的Firefox、Thunderbird，和其它基于Firefox或Geckoy引擎的Web浏览器，甚至一些基于Web的内容中得到使用。
把一段XUL代码保存为以.xul结尾的文本文件，然后把文件拖放到Firefox窗口中，就可以看到这段代码的运行效果。
通过命令行可以让Firefox只显示XUL文件的内容而不显示Firefox的UI，具体命令如下：
$ firefox -chrome file_URL.xul
XUL就像一个XML应用程序。一个XUL文档的根元素总是“window”元素，其名称空间的URI是：http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
如果默认的字符编码是UTF-8，则编码指定和XML声明可以忽略，不过在这个入门教程中我们保留它以学习XUL文档的完整结构。
因为XUL文档也是一个XML文档，它可以包含XHTML、SVG、MathML和其它元素。如果你引用了外部实体，那么XML文档的内容就被模块化了。再加上一些XML相关的技术，如DOM、XLink、XSLT，你就在可以不同的应用程序中使用它。
XUL文档的一般结构：
01.<?xml version="1.0" encoding="UTF-8"?>
02.<?xml-stylesheet href="chrome://global/skin/"?>
03.<window xmlns="http://www.mozilla.org/keymaster/getkeeper/there.is.only.xul">
04. <!-- Content go here. -->
05.</window>
复制代码
XUL使用CSS来指定它的元素的外观，因为XUL是一种XML，样式表要使用xml-stylesheet处理指令来读取。
XUL的盒子模型——
理论上说，XUL有两种摆放UI组件的盒子：水平的(使用hbox元素)和垂直的(使用vbox元素)。
水平的和垂直的盒子的例子：
01.<label value="Horizontal layout"/>
02.<hbox>
03. <button label="horizontal1"/>
04. <button label="horizontal2"/>
05.</hbox>
06.<label value="Vertical layout"/>
07.<vbox>
08. <button label="vertical1"/>
09. <button label="vertical2"/>
10.</vbox>
11.<hbox>
12. <button label="mixed1"/>
13. <vbox>
14. <button label="mixed2"/>
15. <button label="mixed3"/>
16. </vbox>
17. <button label="mixed4"/>
18.</hbox>
复制代码
注：需要把上述代码嵌入XUL文档的基本结构中才可以正常工作。
XUL中还有一个grid元素，类似HTML中的table元素，以及一个stack元素，用来对其它元素进行分层。所有屏幕上可见的小组件都使用盒子来布局，这使复杂的界面设计能够实现。
常用属性：
* id和class：和XHTML中的id和class的作用完全相同。id为元素指定唯一的名字，class用来对元素进行分类。通过id和class，你就可以在CSS和JavaScript中方便地访问某个元素或某些元素。
* orient：一个盒子的内容总是按照初始的垂直或水平的方式排列。不过通过使用orient属性，你可以显式地设置或改变它们的布局方式。
* align和pack：align和pack属性制定了一个盒子中的内容的布局方式。有效的取值包括：start(顶部或左边), center, end(底部或右边), stretch(扩展元素，使它和最大最宽的元素能够匹配)。align决定了元素在垂直方向的排列方式，pack决定了元素在水平方向的排列方式。测试代码为orient.xul，通过修改其中align和pack属性的值为start/center/end可以进行演示。
* flex：通过设置flex属性的值，可以扩展元素，直至填充整个窗口的高或宽。有效的取值是正整数。如果只有一个元素设置了flex属性，那么只要取值为1它就可以充满整个坐标(水平或垂直的)，如果有两个元素设置了flex属性，那么它们将按照取值的比例共同充满整个坐标。测试代码为flex.xul，通过修改其中的flex属性的值可以进行演示。
* ordinal：默认情况下，元素是按照它们在代码中出现的顺序在盒子中依次排列的。不过你可以用ordinal属性来调整元素的排列顺序。有效的取值为正整数，值小的排在前面。如果两个元素的ordinal属性的值相同，那么还要看它们在代码中出现的顺序。测试代码为ordinal.xul，通过修改其中ordinal属性的值可以进行演示。
* width和height：指定元素的尺寸。测试代码为size.xul，通过修改其中width和height属性的值可以进行演示。
* hidden和collapsed：hidden和collapsed属性就好像开关，可以控制元素是否显示。设置hidden="true"将禁止该元素的显示，这和CSS中的display: none效果是一样的。这个属性很有用，例如一个上下文菜单中某个不应该显示的项目就应该应用这个属性。设置collapsed="true"将使元素的高和宽都显示为0，当时元素还被认为是存在的，这和CSS中的visibility: collapse的效果是一样的。这个属性也很有用，比如页面内容不多不需要显示垂直滚动条时就可以应用这个属性。
* disabled：可以暂时禁止用户对某个元素的输入，这时元素将显示为透明的或灰白色。
提示：使用hidden、collapsed和disabled这类属性时需要注意，有的脚本或CSS可能会把他们的值当作true，只要它们的值被设置了，而不会去在意值是否是false。因此，当你在DOM函数中想要改变这些属性的值时，你不能使用setAttribute('disabled', false)，而应该使用removeAttribute('disabled')。
* tooltiptext：在元素上显示一段简要的解释性的工具提示。测试代码为tooltiptext.xul。
*persist：记录并保存元素状态被用户操作改变之后的状态，这样当XUL再次打开时，保存的元素的状态将被恢复。这些状态实际上是保存在用户配置的localstore.rdf中的。
orient.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<box flex="1" align="center" pack="center">
04. <button label="Happy"/>
05. <button label="Sad"/>
06.</box>
07.</window>
复制代码
flex.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <label value="label1" flex="1" style="border: 1px solid;"/>
05. <label value="label2" flex="2" style="border: 1px solid;"/>
06.</hbox>
07.</window>
复制代码
ordinal.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <label value="label1" flex="1" style="border: 1px solid;"/>
05. <label value="label2" flex="2" style="border: 1px solid;"/>
06.</hbox>
07.</window>
复制代码
size.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<vbox>
04. <button label="button1" ordinal="5"/>
05. <button label="button2" ordinal="7"/>
06. <button label="button3" ordinal="1"/>
07.</vbox>
08.</window>
复制代码
tooltiptext.xul文件的内容：
01.<?xml-stylesheet href="chrome://global/skin/"?>
02.<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
03.<hbox>
04. <button label="Button" width="200" height="200" tooltiptext="It's a triangle."/>
05.</hbox>
06.</window>
复制代码
以上为“Chapter 3: Introduction to XUL—How to build a more intuitive UI”的学习笔记的第一部分。[/color]
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
