360Flex Sample: Building a Performant itemRenderer by extending UIComponent

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.

starRenderer

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

2 responses

  1. hey jlafferty
    I’m working on the random walking component, I’m using the same
    itemrenderer given by the open source component but using using
    a different data [xml] where the count goes above the limit
    Everything is its desired but problem is the display goes beyond the container. I need a scroll to show.
    How do I add a custom scroll to the random walking component.
    Please put some light on this.

  2. Hi,
    Thanks for upload a nice post..it has very helpfull to me to make my custom item renderer.
    1 query:
    Where to set width of Text/Label Object when creating text renderer using UIcomponent.
    Is it updatedisplaylist or measure?

    Thanks
    Sachin Dev Tripathi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: