firefox扩展开发(二)：用XUL创建窗口控件
firefox扩展开发(三) ： 排列窗口控件
firefox扩展开发(四) ： 更多的窗口控件上一篇我们讲到了用XUL创建基本的窗口控件（按钮、输入框、单选复选框……），现在我们来讲一下如何排列他们。
盒子：<hbox>与<vbox>
XUL中主要的布局元素成为"盒子"，分为两种，水平盒子和垂直盒子，也就是<hbox>和<vbox>，说白了就是把包含在盒子内的空间水平或者垂直排列，如果你熟悉GTK+编程的话，一定对这两种布局方式非常的熟悉。
上一篇的控件，只能按照顺序垂直分布在窗口中，因为这是窗口默认的排列控件的方式，要想改变，就要把控件放在盒子中：
-
<?xml version="1.0"?>
-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
<window
-
id="test-window"
-
title="测试用的窗口"
-
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
<vbox>
-
<hbox>
-
<label value="用户名:"/>
-
<textbox id="login"/>
-
</hbox>
-
<hbox>
-
<label value="密码:"/>
-
<textbox id="pass"/>
-
</hbox>
-
<button id="ok" label="登录"/>
-
<button id="cancel" label="取消"/>
-
</vbox>
-
</window>
和上一篇一样，把上述文件保存为test.xul，并用firefox打开。
运行得不错，不过，“密码:”旁边的输入框似乎靠的太近了些，我们可以把两个文字标签、两个输入框，分别放在两个个<vbox>中，这样就解决了对齐问题：
-
<?xml version="1.0"?>
-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
<window
-
id="test-window"
-
title="测试用的窗口"
-
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
<vbox>
-
<hbox>
-
<vbox>
-
<label value="用户名:"/>
-
<label value="密码:"/>
-
</vbox>
-
<vbox>
-
<textbox id="login"/>
-
<textbox id="pass"/>
-
</vbox>
-
</hbox>
-
<button id="ok" label="登录"/>
-
<button id="cancel" label="取消"/>
-
</vbox>
-
</window>
显示效果：
盒子内的布局
当我们把上面的窗口拖大，窗口控件还是停留在窗口的左边，留下右边一大片空白，这似乎不是我们想要的效果：
我们可以在<vbox>或<hbox>中的pack属性来控制，pack有3种值：
- start：对vbox来说，是盒内全部靠上，对hbox，就是盒内全部靠左。
- center：盒内居中。
- end：vbox是靠下，hbox是靠右。
这里，我们还要介绍一个flex属性，默认情况下，盒子的大小是不变的，等于盒内元素的总大小，但是当flex属性为"1"时，盒子的大小是随着窗口的增大而增大，这样才能通过设置pack属性控制盒内的布局：
-
<?xml version="1.0"?>
-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
<window
-
id="test-window"
-
title="测试用的窗口"
-
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
<vbox>
-
<hbox pack="center" flex="1">
-
<vbox>
-
<label value="用户名:"/>
-
<label value="密码:"/>
-
</vbox>
-
<vbox>
-
<textbox id="login"/>
-
<textbox id="pass"/>
-
</vbox>
-
</hbox>
-
<hbox pack="center" flex="1">
-
<button id="ok" label="登录" />
-
<button id="cancel" label="取消" />
-
</hbox>
-
</vbox>
-
</window>
这样就实现了居中：
分组窗口控件
有的时候，窗口中一部分空间是相互关联的，为了表示出这种关联关系，要用到<groupbox>：
-
<?xml version="1.0"?>
-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
<window
-
id="test-window"
-
title="测试用的窗口"
-
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
<groupbox>
-
<caption label="9月20日是……？"/>
-
<label value="植树节"/>
-
<label value="爱牙日"/>
-
<label value="中秋节"/>
-
<label value="元宵节"/>
-
</groupbox>
-
</window>
显示效果：
<caption>的值，就是分组标签标题的值，<caption>甚至可以包含其他的控件：
-
<?xml version="1.0"?>
-
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-
<window
-
id="test-window"
-
title="测试用的窗口"
-
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-
<groupbox>
-
<caption>
-
<checkbox label="Enable Backups"/>
-
</caption>
-
<hbox>
-
<label control="dir" value="Directory:"/>
-
<textbox id="dir"/>
-
</hbox>
-
<checkbox label="Compress archived files"/>
-
</groupbox>
-
</window>
显示效果：
非常感谢