The Morphic Group

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)

Tags: Gumbo
Posted in Flex

This entry was posted on Wednesday, December 3rd, 2008 at 1:11 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.