Flex Tree Visit Indicators

Question

How do I indicate the visit history on a flex tree component? I want to highlight the clicked/visited nodes to a different color and will not change after that, so that all the visited nodes will be one color.

I tried adding an attribute to the underlying XML by

var selected:XML=app.treeObj.selectedItem as XML;
if(!selected.hasOwnProperty("visited"))
{
    selected.@visited = "true";

}

and have an itemrenderer for the tree as below.

public class CustomTreeItemRenderer extends TreeItemRenderer
    {
        public function CustomTreeItemRenderer()
        {
            super();
        }

        override public function set data(value:Object):void
        {
            if(value !=null)
            {

                super.data = value;
                if(value.@visited=="true")
                {
                    setStyle("color", 0x000000);
                }

                invalidateDisplayList()

            }
        }

    }

This code does retain the new color, but it also changes the color of nodes which are not visited at all. What am I doing wrong here? Is there any better way to achieve this?

Vipin

Answer 1

In your set data, you need to set the style back to the original one if it's not been visited, otherwise when the renderer is recycled to an unvisited node, it retains the visited colour.

Try...

override public function set data(value:Object):void
    {
            if(value !=null)
            {

                    super.data = value;
                    if(value.@visited=="true")
                    {
                            setStyle("color", 0x000000);
                    } 
                    else 
                    {
                            setStyle("color", originalColor);
                    }

                    invalidateDisplayList()

            }
    }

Not the most efficient way of doing it (you'll be setting the color even if you don't need to, and setStyle is an expensive operation), but it'll work.