<basetree>
Prev  Base Components  Next

<basetree>
An abstract base class to build tree controls.

JavaScript: lz.basetree
extends <basecomponent> » <view> » <node> » lz.Eventable »

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.

When the basetree expands recursively, the datapath must be a relative reference to the dataset. If an absolute refrence is used, the same nodes would be selected over and over forever, resulting in and endless loop. For example, this will hang in an endless loop: 

              <dataset name="navdata">
                <navmenu>
                  <section />
                </navmenu>
              </dataset>


              <view x="10" y="10" layout="axis: x; spacing: 10">
                <basetree width="160" height="20" datapath="navdata:/navmenu" />
              </view>

It needs to be rewritten to have a relative datapath in the recursively expanding tree node. 

                <basetree width="160" height="20" datapath="navdata:/navmenu">
                  <basetree width="160" height="20" datapath="*" />
                </basetree>

Example 49. 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>
edit

An abstract base class to build tree controls.

Attributes

Name Type (tag) Type (js) Default Category
autoscroll boolean boolean false read/write
  Auto scroll if tree is clipped. Default is false.
closechildren boolean boolean false read/write
  Close all immediate children when this tree is closed. Default is false.
closesiblings boolean boolean false read/write
  Flag to close other siblings when this tree is open. Default is false.
defaultplacement string String children read/write
   
focused boolean boolean false readonly
  If true, this tree is focused. Default is false.
focusoverlay boolean boolean false read/write
  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 boolean boolean false initialize-only
  Meaningful only in root. Flag to select a tree on focus. Default is false.
isleaf boolean boolean false read/write
  If true, this basetree is a leaf node. Default is false.
layout expression any class: simplelayout; axis: y; spacing: 0 read/write
  Layout for children. Default is "class: simplelayout; axis: y; spacing: 0".
multiselect boolean boolean false initialize-only
  Meaningful only in root. Whether to multiselect items. Default is false.
open boolean boolean false read/write
  Check to see if this tree is open. Default is false.
recurse boolean boolean true initialize-only
  Meaningful only with data replication. If true, it will recursively follow the datapath's children. Default is true.
selected boolean boolean false read/write
  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 boolean boolean true initialize-only
  Meaningful only in root tree. If false, the root item is invisible and its children are displayed. Default is true.
toggleselected boolean boolean false initialize-only
  Meaningful only in root. Flag to toggle selected nodes. Default is false.
xindent number Number 10 read/write
  Spacing to indent trees on the x-axis. Default is 10.
yindent number Number 20 read/write
  Spacing to indent trees on the y-axis. Default is 20.

Attributes inherited from <basecomponent>

doesenter, enabled, hasdefault, isdefault, style, styleable, text

Attributes inherited from <view>

aaactive, aadescription, aaname, aasilent, aatabindex, align, bgcolor, cachebitmap, clickable, clickregion, clip, contextmenu, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, showhandcursor, source, stretches, subviews, totalframes, unstretchedheight, unstretchedwidth, valign, visibility, visible, width, x, xoffset, y, yoffset

Attributes inherited from <node>

classroot, cloneManager, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, subnodes

Methods

changeFocus()
basetree.changeFocus(focusedTree : Basetree);
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.
Parameter Name Type Description
focusedTree Basetree the tree to focus. If null, the current tree is focused.
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.
getChildIds()
basetree.getChildIds();
getChildIndex()
basetree.getChildIndex(child : lz.view);
Get the child index of the child passed in.
Parameter Name Type Description
child lz.view a child view of the current tree.
Returns Type Description
  Number the child index of the view. If not a child, returns -1.
getDepth()
basetree.getDepth(treenode);
Parameter Name Type Description
treenode    
getLength()
basetree.getLength();
getLocationDescription()
basetree.getLocationDescription(treenode);
Parameter Name Type Description
treenode    
getRoot()
basetree.getRoot();
Get the root of this tree.
Returns Type Description
  basetree the root of this tree.
getSelection()
basetree.getSelection();
Get current tree selection.
Returns Type Description
  Object if multiselect is true, an array of basetrees, else the selected basetree. If none selected, returns null.
isRoot()
basetree.isRoot();
Check to see if this is the root of the tree.
Returns Type Description
  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);
Parameter Name Type Description
o    

Methods inherited from <basecomponent>

acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault

Methods inherited from <view>

bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getContextMenu, getCurrentTime, getDepthList, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, measureHeight, measureWidth, play, proxyurl, releaseLayouts, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAAActive, setAADescription, setAAName, setAASilent, setAATabIndex, setAccessible, setAlign, setAttributeRelative, setBGColor, setClickable, setColor, setColorTransform, setContextMenu, setCursor, setHeight, setLayout, setOpacity, setPan, setPlay, setProxyPolicy, setProxyURL, setResource, setResourceNumber, setRotation, setShowHandCursor, setSource, setValign, setVisibility, setVisible, setVolume, setWidth, setX, setXOffset, setY, setYOffset, shouldYieldFocus, stop, stretchResource, unload, updateResourceSize

Methods inherited from <node>

animate, applyConstraint, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getAttribute, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setData, setDatapath, setOption, setSelected, updateData

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Name Description
onfocus This event gets triggered whenever the tree's focus is changed. This tree is sent with the event. The tree root also receives this event.
onfocused This event gets triggered whenever this tree is focused. The value of the focus (true or false) is sent with this event.
onopen This event gets triggered whenever this tree is open. The open value of this tree is also sent.
onselect This event gets triggered whenever this tree is selected. This tree is sent with the event. The tree root also receives this event.
onselected 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.

Events inherited from <view>

onaddsubview, onblur, onclick, ondblclick, onerror, onfocus, onframe, onframesloadratio, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmouseup, onmouseupoutside, onopacity, onplay, onremovesubview, onstop, ontimeout, onvisible, onwidth, onx, ony

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy

Copyright © 2002-2008 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Prev  Up  Next
<basetrackgroup>  Home  Part I. Components Reference