How to change the component's properties in an item renderer dynamically?

Question

I have data grid table that contains an array of shape objects.The GridColumn in my data grid table calls an item renderer called "MovementLogItemRenderer".

In my "MovementLogItemRenderer" I have a HGroup containing few labels. I use the itemRenderer's data property to access certain information to be displayed in the labels.

What I want to do is to control the color of the text in the label. So when value of data.shapeColor is equal to "purple" , I want to change the color of the text in specific labels.

When I run the file It dose not show me anything.The whole UI is not shown on the browser.

Pls can someone show me how this can be done ? What is a proper method to do this ?

This is my MXML file containing the Data Grid table :

    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
           creationComplete="createShapes()">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;

        [Bindable]
        private var myShapes:ArrayCollection = new ArrayCollection();   

        import FrontEndObjects.Shapes;
        private function createShapes():void{
            var shape1:Shapes = new Shapes();
            shape1.shapeId = "1001";
            shape1.shapeName ="Rec";
            shape1.shapeColor ="pink";                  

            var shape2:Shapes = new Shapes();
            shape2.shapeId = "1002";
            shape2.shapeName ="Cirl";
            shape2.shapeColor ="orange";

            var shape3:Shapes = new Shapes();
            shape3.shapeId = "1003";
            shape3.shapeName ="Trig";
            shape3.shapeColor ="purple";

            myShapes.addItem(shape1);
            myShapes.addItem(shape2);   
            myShapes.addItem(shape3);   
        }

    ]]>
</fx:Script>
<s:DataGrid x="52" y="105" width="378" dataProvider="{myShapes}" requestedRowCount="4">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="shapedetails" headerText="Shape details" itemRenderer="FrontEndObjects.MovementLogItemRenderer"></s:GridColumn>
            <s:GridColumn dataField="shapeId" headerText="Shape Id"></s:GridColumn>
            <s:GridColumn dataField="shapeName" headerText="Shape Name"></s:GridColumn>
            <s:GridColumn dataField="shapeColor" headerText="Shape Colour"></s:GridColumn>
        </s:ArrayList>
    </s:columns>        
</s:DataGrid>

This is my "MovementLogItemRenderer" item renderer :

    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">    

<fx:Script>
    <![CDATA[   

        [Bindable] public var myTextColour:uint;
        override public function prepare(hasBeenRecycled:Boolean):void {

            super.prepare( hasBeenRecycled );

            if(data.shapeColor == "purple"){
                myTextColour = 0x7a11f1;
            } else {
                myTextColour = 0x000000;
            }
        } 

    ]]>
</fx:Script>    
<s:HGroup>
    <s:Label text="{data.shapeId}"  paddingTop="8"/>    
    <s:Label text="{data.shapeName}"  paddingTop="8"  />    
    <s:Label text="{data.shapeColor}"  paddingTop="8"  color="{myTextColour}" />            
</s:HGroup>

Answer 1

The colour property of the Label in ActionScript is a uint
so you have to use this type
(only in MXML you can use colour codes like #000000)
and since you're binding a ActionScript property to the colour of your label you have to use the uint type
Also you have to set it back to the 'normal' colour when the condition is not meet in the case the itemRenderer will be reycled..
e.g.

override public function prepare(hasBeenRecycled:Boolean):void {

            super.prepare( hasBeenRecycled );

            if(data) {
                if(data.shapeColor == "purple"){
                    myTextColour = 0x7a11f1;
                } else {
                    myTextColour = 0x000000;
                }
            }
        } 

why your hole UI is not showing up, it can't be told without more code Your exemple is running fine when I try it just with the Grid component