We love choice

Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://fxr.groups.adobe.com.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
«
»

ActionScript, CSS, Flex 2, How to, Skin

How To Remove the “Black Line” from a Tree Control (Drag and Drop Enabled)

Andrei Ionescu | 08.02.08 | 8 Comments

Google Buzz

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.

Share and Enjoy:
  • Twitter
  • Google Buzz
  • LinkedIn
  • Google Bookmarks
  • del.icio.us
  • Digg
  • Sphinn
  • blogmarks
  • Reddit
  • StumbleUpon
  • Facebook
  • DZone
  • FriendFeed
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Slashdot
  • MySpace
  • Add to favorites




Tags: , , , ,

This post was written by Andrei Ionescu

Views: 19667

related

8 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


«
»