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…
- DragBitmap allows you to drag any Flex visual component and drop it on the desktop as JPG or in any other application that accepts bitmaps.
To use it simply add the following line to your code:
DragBitmap packages your data in two formats: a raw bitmap format and a JPG file.
- DragExcel allows you to drag the selected rows of a Datagrid and drop them on the desktop as an XLS file or directly in an open Excel spreadsheet.
To use it simply add the following line to your code:
DragExcel packages your data in two formats: a raw text format and an HTML file with an XLS extension (Excel can read HTML table). A CSV format may be a better choice for greater portability.
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.
Great stuff Christophe, I’ll be playing with this over the weekend!
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?
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).”
Hello! Good Site! Thanks you! lhtibbwscqsaah
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
@ DAN
Check :
http://blog.everythingflex.com/2007/06/18/simple-drag-and-drop-air/
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
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
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.
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.
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
cqkgjytmwg cqkgjytmwg cqkgjytmwgcqkgjytmwg
cqkgjytmwgcqkgjytmwgcqkgjytmwg cqkgjytmwg
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?
Yes it does… just replace by the correct classes.
in flex 3 beta 3 version i am not getting clipboard.addData() function,and which class i have to use in beta 3 ….
Having the same problem as RAVI…clipboard.addData() is not appearing as a function…where would there be any documentation on this?
found it! instead of Clipboard.addData() it’s Clipboard.setData() with the parameters switched…
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!
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?
I’ve now managed to avoid this error by explicitly setting the textarea.editable to false.
To make folk’s life easier… the classes that I had to update for Flex3 were
TransferableData -> Clipboard
DragOptions -> NativeDragOptions
TransferableFormats -> ClipboardFormats
DragManager ->NativeDragManager
Your source is not 1.0, still. Thanks
Your source is not 1.0 still Thanks
Thank you very much for publishing this example.
Thank you very much
I’ve now managed to avoid this error by explicitly setting the textarea.editable to false.
Yes it does… just replace by the correct classes.
Thank you for your share.
I’m sending migration souce code to AIR 1.5 at my link.
http://www.wfcampus.co.kr/temp/dragdrop.zip
Go!
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?
[...] Comment! Christophe Coenraets :: AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes [...]
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?
thanks you admin good post
I’ve now managed to avoid this error by explicitly setting the textarea.editable to false.
hallo i wish you verry succes operator
This is awesome stuff Christophe.
Will try it out asap
hallo i wish you verry succes operator
hallo dear friends thanks a lot for your workshop
Having the same problem as RAVI…clipboard.addData() is not appearing as a function
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.
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.
Christophe,
I have enjoyed all your post and I am always impressed with what you come up with and also the capabilities of Air and Flex.
Recently, each time I am trying to install your air examples, I get the same error by the installer:
This application requires an update to Adobe @AIR that is not available for your system.
I run Vista 32 on a regular PC. This is really frustrating.
Any idea?
Thanks
Кстати, я сейчас посмотрел, ваш блог в Гугле хорошие места занимает ,если имя блога туда вбивать.
thanks admin good post
hey friend excellent information about AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes
how are you baby melisa
very very good
Christophe,
Great post as usual. The only caveat is that the example uses the MOUSE_MOVE event as the trigger for the drag operation. Unfortunately, this catches resizes of the datagrid columns…
Is there a reasin why you did not use the NATIVE_DRAG_ENTER instead?
Thx
OK, I got it all wrong, the NATIVE_DRAG_ENTER event is used for a drag-in gesture, not a drag-out.
But I found a cheap workaround for the column resize problem.
Just replace
if (!event.buttonDown)
by
if (!event.buttonDown|| _dataGrid.mouseY<_dataGrid.headerHeight)
et voila!
Having the same problem as RAVI…clipboard.addData() is not appearing as a function
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?
Thanks a lot for the wonderful information
Thank you for posting this, an opinion well expressed.
If it works like you say it does then I would be very impressed!
Thank you for posting this, an opinion well expressed.
Hi i wants drag and drop wav files from adobe AIR application to desktop.
how to do this?
Yes, I was wondering about Adobe AIR update to programs.. now I know its capability..
Whats up! I simply would like to give an enormous thumbs up for the great info you’ve got here on this post. I will likely be coming again to your weblog for more soon.
card credit processing terminal virtual…
fabulosa a demempes si ssereis iugias con balifig. preclico astas se arelo son eraduz mi reiria dalaca y ramur modrões rmimo.