XUL チュートリアル - グループボックス

このセクションでは、要素をグループにインクルードする方法を説明します。

グループボックス

HTML は、fieldset という要素を提供しています。これは、要素をグループ化するのに使うことができます。それらが関連していることを示すため、要素の周囲に境界が描かれます。その例は、チェックボックスグループでしょう。XUL は、それと等価な要素 groupbox を提供しています。これは、同じような目的のために使用できます。

その名前が示しているように、groupbox は、一種のボックスです。これは、その内部の要素が、ボックスのルールに従って、配置されるということです。グループボックスと通常のボックスには、違いが 2 つあります。

1. デフォルトでグループボックスの周囲にベベルの境界が描かれる。この振る舞いは、CSS スタイルを変えることによって変更できる。
2. グループボックスは、境界の上部に置かれるラベルをサポートする。

グループボックスは一種のボックスなので、orient や autostretch といったボックスと同じ属性を使うことができます。そのボックスの内部には、望みのどんな要素でも置くことができます。それらは、多くの場合、何らかの意味で、関連性をもちます。

グループボックスの上部のラベルは、label を使って作ることができます。これは、HTML の legend と同じように働きます。直接 groupbox 要素の内部に置かれたラベルはどれも、グループボックスの表題の一部になります。通常は、最初の子供として置かれた label 要素で十分です。

以下の例は、単純なグループボックスを示しています。

<groupbox orient="vertical">
  <label value="Answer"/>
  <description value="Banana"/>
  <description value="Tangerine"/>
  <description value="Phone Booth"/>
  <description value="Kiwi"/>
</groupbox>

これによって、4 つのテキストが Answer というラベルをもつボックス内に表示されます。グループボックスは垂直方向に配置されることに注意して下さい。これは、カラム内にテキスト要素のスタックをもつために必要です。

HTML の fieldset 要素が使えないのか不思議に思っているかもしれません。それがお望みであれば、使うことができます。しかし、それは HTML 要素なので、要素の配置とサイズは、HTML のレイアウトルールによってコントロールされます。ボックスモデルは使われません。これは、フレキシビリティーが使われないということです。groupbox は、ボックスです。そのため、これを使うことができます。更に、groupbox は、XUL レイアウトにとって、もっと適したものです。利用可能な場合は、XUL 要素を使うべきです。

次のセクションでは、「ファイル検索」ダイアログにグループボックスを追加することにします。

ラジオグループ

ラジオ要素をグループ化するのに、radiogroup 要素が使えます。radiogroup は、一種のボックスです。その内部には、どんな要素でも置くことができます。radio ボタンの特殊な処理を除けば、それは、他のボックスと同じように働きます。

ラジオボックスグループの内部に置かれたラジオボタンはすべて、たとえそれらがネストしたボックスの中にあるとしても、グループ化されます。これは、次の例にあるような構造内に余分な要素を加えるのに使えるでしょう。

<radiogroup orient="vertical">
  <radio id="no" value="no" label="No Number"/>
  <radio id="random" value="random" label="Random Number"/>
  <hbox">
    <radio id="specify" label="specify" value="Specify Number:"/>
    <textbox id="specificnumber"/>
  </hbox>
</radiogroup>

ラジオグループは、水平方向がデフォルトです。そのため、ここでは、垂直方向を指定しています。

(次) 次では、「ファイル検索」ダイアログで、これまでに学んだことと幾つかの追加要素を使うことにしましょう。

例: 3.4.1 3.4.2