Tree

The tree object is an arborescent component intended to contain and display dynamically loaded data. Its contents and its structure vary after starting the software and during its use.
It can look as a list, a table or a tree structure.
Contrary to listbox, this component has a displayed part, the tree object and a dynamic contents, the treeview. Treeview is not a widget in what it is not displayed itself, only its contents will be it and these contents are made of texts and images.

Elements of tree

treecols

Group of columns. For a simple or hierarchical list there will be only one column.

treecol

These elements are used to define the number of columns and to specify the parameters on the columns.
Example of treecols:

<tree>
    <treecols>
    <treecol label="Name"/>
    <treecol label="Christian name"/>
    <treecol label="E-mail"/>
    </treecols>
 </tree>

If the column is hierarchical, it must have a primary attribute:

<treecol primary="true" label="Name"/>

treechildren

Container of the body of the tree structure which is also the dynamic part. Treechildren is placed after treecols. It contains treeitems.
Example:

<tree>
    <treecols>
    </treecols>
     <treechildren>
     <treeitem>
              ....
    </treechildren>
</tree>

treeitem

A treetiem contains a line of the table (a treerow) and possibly other treechildren if it is a hierarchy. The number of treeitem is variable.

treerow

A line. It contains treecell. The number of treecell in a treerow must correspond to the number of columns (reecol) in the treecols container.

treecell

An indivisible element containing the data.

Building a table

In a table, the number of cells inside treeitem must match the number columns inside treecols.
The table is dynamic in this that the number of lines is variable and change during the use of the program. Moreover it is possible to display or hide the columns.

Displaying a dynamic tree structure

To create a tree structure, treechildren elements are inserted into treeitem elements.
If one takes as example the contents of a hard disk:
- The treechildren correspond to a sub-directory.
- A treerow holds the name of this sub-directory.
- A treeitem for each file of the directory. The treeitem contains a treerow which contains a treecell.
Thus:
- Each treechildren contains a list of treeitem.
- Each treeitem contains a treerow which contains a treecell, and possibly a treechildren.
When a treeitem contains a treechildren it must have two attributes, container to indicate that it contains a branch, and open to indicate if it is opened at the beginning or not.

<treeitem container="true" open="true" />

If one wants to create a branch, one will thus have the following structure:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

In all cases, the number of treeitem can change.

Combining a tree structure and a table

The difference with the preceding case is simply that we have two or more treecol and of course an equal number of treecell inside a treerow.
If there are three columns, the preceding listing will become:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
        <treecell label="" />
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

In our example, there is a column for the person, the city and e-mail. But the person is a hierarchical object, belong it is one or more lists with a name, a city, an e-mail address.

Selecting elements of tree

When the user clicks on an element of tree, an event is started that one can know with the evant handler onselect.
And one knows which element was selected thanks to the currentIndex attribute which contains the number in the hierarchy.
One thus adds the handler to the tree object:

<tree onselect="selecting(currentIndex);" >

And one creates a JavaScript function to perform some processing, in the example one displays the number of the selected element:

function selecting(idx)
{
    alert("Selected " + idx);
}

• Demo code.zip.

This chapter presents only the bases of the tree object. Its use becomes more complex with the use of files RDF for dynamic contents.