The Flex and Adobe AIR DragManagers

Happy 2008 to everyone. I haven’t written much here in a while since (like many other companies), Adobe and the Flex team took some time off for the holidays.

Anyways, in the last month, 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 <mx:WindowedApplication> tag now uses the AIR NativeDragManager instead of the Flex DragManager. If your AIR application is parented by the <mx:Application> 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.

2 responses

  1. Thanks for posting this. It helped me figure out a solution to my problem. I found that components that extend ListBase (e.g. List or Tree) don’t properly auto-scroll up/down in AIR projects. I discovered that the mouseY position isn’t getting updated in the dragScroll method – so, override it w/ lastDragEvent.localY and you’re good to go!

  2. FYI – I ended up just monkey-patching (or duck-punching if you prefer) ListBase so everything would get the fixed dragScroll and I wouldn’t have to create new or re-write already-extended classes.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: