Give us a call 203-379-0773
Check out our Angular Book Series.

Understanding Mobile itemRenderers

During the last Flextras Friday Lunch episode, I focused on mobile using mobile itemRenderers in Flex. I often like to write a blog post to accompany the episode and get the same data in a similar format.

What is an ItemRenderer?

An itemRenderer is just a Flex component in Flex. It is used to display data inside a list based class. The List will take care of creating as many itemRenderers it needs, and it will send in the data item from the list's dataProvider. The itemRenderer gets the data, and then decides how to display it.

The reason itemRenderers are a special breed of components is due to how the list based classes handle scrolling. If you have a dataProvider of 100 items, and only ten of them displayed, the List will only create 10 components. As you scroll it will pass new data into the renderers it already created. It is the itemRenderers responsibility to react to the data change; and keep its display up to date. This process of reusing itemRenderers is called renderer recycling.

ItemRenderers on Mobile

When building renderers in MXML, it is common to use binding to update the data being displayed. Unfortunately, this can cause performance concerns. I've solved a lot of memory issues w/ clients using our Flextras AutoCompleteComboBox just by teaching them how to rewrite their itemRenderers to not use binding. ( Hint: Listen to the dataChange event and change properties on your displayed values in the event handler).

When building for Mobile, performance is often a primary concern, especially when using Flex on Mobile which is not known for being light weight; it is important to try to do everything you can to optimize performance. When building itemRenderers for mobile, you should build in ActionScript and avoid any complications related to the Spark architecture.

One option for building mobile itemRenderers is to extend the UIComponent. This is, in essence, starting from scratch and you are responsible for setting everything up.

The LabelItemRenderer class

The Flex Framework provides a default itemRenderer specifically for mobile applications. This class is named LabelItemRenderer. The LabelItemRenderer is the default renderer for a Flex list class; and it just displays a simple label. It is the one we use in our Mobile DropDownList Component. Reviewing the code is a great way to get up to speed on creating mobile itemRenderers. I've even heard the recommendation that when creating a Mobile ItemRenderer you should create this class.

The LabelItemRenderer class extends UIComponent, but implementse a lot of the same concepts to component development that you'll find in the Flex MobileSkin class. It has some of these methods in common:

  • layoutContents(): The layoutContents method is used to position and size the components children. This method is called from updateDisplayList(), one of the Flex Component lifecycle methods.
  • drawBackground(): the drawBackground method is used to draw the component's background. This is also called from updateDisplayList()
  • setElementSize() : The set element size method is a helper method used for setting the elements height and width properties. Normally you wouldn't extend this, but instead just call it, possibly as part of the layoutContents method.
  • setElementPosition() : The setElementPosition method is a helper method used to set the element's x and y positions. Normally you wouldn't extend this, but instead just call it, possibly as part of the layoutContents method.

How to create an itemRenderer

The basic concept, behind creating the mobile itemRenderer relies heavily on the Flex component lifecycle:

  • In createChildren() create your renderers children.
  • In measure() use your children to determine the measuredWidth and measuredHeight of the component
  • In layoutContents() , position and size your children. If you just have one child, then just use the unscaledWidth and unscaledHeight properties to set height and width, and position it at 0,0. If you have more than one child, then position and size things relative to each other so they fit inside the space allotted.
  • Add an event listener for the dataChange event. In that event handler, make the changes needed to the component, such as updating the labelDisplay.

In its' simplicity, that is it. Of course, in real world apps things can get a lot more complex, especially if you're dealing with backgrounds and different states, such as a selected item and a non-selected item.

What Next?

I wanted to jump into code as part of this write up and show an actual demo of extending the LabelItemRenderer, but this post is a bit longer than I had planned for. I'm going to leave this as a theoretical explanation, and jump into code on another day.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)