Search Flex Samples

The Flex and Adobe AIR DragManagers

Flex and AIR have released its third public beta. You can download it on http://labs.adobe.com. If you have been using Flex with AIR, you might have noticed some obvious differences in your AIR application which used the Flex DragManager. In this latest release, a change has been made where any AIR application that is parented by a tag now uses the AIR NativeDragManager instead of the Flex DragManager. If your AIR application is parented by the tag, then, the Flex DragManager is still being used. The purpose for this change was to allow AIR Applications to be able to drag items in and out of AIR Windows automatically. The NativeDragManager allows this.

How do you know which DragManager you are running? The easiest way to distinguish which DragManager you are using is by looking at the default feedback cursors. For the Flex DragManager, when you were dragging an item over an area that was not a valid drop target, you would see a red circle icon with an “x” inside. When you are using the AIR DragManager and you drag an item over an invalid target, you will see an icon with a black circle and diagonal line through it.

Besides the cursors, you will notice some differences in the way that drag events are triggered. Here is a summary of the differences:

1. DragEnter fires only once for each target in AIR. In a Flex web application, the dragEnter fires multiple times over one target.

2. DragOver fires for all targets even if one is not a valid dropTarget. In a Flex web application, the dragOver fired only when you were over a target that you could drop an item on.

Another issue that I have seen come up a few times for people using the NativeDragManager in their Flex/AIR Applications is one where their use of mouseX and mouseY for a target no longer works. For example, in your dragDrop event handler, you might have had some code like:

public function doDragDrop(event:DragEvent) : void
{
event.dragInitiator.x = event.target.mouseX;
event.dragInitiator.y = event.target.mouseY;
}

This used to work with the Flex DragManager, however, the AIR NativeDragManager doesn’t seem to update your target’s mouseX and mouseY properties correctly. I’m not sure of the details as to why this difference occurs, however, according to the AIR team, this mouseX and mouseY property shouldn’t update. For the above example, you should be using the event’s localX and localY properties instead. So, the above code would be changed to:

public function doDragDrop(event:DragEvent) : void
{
event.dragInitiator.x = event.localX;
event.dragInitiator.y = event.localY;
}

This seems to work since localX and localY are updated for a dragDrop event.

Some developers have expressed wanting to use the Flex DragManager instead of the AIR NativeDragManager when using a WindowedApplication. This wasn’t possible as of the Flex 3 Beta 3 build which includes Flex SDK 189825. However, a change was made later to allow for this. The change is described in SDK bug:SDK-1 3983. In this bug, Jason Szeto has provided an example (attached to the bug) of how to use the Flex DragManager in an AIR WindowedApplication. You will only be able to use the workaround as of Flex SDK build 191577, however.

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples