ボックスモデル

このセクションでは、どのように XUL がレイアウトを処理するかを見ていきます。

ボックス入門

XUL でレイアウトを行うための主な仕組みは「ボックスモデル (Box Model) 」と呼ばれるものです。このモデルでは、ウィンドウを一連のボックスに分割し、それぞれのボックス内では要素を水平方向または垂直方向に並べることでレイアウトを行っていきます。つまり、一連のボックスやスペーサー、flex 属性をもった要素を組み合わせることによって、ウィンドウのレイアウトをコントロールすることを可能にしています。

ボックスは、XUL 要素をレイアウトするための基礎となる部分ではありますが、それ自身は極めて単純ないくつかのルールに従って動作します。ボックスでは、その子要素を水平方向か垂直方向かのいずれかの配置でレイアウトすることが可能です。水平 (horizontal) ボックスは、子要素を水平方向に並べ、垂直 (vertical) ボックスは、子要素を垂直方向に並べます。つまり、ボックスは 1 行だけ、または 1 列だけの HTML のテーブルようなものだと考えることができます。子要素の方に設定される様々な属性と、いくつか CSS によるスタイルプロパティを加えることによって、子要素の正確な位置とサイズをコントロールすることが可能になります。

ボックス要素

ボックスの基本的な構文は、以下のようになります。

<hbox>
  <!-- ここに置かれた要素は水平に並べて配置される -->
</hbox>

<vbox>
  <!-- ここに置かれた要素は垂直に並べて配置される -->
</vbox>

hbox 要素は、水平配置のボックスを作るのに使われます。 hbox 内に置かれた個々の要素は、1 行で水平に配置されます。 vbox 要素は、垂直配置のボックスを作るのに使われます。この中に要素を追加すると、その列の一番下に配置されます。

これ以外に、汎用的な box 要素もあります。 box 要素は、水平配置がデフォルトなので、hbox と同等です。ただし、boxは、orient 属性を使って、ボックスの配置方向をコントロールすることができます。水平配置のボックスを作る場合には、この属性に horizontal という値を設定し、垂直配置のボックスを作るには vertical という値を設定します。

このため、以下の 2 つも同等です。

<vbox></vbox>

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

次の例は、3 つのボタンを垂直方向に置く方法を示しています。

var el = env.locale; 例 1 : ソース表示

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

3 つのボタンは、ボックスで指定されるとおり、垂直方向に配置されています。ボタンが水平に配置されるように変更する場合、vbox 要素を hbox 要素に変更するだけで完了します。

ログインプロンプトの例

ボックスの中には、必要なだけ要素を追加することが可能です。また、要素としてボックスを入れ子に追加することも可能です。水平ボックスの場合、追加された要素は、その直前にある要素の右側に置かれていきます。要素をどれだけ追加しても、ウィンドウの幅が広くなるだけで、途中で折り返されることはありません。同様に、垂直ボックスにの場合、追加された要素は、その直前にある要素の下に置かれていきます。以下の例は、簡単なログインプロンプトです。

var el = env.locale; 例 2 : ソース表示

<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>

この例では、4 つの要素が、垂直方向に配置されています。 2 つは内部の hbox タグで、残りの 2 つは、button 要素です。外側のボックスの直接の子要素だけが垂直方向に配置されていることが確認できます。ラベルとテキスト入力欄は、内部の hbox 要素の中にあるため、そちらに従って水平に配置されています。ラベルとテキスト入力欄が水平方向に配置されていることも画像から確認できます。

入力欄の水平位置をそろえる

上のログインダイアログのレイアウトをよく見ると、2 つのテキスト入力欄の水平位置がきちんとそろっていない点が気になります。改善のため、そろえてみることにします。そのためにはボックスをいくつか追加する必要があります。

var el = env.locale; 例 3 : ソース表示

<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>

テキスト入力欄をそろえるための方法を見ていきます。このためには、メインとなるボックスの内部にボックスを追加する必要があります。とりあえず、2 つのラベルと 2 つのテキスト入力欄は、すべて同じ水平ボックス内に置きます。さらに、その中でラベルとテキスト入力欄の組を、それぞれ分けて別の垂直ボックスに置きます。内側のボックスは、要素を垂直に配置するために使用します。水平ボックスは、ラベル用 vbox とテキスト入力欄用 vbox を水平方向に並べるために必要です。水平ボックスを取り除いた場合、テキスト入力欄は、両方ともラベルの下に表示されてしまいます。

新しい例では、「Password」というラベルの位置が上すぎるという問題があります。実際にこれを解決するためには、grid 要素を使う必要がありますが、この要素についてはもう少し後のセクションで説明する予定です。

ファイル検索ダイアログにボックスを追加

それでは、ファイル検索ダイアログにボックスをいくつか追加してみましょう。垂直ボックスを要素全体の外側に追加し、水平ボックスをテキスト入力欄とボタンの外側に追加します。その結果、ボタンは、テキスト入力欄の下に表示されます。

<vbox flex="1">
  <description>
    Enter your search criteria below and select the Find button to begin
    the search.
  </description>
  
  <hbox>
    <label value="Search for:" control="find-text" />
    <textbox id="find-text" />
  </hbox>

  <hbox>
    <spacer flex="1" />

    <button id="find-button" label="Find" />
    <button id="cancel-button" label="Cancel" />
  </hbox>
</vbox>

垂直ボックスによって、メインとなるテキストとテキスト入力欄からなるボックス、ボタンからなるボックスは、垂直方向に配置されます。内部のボックスは、その中の要素を水平方向に配置します。下の画像から分かるように、ラベルとテキスト入力欄は、並んで配置されます。スペーサ (spacer) と 2 つのボタンも、ボックス内に水平方向に置かれます。スペーサが伸縮可能であることによって、ボタンが右側に表示されていることに注意して下さい。

var el = env.locale; ここまでのファイル検索ダイアログの例 : ソース表示

次のセクションでは、個々の要素のサイズの指定と、そのサイズを制約する方法を見ていきます。

« 前のページ次のページ »