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

SalesBuilder on AIR: Local Database, Data Syn

SQLQueue: Chaining Asynchronous SQL statement

大 | 中 | 小

[2007/06/15 17:34 | 分类: Flex技术 | by gdgzboy ]

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.

Tags: flex , 技术

评论(0) | 引用(0) | 阅读(323)

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

快速链接

分类

其他

统计

链接

PageRank