Phantom scrolling on a Flex Tree

I found a Flex pearl:

After quite sometime investigating a problem related to the Tree component in Flex I found a nice and easy solution.

The problem:

In a Tree with custom drag and drop functionality and where some handlers would require a "preventDefault()" call on the triggered event, after a drop of an item in the Tree with enough items to show a vertical scroll bar the Tree would scroll responding to the mouse move even after the drag action was completed.

The solution:

found at http://www.boxertech.com/blog/post/Flex3-Uncontrolled-Auto-Scroll-after-DragDrop.aspx

Basically the Tree's default dragDropHandler, and I believe all list based components with drag & drop functionality, will not reset the drag scrolling if the default behaviour of the event was prevented.

A quick override of the default method to fix the problem. Simply extend Tree if you haven't done so already.

Example:

override protected function dragDropHandler( event : DragEvent ) : void

{

event.target.mx_internal::lastDragEvent = null;

event.target.mx_internal::resetDragScrolling();

if( event.isDefaultPrevented() )

{

return;

}

super.dragDropHandler( event );

}

Thanks to the author of the WILK blog, though of help propagating the solution would be nice.

Hope it helps people find the solution faster than me ;)

Using default css

Many times I have encountered the need of customizing skins using the default images and cursors Flex has in it's Assets.swf file.

I just wanted to put a out there for people searching for a quick implementation and for those who never used the default assets of Flex.

It's fairly simple... there are a few ways of embedding an asset to your application or component, I like using a variable class statement.

Like this:

[Bindable]

[Embed(source='Assets.swf', symbol='mx.skins.cursor.HBoxDivider')]

private var doubleArrowCursor : Class;

This will embed the cursor used for the HBoxDivider that shows upon "rollover" on the horizontal edge.

You would use it for example like this:

override protected function rollOverHandler( event : MouseEvent ) : void

{

super.rollOverHandler( event );

cursorManager.setCursor( doubleArrowCursor );

}

override protected function rollOutHandler( event : MouseEvent ) : void

{

super.rollOutHandler( event );

cursorManager.removeAllCursors();

}

The overrides above assume that you are extending a class that contains the methods "rollOverHandler" and "rollOutHandler", obviously if you're not you'd have to simple remove the "override" keywords and add listeners for "rollOver" and "rollOut" into your component.

Lots of other assets are available, pretty much everything that you see on a Flex application without skinning. To find what you need open the folder you've installed Flex or Flash Builder and navigate to the SDK folder you use then "/frameworks/projects/framework/assets", there you will find the .FLA simple open it and explore the assets and look for the symbols, they are everything you will need.

Path Example: { installation folder }\sdks\4.5.1\frameworks\projects\framework\assets

Hope it helps someone out there trying for the first time to use Flex included assets.