Flex tree 自定义皮肤(skip)

主要实现的功能：

1.改掉默认的箭头，及其它的皮肤，这个可以在tree的属性里设置。

2.改掉的图标在文字右边的显示；

3.默认的所有的节点都展开。

4.所有目录节点加背景色；

效果如下：

折叠的图标效果：

源码如下：

MyTreeItemOpenRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer" creationComplete="onCreationComplete()" dataChange="updateDisplay()">
	<mx:states>
		<mx:State name="group">
			<mx:AddChild>
				<mx:HBox width="100%" backgroundColor="#E0F2F8">
					<mx:Image id="foIcon" mouseDown="disclosureMouseDownHandler(event)"/>
					<mx:Label id="groupName" />
					<mx:HBox width="100%" />
					<mx:Image id="disclosureIcon" mouseDown="disclosureMouseDownHandler(event)"/>
				</mx:HBox>
			</mx:AddChild>
		</mx:State>
		
		<mx:State name="contact">
			<mx:AddChild>
				<mx:Image id="contactIcon" />
			</mx:AddChild>
			<mx:AddChild>
				<mx:HBox>
					<mx:Image id="defaultLeaf" source="{defaultLeafIcon}"/><mx:Label id="contactName" />
				</mx:HBox>
			</mx:AddChild>
		</mx:State>
	</mx:states>
	<mx:Style>
		TreeListData
		{
			/*disclosureIcon:"disclosureOpenIcon"*/
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			import mx.controls.Tree;
			import mx.controls.listClasses.BaseListData;
			import mx.controls.treeClasses.TreeListData;
			import mx.core.IFlexDisplayObject;
			import mx.core.SpriteAsset;
			import mx.core.mx_internal;
			import mx.events.TreeEvent;
			
			use namespace mx_internal;
			
			[Bindable]
			[Embed(source="assets/images/tree/elbow-end-minus-nl.gif")]
			public var disclosureOpenIcon:Class;
			
			[Bindable]
			[Embed(source="assets/images/tree/leaf.gif")]
			public var defaultLeafIcon:Class;
			
			[Bindable]
			[Embed(source="assets/images/tree/elbow-end-plus.gif")]
			public var disclosureClosedIcon:Class;
			
			private var _listData:TreeListData;
			private var listOwner:Tree;			
			
			public function get listData():BaseListData
			{
				return _listData;
			}
			
			
			[Bindable]
			public function set listData(value:BaseListData):void
			{
				_listData=TreeListData(value);
				listOwner=Tree(_listData.owner);
			}
			
			private function disclosureMouseDownHandler(event:Event):void
			{
				event.stopPropagation();
				
				if (listOwner.isOpening || !listOwner.enabled) return;
				
				var open:Boolean=_listData.open;
				_listData.open=!open;
				
				listOwner.dispatchTreeEvent(TreeEvent.ITEM_OPENING, _listData.item,  //item
					this,  //renderer
					event,  //trigger
					!open,  //opening
					true,  //animate
					true)
			}
			
			
			
			private function onCreationComplete():void
			{
				//初始化完成后进行渲染
				updateDisplay();
			}
			
			
			//渲染，如果是第一次创建则通过onCreationComplete方法调用，如果是从缓存中取出的则直接调用
			private function updateDisplay():void
			{
				//只有具有条目数据并且初始化完成后才允许渲染
				if (!(_listData && initialized)) return;
				
				if (_listData.hasChildren)
				{
					currentState="group";
					//setStyle("folderClosedIcon",null);
					//setStyle("paddingLeft",16);
					//setStyle("paddingRight",16);
					if(disclosureIcon && disclosureIcon.source!=_listData.disclosureIcon)
					{
						//disclosureIcon.source=_listData.disclosureIcon;
						if (_listData.open) {
							disclosureIcon.source=disclosureOpenIcon;
						} else {
							disclosureIcon.source=disclosureClosedIcon;
						}
					}
					if(groupName && groupName.text!=_listData.label)
					{
						groupName.text=_listData.label;
					}
				}
				else if (!_listData.hasChildren)
				{
					currentState="contact";
					setStyle("paddingLeft",_listData.indent);
					/*if(contactIcon && contactIcon.source!=_listData.item.@head)
					{
						contactIcon.source=_listData.item.@head;
					}*/
					if(contactName && contactName.text!=_listData.label)
					{
						contactName.text=_listData.label
					}
				}
			}
		]]>
	</mx:Script>
