Flex实现RadioButtonTree

flex中带有checkbox复选框的树运用很普遍已经有很多实现，带单选按钮的树很少用到，最近因为设计样式的需要，做了一个单选按钮树，主要还是渲染器的扩展。下面是简单的实现过程
radioTree.mxml代码

<?xml version="1.0" encoding="utf-8"?>  
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12">  
        <mx:Script>  
            <![CDATA[
            	import com.xvxv.aclass.XmlTools;
            	import mx.collections.XMLListCollection;
            	import mx.controls.Alert;
            	import com.test.TreeCheckBoxRenderer;
                import mx.collections.ArrayCollection;
                [Bindable]
                 public var collection:XMLList = (<datas>
                 <data id="1" name="一级指标" isLeaf="false" selected="false">
                 	<data id="2" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="3" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="4" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="5" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="6" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 </data>
                 <data id="7" name="二级指标" isLeaf="false" selected="false">
                 	<data id="8" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="9" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="10" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="11" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 	<data id="12" name="反平衡机组热效率" isLeaf="true" selected="false"/>
                 </data>
                 </datas>).data;

                private function show():void{
                	var arr:XMLListCollection = XmlTools.treeListToList(XMLList(tree.dataProvider));
                	var names:String = "";
                	for each(var o:XML in arr){
                		if(o.@selected.toString()=="true")
                			names =o.@id;
                	}
                	Alert.show(names);
                }
            ]]>  
       </mx:Script>  
        <mx:Button label="show" click="show()"/>
       <mx:Tree id="tree" width="300" height="500" labelField="@name" 
   			itemRenderer="com.test.TreeRadioRenderer" dataProvider="{collection}"/>  
   </mx:Application> 

TreeRadioRenderer.as

package com.test
{
	import flash.events.Event;

	import mx.controls.Alert;
	import mx.controls.RadioButton;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;

	public class TreeRadioRenderer extends TreeItemRenderer
	{
		public function TreeRadioRenderer()
		{
			super();
		}  

     	protected var radioButton:RadioButton;  

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

      	  /**
      	  * 设置节点为不选中状态，因为每次只有一个节点为选中状态，
      	  * 所以在选择节点事件之前设置所有节点为不选中状态 
      	  */
	      private function setSelectedFalse(xmlList:XMLList):void{
	      	 for each(var xml:XML in xmlList){
	       	 	xml.@selected = false;
	       	 	if(xml.data){
	       	 		setSelectedFalse(XMLList(xml.data));
	       	 	}
	       	 }
	      }

	     /**
	       * 点击radioButton时,更新dataProvider
	       * @param event
	       */        
	     protected function changeHandler( event:Event ):void
	      {
	       	 var xmlList:XMLList = XMLList(radioTree(this.parentDocument).collection);
	       	 setSelectedFalse(xmlList);
	       	 if(data.@isLeaf==true){
	       		if( data && data.@selected != undefined ){   
	          		data.@selected = radioButton.selected;
	     		}   
	      	 }else {
	        	radioButton.selected=false;
	//        	radioButton.enabled = false;
	        }
	//        var e:Event = event;
	      }

	     /**
	       * 初始化控件时, 给radioButton赋值
	       */        
	      override protected function commitProperties():void
	      {
	         super.commitProperties();   
			 if(data.@isLeaf==false){
				radioButton.visible=false;
				radioButton.enabled = false;
			 }
	         if( data && data.@selected != undefined ){   
	              radioButton.selected = getBooleanByString(data.@selected.toString()); 
	          }   
	         else {   
	              radioButton.selected = false;
	          }
	      }

	      private function getBooleanByString(valStr:String):Boolean{
	      	return valStr=="true"?true:false;
	      }

	     /**
	       * 重置itemRenderer的宽度
	       */        
	      override protected function measure():void  
	      {   
	         super.measure();   
	          measuredWidth += radioButton.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);   
	          }   

	          radioButton.move(startx, ( unscaledHeight - radioButton.height ) / 2 );   
	          label.x = startx + radioButton.getExplicitOrMeasuredWidth();   
	      }
	}
}

运行的结果
[img]http://dl.iteye.com/upload/attachment/164997/e5ce97fd-b478-39cf-b12b-ec8a410d7984.jpg[/img]