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.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
autoscroll | Tag and JS | Boolean | false | read-write |
Description. Specifies whether or not autoscrolling is enabled. | ||||
closechildren | Tag and JS | Boolean | false | read-write |
Description. Indicates if all immediate children should be closed if this tree is closed. | ||||
closesiblings | Tag and JS | Boolean | false | read-write |
Description. Indicates if all siblings should be closed when this tree is opened. | ||||
focused | Tag and JS | boolean | false | read-only |
Description. Indicates if this tree is focused. | ||||
focusoverlay | Tag and JS | boolean | false | read-write |
Description. This attribute only takes effect if the tree is the root and its focusselect attribute is false. Specifies whether a visual bracket overlay over the focused tree is displayed. | ||||
focusselect | Tag only | Boolean | false | read-write |
Description. This attribute only takes effect if the tree is the root. Flag to select a tree on focus. | ||||
isleaf | Tag and JS | Boolean | false | read-write |
Description. Indicates if this is a leaf node. | ||||
multiselect | Tag only | Boolean | false | final |
Description. Takes effect only if this tree is the root. Indicates if selecting multiple items is allowed. | ||||
onfocused | Tag and JS | expression | null | read-write |
Description. This event is raised whenever this tree is focused. | ||||
onopen | Tag only | expression | null | read-write |
Description. This event is raised when the tree is open. | ||||
onselected | Tag and JS | expression | null | read-write |
Description. This event is raised when the tree is selected.. | ||||
open | Tag and JS | boolean | false | read-write |
Description. Indicates if this tree is open. | ||||
recurse | Tag only | boolean | true | final |
Description. This attribute is meaningful only with data replication. A value of true indicates it will recursively followi the datapath’s children. | ||||
showroot | Tag only | boolean | true | final |
Description. Indicates if the root item is visible and its children are displayed. This attribute only takes effect if this tree is the root. | ||||
toggleselected | Tag only | boolean | true | final |
Description. It takes effect only if this tree is the root. Indicates whether or not to toggle selected nodes. | ||||
xindent | Tag and JS | number | 10 | read-write |
Description. The number of pixels to indent on the x axis. | ||||
yindent | Tag and JS | number | 20 | read-write |
Description. The number of pixels to indent on the y axis. |
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
expander | Tag only | string | lztree_arrow_rsc | final |
Description. The resource to be displayed as the expanding icon. The resource should have three frames, the first for when the node is closed, the second for when it’s open, and the third for when it is a leaf. | ||||
icon | Tag only | string | lztree_folder_rsc | final |
Description. The resource for the item icon. The resource should have three frames, the first for when the node is closed, the second for when it’s open, and the third for when it is a leaf. | ||||
onactivate | Tag and JS | expression | null | read-write |
Description. This event is raised when the icon or the text is double-clicked. |
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.
<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.
<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.