Item Renderers
Visual representation of data items in lists and other collection components
Collections of data contain objects or items. Several components in Apache Royale, like List, DataGrid, TabBar or ButtonBar, can show collections of data to the user in different ways. Those components need to describe each item and adapt the visualization to the data inside each object. Apache Royale uses Item Renderer components to render, or visualize, each piece of data in each collection object in a collection component.
Inline
The standard method is to declare an item renderer in a separate file which you then import into the component where you will be displaying the rendered data, but you can also declare an item renderer inline for convenience:
<j:DataContainer width="100%" labelField="name" dataProvider="{dataList}">
<j:beads>
<j:Viewport clipContent="false"/>
</j:beads>
<j:itemRenderer>
<fx:Component>
<j:ListItemRenderer width="100%">
<fx:Script>
<![CDATA[
import vos.Provider;
[Bindable("dataChange")]
public function get provider():Provider {
return data as Provider;
}
]]>
</fx:Script>
<j:beads>
<js:ItemRendererDataBinding/>
</j:beads>
<j:HGroup gap="3" itemsVerticalAlign="itemsCenter">
<js:FontAwesomeIcon text="{FontAwesome5IconType.PARKING_CIRCLE}"
faStyle="{FontAwesomeIcon.REGULAR}"
relativeSize="{FontAwesomeIcon.SIZE_LG}"
style="color: {provider.color};"/>
<j:Label text="Offered by" className="weight-bold"/>
<j:Image width="60" height="24" src="{provider.logo}">
<j:beads>
<js:ErrorImage emptyIsError="true"/>
</j:beads>
</j:Image>
</j:HGroup>
</j:ListItemRenderer>
</fx:Component>
</j:itemRenderer>
</j:DataContainer>
