Question

I have found several tutorials regarding CellRenderer that will change an entire list or selected item, but Im not all that good with AS3 yet and need some help. I am loading a userlist from an xml file. Everything loads fine and well, but what Im looking to do is actually colorize it by the group.

Again, it loads to the list just fine, what I am looking to do is in the loop that adds them from the xml file, if its admin make it red font, green font for mod, black for member.

Any help please?

Answer 1

There are couple of caveats to be aware of:

1. If you’re planning to use a font format, also need to set the renderer style embedFonts to true
2. Since you want to set styles for individual cells, first you need to wait for the list to be populate (finish it’s internal data setup part of the component’s lifecycle). This can be forced by calling drawNow() or invalidate()
3. Finally, in the render handler access individual cell renderers via the itemToCellRender() method to set the styles.

Here’s a basic example(and imagine a,b,c as admin,mod,member):

//in a setup function
{
//some dummy data
            var data:XML = <users>
                            <user name="user 1" group="a" />
                            <user name="user 2" group="a" />
                            <user name="user 3" group="a" />
                            <user name="user 4" group="b" />
                            <user name="user 5" group="b" />
                            <user name="user 6" group="b" />
                            <user name="user 7" group="c" />
                            <user name="user 8" group="c" />
                            <user name="user 9" group="c" />
                           </users>
            //create a list
            var list:List = addChild(new List()) as List;
            list.setSize(600,400);
            list.move(0,400);
            //setup a font AND set embefFonts to true
            list.setRendererStyle("textFormat",new TextFormat("Siemens Sans SC Black",11,0xFF9900));
            list.setRendererStyle("embedFonts",true);
            //populate list
            for(var i:int = 0 ; i < data.user.length(); i++) list.addItem({label:String(data.user[i].@name),group:String(data.user[i].@group)});
            list.invalidate();//tell list to refresh itself
            list.addEventListener(Event.RENDER,listUpdated);//listen for the refresh
}
        //after the list refreshed
        private function listUpdated(event:Event):void{
            //setup text formats
            var formats:Dictionary = new Dictionary();
            formats["a"] = new TextFormat("Siemens Sans SC Black",11,0x990000); 
            formats["b"] = new TextFormat("Siemens Sans SC Black",11,0x009900); 
            formats["c"] = new TextFormat("Siemens Sans SC Black",11,0x000099);

            var list:List = List(event.currentTarget);
            for(var i:int = 0 ; i < list.dataProvider.length; i++) {
                var item:Object = list.getItemAt(i);
                var cr:CellRenderer = CellRenderer(list.itemToCellRenderer(item));//get the individual cell renderers
                cr.setStyle("textFormat",formats[item.group]); //set styles per cell
            }
            list.removeEventListener(Event.RENDER,listUpdated);//clear listener
        }