Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›Icons

Icons

  • OpenFL assets as icons
  • Image URLs as icons

Accessory Views

  • UI controls as accessories
Edit

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.

Related Links

  • How to use the ItemRenderer component
  • Cookbook: Display an image from a URL in an ItemRenderer component
  • Feathers UI Cookbook
Last updated on 2/1/2022
Image URLs as icons →
  • OpenFL assets
  • Create the ListView
  • Create the ItemRenderer and AssetLoader
  • Set the source of the AssetLoader
  • Related Links
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Premium Support
Documentation
  • Getting Started
  • API Reference
  • Samples
    Github
  • Source Code
  • Issue Tracker
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Make a Donation
  • Join Github Sponsors
  • Donate with PayPal
  • Buy a T-Shirt
Copyright © 2022 Bowler Hat LLC — Illustrations by unDraw.