Flex通用树结构

最近公司做前台页面，需要做一个树形结构，本来是找了一个用jQuery做得，可是好像有一些bug，这个组的人jQuery也都比较菜，所以就用Flex做了一个树结构，网上也参考了一下资料，反正最后做出来的东西还算能用吧，呵呵。

这个是主程序文件，实现了右键菜单的 添加 删除 重命名的功能。本来准备找下资料隐藏掉Flex自带的右键菜单项的，好像是要使用第三方的包吧，因为开发的时间不是很够，所以就暂时没有实现了。

因为是做为一个通用结构嵌到页面中去的，所以Flex和JS相互交互，相互调用对方函数的比较多。

<!--
  主程序文件
  FlexTreeTest2.mxml
-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    fontSize="12" creationComplete="initTree();returnNowTimeXML();returnSelectedItemValue();hideRightClickMenu();" backgroundColor="white">
 <mx:Script>
  <![CDATA[
   import mx.messaging.management.ObjectInstance;
   import mx.controls.Alert;
   import flash.ui.ContextMenu;
   import mx.controls.Alert;
   import mx.collections.XMLListCollection;
   import mx.events.*;
   import mx.managers.PopUpManager;
   import flash.external.*;

	flash.system.Security.allowDomain("*");
   [Bindable]
   private var company:XML=<root name="梦网科技——通用树结构">
     <list name="研发一部">
      <node name="A" />
      <node name="B" />
     </list>
     <list name="移动信息化研发中心">
      <node name="C" />
      <node name="D" />
     </list>
     <node name="测试部门"/>
    </root>;
   //新增节点   
   private function addNode():void
   {
    var pop : PopWindow= PopWindow(PopUpManager.createPopUp(this,PopWindow,true));
    PopUpManager.centerPopUp(pop);
    pop.callBackFunction=callBack_addNode;
   }

   private function callBack_addNode(str:String):void{
   	var newNode:XML=<employee/>;
    newNode.@name=str;
    newNode.@id=-1;
    var xml:XML=XML(tree.selectedItem);
    if (xml.length() > 0)
    {
     xml[0].appendChild(newNode);
    }
    ExternalInterface.call("addNewNode",tree.selectedItem.@id,str);
   }


   //删除节点		
   private function removeNode():void
   {
    if (tree.selectedItem != null)
    {
     var node:XML=XML(tree.selectedItem);
     var oldSelectedNode:Object=tree.selectedItem;
     // 不能删除空节点和部门A，B
     if (node == null)
     {
      Alert.show("不能删除空节点");
      return;
     }
     // 获取当前节点的父节点下的所有子节点
     var children:XMLList=XMLList(node.parent()).children();
     // 将其转换为 XMLListCollection
     var childrenCol:XMLListCollection=new XMLListCollection(children);
     // 获取选中节点索引，并删除该节点
     var i:Number=childrenCol.getItemIndex(node);
     if(i==-1){
     	Alert.show('不能删除根节点');
     	return;
     }
     childrenCol.removeItemAt(i);
     ExternalInterface.call("deleteNode",oldSelectedNode.@id)
    }else{
     Alert.show("请选中一个节点再进行删除！");
    }
   }




   //重命名节点
   private function renameNode():void{
   		var pop : PopWindow= PopWindow(PopUpManager.createPopUp(this,PopWindow,true));
    	PopUpManager.centerPopUp(pop);
    	pop.callBackFunction=callBack_renameNode;
   }
   private function callBack_renameNode(str:String):void{
   		tree.selectedItem.@name=str;
   		ExternalInterface.call('renameNode',tree.selectedItem.@id,str);
   }
     //--------------------------------------右键菜单-----------------------------------------------------

   [Bindable]
   private var cm:ContextMenu;

   private var alert:Alert;

   private function init():void {
   		var cmi1:ContextMenuItem=null;
   		var cmi2:ContextMenuItem=null;
   		var cmi3:ContextMenuItem=null;
   		if(isCanInsert==true){
   			cmi1 = new ContextMenuItem("新建节点", true);
  	 		cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_addNewNode);
  	 	}
  	 	if(isCanDelete==true){
   			cmi2=new ContextMenuItem("删除节点",true);
   			cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextMenuItem_deleteNode);
   		}
   		if(isCanRename==true){
	    	cmi3=new ContextMenuItem("重命名节点",true); 
	    	cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,contextMenuItem_renameNode);
	    }	
	    cm = new ContextMenu();
	    cm.hideBuiltInItems();
	    var arrMenu:Array = new Array();
	    if(cmi1!=null){arrMenu.push(cmi1);}
	    if(cmi2!=null){arrMenu.push(cmi2);}
	    if(cmi3!=null){arrMenu.push(cmi3);}
	    cm.customItems = arrMenu;
	    cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
   }

   private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
         tree.selectedIndex = lastRollOverIndex;
   }
  /*
   private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void {
        var obj:Object = tree.selectedItem;
        alert = Alert.show("Property: " + obj.@name);
   }
   */

   private function contextMenuItem_addNewNode(evt:ContextMenuEvent):void{
   		addNode();
   }
   private function contextMenuItem_deleteNode(evt:ContextMenuEvent):void{
   		Alert.show("确认要删除吗？","删除提示",Alert.YES|Alert.NO,null,function(event:CloseEvent){
   			if(event.detail==Alert.YES){
   				removeNode();
   				return;
   			}  
			else if(event.detail==Alert.NO){
				return; 
			} 
   		})
   }
   private function contextMenuItem_renameNode(evt:ContextMenuEvent):void{
   		//to-do
   		renameNode();
   } 

   //----------------------------------js调用flex的函数------------------------------------------------
   [Bindable]
   public var isCanInsert:Boolean=true;
   [Bindable]
   public var isCanRename:Boolean=true;
   [Bindable]
   public var isCanDelete:Boolean=true;
   public function init_tree(xmlStr:String,title:String,canInsert:Boolean,canDelete:Boolean,canRename:Boolean):void{
   		mx.controls.Alert.show(xmlStr);
   		company=new XML(xmlStr);
   		panel1.title=title;
   		isCanInsert=canInsert;
   		isCanDelete=canDelete;
   		isCanRename=canRename;
   		init();
   }
   //javascript调用的初始化树结构的函数
   public function initTree():void{
   		ExternalInterface.addCallback("initFlexTree",init_tree);
   }

   //javascript调用的得到树结构的函数
   public function nowTimeXML():String{
   		return company.toString();
   }
   public function returnNowTimeXML():void{
   		ExternalInterface.addCallback("getNowTimeXML",nowTimeXML);
   }

   //javascript调用返回当前选中项的属性值
   public function selectedItemValue(str:String):String{
   		return (tree.selectedItem as XML).attribute(str).toString();
   }
   public function returnSelectedItemValue():void{
   		ExternalInterface.addCallback("nowtimeSelectedItemValues",selectedItemValue);
   }

   public function treeDoubleClick(event:ListEvent):void{
   	var temp:String='name';
   	var node:XML=tree.selectedItem as XML;
  	var atts:XMLList=node.@*;
  	var returnObject:Object=new Object();
  	for(var i:int=0;i<atts.length();i++){
  		returnObject[atts[i].name().toString()]=atts[i].valueOf().toString();
  	}
   	ExternalInterface.call('doubleClick_Tree',returnObject);

   }


   public function treeClick(event:ListEvent):void{
   	var node:XML=tree.selectedItem as XML;
  	var atts:XMLList=node.@*;
  	var returnObject:Object=new Object();
  	for(var i:int=0;i<atts.length();i++){
  		returnObject[atts[i].name().toString()]=atts[i].valueOf().toString();
  	}
   	ExternalInterface.call('click_tree',returnObject);
   }
  ]]>
 </mx:Script>
 <mx:Number id="lastRollOverIndex" />
 <mx:Panel
     width="260"
     height="300"
     id="panel1" backgroundColor="white">
  <mx:Tree id="tree" contextMenu="{cm}"
  	 itemRollOver="lastRollOverIndex = event.rowIndex"
     dataProvider="{company}"
     labelField="@name"
     height="220"
     width="230" 
     doubleClickEnabled='true'
     itemDoubleClick="treeDoubleClick(event)" itemClick="treeClick(event)"/>
  <mx:HBox>
   <mx:Button label="添加节点"
        click="addNode();" visible="{isCanInsert}"/>
   <mx:Button label="删除节点"
        click="removeNode();" id="myButton" visible="{isCanDelete}"/>
   <mx:Button id="newNode"
        click="renameNode()" label="重命名" visible="{isCanRename}"/>
  </mx:HBox>
 </mx:Panel>
</mx:Application>

后面的这个文件主要是弹出框的，类似于网页中的遮罩层，当然在flex中实现起来就非常简单了，为了这个程序的完整性，我还是把相应的代码放上来。

<!--
  PopWindow.mxml
  弹出框，重命名和新建的时候调用，输入新名称
-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="176" height="106">
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
   			[Bindable]
   			public var callBackFunction:Function;
   			public var pop:Object=null;
   			private function returnName():void {
    		//newName.text=input1.text;
    		callBackFunction.call(pop,input1.text); 
    		PopUpManager.removePopUp(this);
   			}

			private function fun_cancel():void{
				PopUpManager.removePopUp(this);
				return;
			}
		]]>
	</mx:Script>
	<mx:VBox width="158" height="80" left="10" top="10">
		<mx:Text text="请输入节点名称:" fontSize="12"/>
		<mx:TextInput text="" id="input1" width="144" fontSize="12"/>
		<mx:HBox left='20' top="20">
			<mx:Button label="确定" click="returnName()" fontSize="12"/>
			<mx:Button label="取消" click="fun_cancel()" fontSize="12"/>
		</mx:HBox>
	</mx:VBox>
</mx:Canvas>

最后写了一个JS的范例，因为写好的树是给别人用的嘛，所以这个JS里面注释比较多，我工作的这个组除了我也没有人用Flex，所以也没有给他们Flex的源代码，因为给了也不会有人看的。。

