Flex Mobile Grid Cell Renderer - Image

Question

I am trying to render an image in a Flex mobile grid, but I can't get the MobileGridBitmapCellRenderer to display. There is just no image visible.

Does anyone see anything wrong? Here is my code:

<ns:MobileGrid  id="myDataGrid" textAlign="left" width="100%" height="100%" borderVisible="true" dataProvider="{pDataCollection}"
                   sortChange="myDataGrid_sortChangeHandler(event)" scrollSnappingMode="leadingEdge" change="myDataGrid_changeHandler(event)"
                   touchInteractionEnd="myDataGrid_touchInteractionEndHandler(event)">
        <ns:columns>
            <ns:MobileGridColumn dataField="id" width="8%">
                <ns:itemRenderer>
                    <fx:Component>
                        <ns:MobileGridBitmapCellRenderer source="@Embed('images/espn-profile-pics/tiny4821.png')"  width="100%" />

                    </fx:Component>
                </ns:itemRenderer>
            </ns:MobileGridColumn>
            <!--ns:MobileGridColumn dataField="player">
            <ns:itemRenderer>
            <fx:Component>
            <ns:MobileGridTextCellRenderer labelField="player"/>
            </fx:Component>
            </ns:itemRenderer>
            </ns:MobileGridColumn-->
            <ns:MobileGridColumn dataField="player" width="22%"/>
            <ns:MobileGridColumn  dataField="year" width="9%"/>
            <ns:MobileGridColumn  dataField="team" width="9%" />
        </ns:columns>       
    </ns:MobileGrid>

However, the MobileGridTextCellRenderer works just fine. I've read the following documentation, but I still don't get it.

http://apache-flex-users.2333346.n4.nabble.com/MobileGrid-Usage-Example-td5308.html http://flex.apache.org/asdoc/spark/components/itemRenderers/IMobileGridCellRenderer.html http://flex.apache.org/asdoc/spark/components/itemRenderers/MobileGridBitmapCellRenderer.html

If I try this code for the itemRanderer:

  <ns:itemRenderer>
    <fx:Component>
            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
     </fx:Component>
</ns:itemRenderer>

I get the runtime error:

Error: MobileGridColumn item renderer must implement spark.components.itemRenderers.IMobileGridCellRenderer

Answer 1

By using the MobileGridBitmapCellRenderer iconFunction I can embed an image as described on this page

A couple of issues persist.

1. Scale mode of "repeat" is the only mode I can see the image.
2. I'd like to use dynamic images from the MobileGrid datasource. At this time I have to declare an icon using embed in AS3.
3. I would like to combine an image and text in the same cell.

Ideally, I would be able to simply specify the source property.

Answer 2

  <ns:itemRenderer>
    <fx:Component>
            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
     </fx:Component>
</ns:itemRenderer>

The issue with this code is that Image is not a valid ItemRenderer, you need to wrap the Image in something that is, for example: (EDIT: code updated)

<ns:MobileGridColumn dataField="id" width="8%">
                <ns:itemRenderer>
                    <fx:Component>
                        <ns:MobileGridTextCellRenderer>
                            <s:Image source="@Embed('images/espn-profile-pics/tiny4821.png'" width="100%" />
                        </ns:MobileGridTextCellRenderer>
                    </fx:Component>
                </ns:itemRenderer>
            </ns:MobileGridColumn>