Flex Pasta

If you’ve dealt with item renderers in any kind of complexity, you’ve probably run into scroll bars gone wild.  Problems usually start happening when you have a list based component that needs to scroll, and each item may have a variable row height.  Painful symptoms of scroll bars gone wild include: text being cut off, scrolling becoming choppy, or lots of inner scroll bars appearing and disappearing.  A really easy way to run into problems with item renderers is by using images that are loaded by a url at runtime.  Take a look at the following simple example that uses mx:List to show a description next to a dynamic image.  Try scrolling with the down arrows and scroll thumb to see the less than desirable results(note there are 4 items in the list).

There are many ways to tackle out of control item renderers.  In this case, it’s a Repeater For the Win!  Take a look at the identical application using an mx:Repeater tag instead of mx:List.  The scrolling is smooth and the down arrow works!

The draw back to using the mx:Repeater tag is that there is no item recycling.  Meaning, unlike using an item Render, which will be reused when I scroll, the mx:Repeater will draw everything at once.  For small lists, using a repeater tag should be ok, but for large data sets, a repeater tag could cause memory problems.   Also note, one other benefit to using the repeater tag in this instance is that the images are loading once.  In the first example, the item renderers are being recycled as scrolling occurs, this means the images are reloaded everytime they appear on the screen.