In our 360 Flex itemRenderer talk, Ryan showed an example of building a performant itemRenderer. He built an editable star rating itemRenderer that looks similar to what you would see on the netflix website.
In a sample use case, he showed an application that would display several hundred itemRenderers using this ‘StarRating’ itemRenderer.
Ryan showed two different implementations for the same resulting application. In the first implementation, the itemRenderer extending the HBox class. Since the HBox already lays out children for you, the itemRenderer only needed to create and add children to the container. In the second implementation, the itemRenderer extended UIComponent. For this itemRenderer, you needed to do your own measurement and placement of the children. Its a little more work, but, in the end, the itemRenderer built on top of UIComponent was much more performant. In this use case which only included 5 children in the itemRenderer, you saved about 25% on the startup time.
Containers in Flex are pretty heavy weight. They include logic for scrolling, placement of children and a lot of measure code. Therefore, if you are worried about performance when you are displaying data, you should base itemRenderers off of UIComponent instead.
When basing an itemRenderer off of UIComponent, remember to do the following:
1) implement IDataRenderer
2) implement IDropInListItemRenderer and IListItemRenderer if you want to reuse this itemRenderer in multiple columns
3) create and add your children in the createChildren method.
4) define the sizing of your itemRenderer and its children in the measure() method.
5) define the placement of your itemRenderer’s children in the updateDisplayList() method.
For examples on how to do this, download the sample files from our talk here: StarRating.zip
Description of Sample Files:
RatingExample5.mxml – Main application using an itemRenderer based off of HBox
RatingExample6.mxml – Main application using an itemRenderer based off of UIComponent
StarRatingRenderer5.as -ItemRenderer based off of HBox
StarRatingRenderer6.as – ItemRenderer based off of UIComponent