[Flex] 组件Tree系列 —— 支持CheckBox组件

主程序mxml：

  1 <?xml version="1.0" encoding="utf-8"?>
  2
  3 <!--功能描述：支持CheckBox-->
  4
  5 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  6                xmlns:s="library://ns.adobe.com/flex/spark"
  7                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
  8     <fx:Declarations>
  9
 10
 11     </fx:Declarations>
 12     <fx:Style>
 13         @namespace s "library://ns.adobe.com/flex/spark";
 14         @namespace mx "library://ns.adobe.com/flex/mx";
 15         mx|Tree{
 16             /*去掉默认文件夹图标*/
 17             folderClosedIcon: ClassReference(null);
 18             folderOpenIcon: ClassReference(null);
 19
 20             /*去掉叶子节点图标*/
 21             defaultLeafIcon: ClassReference(null);
 22
 23             /*
 24             defaultLeafIcon    指定叶图标
 25             disclosureClosedIcon    指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
 26             disclosureOpenIcon    指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
 27             folderClosedIcon    关闭指定的文件夹图标的一个分支节点。
 28             folderOpenIcon    指定打开的文件夹图标的一个分支节点。
 29             例：三角图标修改如下代码使用即可换成自己的了：
 30             disclosureOpenIcon:Embed(source=‘images/a.png‘);
 31             disclosureClosedIcon:Embed(source=‘images/b.png‘);
 32             */
 33         }
 34
 35     </fx:Style>
 36
 37     <fx:Script>
 38         <![CDATA[
 39             import com.render.TreeRightClickManager;
 40
 41             import mx.controls.Alert;
 42             private var rightClickRegisted:Boolean;
 43
 44             [Bindable]
 45             private var data:XML=
 46                 <data>
 47                     <actor label="周星驰" level="0" selected="false">
 48                         <year label="1988" level="1" selected="false">
 49                             <item label="《霹雳先锋》香港票房8916612 " level="2" selected="false"/>
 50                             <item label="《捕风汉子》香港票房3149395 " level="2" selected="false"/>
 51                             <item label="《最佳女婿》香港票房5807710 " level="2" selected="false"/>
 52                         </year>
 53                         <year label="1989" level="1" selected="false">
 54                             <item label="《龙在天涯》香港票房6809853 " level="2" selected="false"/>
 55                             <item label="《义胆群英》香港票房7913329 " level="2" selected="false"/>
 56                             <item label="《流氓差婆》香港票房5624622 " level="2" selected="false"/>
 57                             <item label="《风雨同路》香港票房9335299 " level="2" selected="false"/>
 58                         </year>
 59                         <year label="1990" level="1" selected="false">
 60                             <item label="《望夫成龙》香港票房13703364 " level="2" selected="false"/>
 61                             <item label="《咖喱辣椒》香港票房15777856 " level="2" selected="false"/>
 62                             <item label="《小偷阿星》香港票房7968106 " level="2" selected="false"/>
 63                             <item label="《师兄撞鬼》香港票房12128944 " level="2" selected="false"/>
 64                             <item label="《赌圣》香港票房41326156 "  level="2" selected="false"/>
 65                             <item label="《无敌幸运星》香港票房18799869" level="2" selected="false"/>
 66                             <item label="《江湖最后一个大佬》香港票房5495811 " level="2" selected="false"/>
 67                         </year>
 68                     </actor>
 69
 70                     <actor label="李连杰" level="0" selected="false">
 71                         <year label="1992" level="1" selected="false">
 72                             <item label="笑傲江湖之东方不败（1992）" level="2" selected="false"/>
 73                             <item label="黄飞鸿之二男儿当自强（1992） " level="2" selected="false"/>
 74                             <item label="黄飞鸿之三狮王争霸（1992） " level="2" selected="false"/>
 75                         </year>
 76                         <year label="1993" level="1" selected="false">
 77                             <item label="方世玉Ⅱ万夫莫敌（1993） " level="2" selected="false"/>
 78                             <item label="倚天屠龙记之魔教教主（1993）" level="2" selected="false"/>
 79                             <item label="黄飞鸿之铁鸡斗蜈蚣（1993）" level="2" selected="false"/>
 80                             <item label="太极张三丰（1993）" level="2" selected="false"/>
 81                         </year>
 82                         <year label="1994" level="1" selected="false">
 83                             <item label="新少林五祖（1994）" level="2" selected="false"/>
 84                             <item label="精武英雄（1994）" level="2" selected="false"/>
 85                             <item label="中南海保镖（1994）" level="2" selected="false"/>
 86                             <item label="给爸爸的信（1995)" level="2" selected="false"/>
 87                         </year>
 88                             <year label="1995" level="1" selected="false">
 89                             <item label="鼠胆龙威（1995）" level="2" selected="false"/>
 90                             <item label="给爸爸的信（1995)" level="2" selected="false"/>
 91                         </year>
 92                     </actor>
 93                 </data>
 94                 ;
 95             private function treeChangeHandle(event:Event):void{
 96                 var selectedTreeNode:XML;
 97                 selectedTreeNode=Tree(event.target).selectedItem as XML;
 98             }
 99
100             private function getSelectedChild(xml:XML):String{
101                 var result:String="";
102                 for(var i:int=0;i<xml.children().length();i++){
103                     if((xml.children()[i][email protected]=="true") && (xml.children()[i][email protected]=="2")){
104                         result+=xml.children()[i][email protected]+"\n";
105                     }
106                     var temp:XML=new XML(xml.children()[i].toString());
107                     if(temp.children().length()>0){
108                         result+=getSelectedChild(temp);
109                     }
110                 }
111                 return result;
112             }
113
114             protected function add_clickHandler(event:MouseEvent):void
115             {
116                 txtAr.text=getSelectedChild(data);
117             }
118
119         ]]>
120     </fx:Script>
121
122     <s:Panel width="300" height="400" title="所有影片">
123         <mx:Tree id="tree" top="0" left="0" width="100%" height="100%" labelField="@label" showRoot="false"
124                  itemRenderer="com.render.TreeCheckBoxRenderer" dataProvider="{data}"
125                  change="treeChangeHandle(event)" styleName="Tree">
126         </mx:Tree>
127     </s:Panel>
128     <s:Panel x="310" width="300" height="400" title="选中的影片">
129         <s:TextArea id="txtAr" top="0" left="0" width="100%" height="100%"/>
130     </s:Panel>
131     <s:Button y="410" label="添加选中" click="add_clickHandler(event)"/>
132 </s:Application>

