- Drag and Drop in an Application (DragManager Class)
- Drag and Drop Between the OS and the Application (NativeDragManager)
- Drag and Drop Items into an AIR Application from the OS
- Drag Items into the dpTimeTracker Application
- Drag Items from an AIR Application to the OS
- Drag Items into the OS
- Next Steps
This chapter is from the book
This chapter is from the book
This chapter is from the book
Drag and Drop Items into an AIR Application from the OS
Unlike the component-level drag-and-drop operations we have examined so far in this chapter, there are unknowns when using drag and drop with the OS. For example, when an item is dragged into the application from the OS, the drag initiator is not a Flex UI control and is unknown to AIR. Because the drag initiator is responsible for broadcasting start and complete events, you will not be able to capture a nativeDragStart or nativeDragComplete event.
Similarly, when you are dragging from the application to the OS, you will not receive nativeDragEnter, nativeDragDrop, or nativeDragOver events, however the drag initiator will still dispatch a nativeDragComplete event to indicate the success or failure of the drop.
Listing 5 shows how you can drag an image from the desktop into a box with the application and set the source of an image.
Listing 5.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<
ClipboardFormats.FILE_LIST_FORMAT ) ){
NativeDragManager.acceptDragDrop(
event.currentTarget as InteractiveObject );
}
}
protected function handleDrop ( event : NativeDragEvent ) : void{
var temp : Object = event.clipboard.getData(
ClipboardFormats.FILE_LIST_FORMAT );
var tempImg : File = temp[0] as File;
img1.source = tempImg.nativePath;
}
]]>
</mx:Script>
<mx:Label text="Drag an image into the box below"/>
<mx:HBox backgroundColor="red"
nativeDragEnter="handleDragEnter( event )"
nativeDragDrop="handleDrop( event )"
width="300" height="300">
<mx:Image id="img1"
height="100%"
width="100%"/>
</mx:HBox>
</mx:WindowedApplication>
When accepting a drop, much like the previous examples with the DragManager, you need to add a listener for both the enter and drop events. These events are named nativeDragEnter and nativeDragDrop when using the NativeDragManager. In this example, the handleDragEnter() function handles the nativeDragEnter event. The purpose of this method is similar to that of the dragEnter handler used in the previous examples with the DragManager, but with a few differences.
The major difference is the approach used when checking for the existence of a format. In the DragManager examples, the hasFormat() method was called on the dragSource object. In this example, the hasFormat() method is called on the clipboard.
)
Figure 6 An image dragged into the application from the OS, showing an icon indicating this is a valid drop target
When dragging an image file into the application, ClipboardFormats.FILE_LIST_FORMAT will be the format type. This format consists of an array of File objects, each of which contains a nativePath property. The nativePath property tells you the exact path on your hard drive of the file being dragged.
You accept the drop in the exact same way as DragManager, with the acceptDragDrop() function of the NativeDragManager, passing it the drop target.
You will handle the drop in the handleDrop() method in a very similar way. When the drop occurs, you will retrieve the data being dragged. To retrieve this data from the clipboard, you will use the clipboard’s getData() method, which mirrors the method dataForFormat() of the dragSource(). You pass the desired format into this method, in this case ClipboardFormats.FILE_LIST_FORMAT, and the method returns the data cast as a generic object. When using the ClipboardFormats.FILE_LIST_FORMAT format specifically, the data returned from the clipboard is actually an array of File objects. In this example, you only care about the first object in the array and set the source of img1 (a Flex Image instance) to the nativePath of the image dragged into the application.
)
Figure 7 An image dropped in an application shows a full-size version.
The NativeDragManager handles incoming and outgoing drag-and-drop operations by using the system clipboard. As explained in the previous chapter, the clipboard is able to handle several different format types such as Bitmaps, Files, Text, URL strings, and Serialized Objects.
There are security measures that protect data stored on the clipboard due to a dragging operation. Dragged data is only allowed to be retrieved from within the NativeDragEvent handlers. This helps protect your sensitive data from being accessed in unexpected ways. A simple example of this can be seen by placing a dragOver event listener on any component in your application.
Listing 6.
protected function handleDragOver( event:DragEvent ):void {
var temp : Object = Clipboard.generalClipboard.getData(
ClipboardFormats.FILE_LIST_FORMAT );
//temp returns null even though it has data
}
This function is not a NativeDragEvent handler, so the attempt to access the Clipboard manually will return null and not the data you intended.