Using an ArrayList of hashes as a TileLayout dataProvider - apache-flex

Question

This seems like it should be really simple, but I'm a total newbie to Flex and am getting stuck.
Here's what I have right now, which works:
<s:List id="list"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<s:BitmapImage source="#Embed('../images/menus/car_types/truck.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/suv.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/convertible.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/sedan.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
</s:List>
What I'd like to do is add labels below each tile, associating each image with a string. I want to do something like
<s:List id="list"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<s:BitmapImage name="Truck" source="#Embed('../images/menus/car_types/truck.png')" />
<s:BitmapImage name="SUV" source="#Embed('../images/menus/car_types/suv.png')" />
<s:BitmapImage name="Convertible" source="#Embed('../images/menus/car_types/convertible.png')" />
<s:BitmapImage name="Sedan" source="#Embed('../images/menus/car_types/sedan.png')" />
<s:BitmapImage name="Surprise Me!" source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
</s:List>
but since there is no name property on the BitmapImage object, I get errors.
I guess I need to put each BitmapImage in an Object and also put in a string as a property of the object, but I can't figure out how to do this. This is my best guess, but then I don't know how to specify the property name for the BitmapImage:
<fx:Object label="Truck">
<s:BitmapImage source="#Embed('../images/menus/car_types/truck.png')" />
</fx:Object>
After that, I guess I would make a custom ItemRenderer to read out the properties on each object?
TIA

Answer 1

I think you are mixing your metaphors a bit. You are putting actual UI elements in your dataProvider. In my opinion, the only thing that should be in that dataProvider is raw data. In your case, it is a string and image data. You use an ItemRenderer to apply the view element to the data.
So, just create an Object and forget about there being a BitmapImage in your dataProvider at all. That object has name and source properties.
Then, create a simple itemRenderer that binds the name and the source properties of the data object which is automatically assigned for you.
A little bit like this?
<s:List id="list"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Truck" source="#Embed('../images/menus/car_types/truck.png')" />
<fx:Object name="SUV" source="#Embed('../images/menus/car_types/suv.png')" />
<fx:Object name="Convertible" source="#Embed('../images/menus/car_types/convertible.png')" />
<fx:Object name="Sedan" source="#Embed('../images/menus/car_types/sedan.png')" />
<fx:Object name="Surprise Me!" source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup>
<s:Label text="{data.name}" />
<s:BitmapImage source="{data.source}" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Of course, pretty up that ItemRenderer however you see fit, but use data binding to the data property for whatever property you need.
Enjoy :)