AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes

One of the exciting features of AIR is that it enables drag-and-drop between your Flex applications and the desktop: For example, you could drag a chart from your Flex application and drop it on your desktop as a JPG, or directly inside a Word document. Similarly, you could grab some rows from a Datagrid and drop them on your desktop as an XLS file, or directly inside an Excel spreadsheet.

I spend a lot of time talking with Financial Services organizations, and this is a feature that they are really interested in.

This is “native” drag-and-drop handled by the operating system. The way it works is that, on “drag start” in your application, you are responsible for packaging the relevant data in one or different formats (text, bitmap, file). When the user mouses over another desktop application, that application will look at the formats available, and decide if it wants to accept a drop. If it does, it will adjust the drag icon accordingly and consume the data as appropriate if the user releases the mouse button.

I have been using this feature in the SalesBuilder application I posted yesterday. In the process of building SalesBuilder I created two utility classes to abstract the details of generating bitmaps, XLS files, etc…

Click here to install a very simple sample application.

This application is just a few lines of code…

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

	<mx:ArrayCollection id="results"/>
	<mx:HTTPService id="srv" url="results.xml"/>
	<mx:Binding source="srv.lastResult.data.item" destination="results"/>

	<DragBitmap displayObject="{lc}"/>
	<DragExcel dataGrid="{dg}"/>

	<mx:DataGrid id="dg" dataProvider="{results}" allowMultipleSelection="true"/>

	<mx:ColumnChart id="lc" dataProvider="{results}">
		<mx:horizontalAxis>
			<mx:CategoryAxis categoryField="month"/>
		</mx:horizontalAxis>
		<mx:series>
			<mx:ColumnSeries yField="revenue"/>
			<mx:ColumnSeries yField="costs"/>
		</mx:series>
	</mx:ColumnChart>

</mx:WindowedApplication>

… and allows you to:

  • Drag selected rows in the DataGrid and drop them to the desktop as an XLS file or directly in an open Excel spreadsheet.
  • Drag the chart and drop it on the desktop as a JPG file or directly in an Open Word document (or any other application that consumes bitmaps).

These are very basic classes. They can certainly be improved in many ways, but hopefully they can give you a jumpstart when experimenting with AIR-to-desktop drag-and-drop.

Click here to download the source code.

Comments

