Dabbling with Drag and Drop in Adobe AIR with Flex 3

One of the fun things about my job is checking out where we can use new technologies to enhance our service offering. I’m a doubting Thomas when it comes to new technologies. I don’t like to rely on third party sources (whether blatant marketing, analyst reports or even developers excited about a new tool). I need to have a go myself. 

I’ve been keeping tabs on the development of Adobe AIR over the past months. Readers of this blog will know that I’m an ardent believer that the user experience needs to be got right first, and only then should be enhanced with something whizzy. But for sure we all want to have a range of whizzy tools available to us to use judiciously.

So I thought I’d have a look at how easy it is with Adobe AIR to do some drag and drop.

A few points before I start. You can develop AIR applications in a number of languages, e.g. Flex or HTML/JS. The documentation isn’t all that clear but from what I can figure so far:

  • If you use HTML/JS then you are limited to the usual drag and drop of items within a web page. But you can’t drag to/from the desktop
  • If you want to be able to drag items to/from the desktop you need to use something like Flex.
  • Flex apparently also supports limited dragging of certain items from the application to the desktop. From what I can figure in practice this means dragging a data table into a spreadsheet.

So I’m using Flex in this example. There is some sample code out there (e.g. http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/) but when I checked it out it hadn’t been updated for Flex 3. The example below is an updated version based on the code at http://blog.everythingflex.com/2007/06/18/simple-drag-and-drop-air/
I’m on Windows so I’m using the mighty FlashDevelop. The example below is using 3.0.0 Beta 8.

1. Fire up FlashDevelop
2. Select Project -> New Project
3. Select an AIR MXML Project and give it a sensible name (e.g. dnd)

Flash Develop
Flash Develop

4. Expand the src directory and delete the Main.as file
5. Replace the contents of the Main.mxml file with the following code (WP isn’t keen on pasting in the indents – so no indents today).

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init()">
<mx:Script>
<![CDATA[
import flash.desktop.NativeDragActions;
import mx.controls.Alert;
import mx.controls.Image;
import flash.filesystem.File;
import flash.desktop.ClipboardFormats;
import flash.events.NativeDragEvent;
import flash.desktop.NativeDragManager;

private function init():void{
this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDrop);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT,onDragExit);
}

public function onDragIn(event:NativeDragEvent):void{
NativeDragManager.acceptDragDrop(this);
}

public function onDrop(event:NativeDragEvent):void{
NativeDragManager.dropAction = NativeDragActions.COPY;
var dropfiles:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
for each (var file:File in dropfiles) {

//NB The following is case sensitive - so Image.JPG will produce "unmapped extension"
//but Image.jpg will work fine
trace("Adding file with extension [" + file.extension + "]");
switch (file.extension){
case "png" :
addImage(file.nativePath);
break;
case "jpg" :
addImage(file.nativePath);
break;
case "gif" :
addImage(file.nativePath);
break;
default:
Alert.show("Unmapped Extension");
}
}
}

public function onDragExit(event:NativeDragEvent):void{
trace("Drag exit event.");
}

private function addImage(nativePath:String):void{
var i:Image = new Image();
if(Capabilities.os.search("Mac") >= 0){
i.source = "file://" + nativePath;
} else {
i.source = nativePath;
}
this.addChild(i);
}

]]>
</mx:Script>

</mx:WindowedApplication>

 

6. Hit F5 to test the application
7. Drag images into the big empty window to see them shown there

Simple as that. You will notice inside the code that the app is looking for .png, .jpg, .gif files only. Turns out these suffixes are case sensitive inside Flex so make sure your file extensions are lower case. Or change the code.

Conclusion from this:

  1. If it’s correct that HTML/JS can’t be used to support drag and drop between the application and the desktop then this is not desperately surprising when you think about browser architecture, security, sandboxes and so forth.
  2. If using Flash/Flex is the only way to address this challenge then so be it. My initial worry was that in order to use Flex in anger I’d have to hire a whole cadre of Flash/Flex developer/designers. But it turns out that Flex is very reminiscent of HTML and JavaScript/Java so there isn’t going to be much of a learning curve for developers already familiar with web apps.
  3. I’m glad this exercise forced me to have a look at Flex because it has a lot going for it as far as aspects of RIAs are concerned.
  4. But. I have a concern about how maintainable Flex code is in the long run. Check the example here about the use of View States, in particular the example of how to maintain three different-sized windows. To be fair there are some MVC frameworks out there for Flex but even so I would be tempted to keep AIR usage to the fringes of my applications for now.
Advertisements

2 thoughts on “Dabbling with Drag and Drop in Adobe AIR with Flex 3

  1. Pingback: Dabbling with Drag and Drop in Adobe AIR with Flex 3 « Rich Internet Applications

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s