05.19.08
Flex Item Renderers
An item renderer in flex is a relatively simple concept, basically for every item in a collection, here’s a set of components that can draw this data to some kind of human readable format that’s somewhat pleasing to the eye. Now the difficultly that I ran into was that I tried to get to smart for myself. I had a dataProvider that contained a tree of UIComponents that I wanted to manage in a list component, or more specifically a TileList. These components were generated by another in house library and I very much wanted to keep them in tack and not redraw everything out every time a change happened to the list (such as changing the number of columns from 4 to 8). Easy I thought, the behavior that makes the most sense is when the data provider is created it associates the item renderer with that index in the data provider so I did something like this in my item renderer:
override public function set data(value:Object):void
{
_data = value as MyCustomContent
//...
}
private function init():void{
this.addChild(_data);
}
So what’s wrong with this…
Data item renderers were not meant to work this way. They very much rely on a UIComponent taking a temporary piece of data and having the component decide how to dynamically interprete this data. Many list componets are very “green” and recycle item renderers accross cell positions. While my above solution worked fine initially, when I started changing the number of columns all my data appeared in the wrong order. The List was shuffling item renderers between cells and when I associated content as a member variable in the renderer it was traveling to where ever the list decided to recycle an item renderer instead of having it travel with the index of the data provider. What makes me even madder at myself is if I had bothered to pay more attention to the documentation I’m sure I read that section about 20 times without realising what I was doing.
So moral of the story, always pay attention to what you are reading and make sure you properly update all your visual content each time an item renderer changes your data variable, don’t assume the same item renderer will use the same data each time it is rendered.