Question

I am currently developing a dynamic LineChart in FLEX 4. I am implementing a Tree control next to my LineChart, which will filter the LineChart dataprovider and lineseries. The tree control has several branches and ultimately 5 children (leaf nodes) at the bottom of the last branch.

I need the leaf node/children to be displayed as checkboxes inside the tree control. As I understand, this will require overrides in the TreeItemRenderer class. This is where I am a little confused on how to implement that.

Currently I can distinguish between leaf and branches using this code, in my main MXML component. I added this because it may be helpful to some beginning FLEX developers, such as myself, who cannot easily find this functionality documented well:

            private function treeClick(e:ListEvent):void {

            _selectedItem = Tree(e.currentTarget).selectedItem;

            if(mainTree.dataDescriptor.isBranch(_selectedItem)) {
                Alert.show('branch click');
            }
            else {
                Alert.show('leaf node click');
            }

        }

I am looking at the TreeItemRenderer override class from the following example here:

In the example, they override the “createChildden” super function to add checkboxes to the tree control.

My question is, can I override the createChildren function directly in my MXML component, and not have to use an entire class file to override this functionality? Must I re-invent the wheel to do this?

Also, how can I distinguish that my treeItem is a leaf node and not a parent, in the override function? I only want to add checkboxes to the leaf nodes, how can I differentiate? The following example adds checkboxes to all branches and leaf nodes, but I want to add checkboxes only to leaf node/children. How would you approach that?

        override protected function createChildren( ): void
        {
            super.createChildren( );
            if( !_checkbox )
            {
                _checkbox = new CheckBoxExtended( );
                _checkbox.allow3StateForUser = false;
                _checkbox.addEventListener( MouseEvent.CLICK, onCheckboxClick );
                addChild( _checkbox );
            }
        }

Here is the XML I am working with:

    <mx:XMLList id="treeData">
    <node label="DAIX">
        <node label="Account 1">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="41" isChecked="false">
                </node>
                <node label="Device 2" oid="42" isChecked="false">
                </node>                 
            </node>
        </node>
        <node label="Account 2">
            <node label="Premise 1">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>             
            </node>
            <node label="Premise 2">
                <node label="Device 1" oid="31" isChecked="false">
                </node>
                <node label="Device 2" oid="32" isChecked="false">
                </node>                 
            </node>
        </node>
    </node>    
</mx:XMLList>

Here is my tree tag:

<mx:Tree id="mainTree" dataProvider="{treeData}" itemRenderer="TreeCheckBoxItemRenderer" labelField="@label" showRoot="false" width="100%" height="100%" itemClick="treeClick(event)" />

Answer 1

Here’s what I would do: Create your item renderer derived off of TreeItemRender as an MXML component and include your checkbox in the MXML, then override the setter for listData. In your overridden method do something like this:

EDIT: Added surrounding MXML (note that the MXML is pretty much exactly what FB 4 generates by default when creating a new Tree item renderer, and that I haven’t tested this in a Tree.)

EDIT2: Added code for moving checked state back and forth between component and data.

<fx:Script>
    <![CDATA[
        import mx.controls.treeClasses.TreeListData;

        override public function set listData(value:BaseListData):void
        {
            super.listData = value
            this.myCheckbox.visible = !(value as TreeListData).hasChildren;
            this.myCheckbox.includeInLayout = !(value as TreeListData).hasChildren;
        }

        override public function set data(value:Object):void {
            super.data = value;

            this.myCheckbox.selected = this.data.isChecked;
        }

        private function onCheckboxChange(e:Event):void {
            this.data.isChecked = this.myCheckbox.selected;
        }
    ]]>
</fx:Script>
<s:states>
    <s:State name="normal" />      
    <s:State name="hovered" />
    <s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:CheckBox id="myCheckbox" change="onCheckboxChange(event)"/>
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>