firefox扩展开发(三) ： 排列窗口控件

盒子：<hbox>与<vbox>

XUL中主要的布局元素成为"盒子"，分为两种，水平盒子和垂直盒子，也就是<hbox>和<vbox>，说白了就是把包含在盒子内的空间水平或者垂直排列，如果你熟悉GTK+编程的话，一定对这两种布局方式非常的熟悉。

上一篇的控件，只能按照顺序垂直分布在窗口中，因为这是窗口默认的排列控件的方式，要想改变，就要把控件放在盒子中：

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <vbox>
8.    <hbox>
9.    <label value="用户名:"/>
10.    <textbox id="login"/>
11.    </hbox>
12.    <hbox>
13.    <label value="密码:"/>
14.    <textbox id="pass"/>
15.    </hbox>
16.    <button id="ok" label="登录"/>
17.    <button id="cancel" label="取消"/>
18. </vbox>
19. </window>

和上一篇一样，把上述文件保存为test.xul，并用firefox打开。

运行得不错，不过，“密码:”旁边的输入框似乎靠的太近了些，我们可以把两个文字标签、两个输入框，分别放在两个个<vbox>中，这样就解决了对齐问题：

1. <?xml version="1.0"?>
2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
3. <window
4. id="test-window"
5. title="测试用的窗口"
6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
7. <vbox>
8.    <hbox>
9.    <vbox>
10. <label value="用户名:"/>
11. <label value="密码:"/>
12.    </vbox>
13.    <vbox>
14. <textbox id="login"/>
15. <textbox id="pass"/>
16.    </vbox>
17.    </hbox>
18.    <button id="ok" label="登录"/>
19.    <button id="cancel" label="取消"/>
20. </vbox>
21. </window>

显示效果：