Adobe Flex Custom Item Renderers vs WebKit HTML Renderer

Adobe Flex user interface controls provide a great deal of power for creating beautiful UIs. Of these controls, the DataGrid control can be used to display a formatted table of data. Most often we would want to display images or something other than just plain text; to do this requires the use of custom item renderers.

Item renderers are not mapped to the dataprovider in a one-to-one fashion, meaning that they can be used to display different kinds of data from the dataprovider. Although this might be a simple and impressive way to display data, you might run into performance and memory issues if used inappropriately. The choice of when to use custom item renderers depends on the size of your data, i.e., the number of items that are going to be displayed.

Memory profiling can be used to check the amount of memory that is being used to display the dataset. You will probably notice a sharp rise in memory usage when more widgets are used to encapsulate an item or when the number of items being rendered is large. This is because when the renderer is updated the components might still be holding reference to the old values from items that were being rendered before and as a result there might be more number of renderer objects that are created than that are seen visible at the current instance of time.

A better way would be to use the open source WebKit HTML renderer included in Adobe AIR runtime environment. The AIR HTMLLoader class, wrapped in mx:HTML component, provides methods and events for controlling how the content is loaded and rendered. The mx:HTML component can be used with other Flex containers to render items. The component also provides a way to use JavaScript to carry out event driven operations. The code sample below shows how ActionScript and Javascript objects listen for events dispatched by both AIR and JavaScript objects.

Code sample:
Adobe Flex Custom Renders vs Webkit HTML Renderer

The above code renders a collection of image files as thumbnail views and displays the image file path when a double click event occurs on any of the images.