Today I found a way to remove the “black line” of a tree which has drag and drop functionality enabled. I did that by skinning. Searching through the help I’ve been crossing over a property named “dropIndicatorSkin” where (as its name is suggesting) the drop line is drawn. So I just re-skinned it.
Here is the Tree class (from the application’s style sheet):
Tree { fontWeight: normal; fontSize: 11pt; border-style: solid; color: #555555; backgroundColor: #fcfcfc; dropIndicatorSkin: ClassReference("path.to.your.custom.skin.ListDropIndicator"); }
Please notice the
dropIndicatorSkin: ClassReference("path.to.your.custom.skin.ListDropIndicator");
property and how a custom skin is set.
Bellow is our new skin class:
package path.to.your.custom.skin { import flash.display.Graphics; import mx.skins.ProgrammaticSkin; /** * The skin for the drop indicator of a list-based control. */ public class ListDropIndicator extends ProgrammaticSkin { //-------------------------------------------------------------------------- // // Constructor // //-------------------------------------------------------------------------- /** * Constructor. */ public function ListDropIndicator() { super(); } //-------------------------------------------------------------------------- // // Overridden methods // //-------------------------------------------------------------------------- /** * @private */ override protected function updateDisplayList(w:Number, h:Number):void { super.updateDisplayList(w, h); var g:Graphics = graphics; g.clear(); g.beginFill(0xa1bde2, 0.5); g.drawRect(-5, -1, w, 23); } } }
I just copied the skin found at C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\skins\halo\ListDropIndicator.as to the above path specified at the package path, removed the “black line” and did draw a rectangle instead of that line.
This is it. Although at first sight it seems a difficult task it is not.
Tags: ActionScript, css, re-skin, Skin, styles
This post was written by Andrei Ionescu
Views: 2171
Articles
Alternatively, if all you really want to do is remove the line, you can set the dropIndicatorSkin to “mx.skins.ProgrammaticSkin”, which is the superclass of the default, and doesn’t display anything.
Yes! You’re right Aaron. Didn’t cross my mind.