mike chambers | about

AIR Example : Native Drag and Drop

Wednesday, November 7, 2007

Here is a simple example that shows how to enable your Adobe AIR application to accept native drag and drop operations.

This is a simple application that allows you to drag a text file into the application and then view its contents.

DragAndDropExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
    creationComplete="onCreationComplete()"
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script source="DragAndDropExampleClass.as" />

    <mx:TextArea top="10" right="10" bottom="10" left="251"
            id="outputField" />
    <mx:Text text="Drag a Text File into the Application" 
            width="233" height="148" top="11" left="10"/>

</mx:WindowedApplication>

DragAndDropExampleClass.as

import flash.desktop.ClipboardFormats;
import flash.desktop.DragManager;
import flash.events.NativeDragEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;

//called when app has initialized and is about to display
private function onCreationComplete():void
{
    //register for the drag enter event
    addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

    //register for the drag drop event
    addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
}

//called when the user drags an item into the component area
private function onDragIn(e:NativeDragEvent):void
{
    //check and see if files are being drug in
    if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT))
    {
        //get the array of files
        var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

        //make sure only one file is dragged in (i.e. this app doesn't
        //support dragging in multiple files)
        if(files.length == 1)
        {
            //accept the drag action
            DragManager.acceptDragDrop(this);
        }
    }
}

//called when the user drops an item over the component
private function onDragDrop(e:NativeDragEvent):void
{
    //get the array of files being drug into the app
    var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

    //grab the files file
    var f:File = File(arr[0]);

    //create a FileStream to work with the file
    var fs:FileStream = new FileStream();

        //open the file for reading
        fs.open(f, FileMode.READ);

    //read the file as a string
    var data:String = fs.readUTFBytes(fs.bytesAvailable);

        //close the file
        fs.close();

    //display the contents of the file      
    outputField.text = data;
}

One of the cool things about the API, is that you can have specific components within your application accept native drag and drop operations (and not just your entire app).

Note, right now, the app is not doing any checking to confirm that the file is a text file. If you try and drag a binary file into the app you will get weird results. (Im looking into how to check that the file is text based).

comments powered by Disqus
twitter github flickr behance rss