Forta.com - Blog

Item renderers are the key to customizing just about any Flex controls. If you want numbers in a data grid column to be green or red (based on whether they are positive or negative), you use a cell renderer. If you want list items to be displayed on multiple lines with data from multiple fields combined in a single display, you use a renderer. If you are using TileList to display data, then again you use a renderer to actually define the display.

Renderers can be written in MXML or ActionScript, and here is one reason why you may want to opt for the latter.

The following is a simple DataGrid example. An array contains five objects, each with three values, and then the results are displayed in a DataGrid.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="400" width="600">

   <mx:Script>
   <![CDATA[
      [Bindable]
      public var myDP:Array =
      [
         {region:"East", q1:100000, q2:130000},
         {region:"West", q1:175000, q2:210000},
         {region:"Northwest", q1:95000, q2:110000},
         {region:"South", q1:125000, q2:75000},
         {region:"Southwest", q1:145000, q2:160000}
      ]
   ]]>
   </mx:Script>

   <mx:DataGrid id="myDG" dataProvider="{myDP}">
      <mx:columns>
         <mx:DataGridColumn dataField="region" headerText="Region" />
         <mx:DataGridColumn dataField="q1" headerText="Q1" />
         <mx:DataGridColumn dataField="q2" headerText="Q2" />
      </mx:columns>
   </mx:DataGrid>
</mx:Application>

Now what if you wanted the numbers right aligned and formatted using thousands separators? That's a job for a custom renderer, and here is an MXML example that would do the trick:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:NumberFormatter id="nf" useThousandsSeparator="true" />
<mx:Label textAlign="right" text="{nf.format(data.q1)}" width="100%" />
</mx:VBox>

To use this renderer you'd just change the DataGridColumn, like this (assuming the renderer was named MyRenderer.mxml):

<mx:DataGridColumn dataField="q1" headerText="Q1" itemRenderer="MyRenderer"/>

But what if you wanted to then reuse the renderer for both of the numeric columns? The renderer receives an object named data that contains the object to be displayed, and has to specify the column to be displayed, hard coded (in this case data.q1). As such, you would need another renderer, just like the first, but with a different column specified.

To get around this problem you could implement IDropInListItemRenderer so as to obtain column info, but there is a cleaner option. Here is the ActionScript renderer:

package {
   import mx.controls.Label;
   import mx.formatters.NumberFormatter;

   public class MyRenderer extends Label
   {
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         super.updateDisplayList(unscaledWidth, unscaledHeight);
         setStyle("textAlign", "right");
         var nf:NumberFormatter = new NumberFormatter();
         nf.useThousandsSeparator=true;
         this.text=nf.format(this.text);
      }
   }
}

This version accomplishes the same result, but is not column specific, and can thus be used in multiple DataGrid columns, as seen here (assuming the file is named MyRenderer.as):

<mx:DataGridColumn dataField="q1" headerText="Q1" itemRenderer="MyRenderer" />
<mx:DataGridColumn dataField="q2" headerText="Q2" itemRenderer="MyRenderer" />

Using ActionScript To Create Reusable Flex Renderers

U.S. Senate SAA Looking For Senior CF Developer/Manager