Problem with icon in list when using a xml-file

[SafeLineSE]

Hi all,

I'm trying to build an app using the EmployeeDirectory sample (http://www.adobe.com/devnet/flex/articles/employee-directory-android-flex.html#articlecontentAdobe_n...) as a starting point, which I have modified accordingly.

I've got pretty much everything running the way I want it, except for two things:

I want to display an icon in the list. When testing the app I get an empty space where the icon should be, but no icon is shown...

The second thing is that I would like to have the lableField and the messageField in different styles, but I don't know how to achive that...

As you probably can tell I'm very new at this, and this my first atempt ever to use Flash Builder...

Below is the code I've used in the HomeView...

If anyone could help me figure out how to fix this I would be eternally grateful!

Best Regards from Camilla in Sweden

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Emergency Lift Telephones"
        backgroundColor="#000000"
        creationComplete="srv.send()">
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.elements.ListItemElement;
        ]]>
    </fx:Script>
   
    <fx:Declarations>
        <s:HTTPService id="srv" url="assets/employees.xml"/>
    </fx:Declarations>

    <s:navigationContent/>
   
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        .lista {
            color: #FFFFFF;
        }
        .soklista {
            color: #FFFFFF;
            content-background-color: #000000;
            alternatingItemColors: #000000;
            color: #FFFFFF;
            fontSize: 16;
            font-weight: bold;
        }
        .soklista-title {
            color: #FFFFFF;
            content-background-color: #000000;
            alternatingItemColors: #000000;
            color: #FFFFFF;
            fontSize: 16;
        }
       
       
    </fx:Style>
    <s:List id="list" left="0" right="0" top="0" bottom="0"
            change="navigator.pushView(ProductDetails, list.selectedItem)"
            dataProvider="{srv.lastResult.list.employee}" labelField="firstName"
            styleName="soklista">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer iconWidth="32" iconHeight="32" iconScaleMode="letterbox" iconField="assets/pics/{data.menybild}"
                                    messageField="title"
                                    messageStyleName="soklista-title">
                </s:IconItemRenderer>
            </fx:Component>
        </s:itemRenderer>

    </s:List>
</s:View>

[SafeLineSE]

Doesn't anyone have any suggestions?

[SafeLineSE]

Okay, so I managed to get the icon working by using this code instead:

    <s:List id="list" left="0" right="0" top="0" bottom="0"
            change="navigator.pushView(ProductDetails, list.selectedItem)"
            dataProvider="{srv.lastResult.list.employee}" styleName="soklista">
        <s:itemRenderer>
            <fx:Component>
                <s:IconItemRenderer paddingTop="2" paddingBottom="2" verticalGap="6"
                                    decorator="assets/icons/{data.icon}"
                                    labelField="firstName" messageField="title"
                                    messageStyleName="soklista"
                                    iconHeight="32" iconWidth="32"/>
            </fx:Component>
        </s:itemRenderer>

    </s:List>

Any suggestions on how to make lableField and the messageField in different styles?

[SafeLineSE]

I'm apperently getting better at this, since I got it all working by changing the css class of the s:IconItemRenderer seperately from the s:List css...