ここで、3 つのボタンは、ボックスが指示しているため、垂直方向に配置されています。
ボタンが水平方向になるようにするには、vbox 要素を hbox 要素に変更するだけで済みます。
このセクションでは、どのように XML がレイアウトを処理するかを見ることにします。
XUL のレイアウトのメインフォームは、'ボックスモデル (Box Model)' と呼ばれます。このモデルによって、ウィンドウを一連のボックスに分割することができます。ボックス内の要素は、水平方向にも垂直方向にも広がります。一連のボックスを組み合わせることによって、スペーサーと要素はフレキシブルになり、ウィンドウのレイアウトをコントロールすることができます。
ボックスは、XUL 要素レイアウトの基本部分ですが、幾つかの非常に単純なルールに従います。ボックスは、その子供を一つの行で水平方向に、一つのカラムで垂直方向にレイアウトするにすぎません。CSS スタイルプロパティーとともに子供要素に置かれた様々な属性が子供の正確な位置とサイズをコントロールします。
ボックスは、二つある方向、つまり、水平方向と垂直方向のどちらかでレイアウトできます。水平方向のボックスは、その要素を水平方向に並べ、垂直方向のボックスは、その要素を垂直方向に配置します。ボックスは、HTML の行やカラムと考えればよいでしょう。
ボックスの基本的なシンタックスは、次のようなものです。
<hbox> ... </hbox> <vbox> ... </vbox> |
hbox 要素は、水平方向のボックスを作るのに使われます。hbox 内に置かれた個々の要素は、行内に水平方向に置かれます。vbox 要素は、垂直方向のボックスを作るのに使われます。追加される要素は、カラム内で互いにお互いの下側に置かれます。
水平方向がデフォルトの汎用的な box 要素もあります。これは、hbox と同じことです。しかし、orient 属性を使って、ボックスの方向をコントロールすることができます。この値は、水平方向のボックスを作る場合には horizontal という値にし、垂直方向のボックスを作るには vertical という値にします。
このため、下の 2 行は同じことです。
<vbox> <box orient="vertical"> |
次の例は、3 つのボタンを垂直方向に置く方法を示しています。
例 3.1.1
<vbox> <button id="yes" label="Yes"/> <button id="no" label="No"/> <button id="maybe" label="Maybe"/> </vbox> |
ここで、3 つのボタンは、ボックスが指示しているため、垂直方向に配置されています。
ボタンが水平方向になるようにするには、vbox 要素を hbox 要素に変更するだけで済みます。
ボックス内部には、HTML 要素やその他のボックスを含めてどんな数の要素でも追加することができます。水平方向のボックスの場合、個々の追加要素は、その前にある要素の右側に置かれます。要素は折り返されることはありません。要素を追加すればするほど、ウィンドウの幅が広くなるだけです。同様に、垂直方向に追加された個々の要素は、その前にある要素の下に置かれます。以下の例は、ボックス内のテキストボックスのセットを示しています。
例 3.1.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 つは、box タグの内部にあり、残りの 2 つは、button 要素です。ボックス要素の直接の子孫である要素だけが垂直方向に配置されている点に注意して下さい。ラベルとテキスト入力は、内部の hbox 要素の中にあります。そのため、それらは、水平方向のボックスに従って、配置されています。イメージから、ラベルとテキスト入力はそれぞれ、水平方向に配置されているのが分かるでしょう。
上のユーザーネームダイアログを注意して見ると、2 つのテキスト入力が水平方向でそろえられていないことが分かります。それらをそろえることができれば、多分、もっとよいでしょう。そのためには、そこに別のボックスを追加する必要があります。実際には、2 つのボックスを加える必要があります。
例 3.1.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 つのラベルと入力は、水平方向のボックス内に置きます。そして、ラベルは、テキスト入力と同様に、今度は垂直方向の別のボックス内に置きます。この内部ボックスは、要素を垂直に配置するためのものです。水平方向のボックスは、ラベルボックスと入力ボックスを互いに水平方向に置くために必要にです。このボックスを取り除くと、テキスト入力は両方とも、ラベルの下に表示されてしまいます。
次の問題は、'Password' ラベルの位置が上すぎるということです。これを解決するには、実際のところ、ここでグリッド要素を使う必要があります。これについては、後のセクションで学ぶことにします。
「ファイル検索」ダイアログにボックスを幾つか追加しましょう。垂直方向のボックスを要素の外側に追加し、水平方向のボックスをテキストボックスとボタンの外側に追加します。その結果、ボタンは、テキストボックスの下に表示されます。これが済んだら、HTML の div を取り除き、html 要素でそれを置き換えます。
<box orient="vertical" flex="1">
<html>
Enter your search criteria below and select the Find button to begin
the search.
</html>
<box orient="horizontal">
<label value="Search for:" control="find-text"/>
<textbox id="find-text"/>
</box>
<box orient="horizontal">
<spacer flex="1"/>
<button id="find-button" label="Find" default="true"/>
<button id="cancel-button" label="Cancel"/>
</box>
</box>
|
垂直方向のボックスによって、メインテキストとテキストボックスからなるボックス、ボタンからなるボックスは、垂直方向に配置されます。内部のボックスは、その要素を水平方向に配置します。下のイメージから分かるように、ラベルとその入力は、並んで配置されます。スペーサーと 2 つのボタンも、ボックス内に水平方向に置かれます。スペーサーによって、ボタンは右側に表示されることに注意して下さい。それはフレキシブルだからです。
(進む) 次のセクションでは、個々の要素のサイズの指定と、そのサイズを制約する方法を見ることにしましょう。