How to display OpenFL assets in an ItemRenderer component

Using a DisplayObjectRecycler, an ItemRenderer component may be customized with an AssetLoader to display assets loaded by OpenFL.

OpenFL assets

Assets may be defined in your OpenFL project.xml file. In the example below, three image assets are defined with IDs.

<assets id="pizza" path="assets/img/pizza.png"/>
<assets id="burger" path="assets/img/burger.png"/>
<assets id="fries" path="assets/img/fries.png"/>

The openfl.utils.Assets class exposes APIs to access these assets at runtime, and the Feathers UI AssetLoader component makes it easy add an asset to the display list.

Create the ListView

To start, create a ListView component and pass it a data collection that references the asset IDs from the OpenFL project.xml file.

var listView = new ListView();
listView.dataProvider = new ArrayCollection([
    { name: "Pizza", asset: "pizza" },
    { name: "Cheeseburger", asset: "burger" },
    { name: "French Fries", asset: "fries" }
]);
listView.itemToText = item -> item.name;
addChild(listView);

The techniques used in this tutorial apply to an ItemRenderer used in any data container — not just ListView. The code shouldn't require more than trivial tweaks for other containers, such as GridView or GroupListView.

Similarly, you should be able to use the same capabilities with HierarchicalItemRenderer in containers like TreeView or TreeGridView.

The itemToText function makes it easy to populate the item renderer's text, but how to display the asset IDs stored by the asset property?

Create the ItemRenderer and AssetLoader

By using a DisplayObjectRecycler, we can customize the default ItemRenderer component to display both text and assets.

Call DisplayObjectRecycler.withFunction() to create an item renderer and pass an AssetLoader to the item renderer's icon property.

var recycler = DisplayObjectRecycler.withFunction(() -> {
    var itemRenderer = new ItemRenderer();

    itemRenderer.icon = new AssetLoader();

    return itemRenderer;
});
listView.itemRendererRecycler = recycler;

We don't populate the source property of the AssetLoader yet because the creation function doesn't have access to any items from the list view's data provider. That data becomes available later, in the recycler's update function.

Set the source of the AssetLoader

In the recycler's update function, we have access to a ListViewItemState object that contains all of the data that we need to populate the item renderer, including the item from the data provider that is storing the asset ID.

recycler.update = (itemRenderer:ItemRenderer, state:ListViewItemState) -> {
    itemRenderer.text = state.text;

    var loader = cast(itemRenderer.icon, AssetLoader);
    loader.source = state.data.asset;
};

To access the AssetLoader that we created in DisplayObjectRecycler.withFunction(), cast the icon property. Then, use the data property of the ListViewItemState to get the item from the data provider, which has our asset property.

Be sure to set the item renderer's text property too. When you provide a recycler with a custom update function, the text is no longer populated automatically.