ItemRenderer TileList issues

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.


6 comments on this post.
  1. Erno:

    There is bug in your app. Your crossdomain.xml dont allow all users to access your images. To use bitmapdata to images you need to open that folder in crossdomain.xml ( I guess you know this )

    There is couple things what you should remember if you do it like this.
    If you save image bitmapdata to dictionary it increase flash memory usage. All image data stays in memory and dont go away until you close app.
    if you do it normal way ( binding url to Image source ) image goes to browser cache. So it doesn’t actually load that multiple times.
    If you check your example with httpFox (firefox plugin ) you see that image is loaded only once. Next time image comes from cache.

    Well memory usage is not big problem if you have small list and pictures are not big. But if you have long list and you scroll it trough, all images are in flash memory and browser use alot of memory.

  2. admin:

    please note, to develop locally and not use trustContent, you can add a config setting at this url. (just add the bin-debug folder to the allowed)

  3. admin:

    Yeah I figured my example would please people enough to trust that it works, I didn’t want to open up the crossdomain to everyone…

    You are absolutely right about memory usage and the images being stored in flash, and using up the memory, I do have cache shut off on my browser for development reasons… and so when i inspected it with “service capture” (from what it sounds its about the same as httpFox), i did see the images re downloading all the time…

    While it is expensive on memory it’s a little easier on the processor when scrolling… It really just depends on the target audience and if they have a system with enough memory… You bring and excellent point that I forgot to mention!

    great reply, thanks for the comments!

  4. Balu:

    Im also facing problem with TileList with renderer I have a itemrenderer where the custom component have a checkBox and when I try to select some of the items and when i scroll the selection is jumping from one item to another… Please provide me a solution to that

  5. van:

    Thanks for this article. It’s really good.
    I have the same problem when scrolling with custom ItemTreeRenderer with dataprovider from XML, not ItemListRenderer. My tree have custom images in tree nodes.They reload each time i drag the scroll bar. I don’t know how to use VO class like yours to have parent tree nodes. Do you have any solution for my problem?

  6. Josh Knopp:

    @Balu – I realize this is an older post, but if anyone stumbles across this page looking for help on the checkbox issue (like I did) check out for help. The example refers specifically to a DataGrid, but the same concept applies to a TileList with an itemRenderer that includes a Checkbox. Basically you just need something in your dataProvider to indicate whether a Checkbox is selected.

    Happy flexing!

Leave a comment