ここでは、ツリーの機能についてもっと見ることにしましょう。
ツリー要素は、ファイルマネージャーやブラウザーのブックマークリストにあるような階層的なリストを作るのにも使えます。このためには、2 つのことをする必要があります。まず、treeitem 要素をコンテナとしてマークする必要があります。これは、次のように、container 属性を加えることによって行ないます。
<treeitem container="true"/> |
これによって、ユーザーは、内部の行を展開したり折り畳むのに、treeitem のダブルクリックが使えるようになります。open 属性を追加すると、子供の行を始めから表示させることもできます。ユーザーが親を展開したり折り畳むと、この属性は、現在の状態を反映して変化します。
子供自身は、treeitem 要素内に treechildren 要素を置くことによって指定可能です。treerow の内部に置くことはできません。こうすると、動作しません。
このプロセスを繰り返して、ネストした深いツリーを作ることができます。本質的に、treeitem 要素は、treerow を使って宣言された一つの行でも treechildren 要素を使って宣言された行のセットでも含むことができます。
以下は、簡単な例です。
例 6.3.1
<tree>
<treehead>
<treerow>
<treecell label="First Name"/>
<treecell label="Last Name"/>
</treerow>
</treehead>
<treecols>
<treecol flex="3"/>
<treecol flex="7"/>
</treecols>
<treechildren flex="1">
<treeitem container="true" open="true">
<treerow>
<treecell label="Guys"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="Bob"/>
<treecell label="Carpenter"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell label="Jerry"/>
<treecell label="Hodge"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
これは、階層的なツリーを作っています。Guys というラベルを付けられた外側の行をクリックして、内部の行を展開したり折り畳むことができます。Guys という行に、どうして 1 カラムしか必要ないのかということに注意して下さい。それは、子供のためのプレースホルダー項目だからです。
treecol 要素が追加されていることも分かるでしょう。これにより、カラムをリサイズしたり、カラムのデフォルト幅を指定することができます。
イメージを見ると、万事良好という訳ではありません。ここでは、Bob と Jerry の行は、それらがサブ行であるということを示していないからです。これを示す典型的な方法は、これら 2 つの行をインデントさせるか小さな矢印やプラス記号を付けることです。Mozilla は、小さな矢印を付けたりインデントさせるスタイルクラスを提供しています。このクラスを個々の行の最初の treecell に付け加えるだけです。
<treecell class="treecell-indent" label="Bob"/> |
このクラスをセルに設定することによって、セルはインデントされます。ネストしたツリー内では、インデントは、必要に応じて、累積されます。子供要素をもつセルの場合、小さな矢印がその左側に描画されます。
実際には、インデントはどのセルにも置くことができます。別のカラムにあるセルにでさえ可能です。この場合、そのカラムにあるセルがインデントされます。インデントは、実際には、テキストの前に少し余分なスペースを置くだけのことです。ここで実際に起こっていることは、余分なボタンと要素がセルの内部に追加されているということです。これらはすべて自動的に行なわれるので、これについて思い悩む必要はありません。
実際、すべての行、たとえ必要ではない行であっても、このクラスを追加すると、すべては期待通りに動作するはずです。
以下の例は、インデント付きのセルをもつ簡単なツリーです。
例 6.3.2
<tree>
<treechildren>
<treeitem container="true" open="true" class="treecell-indent">
<treerow>
<treecell class="treecell-indent" label="Places I've Never Been"/>
</treerow>
<treechildren flex="1">
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Geneva"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="The Moon"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
イメージから分かるように、(しばしばツイスティー (twisty) と呼ばれる) 小さな三角形が最初の行の隣りに表示されています。これは、子供の行をもつことを示しています。行をダブルクリックすると、ユーザーは、リストを開いたり閉じたりできます。子供の行はインデントされています。
クラスを外側と内側の子供行の両方に追加しました。クラスは、自動的に、必要な場合、コンテナの箱にツイスティーとインデントを提供します。これはどんなレベルのネストしたセルでも働きます。
インデントは、上の例のように、label 属性シンタックスを使うツリーセルだけに適用されることに注意して下さい。つまり、クラスは、treecell に内容がない場合にだけ適用されるということです。これは、セルの内部に何の要素もない場合にだけ、セルのテキストはインデントされて表示されるということです。
(進む) 次は、もっと複雑なツリーの例を見ることにしましょう。