</mx:HBox>

测试文件源码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler(event)">
	<mx:Script>
		<![CDATA[
			import com.gwtjs.renderer.tree.MyTreeItemRenderer;
			
			import mx.controls.Alert;
			import mx.controls.treeClasses.TreeItemRenderer;
			import mx.controls.treeClasses.TreeListData;
			import mx.events.FlexEvent;
			import mx.events.ListEvent;
			import mx.rpc.events.ResultEvent;
			
			private function showDataInfo(event:ListEvent):void
			{
				baseText.text="selectIndex="+myTree.selectedIndex;
				baseText.text+="\nselectedItem="+myTree.selectedItem.toXMLString();
				
				var data:TreeListData=MyTreeItemRenderer(event.itemRenderer).listData as TreeListData;
				dataText.text="depth="+data.depth+"\n";
				dataText.text+="hasChildren="+data.hasChildren+"\n";
				dataText.text+="open="+data.open+"\n";
				dataText.text+="icon="+data.icon+"\n";
				dataText.text+="disclosureIcon="+data.disclosureIcon+"\n";
				dataText.text+="indent="+data.indent+"\n";
				dataText.text+="item="+data.item;
			}
			
			[Bindable]
			private var menus:XML;
			
			private function openAllNodes():void {
				myTree2.openItems = menus..node;
			}
			
			private function closeAllNodes():void {
				myTree2.openItems = [];
			}
			
			private function LoadMenu(event:ResultEvent):void{
				menus = XML(event.result);
				var results:XMLList = menus.node;
				myTree2.dataProvider = results;
				openAllNodes();
			}
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				menu.send();
			}
			
		]]>
	</mx:Script>
	
	<mx:HTTPService url="assets/data/TreeMenus.xml" id="menu" useProxy="false"
					showBusyCursor="true" result="LoadMenu(event)" resultFormat="xml"/>
	
	<mx:XMLListCollection id="treeData">
		<mx:XMLList xmlns="">
			<group name="我的好友" isBranch="true">
				<node name="王小建" head="defaultMan.png" sign="求存养息"/>
				<node name="何东平" head="defaultWoman.png" sign="幸运到底有多重要"/>
			</group>
			<group name="陌生人" isBranch="true">
				<node name="江北风" head="defaultHead.png" sign="这是流亡的场所"/>
				<node name="宋小雨" head="defaultHead.png" sign="诚信方能立身"/>
			</group>
			<group name="黑名单" isBranch="true">
				<node name="XX**XX" head="defaultHead.png" sign="冬天来了"/>
				<node name="广告宣传" head="defaultHead.png" sign="www.ttq.com"/>
			</group>
		</mx:XMLList>
	</mx:XMLListCollection>
	<mx:Tree id="myTree" dataProvider="{treeData}" labelField="@name"
			 width="249" x="445" y="48" height="285" itemRenderer="com.gwtjs.renderer.tree.MyTreeItemRenderer" variableRowHeight="true"/>
	<mx:Tree id="myTree2" labelField="@label"
			 width="249" x="445" y="248" height="285" itemRenderer="com.gwtjs.renderer.tree.MyTreeItemOpenRenderer" variableRowHeight="true"/>
	<mx:Panel title="ListBase" x="143" y="48" width="294" height="91">
		<mx:TextArea id="baseText" width="100%" height="100%" />
	</mx:Panel>
	<mx:Panel title="TreeDataList" x="143" y="147" width="294" height="186">
		<mx:TextArea id="dataText" width="100%" height="100%" />
	</mx:Panel>
</mx:Application>