KoolMoves AS3 API Documentation | All Packages | All Classes | Index | Frames No Frames |
Class Tree

Package | km.components
Class | public class Tree
Inheritance | Tree UIComponent flash.display.Sprite

The Tree component class.

Example

    import km.components.*;
    import km.skins.*;

    var treeData:XML =
     <data>
            <account name='Mail account 1' id='1'>
                <folder label='Inbox'/>
                <folder label='Personal Folder' id='1.1'>
                    <folder label='KoolMoves' />
                    <folder label='KoolExchange' />
                    <folder label='AS3 related' />
                </folder>
                <folder label='Sent Items' />
                <folder label='Trash' />
            </account>
            <account name='Mail account 2' id='2'>
                <folder label='Inbox'/>
                <folder label='Personal Folder' id='2.1'>
                    <folder label='Saved Mail' />
                </folder>
                <folder label='Sent Items' />
                <folder label='Trash' />
            </account>
     </data>;

    function treeLabel(item:Object):String {

     // item._name contains the node name
     // item._parent contains a reference to the parent if there is one
     // item._subnodes contains an array of sub nodes if there are

     var result:String = item._name == 'account' ? '<b>' + item.name + '</b>' : item.label;
     if (item._parent && item._parent.id == '1.1') result = '<font color="#ff0000">' + result + '</font>';
     return result;

    }

    var tree:Tree = new Tree();
    ScriptedSkin.applyTo(tree);
    tree.htmlLabels = true;
    tree.setSize(320, 280);
    tree.move(10,10);
    addChild(tree);

    tree.setDataXML(treeData, false, 0, treeLabel);
    tree.expand('id', '1', true);
    tree.selectedItem = tree.search('id', '1.1')[0];

Public Properties
Hide Inherited Public Properties
Show Inherited Public Properties

| Property | Defined by
--- | --- | ---
|  | altColorTransform : ColorTransform Gets or sets a color transform for odd numbered rows. | Tree
|  | background : Image [read-only] >> Reference to the background image. | Tree
|  | duotone : Array The duotone property can be used to convert the colors of the component into duotone. | UIComponent
|  | enabled : Boolean Specifies if the component is enabled. If a component is disabled, it will be turned into grayscale and become partly transparent. | UIComponent
|  | height : Number | UIComponent
|  | htmlLabels : Boolean Gets or sets a Boolean value indicating if item labels should be displayed as html text or plain text. | Tree
|  | listItem : ListItem [read-only] >> Reference to the default tree item. | Tree
|  | margin : int The margin between the bounding box of the background and the sub components inside. | Tree
|  | onChange : Function onChange handler. | Tree
|  | selectedItem : Object Gets or sets the selected item. | Tree
|  | toolTip : String Text to use as toolTip when ToolTip is enabled. | UIComponent
|  | vScrollBar : ScrollBar [read-only] >> Reference to the vertical scrollBar. | Tree
|  | width : Number | UIComponent
|  | x : Number | UIComponent
|  | y : Number | UIComponent

Public Methods
Hide Inherited Public Methods
Show Inherited Public Methods

| Method | Defined by
--- | --- | ---
|  | Tree() | Tree
|  | clone():* Returns a clone of the component. The skin of the component is cloned but other things like the text of a label or the items of a list aren't. | UIComponent
|  | collapse(field:String = null, value:Boolean = null, collapseChildren:* = false):void Collapses items where the specified field matches the specified value. If no parameters are specified, all items are collapsed. | Tree
|  | expand(field:String = null, value:Boolean = null, expandChildren:* = false):void Expands items where the specified field matches the specified value. If no parameters are specified, all items are expanded. | Tree
|  | move(x:int, y:int, animationMode:int = 0, animationFrames:int = 12, easeInOut:Boolean = false):void Moves the component to the specified coordinates. | UIComponent
|  | search(field:String, value:*):Array Returns an array of items that are found. | Tree
|  | setDataXML(data:*, showRoot:Boolean = false, sort:int = 0, labelFunction:Function = null):void Set the tree data. Attributes starting with an underscore are reserved and should not be used in the XML data. There are two exceptions to this. | Tree
|  | setIcons(icons:BitmapData = null, item:Object = null):void Sets the tree icons. If you specify an item, the icons will override the global ones. The image has to contain the 'folder closed', 'folder open', 'folder empty' and 'item' icons below eachother in one single file. | Tree
|  | setProperties(o:Object):void Sets a number of properties at once. | UIComponent
|  | setSize(w:int, h:int):void Sets the size width and height. | UIComponent

Events
Hide Inherited Events
Show Inherited Events

