5 Replies Latest reply on May 14, 2009 6:58 AM by Barna Biro

    Passing data from an XML object to an itemRenderer

    SiHoop Level 1

      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>

        • 1. Re: Passing data from an XML object to an itemRenderer
          Michael Borbor Level 4

          You can use XMLListCollection for XML data.

          • 2. Re: Passing data from an XML object to an itemRenderer
            Gregory Lafrance Level 6

            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>
            
            • 4. Re: Passing data from an XML object to an itemRenderer
              SiHoop Level 1

              Thanks for your excellent answer. How do you embed code in the page as you did in your post? Below is a minor modification for the sake of documentation (i.e. this.text = data.item;).

               

              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.item;
                      trace("ss="+data.item)         
                      var g:Graphics = graphics;
                      var colors:Array
                      if(data.difficulty > .5){
                          colors=[0x0000CC]
                      }else if(data.difficulty > .3){
                                     colors=[0x00CC00]
                      }else{
                                     colors=[0xCC0000]
                      }
                      g.clear();
                      g.beginFill(colors[0], .5);         
                      g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
                      g.endFill();
                    }
                  ]]>
                </mx:Script>
              </mx:Label>

              • 5. Re: Passing data from an XML object to an itemRenderer
                Barna Biro Level 3

                SiHoop wrote:

                 

                How do you embed code in the page as you did in your post?

                 

                You have a >> sign next to the Smiley icon. Click it ( it's called the Insert button ), select Syntax Hihglighting and choose the prefered formatting. Write all the code inside the area you'll be provided and the code should be nicely highlighted once you post the message.

                1 person found this helpful