flex day 5 air的drag和drop

air里面的drag和drop和web里面的应用不太相同。看了一下，其实相当于去读取剪切板。

首先，需要创建一个clipborad的对象，通过剪切板传输数据和对象，包含了几个标准的格式，

• BITMAP_FORMAT：一个 BitmapData 对象（仅限 AIR）
• FILE_LIST_FORMAT：File 对象的数组（仅限 AIR）
• HTML_FORMAT：HTML 格式的字符串数据
• TEXT_FORMAT：字符串数据
• RICH_TEXT_FORMAT：包含 RTF 格式数据的 ByteArray
• URL_FORMAT：URL 字符串（仅限 AIR）

• 主要使用的方法涉及到了getData(),setData(),hasFormat,分别对应获取，设置，检查clipboard对象信息。

  <?xml version="1.0" encoding="utf-8"?>
  <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
  					   xmlns:s="library://ns.adobe.com/flex/spark" 
  					   xmlns:mx="library://ns.adobe.com/flex/mx" styleName="plain" 
  					   width="100%" height="100%"
  					   >
  	<fx:Script>
  		<![CDATA[
  			import mx.controls.Alert;
  			import mx.core.IUIComponent;
  			import mx.managers.DragManager;
  		]]>
  	</fx:Script>
  	<fx:Declarations>
  		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
  	</fx:Declarations>
  	<s:nativeDragEnter>
  		<![CDATA[
  			if (event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
  				var files:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  				if (files.length == 1){
  					DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
  					//setStyle("backgroundColor", 0xccccff);
  				}
  			}
  		]]>
  	</s:nativeDragEnter>
  	<s:nativeDragExit>
  		<![CDATA[
  			
  		]]>
  	</s:nativeDragExit>
  	<s:nativeDragDrop>
  		<![CDATA[
  			var arr:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  			startImage.source = (arr[0] as File).url;
  			var j:String = (arr[0] as File).url;
  			trace(j.split(".")[1]);
  			if(j.split(".")[1] == "txt"){
  				var currentFile:File = arr[0];
  				var fs:FileStream = new FileStream();
  				fs.open(arr[0],FileMode.READ);
  				startTA.text = fs.readMultiByte(fs.bytesAvailable,File.systemCharset);
  				fs.close();
  				trace(startTA.text);
  			}
  		]]>
  	</s:nativeDragDrop>
  	<s:nativeDragOver>
  		<![CDATA[
  			
  			//var i:int = Math.floor(Math.random()*10);
  			//var j:String = "0x"+i+"000cc";
  			var i:int = event.stageX;
  			var j:int = event.stageY;
  			setStyle("backgroundColor",i*j);
  		
  		]]>
  	</s:nativeDragOver>
  	<mx:ViewStack id="startVS" width="100%" height="100%" creationPolicy="all">
  		<mx:Canvas width="100%" height="100%">
  			<mx:Text verticalCenter="0" horizontalCenter="0" color="white">
  				<mx:htmlText><![CDATA[<font size="20"><b>Drag an image here</b></font>]]></mx:htmlText>
  			</mx:Text>
  			<s:TextArea id="startTA" width="200" height="200"/>
  			<mx:Image id="startImage" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"/>
  		</mx:Canvas>
  	</mx:ViewStack>
  	
  </s:WindowedApplication>

  
  

  • 先看了例子。这里还用到了几个事件，分别是nativeDragEnter,nativeDragOver,nativeDragDrop,nativeDragExit

    主要是对air程序监听到了拖放信息的时候触发，当处于不同事件的时候做不同的事情。

    尝试了用Math.Radom()，去设置background的背景色。

    clipboard最终是一个Object File对象。

    这里还用到了String的split()方法，去获取文件的后缀名。把txt文件内容放到TextArea里面。

    所以拖拽的本质还是在操作  系统的剪切板，只是换了交互方式