2

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

Screenshot:

enter image description here

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):

enter image description here

enter image description here

enter image description here

Alexander Farber
  • 21,519
  • 75
  • 241
  • 416

2 Answers2

2

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.

Sunil D.
  • 17,983
  • 6
  • 53
  • 65
  • +1; however something doesn't make sense about this answer. If moving the array setup code to an initialize handler fixed the issue; then the claim that `fx:Declarations` is not created until after `creationComplete()` must be false. – JeffryHouser Jun 04 '13 at 13:16
  • 1
    @Reboog711 What I meant to say is that I know that the objects in the declarations tags *will have been created* by the time the "creationComplete" event is dispatched. And as the OP found out, they objects were already created by the time the "initialize" event was dispatched. I'll edit to make that part clear, thanks! – Sunil D. Jun 04 '13 at 17:30
-1

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')

jugg1es
  • 1,560
  • 18
  • 33
  • -1; I don't see how/why that is different than what was posted in the question; other than using a different path. – JeffryHouser Jun 03 '13 at 18:54
  • My question is not about `Embed`ding an image. My question is about using `MultiDPIBitmapSource` with `IconItemRenderer` to support multiple screen DPIs – Alexander Farber Jun 03 '13 at 20:22
  • I've been working with flex for almost 5 years and I've run into tons of idiosyncrasies that cause incorrect behavior with no indication as to why. I guess I should have been clearer that I was talking about the syntax and to ignore the actual path. I just copy/pasted code that I was working on. If the embedding wasn't working, then no image would have been displayed and may not have thrown an error. – jugg1es Jun 03 '13 at 23:42
  • There can only be a few reasons for the problem because the code looks like it would work. Either the images aren't there or the DPI isn't being read correctly. My first guess would be that the images aren't being embedded, which is why I posted my answer. – jugg1es Jun 03 '13 at 23:50