Tree Controls

Description

A tree control is a variation of a list box. The tree control is very familiar to all Windows uses as many of the standard Windows user interfaces (such as the Explorer) utilize a tree control. Like a list box, a tree control displays an array of value. In the case of the tree control however, the array of values must be specially formatted to represent the hierarchy of the tree.

By default, the period is used to indicate different levels of hierarchy, but any character can be specified. For example, consider an array with the data:

a.1.A
a.1.B
a.2.A
a.2.B
b.1.A
b.1.B
b.2.A
b.2.B

This data represents a tree with two top-level branches ("a" and "b"). The "a" branch has two second level branches ("1" and "2"), The "1" branch has two "leaves" ("A" and "B"), and so on. A list box is converted into a tree control by changing the control directive from "^#" to "^<". For example, the following script displays the above data in a tree control:

dim data[10] as C
data[1] = "a.1.A"
data[2] = "a.1.B"
data[3] = "a.2.A"
data[4] = "a.2.B"
data[5] = "b.1.A"
data[6] = "b.1.B"
data[7] = "b.2.A"
data[8] = "b.2.B"
result=ui_dlg_box("Simple Tree",<<%dlg%
{ysize=2}
[.32,10node^<data]
 
%dlg% )

The above script displays this dialog box, A Simple Tree Control:

When you double click on a branch, the branch opens to display its children. In the picture below, we have double clicked on the "a" branch, then the "1" branch to display the leaves ("A" and "B").

When you make a selection from a tree control, the variable is set to the full "path" of the current selection. For example, if the user selects "a", then the variable (called "node" in the above script) is set to "a". If the user selects "1", then the variable is set to "a.1". If the user selects "A", then the variable is set to "a.1.A". The following script, which is a simple variation on the above script, demonstrates the point:

dim data[10] as C
data[1] = "a.1.A"
data[2] = "a.1.B"
data[3] = "a.2.A"
data[4] = "a.2.B"
data[5] = "b.1.A"
data[6] = "b.1.B"
data[7] = "b.2.A"
data[8] = "b.2.B"
result=ui_dlg_box("Simple Tree",<<%dlg%
{ysize=2}
[.32,10node^<data]
 ;
[.32node]
%dlg% )

The above script displays this dialog box, A Simple Tree Control-Showing Return Variable:

As you navigate in the tree, the control below the tree shows the value in the tree control variable.