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
.
When the tree 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">
<tree width="160" height="20" datapath="navdata:/navmenu" />
</view>
It needs to be rewritten to have a relative datapath in the recursively expanding tree node.
<tree width="160" height="20" datapath="navdata:/navmenu">
<tree width="160" height="20" 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 64. A lexical tree and a data replicated tree
<canvas 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>
| Name (CSS property) | Type (tag) | Type (js) | Default | Category |
|---|---|---|---|---|
expander
|
string | String | lztree_arrow_rsc | initialize-only |
| 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
|
string | String | lztree_folder_rsc | initialize-only |
| 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. | ||||
Attributes inherited from <basetree>
autoscroll, closechildren, closesiblings, focused, focusoverlay, focusselect, isleaf, layout, multiselect, open, recurse, selected, showroot, toggleselected, xindent, yindent
Attributes inherited from <basecomponent>
doesenter, enabled, hasdefault, isdefault, style, styleable, text
Attributes inherited from <view>
aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale
Attributes inherited from <node>
classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition
Methods
Methods inherited from <basetree>
changeFocus, getChildClass, getChildIds, getChildIndex, getDepth, getLength, getLocationDescription, getRoot, getSelection, isRoot, keySelect, openChildren
Methods inherited from <basecomponent>
acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault
Methods inherited from <view>
bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize
Methods inherited from <node>
animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData
Events
| Name | Description |
|---|---|
onactivate
|
Double-clicking on the icon or text triggers this event. |
onclick
|
Clicking on the icon or text triggers this event. |
Events inherited from <view>
onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony