mozilla中 xul里面 window 等标签使用

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”的学习笔记的第一部分。