このセクションでは、もっと複雑なツリーの例を作ることにしましょう。
ツリー要素の各々には、それがセルであれ行やカラムであれ、個別にスタイルを付けることができます。これは、特定のカラムを別の色にしたり、行の周りに境界を付けることができるということです。
ここでは、もっと複雑なツリーの例を使って、ツリーにスタイル要素を加える例を示すことにします。それぞれ 2 つの子供行をもつ 2 行からなるツリーを使いましょう。
例 6.4.1
<tree id="treeset">
<treechildren flex="1">
<treeitem container="true" open="true">
<treerow>
<treecell class="treecell-indent" label="Wednesday"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Nathan"/>
<treecell label="Waffles"/>
<treecell label="Chicken Curry"/>
<treecell label="Lasagna"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Samantha"/>
<treecell label="Grapefruit"/>
<treecell label="Caesar Salad"/>
<treecell label="Chicken Casserole"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem container="true">
<treerow>
<treecell class="treecell-indent" label="Thursday"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Nathan"/>
<treecell label="Cheese Omelet"/>
<treecell label="Ham Sandwich"/>
<treecell label="Pepperoni Pizza"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Samantha"/>
<treecell label="Rasperry Yogourt"/>
<treecell label="Cheeseburger"/>
<treecell label="Meatloaf"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
これは単純なツリーを作っています。ここにはトップレベルの treeitem 要素が 2 つあります。最初の要素は、open 属性によって、始めから開いています。これらの項目のそれぞれには、treerow 要素内に保存されたそれ自身のデータと、内部の treechildren 要素に保存された子供行があります。
外側の行は、週の曜日だけを表示しています。こうした内容の 1 セルだけが、これらの行の各々に表示されています。内部の行にはそれぞれ 4 つのセルがあり、最初のセルは人の名前、2 番目、3 番目、4 番目のセルは、食べ物の名前です。
インデントは、2 つのものによって作られています。最初に、container 属性によって、項目が子供要素をもつことを指定しています。これによって、ツイスティー矢印 (twisty arrow) が行の横に表示されます。ユーザーは、これをクリックして、項目の展開と折り畳みができます。次に、クラス treecell-indent を使って子供行を右のレベルにインデントしています。
ツリーにカラムを幾つか追加しましょう。最初のカラムを他のカラムより少しだけ大きくするために flex 属性を使うことにします。次のものをツリーに加えます。
<treecols> <treecol flex="3"/> <treecol flex="2"/> <treecol flex="2"/> <treecol flex="2"/> </treecols> |
次に、ツリーにヘッダー行を追加しましょう。インストールしているスキンによって変わる場合がありますが、デフォルトでは、ヘッダー行は通常の行と同様に表示されます。しかし、ヘッダー行は、他の行のように選択することはできません。それがヘッダーであることが分かるようにするため、ヘッダーバーの色を手作業で変えることにしましょう。これには、style 属性が使えます。しかし、実際には、スタイルシートを使うべきです。あるいは、ユーザーがインストールしているスキンと協調させたい場合は、これは決して変更すべきではありません。
<treehead style="background-color: #FFFFCC; border: 1px solid black">
<treerow>
<treecell label="Day"/>
<treecell label="Breakfast"/>
<treecell label="Lunch"/>
<treecell label="Dinner"/>
</treerow>
</treehead>
|
ヘッダーバーは、treeitem の代わりに treehead を使うという点を除けば、通常の行と同様に定義されます。
少し見栄えをよくするため、ツリーに別のスタイルを加えてみましょう。変更は、赤でマークしてあります。
例 6.4.2
<tree id="treeset">
<treecols>
<treecol flex="3" style="background-color: #FFFFCC; border: 1px solid black"/>
<treecol flex="2"/>
<treecol flex="2"/>
<treecol flex="2"/>
</treecols>
<treehead style="background-color: #FFFFCC; border: 1px solid black">
<treerow>
<treecell label="Day"/>
<treecell label="Breakfast"/>
<treecell label="Lunch"/>
<treecell label="Dinner"/>
</treerow>
</treehead>
<treechildren flex="1">
<treeitem container="true" open="true">
<treerow style="border-top: 1px solid black">
<treecell class="treecell-indent" label="Wednesday" style="font-weight: bold"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Nathan"/>
<treecell label="Waffles"/>
<treecell label="Chicken Curry"/>
<treecell label="Lasagna"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Samantha"/>
<treecell label="Grapefruit"/>
<treecell label="Caesar Salad"/>
<treecell label="Chicken Casserole"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem container="true">
<treerow style="border-top: 1px solid black">
<treecell class="treecell-indent" label="Thursday" style="font-weight: bold"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Nathan"/>
<treecell label="Cheese Omelet"/>
<treecell label="Ham Sandwich"/>
<treecell label="Pepperoni Pizza"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" label="Samantha"/>
<treecell label="Rasperry Yogourt"/>
<treecell label="Cheeseburger"/>
<treecell label="Meatloaf"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
最初のカラムに背景色を追加しました。これは、たとえどんなレベルで表示されているにせよ、最初のカラムにあるすべてのセルに適用されます。イメージから分かるように、曜日の行と人の名前の行はいずれも、最初のカラムで、黄色の背景を付けられています。カラムの周りに境界を追加しました。ヘッダー行も、行のスタイルによって上書きされていますが、カラムからスタイルを継承しています。イメージから、選択された行がそれ自身の色で描画されていることも分かります。
行を分け、もっと区別しやすくするため、上部の境界を曜日の行に付け、テキストを太字にしました。
こうした外見の多くは、HTML のテーブルを使って作ることもできます。しかし、ツリーは、選択機能とネストした行を追加できます。
(進む) 次は、ツリーを自動的に生成するのに使える RDF を見ることにしましょう。