Unraveling the hassle of

Drag and Drop

in AIR

Michael LabriolaDigital Primates

Who are you?

Michael LabriolaSenior Consultant at Digital Primates

Flex GeekComponent DeveloperFlex Team Mentor

What is this session about?

AIR provides the ability to drag and drop between objects in the same application, between applications and between the desktop and the operating system.

Understanding the nuances of doing so is the goal of this session

Standard Disclaimer

I am going to lie to you a lot…

There is much more detail than I can cover

Sometimes it is easier to reduce complexity when you start learning a concept and add later…

Two Main Classes

This session is going to talk about:

DragManagerNativeDragManager

Both are responsible for initiating, accepting and presenting feedback for drag and drop

DragManager

We will discuss DragManager first, then the differences between NativeDragManager and DragManager and then finally reveal… well you have to wait for that part.

DragManager

The DragManager is native to the Flex API and handles all the internal drag-and-drop actions in an application, but it has no effect outside of the application window.

Drag and Drop Support

All Flex components have some level of support for drag-and-drop operations.

On most, it is up to the developer to handle the specific user actions (such as mouse down, drag enter, and so on) and properly use the DragManager to handle them.

Vocabulary Lesson

Drag Initiator—The interactive object that begins the drag action and also dispatches the dragStart and dragComplete events.

Drag Proxy—The visual representation of the item being dragged that follows your cursor. Usually it is depicted as a faded silhouette of the object, but it can be customized by the user as well. DragManager can assign any InteractiveObject to be the proxy.

Vocab – Part II

Drop Target—A visual object where a dragged item can be dropped. The drop target makes the final decision on whether the type of object being dragged can be dropped at this location.

Drag and Drop Events

dragEnter—The event dispatched when an item is dragged over a possible drop target. As you will see, this event is often used with the DragManager.acceptDrop() method to grant an object permission to be dropped.

Events II

dragOver—The event dispatched repeatedly as the item is dragged over an interactive object.

dragExit—The event dispatched when the dragged item leaves an interactive object.

dragDrop—The event dispatched when the mouse is released over an eligible drop target. The event handler will be able to access the dropped data by using the event.dragSource object.

Events III

dragComplete—The event dispatched from the drag initiator when the drop is completed. This event allows you to gather feedback on the success of the drop as well as clean up data in the drag initiator.

Example 1

Dragging between two simple lists

dragEnabled, dropEnabled, and dragMoveEnabled

Handling Events

The fully automated process is a great quick way to move/copy data but it provides almost no control over the operation.

Further, it only works between List controls.

To manually implement this process, you handle the events yourself

Drag Source

Internally, DragManager keeps all the data being dragged in an instance of the DragSource class.

This DragSource instance contains one or more copies of the data in different formats.

Drag Source II

For example, the same data could be dragged as text, as an image, or perhaps as HTML.

When the dragged item is dropped, the instance of the DragSource class containing this data is available via the dragSource property of the DragEvent event.

dataForFormat()

The data inside dragSource is retrieved by using the dataForFormat() function of the dragSource, which accepts a string as an argument.

Example 2

Dragging between a list and a Label

dragEnter and dragDrop events

Buidling your own Source

The previous examples both rely upon a List control to start the drag process.

If you are using a non-list-based control or simply want more control, you can begin this process yourself and build your own dragSource

New DragSource

You handle these steps manually by listening for the mouseDown (or other mouse events) on the item being dragged and (mininally) dragEnter and dragDrop on the control receiving the drag.

In response to a mouse down, you create a new DragSource() instance and use a method named addData() to add the data being dragged.

Example 3

Dragging between a label and a list

dragEnter and dragDrop events. dragSource and DragManager.

Between the OS and AIR

Up to now, we have discussed drag and dropping that works in either Flex or AIR.

It is now time to discuss the basics of interacting with the operating system

OS Integration

When building an AIR application that allows users to drag items to and from the OS, you will need to use the NativeDragManager class

NativeDragManager handles the dragged items a bit differently.

Native Drag

It uses the computer’s clipboard to pass data between objects, rather than passing the data in a dragSource object.

Further, it imposes additional security restrictions as you are moving data in and out of an application.

Native Events

nativeDragEnter—The event dispatched when an item is dragged over a possible drop target. As you will see, this event is often used with the NativeDragManager.acceptDrop() method to grant an object permission to be dropped.

Events II

nativeDragOver—The event dispatched repeatedly as the item is dragged over an interactive object.

nativeDragExit—The event dispatched when the dragged item leaves an interactive object.

nativeDragDrop—The event dispatched when the mouse is released over an eligible drop target. The event handler will be able to access the dropped data by using the clipboard.

Events III

nativeDragComplete—The event dispatched from the drag initiator when the drop is completed. This event allows you to gather feedback on the success of the drop as well as clean up data in the drag initiator.

nativeDragUpdate—Used by the initiator to update its state during the various gestures

Differences

Unlike the component-level drag-and-drop operations, 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.

Differences

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

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.

Example 4

Dragging between a desktop and app

nativeDragEnter and nativeDragDrop events. dragSource versus clipboard.

Outbound

Similar differences exist when putting data into the clipboard to send it to the desktop.

Remember, the clipboard is always the transfer mechanism

Example 5

Dragging between an app and the desktop

nativeDragEnter and nativeDragDrop events. dragSource versus clipboard.

The Truth

In AIR NativeDragManager implements the DragManager functionality.

This can be problematic as NativeDragManager isn’t as fully featured

The Way

Andrew Westberg – Flex Junkhttp://www.flexjunk.com/2008/04/08/using-

both-native-and-flex-dragmanager-in-air-10/

Q & A

Seriously? You must have some questions by now?

Resources

Blog Aggregator (All of the Digital Primates)http://blogs.digitalprimates.net/

My Blog Specificallyhttp://blogs.digitalprimates.net/codeSlinger/

Andrew Westberg – Flex Junkhttp://www.flexjunk.com/2008/04/08/using-both-

native-and-flex-dragmanager-in-air-10/