30 Responses to “AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes”

  1. Matt Poole on June 15th, 2007 2:08 pm

    Great stuff Christophe, I’ll be playing with this over the weekend!

  2. AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes « Flash Enabled - Get Ready With Flash… on June 16th, 2007 7:30 am

    [...] AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes Christophe Coenraet wrote: One of the exciting features of AIR is that it enables drag-and-drop between your Flex applications and the desktop: For example, you could drag a chart from your Flex application and drop it on your desktop as a JPG, or directly inside a Word document. Similarly, you could grab some rows from a Datagrid and drop them on your desktop as an XLS file, or directly inside an Excel spreadsheet. [...]

  3. 十分期待 Flex + AIR « Ocean Apple on June 18th, 2007 2:16 am

    [...] 係 Christophe Coenraets 個 Blog 度有個 Simple Application Example,一定要 download 來試試。 [...]

  4. Kalvin on June 18th, 2007 4:36 pm

    Christophe, thanks for the all the useful info– I have just one question: does AIR support Desktop-to-AIR drag-and-drop? For instance, am I able to implement a feature where the user can drag a JPG from a browser window to the AIR program and have the AIR program display it?

  5. Kalvin on June 19th, 2007 3:00 pm

    I believe this part of the docs answers my question (”Yes”), but if I’m misinterpreting it please let me know:

    “Gestures between application

    When a drag gesture enters an AIR application window from a non-AIR application, there will be no initiator object to dispatch the nativeDragStart or nativeDragComplete events. The events dispatched during the gesture will otherwise follow the same pattern as that of a gesture starting and ending within the same AIR application

    When a drag gesture leaves an AIR application window, there will be no target object to dispatch nativeDragEnter, nativeDragOver, or nativeDragDrop events. The initiator object still dispatches a nativeDragComplete event, which reports the drag action set by the native operating system (or “none,” if the drop was not accepted).”

  6. ylstxwyfpd on June 21st, 2007 10:29 pm

    Hello! Good Site! Thanks you! lhtibbwscqsaah

  7. Dan on July 12th, 2007 6:15 pm

    Christophe..

    great info. Can you follow up with an example of Desktop-to-AIR drag-and-drop?

    For instance, drag a text or document file from the desktop or a folder to the air ap, and have air ap open the file IE: read the contents and do something with it (say encrypt the file - and later decrypt the file) and then display it as list of files in a grid - then use the AIR to Desktop to allow a drag back to desktop and let the user see the changes?
    Dan

  8. after8 on July 24th, 2007 2:23 am
  9. brad on September 6th, 2007 3:38 pm

    Can you drag a node from a file tree that is an image to your desktop or photoshop? We are planning a big project and figuring out a way for an employee to be able to quickly find photos by searching, and also the ability to drag to another directory or photoshop

  10. Evan Gifford on October 9th, 2007 4:50 pm

    Awesome! I can always count on you Christophe to come up with the perfect examples.

    One update from release notes of Beta 2: http://labs.adobe.com/wiki/index.php/AIR:Release_Notes

    You’ll need to change TransferableData to Clipboard, TransferableFormats to ClipboardFormats and resolve() to resolvePath() to get this to work with Beta 2

  11. Mike Kidder on October 11th, 2007 12:03 pm

    Thanks Evan.

    Worked for me updating this sample to Beta 2. Flex Builder also showed me the issues, but it is helpful to know exactly what to change things too.

  12. Nick on October 16th, 2007 6:39 am

    Thank you very much for publishing this example. This is just the kind of thing I was looking for in order to implement my senior project for college.

    Your post has been very helpful.

  13. Carlos Escobar on October 24th, 2007 6:58 am

    Hi Christophe.

    Could you help with issue when I m trying to run your example about DragExcel that you have placed above.

    I got the following message: Could not resolve to a component implementation.

    Do you have any idea which could be the problem or how can I resolve it.

    Thanks in advanced for you support.

    Futher your initative about this is implementation is great!!.. congratulations.

    Best,
    Carlos

  14. viagra on November 2nd, 2007 11:05 am

    online viagra…

    denuclearising ribalds…

  15. cqkgjytmwg on November 26th, 2007 5:59 am

    cqkgjytmwg cqkgjytmwg cqkgjytmwgcqkgjytmwg
    cqkgjytmwgcqkgjytmwgcqkgjytmwg cqkgjytmwg

  16. butalbital on December 11th, 2007 4:08 pm

    butalbital…

    barring crosier…

  17. Hari Kolasani on January 6th, 2008 9:21 am

    I couldn’t port this to Flex3 Beta3. I heard that in Beta 3, AIR applications use the native drag and drop. Does that affect these components?

  18. Aubweb on January 18th, 2008 7:12 am

    Yes it does… just replace by the correct classes.

  19. RAVI on January 21st, 2008 10:06 pm

    in flex 3 beta 3 version i am not getting clipboard.addData() function,and which class i have to use in beta 3 ….

  20. Jordan on February 19th, 2008 11:22 am

    Having the same problem as RAVI…clipboard.addData() is not appearing as a function…where would there be any documentation on this?

  21. Jordan on February 19th, 2008 11:36 am

    found it! instead of Clipboard.addData() it’s Clipboard.setData() with the parameters switched…

  22. ED on March 31st, 2008 10:55 pm

    Hi I have a question related to drag and drop - maybe you would have some insights into this situation.

    I would actually like to DISABLE the drag/drop functionality that is built into the TextField object (i.e. prevent users from dragging selected text from one TextField object to another).

    You can do this in a class based on ListBase, where there are properties “dragEnabled” and “allowDragSelection” that can be set to false.

    However, no equivalent properties seem to exist for as TextField. Would you have any ideas on how to get around this? Thanks for any pointers, now matter how remote!

  23. Mark on April 7th, 2008 4:45 am

    I also want to disable this feature for TextFields!

    My TextField uses an external stylesheet and so every time a user attempts to drag text to the TextField, the following error is thrown:

    Error: Error #2009: This method cannot be used on a text field with a style sheet.
    at flash.text::TextField/replaceSelectedText()
    at flash.text::TextField/_dragDrop()

    Any ideas anyone?

  24. Mark on April 7th, 2008 6:40 am

    I’ve now managed to avoid this error by explicitly setting the textarea.editable to false.

  25. piroko on April 12th, 2008 2:21 am

    To make folk’s life easier… the classes that I had to update for Flex3 were

    TransferableData -> Clipboard
    DragOptions -> NativeDragOptions
    TransferableFormats -> ClipboardFormats
    DragManager ->NativeDragManager

  26. online baccarat spiele on May 1st, 2008 4:41 am

    card credit processing terminal virtual…

    Egalement 7 card stud high download info personal remember ringtones verizon…

  27. strip poker en ligne gratuites on May 1st, 2008 5:12 pm

    gratis poker im internet…

    As you see free ringtones tracfone professional video poker…

  28. Updating AIR Drag & Drop examples for AIR 1.0 | tombray.com - chatting about Flex & AIR on May 13th, 2008 5:21 pm

    [...] some useful utility classes for working with XLS and Bitmap formats which you can read about here.  I’ve updated his source to work with AIR 1.0 and you can download it [...]

  29. Patrick on June 3rd, 2008 3:56 am

    Your source is not 1.0, still. Thanks

  30. ycy’s blog » Blog Archive » browser-to-flex and desktop-to-air drag能实现吗? on July 1st, 2008 2:28 am

    [...] 我看到flexSpaces实现了在多个flex/AIR之间的拖放。我想应该是可以实现的。 AIR-TO-DESKTOP drag-and-drop是可以实现的。 Tags: drag, flex Posted under flex [...]

Leave a Reply