Basetree

You can subclass basetree to build a tree control with your own look and feel. Basetree has two content areas: item and children. The item view is where the visual component of the tree should be placed. Any view that you want to place in the tree node should be placed in item. You can use placement="item". The children view is the defaultplacement for basetree.

The following diagram demonstrates how item and children are associated in tree. Since basetree has no visual component, tree is used here for demonstration purposes.

Example 1. Basetree subclass with echoed text node

<canvas width="200" height="200">
  <include href="base/basetree.lzx"/>

  <class name="echotree" extends="basetree">
    <view placement="item" layout="axis: x; spacing: 2" 
          bgcolor="${classroot.selected
                    ? classroot.style.selectedcolor 
                    : classroot.parent.bgcolor}">
      <handler name="onclick">
        classroot.changeFocus();
        if (! classroot.isleaf) {
          classroot.setAttribute("open", ! classroot.open);
        }
      </handler>
      <text text="${classroot.text}" resize="true" />
      <text text="${classroot.text}" resize="true" />
    </view>
  </class>

  <view x="20" y="20" layout="axis: x; spacing: 10">
    <echotree>paragraph
      <echotree>sentence
        <echotree>words
          <echotree isleaf="true">letter</echotree>
          <echotree isleaf="true">number</echotree>
          <echotree isleaf="true">punctuation</echotree>
        </echotree>
      </echotree>
    </echotree>
  </view>
</canvas>

Attributes
Name	Usage	Type (Tag)	Type (JS)	Default	Category
autoscroll	Tag & JS	boolean	Boolean	false	setter
	Auto scroll if tree is clipped. Default is false.

closechildren	Tag & JS	boolean	Boolean	false	setter
	Close all immediate children when this tree is closed. Default is false.

closesiblings	Tag & JS	boolean	Boolean	false	setter
	Flag to close other siblings when this tree is open. Default is false.

focused	Tag & JS	boolean	Boolean	false	readonly
	If true, this tree is focused. Default is false.

focusoverlay	Tag & JS	boolean	Boolean	false	setter
	Meaningful only in root. If focusselect is false and focusoverlay is true, then focus has a visual bracket overlay over the focused tree. Default is false.

focusselect	Tag only	boolean		false	final
	Meaningful only in root. Flag to select a tree on focus. Default is false.

isleaf	Tag & JS	boolean	Boolean	false	setter
	If true, this basetree is a leaf node. Default is false.

multiselect	Tag only	boolean		false	final
	Meaningful only in root. Whether to multiselect items. Default is false.

onfocused	Tag & JS	expression	any		setter
	This event gets triggered whenever this tree is focused. The value of the focus (true or false) is sent with this event.

onopen	Tag & JS	expression	any		setter
	This event gets triggered whenever this tree is open. The open value of this tree is also sent.

onselected	Tag & JS	expression	any		setter
	This event gets triggered whenever this tree is selected. The value of the selection (true or false) is sent with this event. Note the args of this has changed from the previous release.

open	Tag & JS	boolean	Boolean	false	setter
	Check to see if this tree is open. Default is false.

recurse	Tag only	boolean		true	final
	Meaningful only with data replication. If true, it will recursively follow the datapath's children. Default is true.

selected	Tag & JS	boolean	Boolean	false	setter
	Check to see if this tree is selected. Default is false, except for the root of a tree, which its selected attribute is set to true.

showroot	Tag only	boolean		true	final
	Meaningful only in root tree. If false, the root item is invisible and its children are displayed. Default is true.

toggleselected	Tag only	boolean		false	final
	Meaningful only in root. Flag to toggle selected nodes. Default is false.

xindent	Tag & JS	number	Number	10	setter
	Spacing to indent trees on the x-axis. Default is 10.

yindent	Tag & JS	number	Number	20	setter
	Spacing to indent trees on the y-axis. Default is 20.

changeFocus()
basetree.changeFocus(focusedTree)
Change the focus to new tree and unfocus the previous focused tree. If the focusselect for the tree is true, this method will also select the focused tree.
Parameters
Name	Type	Desc
focusedTree	Basetree	the tree to focus. If null, the current tree is focused.

getChildIndex()
basetree.getChildIndex(child)
Get the child index of the child passed in.
Parameters
Name	Type	Desc
child	LzView	a child view of the current tree.
Returns
Type	Desc
Number	the child index of the view. If not a child, returns -1.

getRoot()
basetree.getRoot()
Get the root of this tree.
Returns
Type	Desc
basetree	the root of this tree.

getSelection()
basetree.getSelection()
Get current tree selection.
Returns
Type	Desc
Object	if multiselect is true, an array of basetrees, else the selected basetree. If none selected, returns null.

<basetree>

Methods

getChildClass()
basetree.getChildClass()
Returns class to use for instantiating replicated tree children. If tree is leaf, return null, since we don't care to instantiate any more subtrees. Override this method to instantiate different classes.

isRoot()
basetree.isRoot()
Check to see if this is the root of the tree.
Returns
Type	Desc
Boolean	true if this tree is the root, otherwise false.

keySelect()
basetree.keySelect()
Called when tree is selected using keyboard. Default action is to select the tree.

openChildren()
basetree.openChildren(o)

Parameters
Name	Type	Desc
o		None