Air Drag And Drop
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Air Drag And Drop

  • 11,061 views
Uploaded on

An overview of similarities, use cases and differences between drag and drop in Adobe AIR and Adobe Flex.

An overview of similarities, use cases and differences between drag and drop in Adobe AIR and Adobe Flex.

More in: Sports , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,061
On Slideshare
11,010
From Embeds
51
Number of Embeds
1

Actions

Shares
Downloads
83
Comments
0
Likes
5

Embeds 51

http://www.slideshare.net 51

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Unraveling the hassle of Drag and Drop in AIR Michael Labriola Digital Primates
  • 2. Who are you?
    • Michael Labriola
    • Senior Consultant at Digital Primates
    • Flex Geek
    • Component Developer
    • Flex Team Mentor
  • 3. 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
  • 4. 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…
  • 5. 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
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. 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.
  • 10. 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.
  • 11. 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.
  • 12. 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.
  • 13. 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.
  • 14. Example 1
    • Dragging between two simple lists
    • dragEnabled, dropEnabled, and dragMoveEnabled
  • 15. 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
  • 16. 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.
  • 17. 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.
  • 18. dataForFormat()
    • The data inside dragSource is retrieved by using the dataForFormat() function of the dragSource, which accepts a string as an argument.
  • 19. Example 2
    • Dragging between a list and a Label
    • dragEnter and dragDrop events
  • 20. 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
  • 21. 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.
  • 22. Example 3
    • Dragging between a label and a list
    • dragEnter and dragDrop events. dragSource and DragManager.
  • 23. 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
  • 24. 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.
  • 25. 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.
  • 26. 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.
  • 27. 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.
  • 28. 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
  • 29. 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.
  • 30. 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
  • 31. 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.
  • 32. Example 4
    • Dragging between a desktop and app
    • nativeDragEnter and nativeDragDrop events. dragSource versus clipboard.
  • 33. Outbound
    • Similar differences exist when putting data into the clipboard to send it to the desktop.
    • Remember, the clipboard is always the transfer mechanism
  • 34. Example 5
    • Dragging between an app and the desktop
    • nativeDragEnter and nativeDragDrop events. dragSource versus clipboard.
  • 35. The Truth
    • In AIR NativeDragManager implements the DragManager functionality.
    • This can be problematic as NativeDragManager isn’t as fully featured
  • 36. The Way
    • Andrew Westberg – Flex Junk
    • http://www.flexjunk.com/2008/04/08/using-both-native-and-flex-dragmanager-in-air-10/
  • 37. Q & A
    • Seriously? You must have some questions by now?
  • 38. 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/