Showing posts with label ItemRenderer. Show all posts
Showing posts with label ItemRenderer. Show all posts

Wednesday, June 2, 2010

Flex Renderer Recycling

Thought it would be useful to just mention about renderer recycling 'feature' that is inherent in the Flex UI control handling.

Often this could burn your time if not handled properly at the time of building your application.

The Problem:
When you scroll through a list control which has a huge list of items and is bound with an itemRenderer, the items in the list control tend to shift its positions randomly, as you scroll.

The Reason:
Flex by default tries to reuse the item renderers. In other words lets say your list control has about 40 items. It is not necessary that Flex would generate 40 itemRenderers to display the list.
Instead, based on the display area available, it would generate a few itemRenderers, just enough to handle the current display area and probably a few more for buffering.

As the users scroll through the same itemRenderers get reused and the contents that need to be displayed, in other words the next item data will be rewritten onto that itemRenderer.

So in total the creationComplete event on the item renderer would just fire once and it is not necessary that it would fire for every item added to the list again because of this reusing concept.





The Solution:
Override the set data function on your itemRenderer which would give you access to the actual item that is being bound to the itemRenderer at that point in time, and in this function you could take care of binding the item the way you want.

The set data is bound to get called many times during the process of creation/change resize etc...
For an example of overcoming the renderer recycling issue and how to override the set data function, check the example here.

Flex TileList ItemRenderer with Drag and Drop Sample

Moving on to Flex 4 since last month, I think it is time to publish a few of the small things I had done in Flex 3.

This one is a simple but nice - drag and drop example from one of the modules I had built. It is not the entire application of course; just a stripped down to basics version that just explains a few

The example handles issues like renderer recycling and explains how a custom item renderer can be used which in turn could have its own set of child controls.

The source for this can be found here and a live example here.

P.S.: When viewing the demo, just click on Open if your browser prompts you about handling the file.