programmatically skinng the roll over idicator of a flex list component

Question

Does anybody know how to add custom rolloveridicatorskins to a flex 3 list component? it doesn't have the rolloveridicatorskin in the css.

Answer 1

If you just want to change the background and text colors of the items displayed, the ListBase class defines the following styles:

• rollOverColor
  
  • The color of the background of a renderer when the user rolls over it.
  • The default value is 0xEEFEE6.
• textRollOverColor
  • The color of the text of a renderer when the user rolls over a it.
  • The default value is 0x2B333C.

So something like:

<mx:List rollOverColor="#FF0000" textRollOverColor="#FFFF00"/>

Will give you yellow text over red background(!) when you move the mouse over an item.

Answer 2

Here is the code.

package 
    {
        import flash.display.Graphics;
        import flash.display.Sprite;
        import flash.filters.DropShadowFilter;

        import mx.controls.List;
        import mx.controls.listClasses.IListItemRenderer;
        import mx.core.ClassFactory;


        public class friendList extends List
        {
            private var dropShadow:DropShadowFilter = new DropShadowFilter(2,117,0x000000,0.4);
            private var filtersArray:Array = new Array(dropShadow); 

           override protected function drawSelectionIndicator(indicator:Sprite, x:Number,
               y:Number, width:Number, height:Number, color:uint,
               itemRenderer:IListItemRenderer):void

           {

              var g:Graphics = Sprite(indicator).graphics;
              g.clear();
              g.beginFill(0x000000, 0.5);
              g.lineStyle(2,0xffffff,0.5);
              g.drawRoundRect(0, 0, width-2, height-2, 6);
              g.endFill();

              indicator.x = x;
              indicator.y = y;   
              indicator.filters = filtersArray;
           }
           override protected function drawHighlightIndicator(
                                    indicator:Sprite, x:Number, y:Number,
                                    width:Number, height:Number, color:uint,
                                    itemRenderer:IListItemRenderer):void
            {
                var g:Graphics = Sprite(indicator).graphics;
                g.clear();
                g.beginFill(0x163e76, 0.5);
                g.lineStyle(2,0xffffff,0.5);
                g.drawRoundRect(0, 0, width-2, height-2, 6);
                g.endFill();

                indicator.x = x;
                indicator.y = y;
                indicator.filters = filtersArray;
            }
       }
    }