XUL 教程:分组方式

From MDC

目录 1 箱体入门 1.1 箱体例子 1.2 登陆提示范例 1.2.1 文本框对齐 1.3 我们的文件查找对话框示范

[编辑] 箱体入门

在XUL里主要的布局叫做“箱状模型”。这个模型允许你把窗口分割成连续的盒子。在盒子里面元素可以按水平或垂直方向排列。通过将一系列的箱子结合在一起，使用定位格和元素的flex属性，你可以控制窗口的布局。虽然盒子是XUL元素布局的基本部份，它很少遵循的惯例。一个盒子可以将它的子盒布置在两个方向之一，水平或垂直。水平盒子将它的元素进行水平排列，而垂直盒子将它的元素进行垂直排列。。你可以把一个盒子想像HTML表格中的一行或一列。除了可以在子元素中放置不同的属性还可以使用一些样式表属性来控制子盒子的精确定位和尺寸。

[编辑] 箱体例子

下面是箱体的基本语法:

<hbox>
  <!-- horizontal elements -->
</hbox>

<vbox>
  <!-- vertical elements -->
</vbox>

hbox元素用来创建一个水平方向的盒子。每个放在hbox中的元素将被水平地排成一行。vbox 元素用来创建一个垂直方向的盒子。添加进来的元素将会被垂直地放在前一个的下面。

同样有一个普通的box元素默认是水平方向的，和hbox的意思相同。然而，你可以使用orient 属生去操作盒子的方向。你可以设置这个属性的值为horizontal 去创建一个水平的盒子和vertical去创建一个垂直的盒子。

因此，下面两行的效果是一样的:

<vbox></vbox>

<box orient="vertical"></box>

下面例子展示怎么垂直放置三个按钮。

例1 : Source View

<vbox>
  <button id="yes" label="Yes"/>
  <button id="no" label="No"/>
  <button id="maybe" label="Maybe"/>
</vbox>

三个按钮定义了盒子采用垂直方向。要将按钮改成水平方向，你需要将vbox 元素改为hbox 元素。

[编辑] 登陆提示范例

你可以将很多元素放到一个盒子里面，包括其他的盒子。在水平盒子例子中，每个元素会放在前一个元素的右边。在一个较宽的窗口中，元素不会和其他的元素重叠，因此你增加元素会越来越多。（ The elements will not wrap at all so the more elements you add, the wider the window will be.） 同样地，每个添加到垂直方向盒子中的元素会放在前一个的下面。下面展示了一个简单的登陆提示：

例2 : Source View

<vbox>
  <hbox>
    <label control="login" value="Login:"/>
    <textbox id="login"/>
  </hbox>
  <hbox>
    <label control="pass" value="Password:"/>
    <textbox id="pass"/>
  </hbox>
  <button id="ok" label="OK"/>
  <button id="cancel" label="Cancel"/>
</vbox>

这里四个元素都是垂直排列的，其中两个hbox标签和两个button 元素。注意只有盒子的直属元素是垂直排列的。 标签和文本输入框是放在hbox元素内部的，所以他们是依照那些盒子进行排列的，是水平的。你可以看到图片中的第个标签和文本输入框是水平排列的。

[编辑] 文本框对齐

如果你看了以前的登陆对话框的图像，你会看到输入框并不是完全相互水平对齐。只要我们想要，是可以排列得更好的。为了做到这样我们需要增加一些分组。 例3 : Source View

<vbox>
  <hbox>
    <vbox>
      <label control="login" value="Login:"/>
      <label control="pass" value="Password:"/>
    </vbox>
    <vbox>
      <textbox id="login"/>
      <textbox id="pass"/>
    </vbox>
  </hbox>
  <button id="ok" label="OK"/>
  <button id="cancel" label="Cancel"/>
</vbox>

注解：怎么让文本框互相对齐呢？我们需要在主箱内增加分组。标签和输入框两个都放在一个水平的分组里面。然后，另外的标签放在一个分组，这次是一个垂直的分组，像文本输入框一样。这个内置的分组可以使得元素进行垂直对齐。水平分组会将标签分组和输入框分组放置成相互水平。 如果这个分组被移走，输入框都会显示在标签的下面。

现在的问题是“密码”标签太长啦。我们需要使用grid 元素去修正这个，我们将会在 下一节学到更有关的知识。

在下一节，我们将会看到指定个别元素的尺寸和怎么去限制它们的尺寸。