`
JavaCrazyer
  • 浏览: 3012178 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

Flex4之Tree开发【二】

阅读更多

这次要说的是Flex的树组件的拖动效果,从树组件拖动到其他组件如List,DataGrid或者从其他组件拖动到Tree组件中,其实主要就是处理drag相关事件

 

第一:从Tree到List

   示例一

   

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<fx:XML id="myData">
			<data>
				<item label="ActionScript">
					<item label="Flash" />
					<item label="Flex" />
				</item>
				<item label="Mirage">
				</item>
				<item label="JavaScript"/>
			</data>
		</fx:XML>
		<fx:XML id="copyData">
			<data>
				<item label="JavaScript"/>
			</data>
		</fx:XML>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Button;
			import mx.core.IUIComponent;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			//拖动对象进入时
			private function onDragOver( event:DragEvent ) : void
			{
				var dropTarget:Tree = Tree(event.currentTarget);
				var r:int = dropTarget.calculateDropIndex(event);
				lbl.text = '当前位置:'+r.toString();//哪一个节点在鼠标下并给出相应信息
				tree2.selectedIndex = r; //显示位置
				var node:XML = sourceTree.selectedItem as XML;
				lbl2.text = '当前的拖动对象是:'+node.@label;//拖动对象的名字
				if( node.@label == "ActionScript" ) {
					DragManager.showFeedback(DragManager.NONE);
					return;
				}
				// 键盘控制 
				if (event.ctrlKey)
					DragManager.showFeedback(DragManager.COPY);//复制
				else if (event.shiftKey)
					DragManager.showFeedback(DragManager.LINK);//剪切
				else {
					DragManager.showFeedback(DragManager.MOVE);//移动
				}
			} 
			
			//拖动对象被抛出后
			private function onDragDrop( event:DragEvent ) : void
			{
				// var ds:DragSource = event.dragSource;
				var dropTarget:Tree = Tree(event.currentTarget);
				// retrieve the data associated with the "items" format.
				//var items:Array = ds.dataForFormat("items") as Array;
				var r:int = tree2.calculateDropIndex(event);
				tree2.selectedIndex = r;//当拖放完成后选定相应的节点
				var node:XML = tree2.selectedItem as XML;
				var p:*;
				//tree2.dataDescriptor.hasChildren(node)判断有没有子节点,如果有就返回true
				if( tree2.dataDescriptor.hasChildren(node) ) {
					p = node;
					r = 0;
					trace('有子节点');
				} else {
					p = node.parent();
					trace('没有子节点');
				}
				
				// taking all of the items in the DragSouce, insert them into the 
				// tree using parent p. 
				//       for(var i:Number=0; i < items.length; i++) {
				//             var insert:XML = <node/>;
				//             insert.@label = items[i];
				//             insert.@type = "restaurant";
				//             tree2.dataDescriptor.addChildAt(p, insert, r+i);
				//       }
			} 
			
			private function onDragComplete(event:DragEvent) : void
			{
				trace('stop');
				tree2.selectedIndex = 0;
			}

		]]>
	</fx:Script>

	
	<mx:Label text="Label" id="lbl" x="439" y="120"/>
	<mx:Tree dropEnabled="true" dragEnabled="true" allowMultipleSelection="true" id="sourceTree"
			 dataProvider="{myData.item}" labelField="@label" x="114" y="146"/>
	
	<mx:Tree dropEnabled="true" id="tree2" dataProvider="{copyData.item}" labelField="@label"
			 dragOver="onDragOver(event)" dragDrop="onDragDrop(event)" dragComplete="onDragComplete(event)" x="382" y="146"/>
	
	<mx:Label x="382" y="94" text="Label" width="274" id="lbl2" height="29"/>
	<mx:Label x="218" y="62" text="Tree与Tree之间的拖动" width="139" height="19"/>
</s:Application>

  

 

  

   示例二

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<!-- 这里定义班组树的结构和内容 -->
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="工区1">
					<node label="工地1">
						<node label="班组1.1" data="111"/>
						<node label="班组1.2"/>
					</node>
					<node label="工地2">
						<node label="班组2.1"/>
						<node label="班组2.2"/>
					</node>
					<node label="工地3">
						<node label="班组3.1"/>
						<node label="班组3.2"/>
					</node>
				</node>
				<node label="工区2">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
			</node>    
		</fx:XMLList>    
	</fx:Declarations>
	
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Label;
			import mx.core.IUIComponent;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			[Bindable]
			public var list:ArrayCollection=new ArrayCollection();
			
			//拖动初始器
			private function dragSource(e:MouseEvent,format:String):void
			{
				var iu:IUIComponent = e.currentTarget as IUIComponent;
				var ds:DragSource=new DragSource();
				ds.addData(myTree.selectedItem,format);//为myTree设置一个标号forma
				var lbl:Label=new Label(); 
				lbl.text="开始拖动";
				lbl.x = e.stageX;
				lbl.y = e.stageY;
				//lbl拖动的影子,默认为自己doDrag(拖动的对象,拖动器,事件,拖动影子,x,y)
				DragManager.doDrag(iu,ds,e,lbl,e.stageX,e.stageY);//开始拖动这个物体            
			}
			
			//当拖进去时
			private function doDragEnter(e:DragEvent,format:String):void
			{
				var len:int=(mylist.dataProvider as ArrayCollection).length;//判断list中有多少个数据
				var selectnode:XML = myTree.selectedItem as XML;//选择的节点名
				for(var i:int=0;i<len;i++)
				{
					if(validateIsEqual((mylist.dataProvider as ArrayCollection).getItemAt(i),selectnode))
					{
						Alert.show("该班组已经存在!");
					}
				}
				if(e.dragSource.hasFormat(format)){//如果标号为format则接受拖来的物体
					DragManager.acceptDragDrop(IUIComponent(e.target));
				}
			}
			
			//当拖完成时
			private function onDragDrop(e:DragEvent,format:String):void{
				var row:Object=e.dragSource.dataForFormat(format);
				list.addItem(row);//list的数据源添加数据
			}
			
			//判断选中的节点是否和List中的内容一样
			private function validateIsEqual(obj1:Object,obj2:Object):Boolean
			{
				if(obj1==obj2)//条件未判断
				{
					return true;
				}
				else
				{
					return false;
				}
			}
		]]>
	</fx:Script>
	<mx:Tree id="myTree" labelField="@label" dragEnabled="true" mouseDown="dragSource(event,'stringFormat')" 
			 showRoot="true" dataProvider="{treeData}"   height="331" horizontalCenter="-120" verticalCenter="7" width="190"/>
	
	<mx:List height="331" labelField="@label" dragEnter="doDragEnter(event,'stringFormat')"
			 dataProvider="{list}" dragDrop="onDragDrop(event,'stringFormat')" width="162" id="mylist" horizontalCenter="114" verticalCenter="7"></mx:List>
	<mx:Label x="282.5" y="97" text="Tree与list的拖动" width="152"/>
</s:Application>

 

  

 

第二:从Tree到DataGrid

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<fx:XML id="treeData" xmlns="">
			<root>
				
				<node label="Massachusetts" type="state" data="MA">
					<node label="Boston" type="city" >
						<node label="Smoke House Grill" type="restaurant" />
						<node label="Equator" type="restaurant" />
						<node label="Aquataine" type="restaurant" />
						<node label="Grill 23" type="restaurant" />
						
					</node>
					<node label="Provincetown" type="city" >
						<node label="Lobster Pot" type="restaurant" />
						<node label="The Mews" type="restaurant" />
					</node>
				</node>
				
				<node label="California" type="state" data="CA">
					<node label="San Francisco" type="city" >
						<node label="Frog Lane" type="restaurant" />
					</node>
				</node>
			</root>
			
		</fx:XML>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
		import mx.controls.Alert;
		import mx.controls.Label;
		import mx.controls.List;
		import mx.collections.ArrayCollection;
		import mx.core.DragSource;
		import mx.controls.Tree;
		import mx.controls.DataGrid;
		import mx.controls.listClasses.ListBase;
		import mx.events.DragEvent;
		import mx.containers.Canvas;
		import mx.managers.DragManager;
		import mx.core.UIComponent;
		
		[Bindable]
		
		private var dataGridProvider:ArrayCollection = new ArrayCollection();
		/**
		* Handles the dragEnter event on the DataGrid control.
		* If the dragInitiator is the Tree control, then only nodes of type "restaurant"
		* are permitted to be dropped.
		* Here you can see that by examining the dragSource you can determine if
		* the control should accept the drop. The DataGrid control would not
		* know how to treat a branch+children from the Tree control, so only leaf (restaurant)
		* nodes are accepted.
		*/
		
		private function onDragEnter( event:DragEvent ) : void
		
		{            
		if( event.dragInitiator is Tree ) {
		var ds:DragSource = event.dragSource;
		if( !ds.hasFormat("treeItems") ) return;     // no useful data
		
		var items:Array = ds.dataForFormat("treeItems") as Array;
		for(var i:Number=0; i < items.length; i++) {
		
		var item:XML = XML(items[i]);
		if( item.@type != "restaurant" ) return; // not what we want
		
		}
		} 
		// If the Tree control passes or the dragInitiator is not a Tree control,
		// accept the drop.
		DragManager.acceptDragDrop(UIComponent(event.currentTarget)); 
		}        
		/**
		* Handles the dragOver event on the DataGrid control.
		* If the dragInitiator is the Tree control, only copy is allowed. Otherwise, a move
		* or link can take place from the List control.
		*/
		
		private function onDragOver( event:DragEvent ) : void
		
		{
		if( event.dragInitiator is Tree ) {
		DragManager.showFeedback(DragManager.COPY);
		} else {
		
		if (event.ctrlKey)
		DragManager.showFeedback(DragManager.COPY);
		else if (event.shiftKey)
		
		DragManager.showFeedback(DragManager.LINK);
		else {
		DragManager.showFeedback(DragManager.MOVE);
		}
		
		}
		}        
		/**
		* Handles the dragExit event on the drop target and just hides the 
		* the drop feedback.
		*/
		private function onDragExit( event:DragEvent ) : void
		
		{
		var dropTarget:ListBase=ListBase(event.currentTarget);   
		dropTarget.hideDropFeedback(event);
		}
		
		/**
		* Handles the dragDrop event on the DataGrid when the 
		* drag proxy is released. 
		*/
		private function onGridDragDrop( event:DragEvent ) : void
		
		{
		var ds:DragSource = event.dragSource;
		var dropTarget:DataGrid = DataGrid(event.currentTarget);
		var arr:Array;
		if( ds.hasFormat("items") ) {
		
		arr = ds.dataForFormat("items") as Array;
		} else if( ds.hasFormat("treeItems") ) {
		
		arr = ds.dataForFormat("treeItems") as Array;
		}
		for(var i:Number=0; i < arr.length; i++) {
		
		var node:XML = XML(arr[i]);
		var item:Object = new Object();
		item.label = node.@label;
		item.type  = node.@type;
		dataGridProvider.addItem(item);
		}
		
		onDragExit(event); 
		}
		/**
		* Intercepts the dragComplete event on the Tree control
		* and prevents the default behavior from happening. This is necessary
		* if the item being dragged from the Tree control is dropped on a non-Tree
		* object, such as the DataGrid.
		*/
		private function onTreeDragComplete(event:DragEvent):void {
		
		event.preventDefault();
		}        
		/**
		* Selects all of the items in the List if Ctrl+A is picked when the List control
		* has focus.
		*/
		private function selectAllMaybe( event:KeyboardEvent ) : void
		
		{
		if( event.ctrlKey && event.keyCode == 65 ) {
		
		var l:List = List(event.currentTarget);
		var allItems:Array = new Array(l.dataProvider.length);
		for(var i:Number=0; i < allItems.length; i++) {
		
		allItems[i] = i;
		}
		l.selectedIndices = allItems;
		}
		
		}
		]]>
	</fx:Script>
	<mx:Label x="34" y="40" text="Drag items from this Tree"/>
	<mx:Label x="34" y="55" text="(items are copied)"/>
	
	<mx:Tree x="34" y="81" width="181" height="189"
			 dataProvider="{treeData.node}"
			 labelField="@label"
			 dropEnabled="false"
			 dragEnabled="true"
			 dragComplete="onTreeDragComplete(event)"
			 dragMoveEnabled="false"
			 />
	
	<mx:Label x="291" y="55" text="Drop items from Tree here"/>
	<mx:DataGrid x="291" y="81" height="189"
				 dragEnabled="true"
				 dataProvider="{dataGridProvider}"
				 dragEnter="onDragEnter(event)"
				 dragOver="onDragOver(event)"
				 dragDrop="onGridDragDrop(event)"
				 dragExit="onDragExit(event)">
		
		<mx:columns>
			<mx:DataGridColumn headerText="Label" dataField="label"/>
			<mx:DataGridColumn headerText="Type" dataField="type"/>
			
		</mx:columns>
	</mx:DataGrid>
	
</s:Application>

 

 

 

 

第三:从List到Tree

   

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<fx:XML id="treeData" xmlns="">
			
			<root>
				<node label="Massachusetts" type="state" data="MA">
					<node label="Boston" type="city" >
						<node label="Smoke House Grill" type="restaurant" />
						<node label="Equator" type="restaurant" />
						<node label="Aquataine" type="restaurant" />
						
						<node label="Grill 23" type="restaurant" />
					</node>
					<node label="Provincetown" type="city" >
						<node label="Lobster Pot" type="restaurant" />
						<node label="The Mews" type="restaurant" />
					</node>
					
				</node>
				<node label="California" type="state" data="CA">
					<node label="San Francisco" type="city" >
						<node label="Frog Lane" type="restaurant" />
					</node>
				</node>
				
			</root>
		</fx:XML>    
		<fx:Array id="listData">
			
			<fx:String>Johnny Rocket's</fx:String>
			
			<fx:String>Jet Pizza</fx:String>
			<fx:String>Steve's Greek</fx:String>
			<fx:String>Sonsie</fx:String>
			<fx:String>The Border Cafe</fx:String>
			
		</fx:Array>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.controls.Tree;
			/**
			 * Called as soon as the dragProxy enters the target. You can add logic
			 * to determine if the target will accept the drop based on the
			 * dragInitiator, the data available in the dragSource.
			 * Here the drop is blindly accepted.
			 */
			
			private function onDragEnter( event:DragEvent ) : void
				
			{
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));
			}
			/**
			 * Called while the dragProxy is over the drop target. You can
			 * use this function to determine the type of feedback to show.
			 * Since the List is set to allow MOVE (the item is deleted
			 * once dropped), different feedback possibilities are given.
			 *
			 * Also, for this application, the Tree control node the dragProxy is
			 * over is selected. As the dragProxy moves, the Tree control's
			 * selection changes.
			 *
			 * For a bit more complication, the drop is being allowed
			 * only over nodes whose type is NOT 'state'.
			 * The feedback is removed.
			 */
			private function onDragOver( event:DragEvent ) : void
				
			{
				var dropTarget:Tree = Tree(event.currentTarget);
				var r:int = dropTarget.calculateDropIndex(event);
				tree.selectedIndex = r;
				var node:XML = tree.selectedItem as XML;
				if( node.@type == "state" ) {
					
					DragManager.showFeedback(DragManager.NONE);
					return;
				}
				if (event.ctrlKey)
					
					DragManager.showFeedback(DragManager.COPY);
				else if (event.shiftKey)
					DragManager.showFeedback(DragManager.LINK);
				else {
					
					DragManager.showFeedback(DragManager.MOVE);
				}
			}
			/**
			 * Called when the dragProxy is released
			 * over the drop target. The information in the dragSource
			 * is extracted and processed.
			 *
			 * The target node is determined and 
			 * all of the data selected (the List has allowMultipleSection
			 * set) is added.
			 */
			private function onDragDrop( event:DragEvent ) : void
				
			{
				var ds:DragSource = event.dragSource;
				var dropTarget:Tree = Tree(event.currentTarget);
				var items:Array = ds.dataForFormat("items") as Array;
				var r:int = tree.calculateDropIndex(event);
				tree.selectedIndex = r;
				var node:XML = tree.selectedItem as XML;
				var p:*;
				// if the selected node has children (it is type==city),
				
				// then add the items at the beginning
				if( tree.dataDescriptor.hasChildren(node) ) {
					p = node;
					r = 0;
				} else {
					
					p = node.parent();
				}
				for(var i:Number=0; i < items.length; i++) {
					
					var insert:XML = <node />;
					insert.@label = items[i];
					insert.@type  = "restaurant";
					tree.dataDescriptor.addChildAt(p, insert, r+i);
				}
				
			}
			/**
			 * Called when the drag operation completes, whether 
			 * successfully or not. The tree is cleared of its
			 * selection.
			 */
			private function onDragComplete( event:DragEvent ) : void
				
			{
				tree.selectedIndex = -1;
			}        
		]]>
	</fx:Script>

	<mx:Panel x="48" y="125" width="447" height="351" layout="absolute" title="Drag onto Tree">    
		<mx:Tree width="186" left="10" top="10" bottom="10" id="tree"
				 labelField="@label"
				 dataProvider="{treeData.node}"
				 dropEnabled="false"
				 dragMoveEnabled="false"
				 dragEnter="onDragEnter(event)"
				 dragOver="onDragOver(event)"
				 dragDrop="onDragDrop(event)">
			
		</mx:Tree>        
		<mx:List width="188" height="206" right="10" bottom="10" id="list"
				 allowMultipleSelection="true"
				 dataProvider="{listData}"
				 dragEnabled="true"
				 dragMoveEnabled="true"
				 dragComplete="onDragComplete(event)">
			
		</mx:List>        
		<mx:Text x="229" y="10" text="Drag from the list below to the tree" width="188" height="39"/>
		
		<mx:Label x="229" y="69" text="restaurants"/>
	</mx:Panel>    
</s:Application>

 

  

 

第四:Tree 到Tree及综合拖动示例

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:com="com.*">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.controls.listClasses.ListBase;
			import mx.core.UIComponent;
			import mx.controls.Tree;
			import mx.collections.ArrayCollection;
			import mx.core.DragSource;
			import mx.managers.DragManager;
			import mx.events.DragEvent;
			import mx.events.TreeEvent;
			import flash.events.KeyboardEvent;
			import flash.events.MouseEvent;
			import flash.events.Event;
			import mx.utils.ObjectUtil;
			
			
			
			[Bindable]
			public var selectedNode:Object;
			
			[Bindable]
			public var description:String = "Directions:\n\nTo see the effect of the Spring Loaded Folders select " + 
				"an item in the tree and drag the item over the folders wait, hovering over the folder and " + 
				"it'll open.\n\nIf a folder opens and you did not want it to open move the mouse out of " + 
				"the tree, and it'll restore the original state. \n\nPlay around with the delay to get a " + 
				"desired delay.Hitting spacebar while dragging over a closed folder will open it immediately.";
			
			
			public function treeChanged(event:Event):void {
				selectedNode=event.currentTarget.selectedItem;
			}
			
			private function onDragOver(event:DragEvent):void{
				try{
					if( event.dragInitiator is ListBase ){
						var list:ListBase = event.dragInitiator as ListBase;
						if( event.currentTarget != event.dragInitiator){
							//do what?
							//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
						}
						if(list.indexToItemRenderer(list.calculateDropIndex(event)) != null){
							var currTree:Tree = Tree(event.currentTarget);
							var currNodeOver:Object;
							var rowIndex:int = currTree.calculateDropIndex(event);
							var hoverTarget:Object = currTree.indexToItemRenderer(rowIndex).data;
							var parent:Object = currTree.getParentItem(hoverTarget);
							var tattlerStr:String = new String();
							var halfRow:int = currTree.rowHeight/2;
							var certerRowY:int = (rowIndex*currTree.rowHeight)+halfRow;
							var bottomRowY:int = (rowIndex+1)*currTree.rowHeight;
							
							currNodeOver = currTree.indexToItemRenderer(rowIndex).data;
							
							DragManager.showFeedback(DragManager.MOVE);
							currTree.showDropFeedback(event);
							
							//trace(ObjectUtil.toString(parent));
							if( parent != null )
								trace('[currTree is a tree]');
								//parent.label = 'currTree is a tree';
								//parentObject = currTree.getParentItem(hoverTarget);
							else
								trace('[currTree is a tree]');
							//parent.label = 'currTree is not a tree';
							//parentObject.label = 'currTree is not a tree';
							
							tattlerStr = "Selected Item: " + selectedNode + "\n" + "Over Target: " + hoverTarget.level
								+ "\n" + "Target Parent: " + 'test'//parent.label
								+ "\n"
								+ "calculateDropIndex " + rowIndex
								+ "\n" 
								+ "halfRow " + halfRow.toString()
								+ "\n"
								+ "certerRowY " + certerRowY.toString()
								+ "\n"
								+ "bottomRowY " + bottomRowY.toString()
								+ "\n" 
								+ "mouseY " + currTree.mouseY.toString()
								+ "\n"
								+ "isItemOpen " + currTree.isItemOpen(currNodeOver).toString()
								+ "\n" + "\n";
							
							tattler.text = tattlerStr;
						}else{
							tattler.text = "No Drop Buddy";
						}
					}
				}catch(err:Error){
					trace('[error]'+err);
				}
				
			}
			
			private function onDragDrop(event:DragEvent):void{
				try{
					var target:Tree = Tree(event.currentTarget);
					var list:ListBase = event.dragInitiator as ListBase;
					var ds:DragSource = event.dragSource;
					var rowIndex:int = target.calculateDropIndex(event);
					var hoverTarget:Object = target.indexToItemRenderer(rowIndex).data;
					var parent:Object = target.getParentItem(hoverTarget);
					var items:Array = ds.dataForFormat("items") as Array;
					var i:int;
					
					//trace(event.dragInitiator);
					if( event.dragInitiator is DataGrid ){
						//do what?
						//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
						for (i=0; i < items.length; i++){
							var tempObj:Object = {};
							tempObj = items[i];
							parent.children.addItem(tempObj);
						}
						
						event.preventDefault();
					}
				}catch(err:Error){
					trace('[onDragDropError]'+err);
				}
				
			}
			
			
			private function onDragEnter(event:DragEvent):void{
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));
			}
			[Bindable]
			private var treeData:ArrayCollection = new ArrayCollection(
				[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
					[ {label:"cert1", level:"Cert", children:new ArrayCollection(
						[{label:"c1", level:"Course", type:"prereq"},
							{label:"c2", level:"Course", type:"prereq"} 
						])}
					])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
						[ {label:"cert1", level:"Cert", children:new ArrayCollection(
							[{label:"c1", level:"Course", type:"prereq"},
								{label:"c2", level:"Course", type:"prereq"} 
							])}
						])}
				]);
			
			[Bindable]
			private var secondTreeData:ArrayCollection = new ArrayCollection(
				[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
					[ {label:"cert1", level:"Cert", children:new ArrayCollection(
						[{label:"c1", level:"Course", type:"prereq"},
							{label:"c2", level:"Course", type:"prereq"} 
						])}
					])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
						[ {label:"cert1", level:"Cert", children:new ArrayCollection(
							[{label:"c1", level:"Course", type:"prereq"},
								{label:"c2", level:"Course", type:"prereq"} 
							])}
						])}
				]);
			
			
			[Bindable]
			private var gridDP:ArrayCollection = new ArrayCollection(
				[{label:"c5", level:"Course", type:"prereq"},
					{label:"c6", level:"Course", type:"prereq"},
					{label:"c7", level:"Course", type:"prereq"}]);
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:VBox width="100%" height="100%">
		<mx:Canvas backgroundColor="#f3d7ab" borderColor="#000000" borderStyle="outset" width="100%" x="10" height="50%" y="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			
			<mx:HBox width="100%" height="100%" >
				<com:SpringLoadedTree id="tree1" width="35%" height="100%"
									autoCloseOpenNodes="{autoCloseOpenNodes.selected}" 
									autoCloseOnDrop="{autoCloseOnDrop.selected}" 
									autoOpenTimerMS="{DelayOpen.value}" 
									autoCloseTimerMS="{DelayClose.value}" 
									showOpeningIndication="{showOpenIdication.selected}" 
									autoCloseOnExit="{autoCloseOnExit.selected}" 
									dataProvider="{treeData}"
									mouseDown="treeChanged(event)"
									fontWeight="bold" color="#000000"
									dragEnabled="true" 
									dragOver="onDragOver(event)"
									dragMoveEnabled="true"
									dropEnabled="true"
									labelField="label" wordWrap="true"
									fontSize="8" variableRowHeight="true"
									x="41" y="20"/>
				
				<com:SpringLoadedTree id="tree2" width="35%" height="100%"
									autoCloseOpenNodes="{autoCloseOpenNodes.selected}" 
									autoCloseOnDrop="{autoCloseOnDrop.selected}" 
									autoOpenTimerMS="{DelayOpen.value}" 
									autoCloseTimerMS="{DelayClose.value}" 
									showOpeningIndication="{showOpenIdication.selected}" 
									autoCloseOnExit="{autoCloseOnExit.selected}" 
									dataProvider="{secondTreeData}"
									mouseDown="treeChanged(event)"
									fontWeight="bold" color="#000000"
									dragEnabled="true" 
									showRoot="false"
									dragDrop="onDragDrop(event)"
									dragEnter="onDragEnter(event)"
									dragOver="onDragOver(event)"
									dragMoveEnabled="true"
									dropEnabled="true"
									labelField="label" wordWrap="true"
									fontSize="8" variableRowHeight="true"
									x="41" y="20"/>
				
				
				<mx:DataGrid dataProvider="{gridDP}" id="grid1" 
							 dragEnabled="true"
							 dragMoveEnabled="true" height="100%">
				</mx:DataGrid>
				
				<mx:Text text="{description}" id="Directions" enabled="true" height="100%" width="30%"/>
				
				
			</mx:HBox>
		</mx:Canvas>
		<mx:HBox width="100%" height="50%">
			<mx:TextArea x="10" y="368" width="50%" height="100%" id="tattler"/>
			<mx:Canvas width="50%" height="100%" y="446" x="470">
				<mx:CheckBox id="autoCloseOnDrop" selected="true" label="Return to original state on drop" left="10" right="10" bottom="96"/>
				<mx:HSlider value="1000" tickInterval="200" snapInterval="200" maximum="2000" allowTrackClick="true" minimum="200" id="DelayOpen" left="255" bottom="174" width="190"/>
				<mx:Label text="Folder auto open delay ms:{DelayOpen.value}" left="10" bottom="174" textAlign="left" width="248"/>
				<mx:CheckBox id="showOpenIdication" selected="true" label="Show opening indication" left="10" right="10" bottom="122"/>
				
				<mx:HSlider value="200" tickInterval="100" snapInterval="100" maximum="1000" allowTrackClick="true" minimum="100" id="DelayClose" bottom="200" width="190" left="255"/>
				<mx:Label text="Folder auto close delay ms:{DelayClose.value}" left="10" bottom="200" textAlign="left" width="248"/>
				<mx:CheckBox id="autoCloseOpenNodes" selected="true" label="Auto open/close folders on drag over/out" left="10" right="10" bottom="148"/>
				<mx:CheckBox id="autoCloseOnExit" selected="true" label="Auto close folders on tree exit" left="10" right="10" bottom="70"/>
			</mx:Canvas>
		</mx:HBox>
	</mx:VBox>
</s:Application>

 

 

  • 大小: 4.7 KB
  • 大小: 13.5 KB
  • 大小: 6.6 KB
  • 大小: 11.8 KB
  • 大小: 22.8 KB
11
1
分享到:
评论
1 楼 zlbdexiaohao 2015-07-17  
    

相关推荐

    flex tree 教程二

    总的来说,掌握Flex Tree组件的使用对于开发具有层级结构数据展示的Flex应用至关重要。理解数据模型、数据绑定、事件处理以及自定义节点渲染等核心概念,可以帮助开发者构建出功能丰富且用户友好的界面。通过不断...

    flex带复选框的tree,flex checkboxtree

    在Flex CheckboxTree中,每个树节点都有一个与之关联的复选框。当用户点击复选框时,相应的树节点会被选中或取消选中。开发者可以通过监听CheckBoxTree的事件来处理这些变化,例如,当节点的选中状态改变时,更新...

    Flex tree的用法

    Flex Tree组件是Adobe Flex框架中的一个关键元素,用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用,特别是在需要展现具有嵌套结构的数据时,如文件系统、组织结构或者复杂的分类信息。让我们深入...

    flex Tree 复选框。

    在Flex编程环境中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。在这个特定的场景中,我们关注的是在Flex Tree中集成复选框功能,这为用户提供了一种直观的方式来选择或操作树形结构中的多个节点...

    flex tree+checkbox级联勾选

    在IT行业中,Flex Tree是一种常用于数据展示和交互的组件,尤其在构建用户界面时,它能够以树形结构清晰地展示层次数据。配合Checkbox(复选框)功能,可以提供用户选择或过滤数据的便利操作。"Flex Tree + Checkbox...

    flex xml生成tree 源码

    4. **Tree组件**: Tree组件是Flex中用于展示层次结构数据的一种UI组件。它可以自动根据数据模型构建树形视图,支持展开、折叠等交互操作。在这个例子中,Tree组件的数据提供者是通过HTTPService获取的XML数据,...

    flex_tree扩展_时间轴

    Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA),它由Adobe Systems开发。时间轴组件是Flex中一种强大的可视化工具,通常用于展示和操作一系列按时间顺序排列的事件或数据。 标题中的...

    flex tree icon

    总结来说,"flex tree icon"是Flex开发中的一个重要概念,涉及到如何在树形组件中添加和管理图标。通过阅读相关博客、理解源码、使用开发工具以及研究示例项目,开发者可以熟练掌握这一技能,从而提升Flex应用的用户...

    flex中tree和checkbox结合使用的插件

    4. 插件实现:本压缩包提供的插件可能是对Flex Tree组件的一个扩展,添加了Checkbox功能。可能包括以下关键部分: - TreeNode类的扩展:可能扩展了默认的TreeNode类,添加了Checkbox属性和相关的事件处理。 - ...

    flex tree 拖拽

    Flex Tree 是一种基于 Adobe Flex 技术实现的可交互树形数据结构组件,它允许用户以图形化的方式查看和操作层次结构数据。在 Flex 应用中,Tree 控件经常用于展示具有层级关系的数据,例如文件系统、组织结构或者...

    flex中 Tree树节点内部拖动实例(此实例限制了什么节点可以拖动及拖动到什么位置)

    开发过程中,开发者可能会使用Adobe Flex Builder或Flash Builder这样的集成开发环境,它们提供了图形化的界面来设计和调试Flex应用。此外,对于源码的调试和优化,还可能需要用到如Flex SDK和Flex Profiler等工具...

    Flex Tree组件的实线连接线

    4. 应用自定义渲染器:在Tree组件的mxml代码中,通过`&lt;mx:Tree itemRenderer&gt;`属性,指定我们刚刚创建的自定义TreeItemRenderer类。 5. 测试与优化:最后,运行应用并检查效果。可能需要根据实际情况调整线条的位置...

    flex中tree的数据源是xml

    在Flex应用开发过程中,我们常常需要用到树形结构(Tree)来展示分层数据。为了使数据呈现更加灵活且高效,通常会采用XML作为数据交换格式,这是因为XML具备良好的可读性和扩展性,能够方便地被解析与处理。 #### ...

    Flex Tree增加虚线连接

    1. **Flex Tree组件**: Flex Tree是基于ActionScript或Flex SDK开发的组件,它允许用户以图形化的方式展示层次数据。它通常包含可展开/折叠的节点,以及连接节点的线条来展示层级关系。 2. **连接线样式**:在Flex ...

    flex的combBox添加tree

    综上所述,实现"flex的combBox添加tree"涉及了Flex组件使用、ActionScript编程、数据处理、事件驱动等多个方面的知识,需要一定的Flex开发经验。通过这个过程,你可以创建出一个功能强大的用户界面,为用户提供更加...

    jquery+flex制作的Tree插件

    插件是自己开写的,插件JS文档里附有说明!希望提宝贵意见.小插件主要是WEB开发显示一棵树结构...只要根据规定的数据格式XML传入便可生成一棵美观的树,可以选择是否要显示CHECKBOX组件,里边有开发中常用的回调方法。

    Flex Tree 源码

    根据提供的文件信息,本文将对“Flex Tree 源码”进行详细解析,重点解读如何通过 Flex、Java 和 Tree 代码结合 XMLList 来生成 XML 文件,并构建树形数据结构。 ### 一、理解 Flex、Java 和 Tree 代码 #### 1.1 ...

    Flex 4.5 实现tree拖拽到任意组建

    在Flex 4.5开发中,拖放(Drag & Drop)功能是一项常用且重要的交互设计技术,它允许用户通过鼠标操作将元素从一个位置移动到另一个位置,这在构建用户界面时大大提升了用户体验。本教程将详细介绍如何在Flex 4.5中...

    Flex中Tree组件的数据源举例(xml,array,object)

    在Flex开发中,Tree组件是一种常用的用户界面元素,用于展示层次结构的数据。它通常用于文件系统、组织结构或任何有层级关系的数据展示。本篇将详细介绍如何为Flex中的Tree组件设置不同的数据源,包括XML、Array和...

    Flex右键菜单 flex tree 右键菜单 源码

    在Flex中,右键菜单是用户交互的重要组成部分,特别是在数据可视化和树形结构的数据展示中,如Flex Tree组件。本文将深入探讨如何在Flex中实现右键菜单,并结合提供的源码进行分析。 1. Flex右键菜单: Flex中的...

Global site tag (gtag.js) - Google Analytics