Passing data from an XML object to an itemRenderer

Question

I'm trying to color the background of a column in a datagrid and have found a sample file that illustrate the concept. However, the sample has data stored in an arrayCollection whereas mine is in an XML object. The problem is that the data in the sample file is apparently automatically passed to the itemRenderer (shown below: note the trace statement). My XML object does not appear to automatically pass data to the itemRenderer. So my questions are:
1. Is there a simple way to pass data stored in an XML object to an itemRenderer
or
2. Should I convert my XML to an arrayCollection? If so, what's the best way to do this-- I've tried the following, but without success:
<mx:Model id="xmldata" source="example3.xml"/>
  <mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(xmldata.Example1)}" />
Here's what the xml looks like:
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <item> 3 </item>
   </EXAMPLE1>
</TABLE>  
Here's the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
    <!--
        This item renderer simply extends Label and overrides the updateDisplayList function to
        draw a gradient-filled rectangle. The colors in the gradient are determined from the
        data.
    -->
    <mx:Script>
    <![CDATA[
        import flash.geom.Matrix;
        import flash.display.GradientType;
        import flash.display.Graphics;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            var m:Matrix = new Matrix();
            m.createGradientBox(unscaledWidth,unscaledHeight);
            var g:Graphics = graphics;
                        trace("data.col3="+data.col3)
            var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
            g.clear();
            g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
            // the rectangle is drawn a little high and a little tall to compensate for the gap
            // the DataGrid introduces between rows.
            g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
            g.endFill();
    ]]>
    </mx:Script>
</mx:Label>

Answer 1

This sample code should answer your question of how to bring data into the renderer automatically. It comes in via the DataGrid dataProvider and then you refer to it in the renderer as data.XYZ, where XYZ is the field in the XML with the data. See FB 3 help sys on e4x syntax.
------------------ mainapp.mxml --------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  creationComplete="srvc.send();">
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import mx.collections.XMLListCollection;
      [Bindable] private var xlc:XMLListCollection;
      private function dataHandler(evt:ResultEvent):void{
        xlc = new XMLListCollection(evt.result..EXAMPLE1 as XMLList);
    ]]>
  </mx:Script>
  <mx:HTTPService id="srvc" url="data2.xml" result="dataHandler(event)"
    resultFormat="e4x"/>
  <mx:DataGrid dataProvider="{xlc}">
    <mx:columns>
      <mx:DataGridColumn headerText="Difficulty" dataField="difficulty"/>
      <mx:DataGridColumn headerText="Discrimination" dataField="discrimination"/>
      <mx:DataGridColumn headerText="Item" itemRenderer="MyLabel"/>
    </mx:columns>
  </mx:DataGrid>
</mx:Application>
----------- MyLabel.mxml --------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[
      import flash.geom.Matrix;
      import flash.display.GradientType;
      import flash.display.Graphics;
      override protected function updateDisplayList(unscaledWidth:Number,
        unscaledHeight:Number):void{
        super.updateDisplayList(unscaledWidth,unscaledHeight);
        this.text = data.col3;
        var m:Matrix = new Matrix();
        m.createGradientBox(unscaledWidth,unscaledHeight);
        var g:Graphics = graphics;
        var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);
        g.clear();
        g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
        g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
        g.endFill();
    ]]>
  </mx:Script>
</mx:Label>
------------ data2.xml ----------------
<?xml version="1.0" encoding="utf8"?>
<TABLE>
   <EXAMPLE1>
      <difficulty> 0.5 </difficulty>
      <discrimination> 0.7 </discrimination>
      <col3> 3 </col3>
   </EXAMPLE1>
</TABLE>