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…

• 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.

<?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>

Click here to download the source code.