主页 » RIA文档中心 » RIA杂志速递

AIR中的拖放操作

Posted 四月 6th, 2009 by migsr

AIR中对于桌面系统拖拽的支持将使你的AIR应用如虎添翼。本周有两篇AIR相关的文章，都是关于拖拽的。

第一篇 - 拖拽文件到AIR并添加到DataGrid中

来自：http://sagarkulkarni.com/2009/03/31/drag-and-drop-files-in-air-add-them-to-data-grid/

作者强调，在AIR中实现拖拽操作要用到的标签就是DragManager ，实现的原理大致上是如下的步骤：

1.当用户拖拽一个文件到AIR应用，AIR应用通过侦听NativeDragEvent.NATIVE_DRAG_ENTER，捕获到拖拽事件

addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

通过侦听NativeDragEvent.NATIVE_DRAG_DROP，捕获到拖拽完成事件

addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

2.拖拽的数据实际上位于系统的剪切板内，所以AIR需要使用clipboard.getData方法来获取数据

  1. private function onDragIn(e:NativeDragEvent):void{
  2.     //check and see if files are being drug in
  3.     if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
  4.         var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  5.         DragManager.acceptDragDrop(this);
  6.     }
  7. }

3.需要判断一下拖拽的数据是否符合要求，如果是允许的数据格式，则执行DragManager.acceptDragDrop()方法

  1. private function onDragDrop(e:NativeDragEvent):void{
  2. 	//get the array of files being drug into the app
  3. 	var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
  4. 	uploadGrid.dataProvider = arr;
  5. }

4.由于从剪切板中获取的数据是Array格式，所以你可以直接赋给DataGrid作为数据源，在DataGrid中显示出来

第二篇 - 从桌面拖拽文件到AIR应用程序

来自：http://www.mindtheflex.com/?p=81

这篇文章的初衷与上一篇类似，不过作者设计的模式是从用户桌面上拖拽一个图片到AIR应用程序，然后AIR应用程序将它以BLOB的格式存放到数据库中（BLOB是数据库中用来存储二进制文件的字段类型）。

开始你需要创建一个主的MXML文件和一个用于存放图片的数据库（SQLite），你也手工创建，也可以通过下面的SQL语句：

CREATE TABLE IF NOT EXISTS picture_objects(id integer PRIMARY KEY autoincrement,label text, picturedata blob);

在存取数据方面，作者使用了DAO的模式，接口：

  1. package dao {
  2. 	import mx.collections.ArrayCollection;
  3. 	public interface PictureObjectDao {
  4. 		function savePictureObject(label:String, testObject:Object):void;
  5. 		function getPictureObjectByLabel(label:String):ArrayCollection;
  6. 		function getAllPictureObjects():ArrayCollection;
  7.    	}
  8. }

保存一个图片到数据库的时候，使用的依然是：clipboard.getData

  1. private function onDrop(event:NativeDragEvent):void {
  2. 	var airData:Object=event.clipboard.formats;//读取剪切板
  3. 	for each(var type:String in airData) {
  4. 		if (type != "air:url") {
  5. 			var airObjects:Array=event.clipboard.getData(type)as Array;//获取剪切板中的数据
  6. 			var inFile:File=airObjects[0]as File;//获取剪切板中的文件
  7. 			var fileInStream:FileStream=new FileStream();//文件流
  8. 			var contentArray:ByteArray=new ByteArray();
  9. 			fileInStream.open(inFile, FileMode.READ);
  10. 			fileInStream.readBytes(contentArray);//读取字节保存到contentArray
  11. 			picture.source=contentArray;
  12. 			savePictureObject(inFile.name, contentArray);//保存到数据库
  13. 		}
  14. 	}
  15. 	function savePictureObject(label:String, pictureObject:ByteArray):void {
  16. 		pictureObjectDao.savePictureObject(label, pictureObject);
  17. 		addedPictureObjects=pictureObjectDao.getAllPictureObjects();
  18. 	}
  19. }

您给予的分值: None 平均分: 10 (1 vote)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题