In this section, we'll build a more complex tree example.
Each of the tree elements can be styled individually, whether they be cells, rows or columns. This means that you can make a particular column appear in a different color or add a border around a row.
Adding some style elements to a tree will be demonstrated here along with a more complex tree example. Let's start with a tree with two rows, each containing two child rows.
Example 6.4.1
<tree id="treeset">
<treechildren flex="1">
<treeitem container="true" open="true">
<treerow>
<treecell class="treecell-indent" value="Wednesday"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Nathan"/>
<treecell value="Waffles"/>
<treecell value="Chicken Curry"/>
<treecell value="Lasagna"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Samantha"/>
<treecell value="Grapefruit"/>
<treecell value="Caesar Salad"/>
<treecell value="Chicken Casserole"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem container="true">
<treerow>
<treecell class="treecell-indent" value="Thursday"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Nathan"/>
<treecell value="Cheese Omelet"/>
<treecell value="Ham Sandwich"/>
<treecell value="Pepperoni Pizza"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Samantha"/>
<treecell value="Rasperry Yogourt"/>
<treecell value="Cheeseburger"/>
<treecell value="Meatloaf"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
This has created a simple tree. It has two top-level treeitem elements, the first initially open due to the open attribute. Each of these items contains data for itself stored in the treerow elements, and child rows stored in the inner treechildren elements.
The outer rows display only the day of the week. As such, only one cell appears in each of these rows. The inner rows have four cells each, the first a person's name and the second, third and fourth a meal name.
The indenting is created by two things. First, the container attribute specifies that the item contains child elements. This causes the twisty arrow to appear next to the row. The user can click it to expand and collapse the items. Second, the class treecell-indent is used to make the child rows indented to the right level.
Let's continue by adding some columns to the tree. We'll use the flex attribute to make the first column slightly larger than the other columns. The following can be added to the tree:
<treecols> <treecol flex="3"/> <treecol flex="2"/> <treecol flex="2"/> <treecol flex="2"/> </treecols> |
Next, let's add a header row to the tree. By default, although the skin you have installed may change it, the header row will appear much like a regular row. However, it cannot be selected like the other rows. We'll change the color of the header bar manually to make it disinguishable. The style attribute can be used for this, although we should really use a style sheet. Or, if we want to co-operate with the user's installed skin, not change it at all.
<treehead style="background-color: #FFFFCC; border: 1px solid black">
<treerow>
<treecell value="Day"/>
<treecell value="Breakfast"/>
<treecell value="Lunch"/>
<treecell value="Dinner"/>
</treerow>
</treehead>
|
The header bar is defined similarly to a regular row except that the treehead element is used instead of treeitem.
Let's also add some additional styles to the tree to make it look a little nicer. The changes are marked in red.
Example 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 value="Day"/>
<treecell value="Breakfast"/>
<treecell value="Lunch"/>
<treecell value="Dinner"/>
</treerow>
</treehead>
<treechildren flex="1">
<treeitem container="true" open="true">
<treerow style="border-top: 1px solid black">
<treecell class="treecell-indent" value="Wednesday" style="font-weight: bold"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Nathan"/>
<treecell value="Waffles"/>
<treecell value="Chicken Curry"/>
<treecell value="Lasagna"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Samantha"/>
<treecell value="Grapefruit"/>
<treecell value="Caesar Salad"/>
<treecell value="Chicken Casserole"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
<treeitem container="true">
<treerow style="border-top: 1px solid black">
<treecell class="treecell-indent" value="Thursday" style="font-weight: bold"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Nathan"/>
<treecell value="Cheese Omelet"/>
<treecell value="Ham Sandwich"/>
<treecell value="Pepperoni Pizza"/>
</treerow>
</treeitem>
<treeitem>
<treerow>
<treecell class="treecell-indent" value="Samantha"/>
<treecell value="Rasperry Yogourt"/>
<treecell value="Cheeseburger"/>
<treecell value="Meatloaf"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
|
A background color was added to the first column. It applies to all the cells in the first column, no matter which level they appear at. As shown in the image, both the day rows and the person rows are shaded yellow in the first column. A border was also added around the column. The header row also inherits the style from the column although it is overridden by the style on the row. You can also see in the image that the selected row was drawn in its own color.
A top border was added to the day rows and the text was made bold to separate the rows and make them more distinguishable.
You could create much of this appearance using an HTML table too. However, trees add the selection capability and the addition of nested rows.
(Next) Next, we'll look at RDF which can be used to automatically populate trees.