Tersus: Implementing a Tree Display

Implementing a Tree DisplayDate: Sep 29, 2009The tree display is ideal for displaying hierarchical data.A tree is implemented in Tersus using two display templates:The

Tree display - a container element which contains

Tree Items (tree nodes/branches) which in turn contain other Tree Items (branches/leaves) and so on.In order to implement standard tree functionality, such as expand and collapse, the display elements will contain the following:Tree display

At least one Tree Item display element. If the tree item is repetitive, the tree will support multiple roots.

A <Selected Item> display data element reusing the Tree Item display element.

Tree Item display

A <Header> Generic HTML Element display element - the contents of which define the item's display in the tree. This will usually be comprised of (but is not limited to) an Image display element displaying an icon, a Text Display display element displaying the item's name, and an <On Click> action defining the action to be taken when the item is clicked.

An <On Expand> action implementing the actions to be taken when the

icon is clicked (such as retrieving the item's children, and displaying them)

An <On Collapse> action implementing the actions to be taken when the

icon is clicked.

An <Expandable> boolean data element - controls whether the item supported the expand and collapse actions (i.e. displaying the

icons)

An <Expanded> boolean data element -controls whether the item is currently expanded or not.

A repetitive tree item element (usually named Children or similar), recursively reusing the Tree Item display - providing the virtually infinite-depth functionality needed to display hierarchical data.

A fully functional tree can be implemented from scratch, but Tersus does provide various implementations, demonstrating different levels of functionality, as follows:

The Display/Tree template includes a very simple implementation with trees of increasing depth (no database involved).

The Modules/Tree Display and Management module demonstrates a more robust implementation. In effect it is the hierarchical equivalent of the Modules/Table Display and Management module.

The Tree4Notes sample application, bundled with the studio, provides another usage example of a tree.