To Draw Lines on the Nodes of Tree in Twaver

Recently, someone has asked how to add the guide lines to the nodes of Tree in TWaver on TWaver’s forum. This will be added into the new edition of TWaver Flex. Let’s first see the effects:

The properties in the following have been added in the new FastTree:

1. lineStyle. Default: Consts.TREE_LINE_STYLE_NONE. Options: Consts.TREE_LINE_STYLE_NONE, Consts.TREE_LINE_STYLE_DOTTED and Consts.TREE_LINE_STYLE_SOLID.
2. lineThickness. Default: 1
3. lineColor. Default: 0×808080
4. lineAlpha. Default: 1.

The following example can adjust these properties:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
                applicationComplete="init()" backgroundColor="#FFFFFF">
    <mx:Script>
        <![CDATA[
            import twaver.*;

            private var box:DataBox = new DataBox();

            private function init():void {
                // Init data
                addDatas(null, 2, 2);

                // Set icon function
                tree.iconFunction = function(data:IData):String{
                    if (showIcon.selected == true){
                        return data.icon;
                    }
                    return null;
                };
                tree.dataBox = box;
                tree.expandAll();
            }

            // Init data
            private function addDatas(parent:IData, level:int, count:int):void {
                for(var i:int = 0; i < count; i++) {
                    var data:IData = new Data();
                    data.name = "Data" + level + "-" + count;
                    data.parent = parent;
                    box.add(data);
                    if(level > 0) {
                        addDatas(data, level-1, count);
                    }
                }
            }

            // Change line style
            private function handleLineStyleChanged():void {
                tree.lineStyle = String(lineStyle.selectedItem);
            }

            // Change line thickness
            private function handleLineThicknessChanged():void {
                tree.lineThickness = lineThickness.value;
            }

            // Change line color
            private function handleLineColorChanged():void {
                tree.lineColor = lineColor.selectedColor;
            }

            // Change line alpha
            private function handleLineAlphaChanged():void {
                tree.lineAlpha = lineAlpha.value;
            }

            // Change check mode
            private function handleCheckModeChanged():void {
                tree.checkMode = showCheckbox.selected ?
                    Consts.CHECK_DESCENDANT_ANCESTOR : null;
            }
        ]]>
    </mx:Script>
    <mx:HBox width="100%" height="100%">
        <tw:FastTree id="tree" width="200" height="100%"
                     lineStyle="{Consts.TREE_LINE_STYLE_DOTTED}"/>
        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Line Style">
                <mx:ComboBox id="lineStyle" selectedIndex="1"
                             change="handleLineStyleChanged()">
                    <mx:dataProvider>
                        <mx:String>{Consts.TREE_LINE_STYLE_NONE}</mx:String>
                        <mx:String>{Consts.TREE_LINE_STYLE_DOTTED}</mx:String>
                        <mx:String>{Consts.TREE_LINE_STYLE_SOLID}</mx:String>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Line Thickness">
                <mx:NumericStepper id="lineThickness"
                                   minimum="0" maximum="5" stepSize="1" value="1"
                                   change="handleLineThicknessChanged()"/>
            </mx:FormItem>
            <mx:FormItem label="Line Color">
                <mx:ColorPicker id="lineColor" selectedColor="#808080"
                                change="handleLineColorChanged()"/>
            </mx:FormItem>
            <mx:FormItem label="Line Alpha">
                <mx:NumericStepper id="lineAlpha" minimum="0"
                                   maximum="1" stepSize="0.1" value="1"
                                   change="handleLineAlphaChanged()"/>
            </mx:FormItem>
            <mx:FormItem label="Show Checkbox">
                <mx:CheckBox id="showCheckbox"
                             label="Show Checkbox" selected="false"
                             change="handleCheckModeChanged()"/>
            </mx:FormItem>
            <mx:FormItem label="Show Icon">
                <mx:CheckBox id="showIcon" label="Show Icon" selected="true"
                             change="tree.invalidateModel()"/>
            </mx:FormItem>
        </mx:Form>
    </mx:HBox>
</mx:Application>