Leave That Thing Alone Blog

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)

Comments