Using Gumbo and itemRendererFunction to create multiple ItemRenderers
Gumbo has added an "itemRendererFunction" function that allows certain data containers to specify an itemRenderer based on the data item. In this example an FxDataContainer's dataProvider is set to an ArrayCollection that contains 2 different types of Value Objects. Depending on the type of Value Object the itemRendererFunction returns a different itemRenderer.
View Example (right click for source)
In this example there are two different Value Objects: PhotoVO and QuoteVO. An FxDataContainer's dataProvider is set to an ArrayCollection:
[Bindable]private var VODataProvider:ArrayCollection;<FxDataContainer dataProvider="{VODataProvider}"...
The ArrayCollection is populated with 5 Value Objects, 2 PhotoVO and 3 QuoteVO.
In the FxDataContainer the itemRendererFunction is set to a function:
<FxDataContainer dataProvider="{VODataProvider}" itemRendererFunction="itemRendererFunction_handler"
In the itemRendererFunction a ClassFactory is passed back based on the type of data item in the itemRenderer. In this example there is a different itemRenderer for the PhotoVO and QuoteVO. We will also pass in a function to the itemRenderer to handle clicks:
private function itemRendererFunction_handler(item:Object):ClassFactory { var classFactory:ClassFactory;
if (item is PhotoVO) {
//item is PhotoVO so use Photo ItemRenderer
classFactory = new ClassFactory(PhotoItemRenderer);
} else if (item is QuoteVO) {
//item is QuoteVO so use Quote ItemRenderer
classFactory = new ClassFactory(QuoteItemRenderer);
}
//pass callback click function
classFactory.properties = {clickFunction:itemRenderClick_handler};
return classFactory;
}
View Example with source enabled (flash 10 required)

