<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
A single instance of your Item Renderer class (ListIR) is created for each visible item of the list-based control.

As the user scrolls through the items of a list-based control, Item Renderer instances are recycled rather than creating new instances. This is a concept known as virtualization.
Example: When Data Item #1 is removed from the list-based control's display due to a scrolling action, the Item Renderer instance previously used to render Data Item #1 is recycled and used to display the data for Data Item #6.

Item Renderers must directly or indirectly (through class inheritance) implement the IDataRenderer interface which enforces the implementation of 2 very important methods: get data() & set data(). With an implicit getter and setter in place for the data property, the Item Renderer instance can receive a data object passed from the host component (the list-based control) which represents the data for the item it is responsible to render (i.e. Data Item #6).
Example: If instance #1 of the Item Renderer is rendering the data for Data Item #6, the data for Data Item #6 is passed to instance #1 of the Item Renderer via the Item Renderer's set data setter method.
When an instance of an Item Renderer is recycled due to scrolling, the set data method is called and the applicable data object is passed. This is the point in which conditional logic can be applied to control the appearance of an Item Renderer. <!-- Item Renderer (ListIR.mxml) with conditional logic --> |
Note: It is important to remember that Item Renderers are recycled and as such, their property values may reflect a condition met by the previous "user" of the Item Renderer instance (i.e. the Data Item). Therefore, it is important to reset properties to the default value when conditional logic fails. In the previous example, the reset is accomplished by setting the label's font color back to black (0x000000) when data.age >= 21.
In the previous example, we utilized a property of the data object (data.age) and a hard-coded value (21) to dictate the item's appearance. However, certain scenarios may require access to property values outside of an Item Renderer's scope to determine the appearance.Example: The value of an HSlider in conjunction with the age property of the data object (data.age) should dictate the font color of each item's label.
This scenario requires the following:1. Create a new public property for the list-based control exposed via a getter and setter
By extending an existing class and adding a new public property, our list-based control will have a place to store the value of an external property (i.e. the value of the HSlider's value property).
// MyList.as extends List |
2. Bind the new list-based control's public property (MyList.minAge) to the value of the desired external property utilizing Flex's data-binding utility
Data-binding will provide real-time synchronization of the new public property (minAge) with the external property's value (i.e. the HSlider's value property)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="com.flexdevelopers.*" |
3. Provide the Item Renderer with access to a ListData object
To access the value of our new public property from within an Item Renderer instance, our Item Renderer must implement the IDropInListItemRenderer interface. This ensures a reference to the Item Renderer's owner (the list-based control) is available to the Item Renderer, and consequently, so is our new public property.
<!-- ListIR.mxml --> |
4. Make a call to the invalidateList method when the source of our new, bounded public property is changed (i.e. the HSlider value property changes)
By calling MyList.invalidateList() each time the HSlider value changes, we ensure that the conditional logic of the Item Renderer is re-evaluated. InvalidateList forces each Item Renderer instance of a list-based control to call the data setter method.
// update the new property's setter method to include invalidateList() |
See it in action (view source is enabled):
5 comments:
Hi ,I am using a Flex vslider with double thumb.I need a flex code which will change slider body color in such a fashion so that slider portion below lower thumb will show red color,above upper thumb will show green color and portion between two thumb will show orange color.Can you please help me?
Good post, explained well & with a nice example :] It's common to see people try to access & modify the list of itemRenderers directly when they need all renderers to update simultaneously. An important point (which I don't think you explicitly made, but did allude to) is that each itemRenderer should only take care of itself, and to refresh all renderers you use the invalidation method call.
Would be great to see more posts of this calibre :]
I'd like to see more posts of this caliber too. :]
Best explanation of ItemRenderer I've seen yet. Excellent post. Thanks.
It was nice explanation to clear the basic concepts for Item renderer.
Post a Comment