Flex imagerender based on datagrid value

I have a datagrid with an location and a list of activities Birdwatching, Boating, Camping. The datagrid is populated based on either a simple yes or no if the activity is offered at that location. I want to replace the yes / no with a separate开发者_StackOverflow image for each activity. I created a imagerender and I'm able to get the image to change but only to the birdwatching image. My question is, how can I get it to loop through that datagrid and display image according to the value?

Thanks.

package widgets.Samples.CononGeocoder2
{
    import mx.containers.HBox;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;

    public class ImageRenderer extends HBox
    {
        private var imageReference:Image = null;
        private var imageReference2:Image = null;
        private var imageReference3:Image = null;
        private var lbl:Label = new Label();
        private var img:Image = new Image();
        private var img2:Image = new Image();
        private var img3:Image = new Image();

        override public function set data(value:Object):void
        {
            //if(value != null && imageReference == null)
            {

                for each(data in value)
                {

                if(value.Birdwatching == "yes") {
                    img.source = "assets/images/Birdwatching.png";
                    addChild(img)
                    lbl.text = "(" + value.Birdwatching + ")";
                    img.toolTip = "Birdwatching";
                    imageReference = img;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Boating == "yes"){
                    img2.source = "assets/images/Boating.png";
                    addChild(img2)
                    lbl.text = "(" + value.Boating + ")";
                    img2.toolTip = "Boating";
                    imageReference2 = img2;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                if(value.Camping == "yes"){
                    img3.source = "assets/images/Camping.png";
                    addChild(img3)
                    lbl.text = "(" + value.Camping + ")";
                    img3.toolTip = "Camping";
                    imageReference3 = img3;
                    setStyle("verticalAlign", "middle");
                    setStyle("paddingLeft","5");
                }
                //Place

                }
            }


        }

    }
}

---

THe most simple way is to do this in MXML. Something like this:

<mx:HBox>
    <mx:Image source="assets/images/Birdwatching.png" visible="{data. Birdwatching == 'yes'}" includeInLayout="{data.Birdwatching == 'yes'}" toolTip="Birdwatching" />
    <mx:Image source="assets/images/Boating.png" visible="{data. Boating == 'yes'}" includeInLayout="{data.Boating == 'yes'}" toolTip="Boating" />
    <mx:Image source="assets/images/Camping.png" visible="{data. Camping == 'yes'}" includeInLayout="{data.Camping == 'yes'}" toolTip="Camping" />
    <mx:Label text="{'(' + (data.Birdwatching == 'yes') ? 'Birdwatching' : '' + (data.Boating == 'yes') ? 'Boating' : '' + (data. Camping == 'yes') ? 'Camping' : '' +  ')'}" />
</mx:HBox>

Note it is just a draft so you need to adjust it for yourself.

If you prefer to use ActionScript you should learn Flex components lifecycle and override updateDisplayList() method for displaying and positioning of subcomponents.

---

Before I answer your question, I want to point out a few items. Item Renderers have the potential to be used a ton, so you need to be sure they are as lean as possible. For example, you are creating 3 instances of the image component every time. If you need more, you can create them as needed. In addition, you might want to investigate using Canvas or UIComponent as the superclass if you plan on reusing this a lot.

Next, your 'for' loop isn't needed. You aren't looping over the value object. You simply need to check to see if the properties are set to the correct value. Other than that, your example should work ok (although optimization would be a separate discussion. If for some reason it still doesn't work, use the debugger to see what the values are for that given item.