XUL には、テーブル状のグリッドを作るための要素セットがあります。
HTML ページは、多くの場合、データのグリッドをレイアウトしたり、表示するのにテーブルを使います。XUL には、この種のことを行なうための要素セットがあります。grid 要素が、データのグリッドを宣言するのに使われます。これは、HTML の table タグと類似した部分があります。
グリッドは、テーブルによく似て、行に配置される要素をもちます。grid 内には、2 つのものを宣言します。使用される行とカラムです。HTML のテーブルと同様に、行の内部には、ラベルやボタンなどの内容を置きます。カラムには内容を置かず、グリッド内のカラムのサイズや外見を指定するためにそれを使うことができます。また、内容をカラムに置き、行を外見を指定するのに使うこともできます。まず、行を使って要素を構成する場合を見ることにしましょう。
行のセットを宣言するために、rows タグを使います。これは、grid の子供要素にし、その中に row 要素を追加します。これは、個々の行のために使われます。row 要素の内部に、その行の中に入れたい内容を置きます。
同様に、カラムは、columns 要素を使って宣言します。これは、grid の子供要素にし、その中に、個々の column 要素を置きます。これは、グリッド内に入れたい個々のカラムのためのものです。
これは、例を使えば、簡単に理解できるでしょう。
例 6.1.1
<grid flex="1">
<columns>
<column flex="2"/>
<column flex="1"/>
</columns>
<rows>
<row>
<button label="Rabbit"/>
<button label="Elephant"/>
</row>
<row>
<button label="Koala"/>
<button label="Gorilla"/>
</row>
</rows>
</grid>
|
2 つの行と 2 つのカラムがグリッドに追加されています。個々のカラムは、column タグを使って宣言されています。また、個々のカラムは、flex 属性を与えられています。個々の行には、2 つの要素 (いずれもボタン) があります。個々の row 要素の最初の要素は、グリッドの最初のカラムに置かれ、個々の行の 2 番目の要素は、2 番目のカラムに置かれています。セルを宣言するための要素は必要ないということに注意して下さい。(HTML の td 要素に対応するものはありません。) その代わり、セルの内容は、直接、row 要素内に置きます。
もちろん、button 要素ではなく、どんな要素でも使うことができます。ある特定のセルに多数の要素を入れたい場合はどうすればよいのでしょうか。このためには、ネストした box が使えます。ボックスは一つの要素ですが、その内部には幾つでも要素を入れることができます。例えば
例 6.1.2
<grid flex="1">
<columns>
<column/>
<column flex="1"/>
</columns>
<rows>
<row>
<label control="doctitle" value="Document Title:"/>
<textbox flex="1"/>
</row>
<row>
<label control="docpath" value="Path:"/>
<box flex="1">
<textbox id="docpath" flex="1"/>
<button label="Browse..."/>
</box>
</row>
</rows>
</grid>
|
イメージで、要素の最初のカラムにはラベルがありますが、各々の行に、どうしてラベルという一つの要素しかないのかという点に注意して下さい。2 番目の行の 2 番目のカラムには、ボックスがあります。ここには、textbox と button という 2 つの要素がこの順で置かれています。一つのセル内にどんな数の要素でも、あるいは別のグリッドであっても、置けるようにするため、追加のネストしたボックスを加えることができます。
最後の例のウィンドウをリサイズすると、テキストボックスはリサイズするが、他の要素はリサイズしないことが分かるでしょう。これは、flex 属性が追加されているためです。カラムにも、flex が追加する必要があります。最初のカラムは、フレキシブルである必要はありません。ラベルのサイズを変更する必要はないからです。
カラムの初期幅は、カラム内の最大の要素によって決められます。同じく、行の高さも、行内の要素のサイズによって決められます。もっと正確にサイズを定義するには、CSS のプロパティーである min-width と max-width と関連するプロパティーが使えます。
同じように、行ではなく column 要素の内部に要素を置くこともできます。この場合は、行は、幾つ行があるのかを指定するためだけに宣言されることになります。
例 6.1.3
<grid>
<rows>
<row/>
<row/>
<row/>
</rows>
<columns>
<column>
<label control="first" value="First Name:"/>
<label control="middle" value="Middle Name:"/>
<label control="last" value="Last Name:"/>
</column>
<column>
<textbox id="first"/>
<textbox id="middle"/>
<textbox id="last"/>
</column>
</columns>
</grid>
|
このグリッドには、3 つの行と 2 つのカラムがあります。row 要素は、行が幾つあるのかを指定するためのプレースホルダーにすぎません。内容は、個々のカラム内に置かれています。個々の column 要素内の最初の要素は最初の行に置かれ、2 番目の要素は 2 番目の行に、3 番目の要素は 3 番目の行に置かれます。
内容を行とカラムの両方に置くと、内容はグリッド内に正しく配置されますが、互いに重なり合ってしまいます。これは、stack 要素のグリッドに非常によく似た結果になります。
grid 内の要素の順序によって、どれが上に表示され、どれがその下に置かれるのかが決まります。rows 要素が columns 要素の後に置かれると、行内の内容が上に表示されます。columns が rows 要素の後に置かれると、カラム内の要素が上に表示されます。同様に、マウスボタンやキー押し下げといったイベントは、上の要素だけに送られます。こういう訳で、上の例では、カラムが行の後で宣言されています。カラムが最初に置かれると、行がイベントを捕捉し、そのフィールドは入力できなくなるでしょう。
グリッドがネストしたボックスのセットに対してもつ第一の利点は、水平方向、垂直方向の両方でフレキシブルなセルが作れるということでしょう。これは、行とカラムの両方に flex 属性を置くことによって可能になります。次の例は、このことを示しています。
<grid flex="1">
<columns>
<column flex="5"/>
<column/>
<column/>
</columns>
<rows>
<row flex="10">
<button label="Cherry"/>
<button label="Lemon"/>
<button label="Grape"/>
</row>
<row flex="1">
<button label="Strawberry"/>
<button label="Raspberry"/>
<button label="Peach"/>
</row>
</rows>
</grid>
|
最初のカラムと行はいずれもフレキシブルにしてあります。これによって、最初のカラムのセルはすべて水平方向でフレキシブルです。更に、セルはすべて垂直方向でフレキシブルです。最初の行の方がフレキシブルである度合いが高いのですが、いずれのセルもフレキシブルだからです。最初の行の最初のセル (Cherry ボタン) は、水平方向で 5、垂直方向で 10 のフレキシビリティーです。次のセル (Lemon) は、垂直方向でだけフレキシブルです。
flex を行とカラムに加えることによって、セルのサイズを必要な大きさにすることができます。flex 属性は、grid 要素にも加えることができます。それによって、グリッド全体がフレキシブルになります。この指定をしなければ、グリッドは、一方向に伸びるだけです。
(進む) 次は、ツリーの作り方を見ることにしましょう。