com.render.TreeCheckBoxRenderer类：

package com.render
{
    import flash.events.Event;
    import flash.events.MouseEvent;

    import mx.controls.Alert;
    import mx.controls.CheckBox;
    import mx.controls.Tree;
    import mx.controls.treeClasses.TreeItemRenderer;
    import mx.controls.treeClasses.TreeListData;

    import spark.components.Button;

    /**
     * 支持CheckBox的TreeItemRenderer
     * @author
     *
     */
    public class TreeCheckBoxRenderer extends TreeItemRenderer
    {
        public function TreeCheckBoxRenderer()
        {
            super();
        }

        /**
         * 表示CheckBox控件从data中所取数据的字段
         */        

        protected var checkBox:CheckBox;
        protected var button:Button;

        /**
         * 构建CheckBox
         */
        override protected function createChildren():void
        {
            super.createChildren();
            checkBox = new CheckBox();
            addChild( checkBox );
            checkBox.addEventListener(Event.CHANGE, changeHandler);
        }

        /**
         * 点击checkbox时,更新dataProvider
         * @param event
         */
        protected function changeHandler( event:Event ):void
        {
            if( [email protected]!="" ){
                [email protected]= checkBox.selected.toString();
                for (var i:int=0;i<data.children().length();i++){
                    data.children()[i][email protected]=checkBox.selected.toString();;
                }
            }
        } 

        /**
         * 初始化控件时, 给checkbox赋值
         */
        override protected function commitProperties():void
        {
            super.commitProperties();
            if([email protected]!="" ){
                //trace(data,"data");
                if([email protected]=="true"){
                    checkBox.selected=true;
                }else{
                    checkBox.selected=false;
                }
            }
            else{
                checkBox.selected = false;
            }
        }

        /**
         * 重置itemRenderer的宽度
         */
        override protected function measure():void
        {
            super.measure();
            measuredWidth += checkBox.getExplicitOrMeasuredWidth();
        }

        /**
         * 重新排列位置, 将label后移
         * @param unscaledWidth
         * @param unscaledHeight
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            var startx:Number = data ? TreeListData( listData ).indent : 0;
            if (disclosureIcon){
                disclosureIcon.x = startx;
                startx = disclosureIcon.x + disclosureIcon.width;
                disclosureIcon.setActualSize(disclosureIcon.width,disclosureIcon.height);
                disclosureIcon.visible = data ?TreeListData( listData ).hasChildren :false;
            }

            if (icon){
                icon.x = startx;
                startx = icon.x + icon.measuredWidth;
                icon.setActualSize(icon.measuredWidth, icon.measuredHeight);
            }
            checkBox.move(startx, ( unscaledHeight - checkBox.height ) / 2 );
            label.x = startx + checkBox.getExplicitOrMeasuredWidth();
        }
    }
}