Tree

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 1. 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>

Attributes
Name	Usage	Type (Tag)	Type (JS)	Default	Category
expander	Tag only	string		lztree_arrow_rsc	final
	The resource for the expanding icon: frame 1 (closed), frame 2 (opened), frame 3 (leaf). Default is lztree_arrow_rsc defined in lz/tree.lzx.

icon	Tag only	string		lztree_folder_rsc	final
	The resource for the item icon: frame 1 (closed), frame 2 (opened), frame 3 (leaf) Default is lztree_folder_rsc defined in lz/tree.lzx.

onactivate	Tag & JS	expression	any		setter
	Double-clicking on the icon or text triggers this event.

<tree>

Methods

toggleOpenAndFocus()
tree.toggleOpenAndFocus()
Focus the tree and toggle open, if this tree is not a leaf and is not being multiselected.