| Event | Summary | Defined by
--- | --- | --- | ---
|  | animationComplete | The animationComplete event is broadcasted when an animated move is completed. | UIComponent
|  | change | The change event is broadcasted when a different item is selected. It's also possible to use the onChange handler. | Tree
|  | noChange | The noChange event is broadcasted when an already selected item is clicked again. | Tree
|  | setDataComplete | The setDataComplete event is broadcasted when the setDataXML function has completed. | Tree
|  | setDataError | The setDataError event is broadcasted when the setDataXML function has failed. | Tree

Property detail

altColorTransform | property

`altColorTransform:ColorTransform` [read-write]

Gets or sets a color transform for odd numbered rows.

Implementation
`public function get altColorTransform():ColorTransform`
`public function set altColorTransform(value:ColorTransform):void`

background | property |

`background:Image` [read-only]

>> Reference to the background image.

Implementation
`public function get background():Image`

htmlLabels | property |

`htmlLabels:Boolean` [read-write]

Gets or sets a Boolean value indicating if item labels should be displayed as html text or plain text.

Implementation
`public function get htmlLabels():Boolean`
`public function set htmlLabels(value:Boolean):void`

listItem | property |

`listItem:ListItem` [read-only]

>> Reference to the default tree item.

Implementation
`public function get listItem():ListItem`

See also

The LabelButton component for the styling capabilities of the tree item.

margin | property |

`margin:int` [read-write]

The margin between the bounding box of the background and the sub components inside.

Implementation
`public function get margin():int`
`public function set margin(value:int):void`

onChange | property |

`public var onChange:Function`

onChange handler.

selectedItem | property |

`selectedItem:Object` [read-write]

Gets or sets the selected item.

Implementation
`public function get selectedItem():Object`
`public function set selectedItem(value:Object):void`

vScrollBar | property |

`vScrollBar:ScrollBar` [read-only]

>> Reference to the vertical scrollBar.

Implementation
`public function get vScrollBar():ScrollBar`
Constructor detail

Tree | () | constructor

`public function Tree()`
Method detail

collapse | () | method

`public function collapse(field:String = null, value:Boolean = null, collapseChildren:* = false):void`

Collapses items where the specified field matches the specified value.
If no parameters are specified, all items are collapsed.

Parameters

| `field:String` (default = `null`)``
| `value:Boolean` (default = `null`)``
| `collapseChildren:*` (default = `false`)``

expand | () | method |

`public function expand(field:String = null, value:Boolean = null, expandChildren:* = false):void`

Expands items where the specified field matches the specified value.
If no parameters are specified, all items are expanded.

Parameters

| `field:String` (default = `null`)``
| `value:Boolean` (default = `null`)``
| `expandChildren:*` (default = `false`)``

search | () | method |

`public function search(field:String, value:*):Array`

Returns an array of items that are found.

Parameters

| `field:String`
| `value:*`

Returns

| `Array`

setDataXML | () | method |

`public function setDataXML(data:*, showRoot:Boolean = false, sort:int = 0, labelFunction:Function = null):void`

Set the tree data.
Attributes starting with an underscore are reserved and should not be used in the XML data.
There are two exceptions to this. If you want to inform the component that an item should be displayed as an empy folder, you can add _empty = "true" and if you want to specify already that a folder should be expanded by default, you can add _expanded = "true" .
data can be of the type XML or URLRequest.
sort can be 0 (no sort), 1 (ascending), 2 (descending).
labelFunction if provided should be a function that accepts one parameter for the item object and returns the label string.

Parameters

| `data:*`
| `showRoot:Boolean` (default = `false`)``
| `sort:int` (default = `0`)``
| `labelFunction:Function` (default = `null`)``

Example

     var tree:Tree = new Tree();
     ScriptedSkin.applyTo(tree);
     tree.setSize(320, 280);
     tree.move(10,10);
     addChild(tree);

     function treeLabel(item:Object):String { return item.name; }

     tree.setDataXML(new URLRequest('treeData.xml'), false, 0, treeLabel);

setIcons | () | method |

`public function setIcons(icons:BitmapData = null, item:Object = null):void`

Sets the tree icons.
If you specify an item, the icons will override the global ones.
The image has to contain the 'folder closed', 'folder open', 'folder empty' and 'item' icons below eachother in one single file.

Parameters

| `icons:BitmapData` (default = `null`)``
| `item:Object` (default = `null`)``

Event detail

change | event

Event object type: `flash.events.Event`

The change event is broadcasted when a different item is selected.
It's also possible to use the onChange handler.

noChange | event |

Event object type: `flash.events.Event`

The noChange event is broadcasted when an already selected item is clicked again.

setDataComplete | event |

Event object type: `flash.events.Event`

The setDataComplete event is broadcasted when the setDataXML function has completed.

setDataError | event |

Event object type: `flash.events.Event`

The setDataError event is broadcasted when the setDataXML function has failed.

Last update : 04/05/2008