组件: separator 和 space
。
separator用于在两个组件间插入一定的空间。有几种方式来定制separator 。
使用
orient属性，你可以指定一个垂直或水平的separator。默认为水平separator，即插入一条水平线。 而垂直的separator为插入一个空格。另外，space是默认为垂直方向的separator的一种变体型(variant)。使用
bar属性，你可以控制在组件间显示水平线还是垂直线。使用
spacing属性，你可以控制spacing的大小。
<window> line 1 by separator <separator/>line 2 by separator <separator/> line 3 by separator<space bar="true"/>another piece <separator spacing="20px"/> line 4 by separator<space bar="true" spacing="20px"/>another piece </window>
组件: groupbox
。
group box用于将组件分组。典型情况下，被group box分组的组件周围会显示边框，以显示它们是相关联的。
使用caption组件可以创建group box 的顶部标签。就像HTML的图例(legend)元素一样工作。
不同于 windows， group box 并不是一个ID空间的所有者。 group box 并不能重叠或弹出。
<groupbox width="250px"><caption label="Fruits"/> <radiogroup> <radio label="Apple"/> <radio label="Orange"/> <radio label="Banana"/> </radiogroup> </groupbox>
除了default模型(mold)， group box 还支持3d模型。如果使用了3d模型， group box就像简单的tab box 一样工作。首先，你可以使用open属性来控制是否显示其内容。类似的，你可以在接收onOpen事件时创建group box的内容。
<groupbox mold="3d" open="true" width="250px"><caption label="fruits"/> <radiogroup> <radio label="Apple"/> <radio label="Orange"/> <radio label="Banana"/> </radiogroup> </groupbox>
contentStyle属性用于为groupbox的内容块指定CSS样式。因此，你可以使用overflow:auto (或 overflow:scroll)来将groupbox 设置为滚动样式，如下，
<groupbox mold="3d" width="150px" contentStyle="height:50px;overflow:auto"><caption label="fruits"/> <radiogroup onCheck="fruit.value = self.selectedItem.label" orient="vertical"> <radio label="Apple"/> <radio label="Orange"/> <radio label="Banana"/> </radiogroup> </groupbox>
注: 若使用default模型则contentStyle属性会被忽略。
contentStyle属性中指定的height为内容块的高度，不包括caption。因此，如果groupbox被忽略(dismissed)(也就是内容块不可见)了，整个groupbox的高度会收缩到仅能包含caption。另外，如果你为整个groupbox 指定了高度(使用height属性)，当忽略groupbox时，仅仅是内容块消失而整个groupbox的高度是不会变的。
<toolbarbutton label="button1"/>
<toolbarbutton label="button2"/>
</toolbar>