还是照样，贴上写得JS代码吧

  	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="Flex_TreeTest2" width="310" height="350"
			codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
			<param name="movie" value="Flex_TreeTest2.swf" />
			<param name="quality" value="high" />
			<param name="bgcolor" value="#000" />
			<param name="allowScriptAccess" value ="always" />
			<embed src="Flex_TreeTest2.swf" quality="high" bgcolor="#000"
				width="100%" height="100%" name="Flex_TreeTest2" align="middle"
				play="true"
				loop="false"
				quality="high"
				allowScriptAccess="always"
				type="application/x-shockwave-flash"
				pluginspage="http://www.adobe.com/go/getflashplayer">
			</embed>
	</object>
	<button onclick="initFlexTree('<root id="123" name="yuxiangdong"/>','测试标题',true,true,true)"/>
	<script language='javascript'>
		//初始化树结构，传入符合xml规范的字符串 name为需要显示的值 id为唯一标识符
		//xml 符合xml标准的字符串
		//title 标题
		//canInsert 是否可以插入新节点
		//canDelete 是否可以删除节点
		//canRename 是否可以重命名节点
		function initFlexTree(xml,title,canInsert,canDelete,canRename){
			Flex_TreeTest2.initFlexTree(xml,title,canInsert,canDelete,canRename);
		}
		//新建节点后需要调用的函数，例如写数据库等，在flex中会自动调用相关的此函数
		//其中pid为父节点的id值
		//name 为新建时输入的名称
		function addNewNode(pid,name){
			alert(pid);
			alert(name);
		}
		//删除节点后需要调用的函数，例如写数据库等，在flex中会自动调用此函数
		//id为删除节点的id值
		function deleteNode(id){
			alert(id);
		}
		//重命名节点后需要调用的函数，例如写数据库等，在flex中会自动调用此函数
		//id为重命名的id值
		//name为新名字
		function renameNode(id,name){
			alert(id);
			alert(name);
		}
		//得到树结构的xml格式文档
		function returnNowtimeXML(){
			return Flex_TreeTest2.getNowTimeXML();
		}
		//得到选中的项目的值,str为属性的名称，例如，str="name"则返回当前选中项name属性的值
		//如果当前项改属性的值不存在，则返回所有子节点的改属性的值，用分号隔开
		function getNowTimeSelectedItemValue(str){
			return Flex_TreeTest2.nowtimeSelectedItemValues(str);
		}
		//双击选择一项后调用，obj我会组装成Object
		function doubleClick_Tree(obj){
			alert(obj.name);
			alert(obj.id);
			alert(getNowTimeSelectedItemValue('name'));
		}
		//单击后调用，obj为包装后的Object类型 例如，取出当前点击项的id:obj.id;
		function click_tree(obj){
			alert(obj.name);
		}
	</script>

附件里面就是这个树结构的swf文件了，其实挺简单的。

话说Adobe公司要放弃Flex，给Apache开源了。然后老大就告诉我，尽量少用Flex，唉。想想当初我刚编程还做Delphi开发呢，到现在还在做，当然主要精力还是在JAVA方面。明年开年估计还要用Delphi做个客户端软件。Delphi 早就走下坡路了，Flex也悲剧了。下一个希望不是java，js，css