コンポーネント: vbox, hbox and box.

XULのボックスモデルはディスプレイをいくつかのボックスに分けます。ボックスの中のコンポーネントは自動的に縦、又は横方向で並びます。ボックスとセパレーターを合わせることで、視覚表現のレイアウトを制御します。

ボックスは横又は縦方向のうちの一方向に子コンポーネントを配置します。横方向ボックスは水平にコンポーネントを並べます。縦方向ボックスは縦に並べます。HTMLテーブルの一行又は一列のボックスを想像してください。

いくつかの例は以下に示されています。

<zk>
    <vbox>    
        <button label="Button 1"/>        
        <button label="Button 2"/>        
    </vbox>    
    <hbox>    
        <button label="Button 3"/>        
        <button label="Button 4"/>        
    </hbox>    
</zk>

hboxコンポーネントは縦方向に箱を作成します。どのコンポーネントもhboxの中では一列中に配置されます。vboxコンポーネントは縦方向にボックスを作成します。追加されたコンポーネントは次々と下に新しい行として並べられていきます。

水平方向をデフォルトとしている一般のボックスコンポーネントがあります。振る舞いはhboxと同様です。しかし、ボックスの方向を操作するorientプロパティを使用できます。このプロパティをhorizontalに設定し、水平方向のボックスを作成することができます。またプロパティをverticalに設定することで縦方向のボックスを作成できます。

このため、以下の２行は同様の動作をします。

<vbox>
<box orient="vertical">

ボックスコンポーネントを含め、ボックスの中にたくさんのコンポーネントを追加することができます。
水平方向のボックスでは、どの追加コンポーネントも前回追加されたもののすぐ右側に位置されます。
コンポーネントは囲まれてはいないので、コンポーネントを加えたら加えた分だけウィンドウは広がっていきます。
同様にして、縦ボックスに追加されたどの要素も前回追加されたものの下に配置されます。