Todd Rothe : Web Application Developer

Using the ItemRendererFunction on a DataGroup or SkinnableDataContainer allows you to reuse said group, selecting the appropriate item renderer for different types of data.

Here is an ItemRendererFunction example using one list to display two separate data sets in two different styles.

Download the project to see the full source.
See the two item renderers near the top of the script tag.
import com.toddrothe.renderers.ContactsItemRenderer; // TR: item renderer
import com.toddrothe.renderers.GroupsItemRenderer; // TR: item renderer

Note the two array collections used as dataProviders for the DataGroup.
[Bindable]
protected var contactsData:ArrayCollection = new ArrayCollection([{'type':'contact','id':64, 'name':'Josh Tynjala', 'image':'images/jt.png'},{'type':'contact','id':140, 'name':'Peter C.', 'image':'images/pc.png'},{'type':'contact','id':64, 'name':'Brendan', 'image':'images/bl.png'}]);


[Bindable]
protected var groupsData:ArrayCollection = new ArrayCollection([{'type':'group','id':0,'name':'My First Group','content':'various media'},{'type':'group','id':12,'name':'Another Group','content':'video'},{'type':'group','id':42,'name':'Nature Group','content':'nature photos'}]);

Below that you will see the actual item renderer function which changes the item renderer depending on the item.type value.
protected function getItemRenderer(item:Object):IFactory // TR: item renderer func decides which item renderer to use
{
var myRendererClass:Class;
switch( item.type )
{
case "group":
myRendererClass = GroupsItemRenderer;
break;
case "contact":
myRendererClass = ContactsItemRenderer;
break;
}
return new ClassFactory( myRendererClass );
}

And finally the DataGroup with the itemRendererFunction and initial dataProvider value defined.
<s:DataGroup id="myDataGroup" itemRendererFunction="getItemRenderer"
dataProvider="{contactsData}" >

more posts at www.toddrothe.com/blog

You must be logged in to post a comment.