2007年7月30日星期一

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

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

galeki posted @ 2007年05月20日 09:57PM in Firefox扩展开发 with tags XUL 开发 扩展 firefox
firefox扩展开发(五) : 驱动XUL界面

上一篇我们讲到了用XUL创建基本的窗口控件(按钮、输入框、单选复选框……),现在我们来讲一下如何排列他们。

盒子:<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.         <vbox >
  7.           <hbox >
  8.             <label value="用户名:"/>
  9.             <textbox id="login"/>
  10.           </hbox >
  11.           <hbox >
  12.             <label value="密码:"/>
  13.             <textbox id="pass"/>
  14.           </hbox >
  15.           <button id="ok" label="登录" />
  16.           <button id="cancel" label="取消" />
  17.         </vbox >
  18. </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.         <vbox >
  7.           <hbox >
  8.             <vbox >
  9.                 <label value="用户名:"/>
  10.                 <label value="密码:"/>
  11.             </vbox >
  12.             <vbox >
  13.                 <textbox id="login"/>
  14.                 <textbox id="pass"/>
  15.             </vbox >
  16.           </hbox >
  17.           <button id="ok" label="登录" />
  18.           <button id="cancel" label="取消" />
  19.         </vbox >
  20. </window >

显示效果:

盒子内的布局

当我们把上面的窗口拖大,窗口控件还是停留在窗口的左边,留下右边一大片空白,这似乎不是我们想要的效果:

我们可以在<vbox>或<hbox>中的pack属性来控制,pack有3种值:

  1. start:对vbox来说,是盒内全部靠上,对hbox,就是盒内全部靠左。
  2. center:盒内居中。
  3. end:vbox是靠下,hbox是靠右。

这里,我们还要介绍一个flex属性,默认情况下,盒子的大小是不变的,等于盒内元素的总大小,但是当flex属性为"1"时,盒子的大小是随着窗口的增大而增大,这样才能通过设置pack属性控制盒内的布局:

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

这样就实现了居中:

分组窗口控件

有的时候,窗口中一部分空间是相互关联的,为了表示出这种关联关系,要用到<groupbox>:

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.         <groupbox >
  7.           <caption label="9月20日是……?"/>
  8.           <label value="植树节"/>
  9.           <label value="爱牙日"/>
  10.           <label value="中秋节"/>
  11.           <label value="元宵节"/>
  12.         </groupbox >
  13. </window >

显示效果:

<caption>的值,就是分组标签标题的值,<caption>甚至可以包含其他的控件:

  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
  3. <window
  4.   id="test-window"
  5.   title="测试用的窗口"
  6.         <groupbox >
  7.           <caption >
  8.             <checkbox label="Enable Backups"/>
  9.           </caption >
  10.           <hbox >
  11.             <label control="dir" value="Directory:" />
  12.             <textbox id="dir"/>
  13.           </hbox >
  14.           <checkbox label="Compress archived files"/>
  15.         </groupbox >
  16. </window >

显示效果:



--
一步一步教你从互联网赚钱 http://www.zqzn.com/index.asp?rid=key480769
投资理财 http://li-cai.blogspot.com/

1 条评论:

knicksgrl0917 说...

hey! i'm going to cali this weekend and won't be back until september...here is the website i was talking about where i made extra summer cash. Later! the website is here