3 Replies Latest reply on Jun 25, 2011 2:22 PM by SafeLineSE

    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#articlecont entAdobe_numberedheader_5) 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>

        • 1. Re: Problem with icon in list when using a xml-file
          SafeLineSE Level 1

          Doesn't anyone have any suggestions?

          • 2. Re: Problem with icon in list when using a xml-file
            SafeLineSE Level 1

            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?

            • 3. Re: Problem with icon in list when using a xml-file
              SafeLineSE Level 1

              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...