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

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

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…

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

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.

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

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.

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

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

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.

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.

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

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.

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.

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.

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.

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

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.

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

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.

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.

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

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.

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

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/

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?

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/

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/