Flex4之Tree开发

1.首先得明白一点，FLEX4的TREE接受的是XML类型的数据，所以无论以何种方式获得XML数据，TREE通过dataProvider=XMLDATA和labelField=@viewname都可以显示出来一棵树

第一种方式，读取本地或远程XML文件

XML文件的格式，大致如下

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="UTF-8"?>
<node label='所有分类'>
<node label='中国'value="http://www.baidu.com">
<nodelabel='河南'value="http://www.youdao.com">
<node label='信阳'/>
<node label='南阳'/>
</node>
<node label='河北'>
<nodelabel='保定'/>
<node label='衡水'/>
</node>
<nodelabel='湖南'>
<nodelabel='长沙'/>
<node label='湘潭'/>
</node>
<nodelabel='湖北'>
<nodelabel='武汉'/>
<nodelabel='仙桃'/>
</node>
</node>
</node>

<?xml version="1.0" encoding="UTF-8"?>
<node  label='所有分类'>
<node  label='中国' value="http://www.baidu.com">
<node label='河南' value="http://www.youdao.com" >
<node  label='信阳' />
<node  label='南阳'/>
</node>
<node  label='河北'>
<node label='保定'/>
<node  label='衡水'/>
</node>
<node label='湖南' >
<node label='长沙'/>
<node  label='湘潭'/>
</node>
<node label='湖北'>
<node label='武汉'/>
<node label='仙桃'/>
</node>
</node>
</node>

针对上面这个XML格式的文件，Flex4的TREE解析后显示的话会从第二个节点开始解析也即中国那个节点这种方式的代码我贴出来，大家看下

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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"
creationComplete="SrvTreeList.send();init()">
<fx:Style>
Tree {
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null);
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
var XMLTreeList:XML;
protected function treeService_resultHandler(event:ResultEvent):void
{
//先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
XMLTreeList=XML(SrvTreeList.lastResult.toString());
MusicTypeTree.dataProvider=XMLTreeList;
}
//这里我写了一个右键菜单
public function init():void{
var item: ContextMenuItem=new ContextMenuItem("添加");
var menu:ContextMenu=new ContextMenu();
menu.customItems.push(item);
MusicTypeTree.contextMenu=menu;
}
protected function tree1_clickHandler(event:MouseEvent):void
{
if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
{ //如果某节点中含有VALUE属性，那么就是先跳转页面
navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
} else
{
//没有那就展开，如果展开了就收缩
MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="SrvTreeList"url="data/tree.xml"result="treeService_resultHandler(event)"useProxy="false" resultFormat="xml"/>
</fx:Declarations>
<mx:Treex="20"y="10"click="tree1_clickHandler(event)"id="MusicTypeTree"
left="5"right="5"
showRoot="false"
labelField="@label"
bottom="5"top="40"
></mx:Tree>
</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"
			   creationComplete="SrvTreeList.send();init()">
	<fx:Style>
		Tree {
		folderClosedIcon: ClassReference(null);
		folderOpenIcon: ClassReference(null);
		}
	</fx:Style>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;

			var XMLTreeList:XML;
			protected function treeService_resultHandler(event:ResultEvent):void
			{   
				//先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
				XMLTreeList=XML(SrvTreeList.lastResult.toString()); 
				MusicTypeTree.dataProvider=XMLTreeList; 

			}
                        //这里我写了一个右键菜单		
                       public function init():void{
			
			 var item: ContextMenuItem=new ContextMenuItem("添加");
			 var menu:ContextMenu=new ContextMenu();
			 menu.customItems.push(item);
			 MusicTypeTree.contextMenu=menu;
			}



			protected function tree1_clickHandler(event:MouseEvent):void
			{
				if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
					
				{       //如果某节点中含有VALUE属性，那么就是先跳转页面
					navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value)); 
				} else
				{ 
					//没有那就展开，如果展开了就收缩
					MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
				} 
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:HTTPService  id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false"  resultFormat="xml" />
	</fx:Declarations>
	<!--@label这个非常重要，指定要显示的标题为XML重的label属性值。记住要显示树，httpService的send方法要在组件创建完成后被调用-->
	<mx:Tree x="20" y="10" click="tree1_clickHandler(event)" id="MusicTypeTree"
			 left="5" right="5" 
			 showRoot="false" 
			 labelField="@label"         
			 bottom="5" top="40"
			 
			 ></mx:Tree>
	
</s:Application>

第二种方式:将XML内容写到<fx:mxl>标签里面这种方式我们来看看

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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"
creationComplete="init()">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ICollectionView;
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}
private function tree_labelFunc(item:XML):String {
var children:ICollectionView;
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
children = tree.dataDescriptor.getChildren(item);
suffix = " (" + children.length + ")";
}
return item[tree.labelField] + suffix;
}
]]>
</fx:Script>
<fx:Declarations>
<fx:XMLid="dp">
<root>
<folderlabel="One">
<folderlabel="One.A">
<itemlabel="One.A.1"/>
<itemlabel="One.A.2"/>
<itemlabel="One.A.3"/>
<itemlabel="One.A.4"/>
<itemlabel="One.A.5"/>
</folder>
<itemlabel="One.1"/>
<itemlabel="One.2"/>
</folder>
<folderlabel="Two">
<itemlabel="Two.1"/>
<folderlabel="Two.A">
<itemlabel="Two.A.1"/>
<itemlabel="Two.A.2"/>
</folder>
</folder>
</root>
</fx:XML>
</fx:Declarations>
<mx:Treeid="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
labelFunction="tree_labelFunc"
width="742"
rowCount="6"
itemClick="tree_itemClick(event);" x="14"y="12"height="359"/>
</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"
			   creationComplete="init()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
<fx:Script>
	<![CDATA[
		import mx.collections.ICollectionView;
		import mx.events.ListEvent;
		private function tree_itemClick(evt:ListEvent):void {
			var item:Object = Tree(evt.currentTarget).selectedItem;
			if (tree.dataDescriptor.isBranch(item)) {
				tree.expandItem(item, !tree.isItemOpen(item), true);
			}
		}
		private function tree_labelFunc(item:XML):String {
			var children:ICollectionView;
			var suffix:String = "";
			if (tree.dataDescriptor.isBranch(item)) {
				children = tree.dataDescriptor.getChildren(item);
				suffix = " (" + children.length + ")";
			}
			return item[tree.labelField] + suffix;
		}
		
		
	]]>
</fx:Script>
	<fx:Declarations>
		

	<fx:XML id="dp">
		<root>
			<folder label="One">
				<folder label="One.A">
					<item label="One.A.1" />
					<item label="One.A.2" />
					<item label="One.A.3" />
					<item label="One.A.4" />
					<item label="One.A.5" />
				</folder>
				<item label="One.1" />
				<item label="One.2" />
			</folder>
			<folder label="Two">
				<item label="Two.1" />
				<folder label="Two.A">
					<item label="Two.A.1" />
					<item label="Two.A.2" />
				</folder>
			</folder>
		</root>
	</fx:XML>
	</fx:Declarations>
	<mx:Tree id="tree"
			 dataProvider="{dp}"
			 showRoot="false"
			 labelField="@label"
			 labelFunction="tree_labelFunc"
			 width="742"
			 rowCount="6"
			 itemClick="tree_itemClick(event);"  x="14" y="12" height="359"/>
	
