Synopsis
- LZX: basetree
- JavaScript: basetree
- Type: Class
- Access: public
- Topic: Components.Base Components
- Declared in: lps/components/base/basetree.lzx
Description
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 30. 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>
An abstract base class to build tree controls.