title: How to change the component's properties in an item renderer dynamically?
body: <p>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". </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>When I run the file It dose not show me anything.The whole UI is not shown on the browser.</p>
  
  <p>Pls can someone show me how this can be done ? What is a proper method to do this ?</p>
  
  <p>This is my MXML file containing the Data Grid table :</p>
  
  <pre><code>    &lt;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()"&gt;
  &lt;fx:Declarations&gt;
      &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
  &lt;/fx:Declarations&gt;
  &lt;fx:Script&gt;
      &lt;![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);   
          }
  
      ]]&gt;
  &lt;/fx:Script&gt;
  &lt;s:DataGrid x="52" y="105" width="378" dataProvider="{myShapes}" requestedRowCount="4"&gt;
      &lt;s:columns&gt;
          &lt;s:ArrayList&gt;
              &lt;s:GridColumn dataField="shapedetails" headerText="Shape details" itemRenderer="FrontEndObjects.MovementLogItemRenderer"&gt;&lt;/s:GridColumn&gt;
              &lt;s:GridColumn dataField="shapeId" headerText="Shape Id"&gt;&lt;/s:GridColumn&gt;
              &lt;s:GridColumn dataField="shapeName" headerText="Shape Name"&gt;&lt;/s:GridColumn&gt;
              &lt;s:GridColumn dataField="shapeColor" headerText="Shape Colour"&gt;&lt;/s:GridColumn&gt;
          &lt;/s:ArrayList&gt;
      &lt;/s:columns&gt;        
  &lt;/s:DataGrid&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is my "MovementLogItemRenderer" item renderer :</p>
  
  <pre><code>    &lt;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"&gt;    
  
  &lt;fx:Script&gt;
      &lt;![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;
              }
          } 
  
      ]]&gt;
  &lt;/fx:Script&gt;    
  &lt;s:HGroup&gt;
      &lt;s:Label text="{data.shapeId}"  paddingTop="8"/&gt;    
      &lt;s:Label text="{data.shapeName}"  paddingTop="8"  /&gt;    
      &lt;s:Label text="{data.shapeColor}"  paddingTop="8"  color="{myTextColour}" /&gt;            
  &lt;/s:HGroup&gt;
  </code></pre>
  
  <p></p>