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 🙂