Synopsis
- LZX: tree
- JavaScript: tree
- Type: Class
- Access: public
- Topic: Components.Laszlo Components
- Declared in: lps/components/lz/tree.lzx
Description
A tree provides a hierarchical view of
data. Each node is represented by an
expander resource, an
icon resource, and a
label. A tree can be
specified lexically or through data replication
.
Note that a data replicated tree passes its XPath
down to its subtrees, so avoid specifying an XPath
such as "mydataset:/*" or your tree will infinite
loop. Instead, do the following:
<tree datapath="mydataset:/" showroot="false">
<tree datapath="*">
</tree>
Each resource, if specified, should have three states. The expander resource should have an open (frame 1), closed (frame 2), and transparent (frame 3) state. The icon resource should have similar frames. See the default resources in tree as an example.
Example 49. A lexical tree and a data replicated tree
<canvas width="450" height="250">
<include href="lz/tree.lzx"/>
<dataset name="ancestors">
<hobbit name="Frodo">
<hobbit name="Drogo">
<hobbit name="Fosco" grandparent="true"/>
<hobbit name="Bolger, Ruby" grandparent="true"/>
</hobbit>
<hobbit name="Brandybuck, Primula">
<hobbit name="Brandybuck, Gorbadoc" grandparent="true"/>
<hobbit name="Took, Mirabella" grandparent="true"/>
</hobbit>
</hobbit>
</dataset>
<view x="20" y="20" layout="axis: x; spacing: 10">
<!-- declared tree -->
<view width="200" height="200">
<tree open="true" text="valuemeal">
<tree text="fries" isleaf="true"/>
<tree open="true" text="drink">
<tree text="cola" isleaf="true"/>
</tree>
<tree open="true" text="burger">
<tree text="patty" isleaf="true"/>
<tree text="lettuce" isleaf="true"/>
<tree text="onions" isleaf="true"/>
<tree text="buns" isleaf="true"/>
</tree>
</tree>
</view>
<!-- data replicated tree -->
<view width="200" height="200">
<tree datapath="ancestors:/" icon="null" showroot="false">
<tree datapath="*" icon="null" text="$path{'@name'}"
isleaf="$path{'@grandparent'}"/>
</tree>
</view>
</view>
</canvas>
A tree controller component. A tree's node is comprised of an expander resource, an icon resource, and a label. The default layout of a tree's child views is "class: simplelayout; axis: y; spacing: 5".