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)

Gumbo and Catalyst Photo Viewer Application

I've posted an example of a Flex application created with the MAX preview versions of Flash Catalyst and Gumbo. This small demo application was created to test out some of the new features in both Catalyst and Gumbo. It is not a perfect project, but a starting point for further projects.

Gumbo Catalyst Photo Application
View Example (right click for source)

The main goal of this project was to play with the new features in Catalyst and Gumbo using a close to real world example application, here is what was done:

  • Start with a photoshop layout (PhotoShop file located in PSD directory)
  • Use Catalyst to layout/components/skins and export FXG project
  • Import FXG to Gumbo project
  • In Gumbo add data/photo/etc functionality to the project
  • Take project back to Catalyst for small visual edits, then back to Gumbo
  • Use new Gumbo MXML tags/components
  • Play with new __AS3__.vec.Vector (using the new BitmapData.histogram)

Instead of detailing every step of the process there is great Gumbo Documentation and Catalyst Examples.

View Catalyst and Gumbo Photo Application (requires Flash 10 player)