Tree

A tree is an OpenLaszlo component to display hierarchical data, such as XML. The Tree class represents a tree and is a subclass of Basetree. Basetree itself is a child class of Basecomponent. This section discusses both Basetree and Tree and provides examples.

Table 11.11 lists the attributes defined in the Basetree class and Table 11.12 features the Tree class’s attributes.

The following are the methods defined in the Basetree class.

changeFocus(focusedTree)

Change the focus to the specified tree.

getChildClass()

Returns the class used to instantiate replicated tree children. If this tree is a leaf, returns null.

getChildIndex(child)

Returns the index of the specified child.

getRoot()

Returns the root of this tree.

getSelection()

Returns the current selected tree.

isRoot()

Returns true if this tree is the root. Returns false, otherwise.

keySelect()

This method is called when the tree is selected using the keyboard.

The Tree class adds one method:

toggleOpenAndFocus()

Sets the tree on focus and toggle open, if this tree is not a leaf and is not being part of a multiselection.

As an example, the code in Listing 11.6 shows how to construct and use a tree.

Listing 11.6. A simple tree

<canvas width="450" height="250">
    <include href="../lps/components/lz/tree.lzx"/>
    <view width="200" height="200">
        <tree open="true" text="OpenLaszlo Tutorial">
            <tree text="Chapter 1: Get Started" isleaf="true"/>
            <tree open="true" text="Chapter 2: First Projects" >
                <tree text="Section 1: Animation" isleaf="true"/>
                <tree text="Section 2: Games" isleaf="true"/>
            </tree>
        </tree>
    </view>
</canvas>

Invoke this URL to compile and view your LZX application.

http://localhost:8080/lps-4.0.x/app11/treeTest1.lzx

Running the LZX application gives you the tree in Figure 11.7. Note that the root has two trees. The second child root in turn has two leaves.

By default, the Tree component uses a folder icon for nodes with children. Open and closed nodes are represented by different icons. Trees with no children are called leaves and they are represented by a document icon.

You can change the icon of a tree by assigning a resource to the icon attribute. For example:

<resource name="r">
    <frame src="myIcon1.gif"/>
    <frame src="myIcon2.gif"/>
</resource>
<tree icon="r">

And you guessed right. Because the tree can represent hierarchical data, it can also be mapped to a dataset.

As another example, Listing 11.7 presents code that maps a tree with a dataset.

Listing 11.7. Mapping a tree to a dataset

<canvas width="450" height="450">
    <include href="../lps/components/lz/tree.lzx"/>
    <dataset name="phoneBook">
        <phoneBook text="Phone Book">
            <contact text="Contact">
                <firstName text="Linda" leaf="true"/>
                <lastName text="Carter" leaf="true"/>
                <phone text="999-0789-8998" leaf="true"/>
            </contact>
            <contact text="Contact">
                <firstName text="Amy" leaf="true"/>
                <lastName text="Grant" leaf="true"/>
                <phone text="992-907-1234" leaf="true"/>
            </contact>
        </phoneBook>
    </dataset>

    <view width="200" height="400">
        <tree datapath="phoneBook:/" icon="null" showroot="false">
            <tree datapath="*" text="$path{'@text'}" open="true"
              icon="null" isleaf="$path{'@leaf'}"/>
        </tree>
    </view>
</canvas>

To test the application in Listing 11.7, use this URL.

http://localhost:8080/lps-4.0.x/app11/treeTest2.lzx

If your code compiles, you’ll see a result similar to Figure 11.8 in your browser.