How to Add an Icon to a List of Views in Adobe Flex Mobile Project

Question

I would like to add an Icon to a list of views in my flex mobile project. I am not sure of how to approach this. Here is the line of code, and below it is an image of the view.

        <s:List id="calcList" width="100%" height="98%" alternatingItemColors="[#0099999,#990000]"
            change="calcList_changeHandler(event)" color="#FFFAF0" contentBackgroundColor="#fffdd0"
            fontWeight="normal" labelField="name" textAlign="left" >


        <s:dataProvider>

            <s:ArrayCollection id="calcListCollection">  
                <fx:Object viewID="A1c" name="A1c " category="Medical"/>
                <fx:Object viewID="BMI" name="BMI " category="Fitness"/>
                <fx:Object viewID="GPA" name="GPA " category="Education"/>
                <fx:Object viewID="Tip" name="Tip " category="Personal" />


            </s:ArrayCollection>
        </s:dataProvider>
    </s:List>

enter image description here

Use a custom itemRenderer. Adobe includes one in the mobile SDK: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/IconItemRenderer.html which you should be able to use for your purpose. — JeffryHouser, Apr 16 '13 at 11:19
This solution worked flawless however I believe I didn't add another part to what was needed. I need for the Icon to be different depending upon calculator choice. For instance the A1c Icon will be different from the GPA, TIP, and BMI Icon. — Ryan Watts, Apr 16 '13 at 21:49
Use a custom itemRenderer. You can extend the iconItemRenderer and implement a data change handler to change the displayed icon based on your data. I strongly recommend reading up on itemRenderers; what they are; and how to create them. — JeffryHouser, Apr 16 '13 at 22:03

score 0 · Accepted Answer · answered Apr 17 '13 at 04:23

Created a .MXML component called MyIconRenderer.mxml

<!--?xml version="1.0" encoding="utf-8"?-->
   <s:IconItemRenderer
   xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   iconField="icon"
   labelField="name"
   messageField="category"
   iconWidth="45"
   iconHeight="45"
/>

Then Implement the code within the Array List by calling the Item Rendered "MyIconRenderer" as follow:

 itemRenderer="MyIconRenderer"

Then pass the icon property to your selected Lists' Array Collection.

How to Add an Icon to a List of Views in Adobe Flex Mobile Project

1 Answers1