Application - Source

When you use an itemRenderer in your TileList, as well with any of the listBase components, it reuses renderers, there are tons and tons of posts a lot from a colleague Ben Clinkenbeard on renderer issues with data, and one of the things I do normally is override the data setter in the renderer, and bind to a value object…

The problem I recently came across using the TileList, was that we were using the TileList to display a list of products, and there could be a lot… hundrends… when you use the TileList, and you scroll, it reuses the renderer for efficiency… 

I liked that it was fairly efficient and wanted to keep it that way… some of the other options would be to use a repeater, but that’s not a very good option anyway… especially if you are going to filter data… 

Because I was binding to a vo, (or the data object) in my renderer, when you scroll the data setter gets called over and over, and the renderer pretty much stays the same, and it just changes the data…. so the tilelist really just fakes you out by putting a scroll bar there… at least somewhat anyway…

so when you scroll, and you are binding to the source of the image like so: <mx:Image source=”{data.imageURL}”/>

the imageURL constantly gets changed when you scroll… so when you scroll it causes the image to be redownloaded… 

I want the image to be downloaded only ONCE! so what I’m doing now just for this project (there probably is no need to do this if your tilelist all fits on one page, or has pagination) is using a ImageMap class, that is dynamic and when the image comeback for the first time it is stored in that class, and whenever the data changes in the renderer, it checks to see in that file if it has the image it needs, and then uses that one rather than downloading another one, and it does it fairly efficiently.  Check out the example app, you can right click to view source.

ApplicationSource