Using MultiDPIBitmapSource with IconItemRenderer - test case and screenshot attached

Question

In the simple Flex mobile test case below, why aren't the icons visible in the List?

Screenshot:

App.mxml (just add to a blank Flex mobile project in Flash Builder 4.7):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               applicationDPI="160">
    <fx:Declarations>
        <s:MultiDPIBitmapSource id="EN_ICON"
                source160dpi="@Embed('low-res/en_US.png')"
                source240dpi="@Embed('mid-res/en_US.png')"
                source320dpi="@Embed('high-res/en_US.png')"/>
        <s:MultiDPIBitmapSource id="RU_ICON"
                source160dpi="@Embed('low-res/ru_RU.png')"
                source240dpi="@Embed('mid-res/ru_RU.png')"
                source320dpi="@Embed('high-res/ru_RU.png')"/>
        <s:MultiDPIBitmapSource id="DE_ICON"
                source160dpi="@Embed('low-res/de_DE.png')"
                source240dpi="@Embed('mid-res/de_DE.png')"
                source320dpi="@Embed('high-res/de_DE.png')"/>
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private const LANGUAGES:ArrayCollection = new ArrayCollection([
                { icon: EN_ICON, locale: 'en_US', label: 'English' },
                { icon: RU_ICON, locale: 'ru_RU', label: 'Русский' },
                { icon: DE_ICON, locale: 'de_DE', label: 'Deutsch' }
            ]);
        ]]>
    </fx:Script> 

    <s:List 
        width="100%" 
        height="100%"
        dataProvider="{LANGUAGES}">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer labelField="label" iconField="icon" />
            </fx:Component>
        </s:itemRenderer>
    </s:List>
</s:Application>

The icons (courtesy of user koppi @ openclipart.org and placed in the subdirs: src/low-res, src/mid-res, src/high-res):

Answer 1

The problem is that your LANGUAGES array collection is being created before the 3 MultiDPIBitmapSource objects are created. So in effect, each element in the dataProvider has null in the icon field.

Off hand, I don't know at what point in the component life cycle that objects in the <fx:Declarations> tags will get created, but I do know that they should be created by the time the "creationComplete" event is dispatched. In fact, as the OP has confirmed, the objects in the declarations tag have already been created when the "initialize" event is dispatched.

If you create the LANGUAGES array collection in a "creationComplete" event handler, it will work properly.

Answer 2

I'm not totally sure if this will fix your problem, but whenever I use Embed, I use it like this:

@Embed(source='GenericImageFileName.png')