Air Drag And Drop

Unraveling the hassle of Drag and Drop in AIR Michael Labriola Digital Primates

Who are you?
Michael Labriola
Senior Consultant at Digital Primates
Flex Geek
Component Developer
Flex 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:
DragManager
NativeDragManager
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 Junk
http://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 Specifically
http://blogs.digitalprimates.net/codeSlinger/
Andrew Westberg – Flex Junk
http://www.flexjunk.com/2008/04/08/using-both-native-and-flex-dragmanager-in-air-10/

Air Drag And Drop

by michael.labriola on Aug 20, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 51

Statistics

Air Drag And Drop — Presentation Transcript