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: 6876
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.
I actually like the black line to show when dragging, but it should go away when the drop is completed. However, sometimes the black line remains displayed after an item is dropped on a DataGrid, and it just looks bad. To resolve a “sticky” black line, just call
dataGridId.hideDropFeedback(event);at the end of your drop handler function.Hello Eric! Thanks for the tip!
Thanks for the help: Andrei, Aaron and Eric. I had a similar problem which I sorted out after reading this post (well, not completely though). I used Eric’s solution of calling
hideFeedback(event)The “dark sticky black” line disappears after the “drop” is complete. However, if I use the grid inside a small panel that is small enough to introduce a vertical scroll on the grid, the black line shows up once again inspite of callinghideFeedback(event). I tried to useclearIndicators()but in vain. Finally, I used the solution given by Aaron to usemx.skins.ProgrammaticSkin. I am using Flex SDK 3.0. It seems like a bug. Any clues?Has anyone tried changing the location of this dropindicator?
Hi, does anyone know how a tree displays the black line in the middle of a folder when its empty?, i want to make a tree where you can put the dragged Item after,before or inside a node, and all the examples that i see use the selectedItem and highlight the node, but i want to use the black line wich is more specific
Thanks for the help