flex 4: mx|Tree how can i disable hover and selection colors?

Question

this is a 2nd question related to my first question at:

Flex 4: mx|tree - how can i disable items selection?

I want to disable the hover and selection colors so when a user selects an item it's background won't change color. how is that possible?

update

i do not want to choose the selection and hover colors. the background contains an image so it won't be useful. i need to completely disable the colors.

another update

i tried to override the Tree class but with no luck.

this is the class that overrides the tree Class:

package components.popups.WelcomeBack {
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.Tree;

/**
 * @author ufk
 */
public class TreeNoSelection extends Tree {
    
     protected override function drawItem(item:IListItemRenderer,
                            selected:Boolean = false,
                            highlighted:Boolean = false,
                            caret:Boolean = false,
                            transition:Boolean = false):void
    {
        super.drawItem(item, false, false, false, transition);  
    }

}
    

}

and this is my actual tree component:

<?xml version="1.0" encoding="utf-8"?>
<WelcomeBack:TreeNoSelection xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"
     xmlns:WelcomeBack="components.popups.WelcomeBack.*" folderClosedIcon="{null}" defaultLeafIcon="{null}"
     folderOpenIcon="{null}" 
     showRoot="false"  
            allowMultipleSelection="false" allowDragSelection="false" labelField="@label">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import ItemRenderer.WelcomeBackTreeItemRenderer;
        private var _themeLibrary:Object;
        
        public function get themeLibrary():Object {
            return this._themeLibrary;
        }
        
        public function set themeLibrary(tl:Object):void {
            this._themeLibrary=tl;
            var cf:ClassFactory = new ClassFactory();
            cf.generator = ItemRenderer.WelcomeBackTreeItemRenderer;
            cf.properties = {
                _themeLibrary:this._themeLibrary
            };
            this.itemRenderer=cf;
        }
        
    ]]>
</fx:Script>

</WelcomeBack:TreeNoSelection>

thanks

bug-a-lot bug-a-lot · Accepted Answer · 2011-02-16T14:59:25

I've got good news and bad news. The good news is that it's really easy. The bad news is that you need to subclass the Tree.

package custom
{
    import mx.controls.Tree;
    import mx.controls.listClasses.IListItemRenderer;

    public class CustomTree extends Tree
    {
         protected override function drawItem(item:IListItemRenderer,
                                selected:Boolean = false,
                                highlighted:Boolean = false,
                                caret:Boolean = false,
                                transition:Boolean = false):void
        {
            super.drawItem(item, false, false, false, transition);  
        }

    }
}

So what happens here is that we intercept the drawItem method and call the method on the superclass fooling it into thinking there's nothing selected, highlighted or "careted". The caret is for when you change selection by keyboard. Not sure what the transition parameter is for, you can send it as always false if there're still some effects bothering you.

Edit

After taking a look at the related question, I found out that the root of the problem is the item renderer using the new spark architecture, which means the renderers are responsible with reacting to special states (selected, highlighted, show caret). So when using the spark item renderer there are other 3 functions that also need overriding:

public class CustomTree extends Tree
{
    public override function isItemShowingCaret(data:Object):Boolean
    {
        return false;
    }

    public override function isItemHighlighted(data:Object):Boolean
    {
        return false;
    }

    public override function isItemSelected(data:Object):Boolean
    {
        return false;
    }

    protected override function drawItem(item:IListItemRenderer,
                                         selected:Boolean = false,
                                         highlighted:Boolean = false,
                                         caret:Boolean = false,
                                         transition:Boolean = false):void
    {
        super.drawItem(item, false, false, false, transition);  
    }
}

Bonus - override isItemSelectable to prevent selection when clicking on an item (you can still select them via keyboard, although there will be no visual hint of that):

public override function isItemSelectable(data:Object):Boolean
{
     return false;
}

flex 4: mx|Tree how can i disable hover and selection colors?

update

another update

3 Answers