Itemrenderer - loading and displaying thumbnails with a custom loader

Chris's Avatar


27 Jul, 2012 06:41 PM


I'm stuck with this...
I'm getting a list of VOs from a server, each with an url to lad a thumbnail, which should be displayed in an itemrenderer. I need to use a custom loader, because I cache the images on the disk (it's a mobile app).

What I've tried:
- loading the bitmaps via a service and store them in the VO, so the itemrenderer updates itself automatically. But this leads to problems - there may be 200 VOs around, which would be to much on the memory. And if another vo needs the same thumb, and as VOs are passed around, it makes no sense to store the thumb in each of them. - I've tried the "flex-way" - I extended the ContentCache to make a custom loader. But I need access to the framework to dispatch error events and such. Maybe injecting the Loader into the itemrenderer? Mediating the itemrenderer? I'm not sure if this is a good idea again regarding performance. And everyone suggests to not touch itemrenderers ;) - A centralized thumbcache, to get the images as needed; listening for events on the mediator of the view. But how to access the itemrenderer to set the image? The Image is not part of the VO...

Thanks a lot :)

  1. 1 Posted by neil on 28 Jul, 2012 06:31 PM

    neil's Avatar

    Well, perhaps you could set up a Binding class which holds a reference to the VO and the loader. It listens to the loader, populates the VO and then deposes itself.
    Is that the problem, getting the Image into the VO?

  2. 2 Posted by Chris on 29 Jul, 2012 05:17 AM

    Chris's Avatar

    Hello neil,

    No, that's not the problem.
    The problem is, that there may be hundreds of VOs around, and due to performance I don't want to store the thumb in them.
    I just don't know what is the best way to get the thumb into the itemrenderer - without touching the VO.

  3. Support Staff 3 Posted by Ondina D.F. on 29 Jul, 2012 12:50 PM

    Ondina D.F.'s Avatar

    Hey Chris,

    I took a look at Mihai Corlan’s example:

    where he uses ContentCache, which I think is what you need.

    Let’s take his example as a base for our discussion.

    In his View, VirtualLayout, there is a SectionList, which has an ArrayCollection as data provider. SectionList uses a custom ItemRenderer: TileItemRenderer, which makes use of ContentCache.

    Now, if the View, VirtualLayout, would be mediated through VirtualLayoutMediator, you could let it pass the ArrayCollection to the View, after receiving it from a Model or Service( ask for data by dispatching an event, that triggers a command, that accesses a service etc).

    In VirtualLayout you’d have a method,” populateListWithData”, or something with a better name, where you’d set SectionList’s dataProvider to the ArrayCollection loaded by the service. The ItemRenderer would take care of loading the images according to the urls provided in that ArrayCollection.

    You don’t need hundreds of VO’s, you just provide the list with data as it needs it, ArrayCollection, IList, XMLList or whatever. You parse the data loaded by the Service to the appropriate format, let the Model manipulate it, if need be, and then pass it to the Mediator->View->List.

    You also don’t need to mediate the ItemRenderer. If you want to dispatch events from within your ItemRenderer, you can create a custom event, with bubbles set to true (!!), and VirtualLayoutMediator will be able to listen to it and relay it to other framework classes, if need be. Or you can let VirtualLayout listen for events dispatched by the ItemRenderer and redispatch them.

    So, let the VirtualLayout View take care of layout and rendering, through SectionList’s SectionTileListLayout and TileItemRenderer and let VirtualLayoutMediator be the link between your View and the rest of your application.

    Would this work for you?


  4. Support Staff 4 Posted by Ondina D.F. on 30 Jul, 2012 12:40 PM

    Ondina D.F.'s Avatar

    Second part of my answer that I couldn’t finish yesterday:

    You said that you extended the ContentCache. So, you could use the ContentCache as a Service instead of having it inside the ItemRenderer.

    A Model would build the collection for the List with the needed images (from cache or new ones) and other info, and when you’re refreshing the List’s dataProvider (with the payload of the event dispatched by the Model->Mediator->View->List), the ItemRenderer would read the values of its “data” property and set the images and everything else. Without trying it out, I can’t say how well it would perform (in a mobile application) refreshing the List’s dataProvider this way
    (ItemRenderer->event->View->event->Mediator-event->Command->Services->event->Command->Model-event->Mediator->View->List->dataProvider->Itemrenderer) on every scrollPositionChanged event, or if having ContentCache inside the ItemRenderer would be easier to mange and better for performance….

    As a side note, you can set the ItemRenderer’s data property to a VO, but I guess you knew this already, and you also said, you didn’t want to store the images in a VO.

    Then, I think, you could build your collection in the Model, when the Services (for images and other data) have finished their jobs, having 2 objects:
    the loaded or cached images and the VOs (containing only info like label, name etc) :
    yourCollection[imagesVOS], yourCollection[thumbnails], and the ItemRenderer will read the data accordingly. I hope it’s clear what I’m trying to say.

    But I need access to the framework to dispatch error events and such

    Do you mean from the class extending ContentCache? If so, you can provide that class with the shared eventDispatcher – it’s all you need to be able to communicate with other framework classes.

    Maybe a PresentationModel pattern would serve you better than the Mediator one, but you’ll have to investigate that on your own.

  5. Ondina D.F. closed this discussion on 25 Aug, 2012 02:41 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac