Flex Coding Help-Data Dependent decoratorClass in MobileIconItemRenderer Example

Some of my Flex developer friends are getting some problem in creating a list that has uses a MobileIconItemRenderer that has a decoratorClass that depends on the data here is a simple example which clears your every doubt and error

For Starting Create a new Mobile Flex Project, give it a name and click finish. Navigator to the default home view and add a list, dataprovider and a method that creates some dummy data:

<?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="MobileIconItemRenderer" initialize="init()">

    <fx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

            [Bindable]

            private var items:ArrayCollection;

           

            // Generate dummy data

            private function init():void

            {

                items = new ArrayCollection();

                var obj:Object;

  

                for( var i:int=0; i<10; i++ )

                {

                    obj = new Object();

                    obj.Name = "List item " + i;

                    obj.Description = "Description " + i;

                    obj.Status = i % 3;

                    items.addItem(obj);

                }

            }

  

        ]]>

    </fx:Script>

   

    <s:List id="myList" dataProvider="{items}" labelField="Name"

            width="100%" height="100%" itemRenderer="views.ListItemRenderer"/>

</s:View>

First create an assets package and add three icons to it, you can find the icons here.

You can see that the list uses an itemRenderer, create it by creating a new MXML component that’s based on MobileIconItemRenderer in the views package, name it ListItemRenderer. Add the following code to it:

<?xml version="1.0" encoding="utf-8"?>

<s:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                          xmlns:s="library://ns.adobe.com/flex/spark"

                          messageField="Description">

    <fx:Script>

        <![CDATA[

            // Embed "Done" icon

            [Embed(source="assets/done.png")]

            private var iconDone:Class;


            // Embed "Open" icon

            [Embed(source="assets/open.png")]

            private var iconOpen:Class;

            // Embed "Progress" icon

            [Embed(source="assets/progress.png")]

            private var iconInProgress:Class;
           
            // Set decoratorClass depending on status

            override public function set data(value:Object):void
            { 

                if(value != null) 

                { 

                    super.data = value;
                    var status:int  = value.Status;

                    var icon:Class;

                    switch(status){

                        case 0:

                            icon = iconOpen;

                            break;

                        case 1:

                            icon = iconInProgress;

                            break;

                        case 2:

                            icon = iconDone;

                            break;

                    }

                    this.decoratorClass = icon;
                }

             }
        ]]>
     </fx:Script>

</s:MobileIconItemRenderer>

View Source