</s:Application>

itemClick方法可以和labelFuntion可以不写，正常的话不写方法就能显示TREE的树形结构了

第三：再看一个例子

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:XMLListid="treeData">
<nodelabel="Mail Box">
<nodelabel="Inbox">
<nodelabel="Marketing"/>
<nodelabel="Product Management"/>
<nodelabel="Personal"/>
</node>
<nodelabel="Outbox">
<nodelabel="Professional"/>
<nodelabel="Personal"/>
</node>
<nodelabel="Spam"/>
<nodelabel="Sent"/>
</node>
</fx:XMLList>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var selectedNode:XML;
// Event handler for the Tree control change event.
public function treeChanged(event:Event):void {
selectedNode=Tree(event.target).selectedItem as XML;
}
]]>
</fx:Script>
<mx:Paneltitle="Tree Control Example"height="75%"width="75%"
paddingTop="10"paddingLeft="10"paddingRight="10"paddingBottom="10">
<mx:Labelwidth="100%"color="blue"
text="Select a node in the Tree control."/>
<mx:HDividedBoxwidth="100%"height="100%">
<mx:Treeid="myTree"width="50%"height="100%"labelField="@label"
showRoot="false"dataProvider="{treeData}"change="treeChanged(event)"/>
<mx:TextAreaheight="100%"width="50%"
text="Selected Item: {selectedNode.@label}"/>
</mx:HDividedBox>
</mx:Panel>
</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="Inbox">  
					<node label="Marketing"/>  
					<node label="Product Management"/>  
					<node label="Personal"/>  
				</node>  
				<node label="Outbox">  
					<node label="Professional"/>  
					<node label="Personal"/>  
				</node>  
				<node label="Spam"/>  
				<node label="Sent"/>  
			</node>     
		</fx:XMLList>  
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable] 
			public var selectedNode:XML; 
			
			// Event handler for the Tree control change event. 
			public function treeChanged(event:Event):void { 
				selectedNode=Tree(event.target).selectedItem as XML; 
			} 
		]]>
	</fx:Script>
	<mx:Panel title="Tree Control Example" height="75%" width="75%"   
			  paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">  
		
		<mx:Label width="100%" color="blue"   
				  text="Select a node in the Tree control."/>  
		
		<mx:HDividedBox width="100%" height="100%">  
			<mx:Tree id="myTree" width="50%" height="100%" labelField="@label"  
					 showRoot="false" dataProvider="{treeData}" change="treeChanged(event)"/>  
			<mx:TextArea height="100%" width="50%"  
						 text="Selected Item: {selectedNode.@label}"/>  
		</mx:HDividedBox>  
		
	</mx:Panel>  
</s:Application>

第四，到目前为止，应该可以看出来了XML的显示格式了，如果获取XML文件那么结果要转换成为 var xmlList:XML=XML(event.result.toString()); mytree.dataProvider=xmlList; 要么就是<mx:Tree dataProvider="{xmlList}" > 那么就是 <fx:xml id="xmlid"></fx:xml> <mx:Tree dataProvider="{xmlid}">

这么多的方式都可以把数据填充到TREE中去

