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.


51 Comments
Thanks a lot for the wonderful information
10 Trackbacks
[...] 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. [...]
[...] 係 Christophe Coenraets 個 Blog 度有個 Simple Application Example,一定要 download 來試試。 [...]
online viagra…
denuclearising ribalds…
butalbital…
barring crosier…
card credit processing terminal virtual…
Egalement 7 card stud high download info personal remember ringtones verizon…
gratis poker im internet…
As you see free ringtones tracfone professional video poker…
[...] 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 [...]
[...] 我看到flexSpaces实现了在多个flex/AIR之间的拖放。我想应该是可以实现的。 AIR-TO-DESKTOP drag-and-drop是可以实现的。 Tags: drag, flex Posted under flex [...]
[...] Christophe Coenraets :: AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes [...]
[...] Comment! Christophe Coenraets :: AIR-to-Desktop Drag-and-Drop: Two Simple Utility Classes [...]