第五：来一个增删拖拽展开，收缩的示例，这里先不涉及到后台，下一篇文章会讲到TREE与JAVA后台数据库的交互操作

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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"
creationComplete="SrvTreeList.send();init()">
<fx:Style>
Tree {
folderClosedIcon: ClassReference(null);
folderOpenIcon: ClassReference(null);
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.rpc.events.ResultEvent;
var XMLTreeList:XML;
protected function treeService_resultHandler(event:ResultEvent):void
{
//先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
XMLTreeList=XML(SrvTreeList.lastResult.toString());
MusicTypeTree.dataProvider=XMLTreeList;
}
public function init():void{
var item: ContextMenuItem=new ContextMenuItem("添加");
var menu:ContextMenu=new ContextMenu();
menu.customItems.push(item);
MusicTypeTree.contextMenu=menu;
}
protected function tree1_clickHandler(event:MouseEvent):void
{
if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
{
var u:URLRequest=new URLRequest(MusicTypeTree.selectedItem.@value);
//navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value));
navigateToURL(u);
} else
{
//没有那就展开，如果展开了就收缩
MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
}
}
//添加兄弟节点
protected function addBefore():void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
var text:String=nextName.text;
if(xml!=null && text.length>0) {
var parent:XML=xml.parent();
if(parent!=null) {
var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
child.@foddersortName=text;
parent.insertChildBefore(xml,child);
} else {
Alert.show("不能选中根节点");
}
} else {
Alert.show("需要先选中节点和填入文字");
}
}
protected function addAfter():void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
var text:String=nextName.text;
if(xml!=null && text.length>0) {
var parent:XML=xml.parent();
if(parent!=null) {
var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
child.@foddersortName=text;
parent.insertChildAfter(xml,child);
} else {
Alert.show("不能选中根节点");
}
} else {
Alert.show("需要先选中节点和填入文字");
}
}
protected function addSon():void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
var text:String=nextName.text;
if(xml!=null && text.length>0) {
var parent:XML=xml.parent();
var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\" parentid=\"\" />");
child.@foddersortName=text;
xml.appendChild(child);
MusicTypeTree.expandChildrenOf(xml,true);
} else {
Alert.show("需要先选中节点和填入文字");
}
}
protected function editNode():void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
var text:String=nextName.text;
if(xml!=null && text.length>0) {
xml.@foddersortName=text;
} else {
Alert.show("需要先选中节点和填入文字");
}
}
protected function deleteNode():void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
if(xml!=null) {
var list:Array=MusicTypeTree.selectedItems as Array;
for(var k:int=0;k<list.length;k++) {
xml=list[k] as XML;
var parent:XML=xml.parent();
if(parent!=null) {
var children:XMLList=parent.children();
for(var i:int=0;i<children.length();i++) {
if(children[i]==xml) {
delete children[i];
break;
}
}
} else {
Alert.show("不能选中根节点");
}
}
} else {
Alert.show("需要先选中节点");
}
}
protected function selectNode():void
{
var text:String=nextName.text;
if(text.length>0) {
var items:Array=[];
var list:XMLList=new XMLList();
list[0]=MusicTypeTree.dataProvider[0];
searchItems(list,text,items);
MusicTypeTree.selectedItems=items;
} else {
Alert.show("输入查找的文字");
}
}
private function searchItems(list:XMLList,find:String,items:Array):void {
for(var i:int=0;i<list.length();i++) {
var one:XML=list[i];
var label:String=one.@foddersortName;
if(label!=null && label.indexOf(find)>=0) {
items.push(one);
}
searchItems(one.children(),find,items);
}
}
protected function closeAll():void{
MusicTypeTree.openItems=[];
}
protected function openAll():void{
MusicTypeTree.expandChildrenOf(MusicTypeTree.selectedItem,true);
}
protected function MusicTypeTree_dragEnterHandler(event:DragEvent):void
{
Alert.show(event.target.@foddersortName);
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
protected function MusicTypeTree_dragOverHandler(event:DragEvent):void
{
// r is the visible index in the tree
var dropTarget:Tree = Tree(event.currentTarget);
var r:int = dropTarget.calculateDropIndex(event);
MusicTypeTree.selectedIndex = r;
// retrieving the newly selected node, you can examine it and decide to tell
// the user the drop is invalid by changing the feedback.
var node:XML = MusicTypeTree.selectedItem as XML;
if( node.@foddersortName == "中国" ) {
DragManager.showFeedback(DragManager.NONE);
return;
}
// the type of drop - copy, link, or move can be reflected in the feedback as well.
// Here the control and shift keys determine that action.
if (event.ctrlKey)
DragManager.showFeedback(DragManager.COPY);
else if (event.shiftKey)
DragManager.showFeedback(DragManager.LINK);
else {
DragManager.showFeedback(DragManager.MOVE);
}
}
protected function MusicTypeTree_dragDropHandler(event:DragEvent):void
{
var xml:XML=MusicTypeTree.selectedItem as XML;
Alert.show(xml.@foddersortName);
// var ds:DragSource = event.dragSource;
// var dropTarget:Tree = Tree(event.currentTarget);
// // retrieve the data associated with the "items" format. This will be the data that
// // the dragInitiator has copied into the DragSource.
// var items:Array = ds.dataForFormat("items") as Array;
// // determine where in the tree the drop occurs and select that node by the index; followed by
// // retrieving the node itself.
// var r:int = MusicTypeTree.calculateDropIndex(event);
// MusicTypeTree.selectedIndex = r;
// var node:XML = MusicTypeTree.selectedItem as XML;
// var p:*;
// // if the selected node has children (it is type==city),
// // then add the items at the beginning
// if( MusicTypeTree.dataDescriptor.hasChildren(node) ) {
// p = node;
// r = 0;
// } else {
// p = node.parent();
// }
// // 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.@foddersortName= items[i];
// //insert.@type = "restaurant";
// MusicTypeTree.dataDescriptor.addChildAt(p, insert, r+i);
// }
}
protected function MusicTypeTree_dragCompleteHandler(event:DragEvent):void
{
MusicTypeTree.selectedIndex = -1;
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="SrvTreeList"url="data/tree.xml"result="treeService_resultHandler(event)"useProxy="false" resultFormat="xml"/>
</fx:Declarations>
<mx:Treeclick="tree1_clickHandler(event)"id="MusicTypeTree"
left="5"right="845"
showRoot="false"
labelField="@foddersortName"
bottom="243"top="40"
dragEnabled="true"
dropEnabled="true"
allowMultipleSelection="true"
allowDragSelection="true"
dragDrop="MusicTypeTree_dragDropHandler(event)"
dragEnter="MusicTypeTree_dragEnterHandler(event)"
></mx:Tree>
<s:TextInputid="nextName"x="432"y="40"/>
<s:Buttonx="443"y="82"label="增加为哥"click="addBefore()"/>
<s:Buttonx="443"y="111"label="增加为弟"click="addAfter()"/>
<s:Buttonx="444"y="144"click="addSon()"label="增加为孩子"/>
<s:Buttonx="444"y="178"click="editNode()"label="修改节点"/>
<s:Buttonx="444"y="211"click="deleteNode()"label="删除节点"/>
<s:Buttonx="443"y="244"click="selectNode()"label="选择节点"/>
<s:Buttonx="443"y="277"click="closeAll()"label="全部收缩"/>
<s:Buttonx="443"y="306"click="openAll()"label="全部展开"/>
</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"
			   creationComplete="SrvTreeList.send();init()">
	<fx:Style>
		Tree {
		folderClosedIcon: ClassReference(null);
		folderOpenIcon: ClassReference(null);
		}
	</fx:Style>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.core.DragSource;
			import mx.core.UIComponent;
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.rpc.events.ResultEvent;

			var XMLTreeList:XML;
			protected function treeService_resultHandler(event:ResultEvent):void
			{   
				//先把数据取出来交给XML,再交给dataProvider，因为dataProvider不能直接解析String为XML
				XMLTreeList=XML(SrvTreeList.lastResult.toString()); 
				MusicTypeTree.dataProvider=XMLTreeList; 

			}

			public function init():void{
			
			 var item: ContextMenuItem=new ContextMenuItem("添加");
			 var menu:ContextMenu=new ContextMenu();
			 menu.customItems.push(item);
			 MusicTypeTree.contextMenu=menu;
			}



			protected function tree1_clickHandler(event:MouseEvent):void
			{
				if(MusicTypeTree.selectedItem.hasOwnProperty("@value" ))
				{ 
					
					var u:URLRequest=new URLRequest(MusicTypeTree.selectedItem.@value);
					//navigateToURL(new URLRequest(MusicTypeTree.selectedItem.@value)); 
					navigateToURL(u);
				} else
				{ 
					//没有那就展开，如果展开了就收缩
					MusicTypeTree.expandItem(MusicTypeTree.selectedItem,!MusicTypeTree.isItemOpen(MusicTypeTree.selectedItem),true);
				} 
			}

            //添加兄弟节点
			protected function addBefore():void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				var text:String=nextName.text;
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent();
					if(parent!=null) {
						var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\"  parentid=\"\" />");
						child.@foddersortName=text;
						parent.insertChildBefore(xml,child);
					} else {
						Alert.show("不能选中根节点");
					}
				} else {
					Alert.show("需要先选中节点和填入文字");
				}
			}
			
			protected function addAfter():void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				var text:String=nextName.text;
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent();
					if(parent!=null) {
						var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\"  parentid=\"\" />");
						child.@foddersortName=text;
						parent.insertChildAfter(xml,child);
					} else {
						Alert.show("不能选中根节点");
					}
				} else {
					Alert.show("需要先选中节点和填入文字");
				}
			}
			
			protected function addSon():void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				var text:String=nextName.text;
				if(xml!=null && text.length>0) {
					var parent:XML=xml.parent();
					var child:XML=new XML("<node foddersortName=\"\" foddersortId=\"\"  parentid=\"\" />");
					child.@foddersortName=text;
					xml.appendChild(child);
					MusicTypeTree.expandChildrenOf(xml,true);
				} else {
					Alert.show("需要先选中节点和填入文字");
				}			
			}
			protected function editNode():void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				var text:String=nextName.text;
				if(xml!=null && text.length>0) {
					xml.@foddersortName=text;
				} else {
					Alert.show("需要先选中节点和填入文字");
				}			
			}
			protected function deleteNode():void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				if(xml!=null) {
					var list:Array=MusicTypeTree.selectedItems as Array;
					for(var k:int=0;k<list.length;k++) {
						xml=list[k] as XML;
						var parent:XML=xml.parent();
						if(parent!=null) {
							var children:XMLList=parent.children();
							for(var i:int=0;i<children.length();i++) {
								if(children[i]==xml) {
									delete children[i];
									break;
								}
							}
						} else {
							Alert.show("不能选中根节点");
						}
					}
				} else {
					Alert.show("需要先选中节点");
				}			
			}
			protected function selectNode():void
			{
				var text:String=nextName.text;
				if(text.length>0) {
					var items:Array=[];
					var list:XMLList=new XMLList();
					list[0]=MusicTypeTree.dataProvider[0];				
					searchItems(list,text,items);
					MusicTypeTree.selectedItems=items;
				} else {
					Alert.show("输入查找的文字");
				}
			}
			private function searchItems(list:XMLList,find:String,items:Array):void {
				for(var i:int=0;i<list.length();i++) {
					var one:XML=list[i];
					var label:String=one.@foddersortName;
					if(label!=null && label.indexOf(find)>=0) {
						items.push(one);
					}
					searchItems(one.children(),find,items);
				}
			}
			
			
			
			protected function closeAll():void{
				MusicTypeTree.openItems=[];
			
			}
			
			protected function openAll():void{
			
				
				MusicTypeTree.expandChildrenOf(MusicTypeTree.selectedItem,true);
			}


			protected function MusicTypeTree_dragEnterHandler(event:DragEvent):void
			{
				Alert.show(event.target.@foddersortName);
				DragManager.acceptDragDrop(UIComponent(event.currentTarget));
			}


			protected function MusicTypeTree_dragOverHandler(event:DragEvent):void
			{
				
				// r is the visible index in the tree 
				var dropTarget:Tree = Tree(event.currentTarget);
			
				var r:int = dropTarget.calculateDropIndex(event);
				MusicTypeTree.selectedIndex = r;
			
				// retrieving the newly selected node, you can examine it and decide to tell 
				// the user the drop is invalid by changing the feedback.
				var node:XML = MusicTypeTree.selectedItem as XML;
				if( node.@foddersortName == "中国" ) {
					DragManager.showFeedback(DragManager.NONE);
					return;
				}
				// the type of drop - copy, link, or move can be reflected in the feedback as well. 
				// Here the control and shift keys determine that action. 
				if (event.ctrlKey)
					DragManager.showFeedback(DragManager.COPY);
				else if (event.shiftKey)
					DragManager.showFeedback(DragManager.LINK);
				else {
					DragManager.showFeedback(DragManager.MOVE);
				}

			}


			protected function MusicTypeTree_dragDropHandler(event:DragEvent):void
			{
				var xml:XML=MusicTypeTree.selectedItem as XML;
				Alert.show(xml.@foddersortName);
//				var ds:DragSource = event.dragSource;
//				var dropTarget:Tree = Tree(event.currentTarget);
//				// retrieve the data associated with the "items" format. This will be the data that
//				// the dragInitiator has copied into the DragSource.
//				var items:Array = ds.dataForFormat("items") as Array;
//				// determine where in the tree the drop occurs and select that node by the index; followed by 
//				// retrieving the node itself. 
//				var r:int = MusicTypeTree.calculateDropIndex(event);
//				MusicTypeTree.selectedIndex = r;
//				var node:XML = MusicTypeTree.selectedItem as XML;
//				var p:*;
//				// if the selected node has children (it is type==city),
//				// then add the items at the beginning
//				if( MusicTypeTree.dataDescriptor.hasChildren(node) ) {
//					p = node;
//					r = 0;
//				} else {
//					p = node.parent();
//				}
//				// 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.@foddersortName= items[i];
//					//insert.@type = "restaurant";
//					MusicTypeTree.dataDescriptor.addChildAt(p, insert, r+i);
//				}
			}


			protected function MusicTypeTree_dragCompleteHandler(event:DragEvent):void
			{
				MusicTypeTree.selectedIndex = -1;

			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:HTTPService  id="SrvTreeList" url="data/tree.xml" result="treeService_resultHandler(event)" useProxy="false"  resultFormat="xml" />
	</fx:Declarations>
	<!--@label这个非常重要，指定要显示的标题为XML重的label属性值。记住要显示树，httpService的send方法要在组件创建完成后被调用-->
	<mx:Tree click="tree1_clickHandler(event)" id="MusicTypeTree"
			 left="5" right="845" 
			 showRoot="false" 
			 labelField="@foddersortName"         
			 bottom="243" top="40"
			 dragEnabled="true"
			 dropEnabled="true"
			 allowMultipleSelection="true"
			 allowDragSelection="true"
			 dragDrop="MusicTypeTree_dragDropHandler(event)"
		     dragEnter="MusicTypeTree_dragEnterHandler(event)"
			 ></mx:Tree>
	<s:TextInput id="nextName" x="432" y="40"/>
	<s:Button x="443" y="82" label="增加为哥" click="addBefore()"/>
	<s:Button x="443" y="111" label="增加为弟" click="addAfter()"/>
	<s:Button x="444" y="144" click="addSon()" label="增加为孩子"/>
	<s:Button x="444" y="178" click="editNode()" label="修改节点"/>
	<s:Button x="444" y="211" click="deleteNode()" label="删除节点"/>
	<s:Button x="443" y="244" click="selectNode()" label="选择节点"/>
	<s:Button x="443" y="277" click="closeAll()" label="全部收缩"/>
	<s:Button x="443" y="306" click="openAll()" label="全部展开"/>
	
</s:Application>

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

第一：从Tree到List

示例一

Xml代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:XMLid="myData">
<data>
<itemlabel="ActionScript">
<itemlabel="Flash"/>
<itemlabel="Flex"/>
</item>
<itemlabel="Mirage">
</item>
<itemlabel="JavaScript"/>
</data>
</fx:XML>
<fx:XMLid="copyData">
<data>
<itemlabel="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:Labeltext="Label"id="lbl"x="439"y="120"/>
<mx:TreedropEnabled="true"dragEnabled="true"allowMultipleSelection="true"id="sourceTree"
dataProvider="{myData.item}"labelField="@label"x="114"y="146"/>
<mx:TreedropEnabled="true"id="tree2"dataProvider="{copyData.item}"labelField="@label"
dragOver="onDragOver(event)"dragDrop="onDragDrop(event)"dragComplete="onDragComplete(event)"x="382"y="146"/>
<mx:Labelx="382"y="94"text="Label"width="274"id="lbl2"height="29"/>
<mx:Labelx="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: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代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:XMLListid="treeData">
<nodelabel="Mail Box">
<nodelabel="工区1">
<nodelabel="工地1">
<nodelabel="班组1.1"data="111"/>
<nodelabel="班组1.2"/>
</node>
<nodelabel="工地2">
<nodelabel="班组2.1"/>
<nodelabel="班组2.2"/>
</node>
<nodelabel="工地3">
<nodelabel="班组3.1"/>
<nodelabel="班组3.2"/>
</node>
</node>
<nodelabel="工区2">
<nodelabel="Professional"/>
<nodelabel="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:Treeid="myTree"labelField="@label"dragEnabled="true"mouseDown="dragSource(event,'stringFormat')"
showRoot="true"dataProvider="{treeData}" height="331"horizontalCenter="-120"verticalCenter="7"width="190"/>
<mx:Listheight="331"labelField="@label"dragEnter="doDragEnter(event,'stringFormat')"
dataProvider="{list}"dragDrop="onDragDrop(event,'stringFormat')"width="162"id="mylist"horizontalCenter="114"verticalCenter="7"></mx:List>
<mx:Labelx="282.5"y="97"text="Tree与list的拖动"width="152"/>
</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代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:XMLid="treeData"xmlns="">
<root>
<nodelabel="Massachusetts"type="state"data="MA">
<nodelabel="Boston"type="city">
<nodelabel="Smoke House Grill"type="restaurant"/>
<nodelabel="Equator"type="restaurant"/>
<nodelabel="Aquataine"type="restaurant"/>
<nodelabel="Grill 23"type="restaurant"/>
</node>
<nodelabel="Provincetown"type="city">
<nodelabel="Lobster Pot"type="restaurant"/>
<nodelabel="The Mews"type="restaurant"/>
</node>
</node>
<nodelabel="California"type="state"data="CA">
<nodelabel="San Francisco"type="city">
<nodelabel="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:Labelx="34"y="40"text="Drag items from this Tree"/>
<mx:Labelx="34"y="55"text="(items are copied)"/>
<mx:Treex="34"y="81"width="181"height="189"
dataProvider="{treeData.node}"
labelField="@label"
dropEnabled="false"
dragEnabled="true"
dragComplete="onTreeDragComplete(event)"
dragMoveEnabled="false"
/>
<mx:Labelx="291"y="55"text="Drop items from Tree here"/>
<mx:DataGridx="291"y="81"height="189"
dragEnabled="true"
dataProvider="{dataGridProvider}"
dragEnter="onDragEnter(event)"
dragOver="onDragOver(event)"
dragDrop="onGridDragDrop(event)"
dragExit="onDragExit(event)">
<mx:columns>
<mx:DataGridColumnheaderText="Label"dataField="label"/>
<mx:DataGridColumnheaderText="Type"dataField="type"/>
</mx:columns>
</mx:DataGrid>
</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">
	<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代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:XMLid="treeData"xmlns="">
<root>
<nodelabel="Massachusetts"type="state"data="MA">
<nodelabel="Boston"type="city">
<nodelabel="Smoke House Grill"type="restaurant"/>
<nodelabel="Equator"type="restaurant"/>
<nodelabel="Aquataine"type="restaurant"/>
<nodelabel="Grill 23"type="restaurant"/>
</node>
<nodelabel="Provincetown"type="city">
<nodelabel="Lobster Pot"type="restaurant"/>
<nodelabel="The Mews"type="restaurant"/>
</node>
</node>
<nodelabel="California"type="state"data="CA">
<nodelabel="San Francisco"type="city">
<nodelabel="Frog Lane"type="restaurant"/>
</node>
</node>
</root>
</fx:XML>
<fx:Arrayid="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:Panelx="48"y="125"width="447"height="351"layout="absolute"title="Drag onto Tree">
<mx:Treewidth="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:Listwidth="188"height="206"right="10"bottom="10"id="list"
allowMultipleSelection="true"
dataProvider="{listData}"
dragEnabled="true"
dragMoveEnabled="true"
dragComplete="onDragComplete(event)">
</mx:List>
<mx:Textx="229"y="10"text="Drag from the list below to the tree"width="188"height="39"/>
<mx:Labelx="229"y="69"text="restaurants"/>
</mx:Panel>
</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">
	<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代码

<spanstyle="font-size: medium;"><?xmlversion="1.0"encoding="utf-8"?>
<s:Applicationxmlns: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:VBoxwidth="100%"height="100%">
<mx:CanvasbackgroundColor="#f3d7ab"borderColor="#000000"borderStyle="outset"width="100%"x="10"height="50%"y="10"horizontalScrollPolicy="off"verticalScrollPolicy="off">
<mx:HBoxwidth="100%"height="100%">
<com:SpringLoadedTreeid="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:SpringLoadedTreeid="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:DataGriddataProvider="{gridDP}"id="grid1"
dragEnabled="true"
dragMoveEnabled="true"height="100%">
</mx:DataGrid>
<mx:Texttext="{description}"id="Directions"enabled="true"height="100%"width="30%"/>
</mx:HBox>
</mx:Canvas>
<mx:HBoxwidth="100%"height="50%">
<mx:TextAreax="10"y="368"width="50%"height="100%"id="tattler"/>
<mx:Canvaswidth="50%"height="100%"y="446"x="470">
<mx:CheckBoxid="autoCloseOnDrop"selected="true"label="Return to original state on drop"left="10"right="10"bottom="96"/>
<mx:HSlidervalue="1000"tickInterval="200"snapInterval="200"maximum="2000"allowTrackClick="true"minimum="200"id="DelayOpen"left="255"bottom="174"width="190"/>
<mx:Labeltext="Folder auto open delay ms:{DelayOpen.value}"left="10"bottom="174"textAlign="left"width="248"/>
<mx:CheckBoxid="showOpenIdication"selected="true"label="Show opening indication"left="10"right="10"bottom="122"/>
<mx:HSlidervalue="200"tickInterval="100"snapInterval="100"maximum="1000"allowTrackClick="true"minimum="100"id="DelayClose"bottom="200"width="190"left="255"/>
<mx:Labeltext="Folder auto close delay ms:{DelayClose.value}"left="10"bottom="200"textAlign="left"width="248"/>
<mx:CheckBoxid="autoCloseOpenNodes"selected="true"label="Auto open/close folders on drag over/out"left="10"right="10"bottom="148"/>
<mx:CheckBoxid="autoCloseOnExit"selected="true"label="Auto close folders on tree exit"left="10"right="10"bottom="70"/>
</mx:Canvas>
</mx:HBox>
</mx:VBox>
</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" 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>

你可能感兴趣的:(flex4)

BFC块级格式化上下文湘兰沅芷
怎样触发BFC？1.浮动元素:float:除none以外的值2.绝对定位元素：position（absolute，fixed）3.display为inline-blocktable-cellsflex4.overflow除visible以外的值（hidden，auto，scroll）遇到哪些问题需要用到BFCDIV左右外边距并没有重叠但是上外边距和父级重叠在了一起，这时候就要触发BFC来解决这个问
使用Flex 4、Django、Python和PyAMF进行开发王肇朋 Django
使用Flex4、Django、Python和PyAMF进行开发合作伙伴:Adobe目录安装Django安装PyAMF创建Django项目开发Flex4应用程序配置PyAMF项目使用NetworkMonitor运行应用程序未来步骤要求预备知识熟悉Flex、FlashBuilder和ActionScript3.0，对UNIX命令行命令和开源数据库有基本的了解用户水平中级需要的产品FlashBuilde
php字符串拷贝,PHP字符串还原原宗有 php字符串拷贝
flex4日期类型字符串转日期类型(string转Date)(转)mysql数据库中存储的日期类型通过PHP返回到flex端为字符串类型，这样在flex中进行处理时就必须要将字符串转化为Date类型。如果仅仅是"年/月/日"的组合，而没有涉及到”时/分/秒“那么直接使用DateField的静态方法stringToDate()就可以实现，方法如下：...文章杰克.陈2013-09-25803浏览量P
三栏布局实现方式 mini韦 vue css 教程 html 前端
1、浮动+margin2、浮动+bfc3、flex4、table5、定位6圣杯布局7、双飞翼布局截图来自最简单最全面的三栏布局_哔哩哔哩_bilibili
北风课堂:超过300 门免费IT 课程 ambition_forever 语言基础
全部免费！！！！（请复制地址浏览器打开）大家抓紧上去看看吧:http://edu.ibeifeng.com/实战：Flex4.X实战在线书店项目初步构建http://edu.ibeifeng.com/view-index-id-134.html深入学习ExtJs4.1的布局及常用控件http://edu.ibeifeng.com/view-index-id-129.html专题-深入JavaOOP
CSS多栏布局-两栏布局和三栏布局富朝阳 CSS css 前端面试 html
目录一、两栏布局左列定宽，右列自适应1.利用浮动，margin实现2.浮动+BFC3.定位4.flex5.table布局二、三栏布局左右两列定宽，中间自适应1.浮动+margin2.浮动+BFC3.flex4.table布局5.定位相信大家在面试的时候也会经常碰到两栏、三栏布局，一下列出来几种方式以供大家参考，废话不多说，直接上干货，如有不足之处，请大家补充。一、两栏布局左列定宽，右列自适应1.利
SuperMap iServer常见问题解答集锦（二） supermapsupport 云GIS supermap iServer GIS 常见问题
作者：朝阳问:什么原因造成使用Flex4.5SDK开发Flex工程中文名称的地图出不来？答:目前不建议使用SDK4.5，建议换为SDK4.0，如果要使用SDK4.5的话，建议将地图名修改为英文。问:初始化地图时如何放大到某一比例尺下答:可以在map控件的load()方法中调用map对象的zoomToLevel()或zoomToScale()方法。问:初始化地图时如何自定义地图的范围？答:自定义地图
CSS FLEX 弹性布局详解 Fetters04 css css3 html
文章目录一、基本概念二、flex布局属性1）容器属性1.flex-direction2.flex-wrap3.flex-flow4.justify-content5.align-items6.align-content2）项目属性1.order2.align-self3.flex4.flex-grow5.flex-shrink6.flex-basis一、基本概念 Flex是FlexibleBox
1. 实现左中右三栏布局，左右固定宽度，中间自适应（五种方式）（清除浮动） C.&H. 前端面试题目
五种方法：1.浮动float2.定位position3.弹性盒子布局flex4.表格布局table5.网格布局grid方法1：浮动--float（1）浮动原理：当一个元素浮动之后，就会移出正常的文档流（内联元素与p标签会识别float为正常文档流。），向左或向右平移，直到碰到了所处容器的边缘，或者碰到另外一个浮动的元素。一旦让div浮动起来，其父元素立刻会像inline一样产生包裹性（包裹性就是父
CSS多栏布局-两栏布局和三栏布局七里香777 笔记 css css3 前端
目录前言------两栏布局一、左列定宽，右列自适应1.浮动+margin2.浮动+BFC3.定位4.flex5.浮动+负外边距6.table布局二、左列不定宽，右列自适应1.flex2.浮动+BFC------三栏布局左右两列定宽，中间自适应1.浮动+margin2.浮动+BFC3.flex4.table5.定位6.圣杯布局7.双飞翼布局写在后面前言在牛客上看面经时，发现有很多关于CSS布局的问
一文看完，PowerFlex 4.0更新都在这里原创资讯网络运维服务器
软件定义基础架构数据中心整合和现代化DellPowerFlex再进化!DellPowerFlex是一个无界限的软件定义基础架构,可最大限度提高IT生态系统的灵活性,并加速客户IT基础架构现代化和整合计划,确保工作负载的出色执行并提供广泛的自动化提高业务敏捷性。我们很高兴为您介绍DellPowerFlex4.0带来的最新更新。这个2022年8月的软件版本扩展了PowerFlex的整合用例,其功能包括
FLEX4 设置全局样式的方法 MayMatrix Flex FLEX4 设置全局样式
参考：①UsingtheFlex4StyleManager:GettingStyleDeclarationsDecember6Asyoumayknow,inFlex4younolongercalltheStyleManagerclassasasingleton(StyleManager.getStyleManager()).Instead,StyleManagerimplementsIStyleM
BFC 天骄卓别
块级格式化上下文(BlockFromattingContext)一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visible
Flex布局 qq_41916882 毕业设计 flex
Flex布局Flex布局是什么基本概念容器属性3.1flex-direction属性3.2flex-wrap属性3.3flex-flow3.4justify-content属性3.5align-items3.6align-content项目的属性4.1order4.2flex-grow4.3flex-shrink4.4flex-basis4.5flex4.6align-selfFlex布局是什么F
前端面试知识点（五）--- BFC的创建和作用养只狗前端面试题汇总 css css3 前端
如何创建BFC1、float的值不是none。2、position的值不是static或者relative。3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex4、overflow的值不是visibleBFC的作用利用BFC避免margin重叠。一起来看一个例子：*{margin:0;padding:0;}p{col
Flex头部中的fx、mx和s命名空间 fatofa Flex
Flex4带给我们的，是全新的命名空间。了解这些命名空间必定是一件好事情。Flex4有三个非常重要的命名空间，分别是：•xmlns:fx=”http://ns.adobe.com/mxml/2009″•xmlns:mx=”library://ns.adobe.com/flex/halo”•xmlns:s=”library://ns.adobe.com/flex/spark”1、xmlns:fx=”
去掉Flex4生成的SWF加载时的进度条 lu_cy
方法1：xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"usePreloader="false">方法二:重写Preload的进度条类packagecom.haso.flex4SH.component{importflash.display.Sprite;importflash.
Resizable TitleWindow in Flex 4 snail8384 Flex Flex
ResizableTitleWindowinFlex4package{importflash.display.DisplayObject;importflash.events.Event;importflash.events.MouseEvent;importflash.geom.Point;importmx.core.UIComponent;importmx.events.SandboxMous
Flex SDK bin命令解析–mxmlc参数列表 xuexi888 收藏 Flex AIR Linux Windows Unix
以最新的开发包flex4_sdk为例吧mxmlc[linux,Mac,Unix],mxmlc.exe[Windows]//flex最主要的命令，用于编译主项目和组件类amxmlc[Mac,Linux,Unix],amxmlc.bat[Windows]//acompc调用compc来编译Air库和组件类fdb[linux,Mac],fdb.exe[Windows]//Flash或Air运行时调试工具
flex4 RemoteObject 的用法详解 NM_IT flex
访问远程Java对象为了实现对远程Java对象的访问，在服务器端，需要完成如下几个步骤：1.创建LiveCycleDataServiceWeb应用；2.实现POJOJava类；3.在LiveCycleDataServiceWeb应用中部署POJOJava类；4.配置remote-config.xml文件，声明desination节点，指向POJOJava类。在客户端应用中，需要实现：1.实例化Re
flex4.6开发移动stage3d应用（一）：环境搭建 sshong
两年没有写过博文了，这几日突然有写博客的冲动。可惜自己的网站域名都失效了，在个人网站恢复开通之前，先在csdn安家，写些技术博客吧。随着air3.2的发布，已经可以在手机端（android、ios）上利用air开发stage3d相关的应用了。这里写一下开发环境搭建方法：1、安装flex4.6，这个不用说了2、由于4.6自动的airsdk还是3.1，需要到adobe官网下air的最新sdk（3.2）
Flex4 主程序调用模块方法报TypeError: Error #1009:无法访问空对象引用的属性或方法布丰问题汇总（Questions）
flex做导航菜单，页面用模块，由于在主应用需要调用某个模块下的方法：(moduleLoader.childas模块名).方法();当在这个模块下没有组件的时候，没问题，可以调用成功，并且加这个flex3的这个组件也没问题但是试了下随便加几个别的组件就报错：TypeError:Error#1009:无法访问空对象引用的属性或方法。atmx.core::UIComponent/getStyle()[
Flex之旅--项呈示器ItemRenderer sjepy 新的征程 Flex开发
本文只讨论DataGrid的项呈示器，其他的没有细看，应该是类似的，可能只是实现的接口不同而已，以后用到这部分内容的话再补充进来。每次前面都说这么些废话，只是为了说明文章内容的适应范围，否则可能会引起误解。Flex4.0API里面有这么一句话：列表组件的项呈示器和项目编辑器必须实现IListItemRenderer接口。至于IListItemRenderer接口定义了哪些内容对于我们应用的人来说并
Flex序列号 paladin1988 Flex
flex3序列号：1377-4167-5844-4698-0048-5821flex4.5序列号：1424-4938-3077-5736-3940-56401424-4827-8874-7387-0243-7331
Flex4 AIR程序去除窗口边框, 最大化 -氺_涙- Flex
去除系统边框：更改(主程序-app.xml)文件找到和改为nonetrue并在(主程序.mxml)文件中对标签添加属性showStatusBar="false"另：如需要对窗口进行全屏设置，在初始化代码中添加systemManager.stage.displayState=StageDisplayState.FULL_SCREEN_INTERACTIVE;设置窗口最大化：NativeApplica
flex4.5移动设备开发-注意指导 cjd007 Flex
DevelopingAIRapplicationsformobiledevices;官方的指导文件[url]http://help.adobe.com/en_US/air/build/WSfffb011ac560372f-5d0f4f25128cc9cd0cb-8000.html[/url]包括：SettingupyourdevelopmentenvironmentMobileapplicatio
Flex的安装与启动 zfl092005 Flex flex eclipse windows system java c
1、安装与注册安装flex4.5后，打开C:\WINDOWS\system32\drivers\etc目录下的hosts文件，在文件最后加入：127.0.0.1activate.adobe.com127.0.0.1practivate.adobe.com127.0.0.1ereg.adobe.com127.0.0.1activate.wip3.adobe.com127.0.0.1wip3.adob
[转]Stage3D 翻译系列之六：一个真正的纯Stage3D应用（一） hili2006 as3 web game 3d引擎
前提必备知识熟悉Stage3DAPI，对其结构基本了解。对顶点和片段着色器，着色器语言基本了解。在阅读本文之前，强烈建议将本系列的前三篇教程完成（1、Stage3D如何工作2、顶点和片段着色器3、何为AGAL）所需额外产品Flex4.5SDKDownloadFlayerPlayer11中的playerglobal.swc文件DownloadFlashPlayer11Download用户级别中级所需
找不到{playerglobalHome}/11.8/playerglobal.swc 水中影子 flex4.x问题
今天试验下Flex4.10,新建项目时，报错找不到xx盘/frameworks/{playerglobalHome}/11.8/playerglobal.swc这个变量是在frameworks/flex-config.xml中出现的。我比较了ApacheFlex4.10.0和AdobeFlex4.6.0的flex-config.xml文件，发现有源码中有两个地方将原来的libs/player替换成
Flex4.6 上使用 Air3.3 SDK 东名夜雨 Flash
windows版本1：Adobe\AdobeFlashBuilder4.6\sdks\4.6.0文件夹拷贝一份，命名为Flex4.6_Air3.3(名字随便起)2：到http://www.adobe.com/support/flashplayer/downloads.html下载最新的playerglobal11_3.swc覆盖Flex4.6_AIR3.3\frameworks\libs\play
rust的指针作为函数返回值是直接传递，还是先销毁后创建？ wudixiaotie 返回值
这是我自己想到的问题，结果去知呼提问，还没等别人回答，我自己就想到方法实验了。。 fn main() { let mut a = 34; println!("a's addr:{:p}", &a); let p = &mut a; println!("p's addr:{:p}", &a
java编程思想 -- 数据的初始化百合不是茶 java 数据的初始化
1.使用构造器确保数据初始化 /* *在ReckInitDemo类中创建Reck的对象 */ public class ReckInitDemo { public static void main(String[] args) { //创建Reck对象 new Reck(); } }
[航天与宇宙]为什么发射和回收航天器有档期 comsci
地球的大气层中有一个时空屏蔽层,这个层次会不定时的出现,如果该时空屏蔽层出现,那么将导致外层空间进入的任何物体被摧毁,而从地面发射到太空的飞船也将被摧毁... 所以,航天发射和飞船回收都需要等待这个时空屏蔽层消失之后,再进行 &
linux下批量替换文件内容商人shang linux 替换
1、网络上现成的资料　　格式: sed -i "s/查找字段/替换字段/g" `grep 查找字段 -rl 路径` 　　linux sed 批量替换多个文件中的字符串　　sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 　　例如：替换/home下所有文件中的www.admi
网页在线天气预报 oloz 天气预报
网页在线调用天气预报 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transit
SpringMVC和Struts2比较杨白白 springMVC
1. 入口 spring mvc的入口是servlet，而struts2是filter（这里要指出，filter和servlet是不同的。以前认为filter是servlet的一种特殊），这样就导致了二者的机制不同，这里就牵涉到servlet和filter的区别了。参见：http://blog.csdn.net/zs15932616453/article/details/8832343 2
refuse copy, lazy girl! 小桔子 copy
妹妹坐船头啊啊啊啊！都打算一点点琢磨呢。文字编辑也写了基本功能了。。今天查资料，结果查到了人家写得完完整整的。我清楚的认识到： 1.那是我自己觉得写不出的高度 2.如果直接拿来用，很快就能解决问题 3.然后就是抄咩~~ 4.肿么可以这样子，都不想写了今儿个，留着作参考吧！拒绝大抄特抄，慢慢一点点写！
apache与php整合 aichenglong php apache web
一 apache web服务器 1 apeche web服务器的安装 1)下载Apache web服务器 2)配置域名(如果需要使用要在DNS上注册) 3)测试安装访问http://localhost/验证是否安装成功 2 apache管理 1)service.msc进行图形化管理 2)命令管理，配
Maven常用内置变量 AILIKES maven
Built-in properties ${basedir} represents the directory containing pom.xml ${version} equivalent to ${project.version} (deprecated: ${pom.version}) Pom/Project properties Al
java的类和对象百合不是茶 JAVA面向对象类对象
java中的类： java是面向对象的语言，解决问题的核心就是将问题看成是一个类，使用类来解决 java使用 class 类名来创建类，在Java中类名要求和构造方法，Java的文件名是一样的创建一个A类： class A{ } java中的类：将某两个事物有联系的属性包装在一个类中，再通
JS控制页面输入框为只读 bijian1013 JavaScript
在WEB应用开发当中，增、删除、改、查功能必不可少，为了减少以后维护的工作量，我们一般都只做一份页面，通过传入的参数控制其是新增、修改或者查看。而修改时需将待修改的信息从后台取到并显示出来，实际上就是查看的过程，唯一的区别是修改时，页面上所有的信息能修改，而查看页面上的信息不能修改。因此完全可以将其合并，但通过前端JS将查看页面的所有信息控制为只读，在信息量非常大时，就比较麻烦。
AngularJS与服务器交互 bijian1013 JavaScript AngularJS $http
对于AJAX应用（使用XMLHttpRequests）来说，向服务器发起请求的传统方式是：获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码，最后处理服务端的响应。整个过程示例如下： var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange
[Maven学习笔记八]Maven常用插件应用 bit1129 maven
常用插件及其用法位于：http://maven.apache.org/plugins/ 1. Jetty server plugin 2. Dependency copy plugin 3. Surefire Test plugin 4. Uber jar plugin 1. Jetty Pl
【Hive六】Hive用户自定义函数(UDF) bit1129 自定义函数
1. 什么是Hive UDF Hive是基于Hadoop中的MapReduce，提供HQL查询的数据仓库。Hive是一个很开放的系统，很多内容都支持用户定制，包括：文件格式：Text File，Sequence File 内存中的数据格式： Java Integer/String, Hadoop IntWritable/Text 用户提供的 map/reduce 脚本：不管什么
杀掉nginx进程后丢失nginx.pid，如何重新启动nginx ronin47 nginx 重启 pid丢失
nginx进程被意外关闭，使用nginx -s reload重启时报如下错误：nginx: [error] open() “/var/run/nginx.pid” failed (2: No such file or directory)这是因为nginx进程被杀死后pid丢失了，下一次再开启nginx -s reload时无法启动解决办法：nginx -s reload 只是用来告诉运行中的ng
UI设计中我们为什么需要设计动效 brotherlamp UI ui教程 ui视频 ui资料 ui自学
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用你的产品。
Spring中JdbcDaoSupport的DataSource注入问题 bylijinnan java spring
参考以下两篇文章： http://www.mkyong.com/spring/spring-jdbctemplate-jdbcdaosupport-examples/ http://stackoverflow.com/questions/4762229/spring-ldap-invoking-setter-methods-in-beans-configuration Sprin
数据库连接池的工作原理 chicony 数据库连接池
随着信息技术的高速发展与广泛应用，数据库技术在信息技术领域中的位置越来越重要，尤其是网络应用和电子商务的迅速发展，都需要数据库技术支持动态Web站点的运行，而传统的开发模式是：首先在主程序（如Servlet、Beans）中建立数据库连接；然后进行SQL操作，对数据库中的对象进行查询、修改和删除等操作；最后断开数据库连接。使用这种开发模式，对
java 关键字 CrazyMizzz java
关键字是事先定义的，有特别意义的标识符，有时又叫保留字。对于保留字，用户只能按照系统规定的方式使用，不能自行定义。 Java中的关键字按功能主要可以分为以下几类：（1）访问修饰符 public,private,protected p
Hive中的排序语法 daizj 排序 hive order by DISTRIBUTE BY sort by
Hive中的排序语法 2014.06.22 ORDER BY hive中的ORDER BY语句和关系数据库中的sql语法相似。他会对查询结果做全局排序，这意味着所有的数据会传送到一个Reduce任务上，这样会导致在大数量的情况下，花费大量时间。与数据库中 ORDER BY 的区别在于在hive.mapred.mode = strict模式下，必须指定 limit 否则执行会报错。
单态设计模式 dcj3sjt126com 设计模式
单例模式（Singleton）用于为一个类生成一个唯一的对象。最常用的地方是数据库连接。使用单例模式生成一个对象后，该对象可以被其它众多对象所使用。 <?phpclass Example{ // 保存类实例在此属性中 private static&
svn locked dcj3sjt126com Lock
post-commit hook failed (exit code 1) with output: svn: E155004: Working copy 'D:\xx\xxx' locked svn: E200031: sqlite: attempt to write a readonly database svn: E200031: sqlite: attempt to write a
ARM寄存器学习 e200702084 数据结构 C++c C#F#
无论是学习哪一种处理器，首先需要明确的就是这种处理器的寄存器以及工作模式。 ARM有37个寄存器，其中31个通用寄存器，6个状态寄存器。 1、不分组寄存器（R0-R7）不分组也就是说说，在所有的处理器模式下指的都时同一物理寄存器。在异常中断造成处理器模式切换时，由于不同的处理器模式使用一个名字相同的物理寄存器，就是
常用编码资料 gengzg 编码
List<UserInfo> list=GetUserS.GetUserList(11); String json=JSON.toJSONString(list); HashMap<Object,Object> hs=new HashMap<Object, Object>(); for(int i=0;i<10;i++) {
进程 vs. 线程 hongtoushizi 线程 linux 进程
我们介绍了多进程和多线程，这是实现多任务最常用的两种方式。现在，我们来讨论一下这两种方式的优缺点。首先，要实现多任务，通常我们会设计Master-Worker模式，Master负责分配任务，Worker负责执行任务，因此，多任务环境下，通常是一个Master，多个Worker。如果用多进程实现Master-Worker，主进程就是Master，其他进程就是Worker。如果用多线程实现
Linux定时Job：crontab -e 与 /etc/crontab 的区别 Josh_Persistence linux crontab
一、linux中的crotab中的指定的时间只有5个部分：* * * * * 分别表示：分钟，小时，日，月，星期，具体说来：第一段代表分钟 0—59 第二段代表小时 0—23 第三段代表日期 1—31 第四段代表月份 1—12 第五段代表星期几，0代表星期日 0—6 如： */1 * * * * 每分钟执行一次。 *
KMP算法详解 hm4123660 数据结构 C++算法字符串 KMP
字符串模式匹配我们相信大家都有遇过，然而我们也习惯用简单匹配法（即Brute-Force算法)，其基本思路就是一个个逐一对比下去，这也是我们大家熟知的方法，然而这种算法的效率并不高，但利于理解。假设主串s="ababcabcacbab",模式串为t="
枚举类型的单例模式 zhb8015 单例模式
E.编写一个包含单个元素的枚举类型[极推荐]。代码如下： public enum MaYun {himself; //定义一个枚举的元素，就代表MaYun的一个实例private String anotherField;MaYun() {//MaYun诞生要做的事情//这个方法也可以去掉。将构造时候需要做的事情放在instance赋值的时候：/** himself = MaYun() {*
Kafka+Storm+HDFS ssydxa219 storm
cd /myhome/usr/stormbin/storm nimbus &bin/storm supervisor &bin/storm ui &Kafka+Storm+HDFS整合实践kafka_2.9.2-0.8.1.1.tgzapache-storm-0.9.2-incubating.tar.gzKafka安装配置我们使用3台机器搭建Kafk
Java获取本地服务器的IP 中华好儿孙 java Web 获取服务器ip地址
System.out.println("getRequestURL:"+request.getRequestURL()); System.out.println("getLocalAddr:"+request.getLocalAddr()); System.out.println("getLocalPort:&quo