2006 Using ActionScript To Create Reusable Flex Renderers
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.
2
3 <mx:Script>
4 <![CDATA[
5 [Bindable]
6 public var myDP:Array =
7 [
8 {region:"East", q1:100000, q2:130000},
9 {region:"West", q1:175000, q2:210000},
10 {region:"Northwest", q1:95000, q2:110000},
11 {region:"South", q1:125000, q2:75000},
12 {region:"Southwest", q1:145000, q2:160000}
13 ]
14 ]]>
15 </mx:Script>
16
17 <mx:DataGrid id="myDG" dataProvider="{myDP}">
18 <mx:columns>
19 <mx:DataGridColumn dataField="region" headerText="Region" />
20 <mx:DataGridColumn dataField="q1" headerText="Q1" />
21 <mx:DataGridColumn dataField="q2" headerText="Q2" />
22 </mx:columns>
23 </mx:DataGrid>
24</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:
2<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
3 <mx:NumberFormatter id="nf" useThousandsSeparator="true" />
4 <mx:Label textAlign="right" text="{nf.format(data.q1)}" width="100%" />
5</mx:VBox>
To use this renderer you'd just change the DataGridColumn, like this (assuming the renderer was named MyRenderer.mxml):
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:
2 import mx.controls.Label;
3 import mx.formatters.NumberFormatter;
4
5 public class MyRenderer extends Label
6 {
7 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
8 {
9 super.updateDisplayList(unscaledWidth, unscaledHeight);
10 setStyle("textAlign", "right");
11 var nf:NumberFormatter = new NumberFormatter();
12 nf.useThousandsSeparator=true;
13 this.text=nf.format(this.text);
14 }
15 }
16}
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):
2<mx:DataGridColumn dataField="q2" headerText="Q2" itemRenderer="MyRenderer" />
2006 U.S. Senate SAA Looking For Senior CF Developer/Manager
The U.S. Senate Office of the Sergeant at Arms (in Washington, D.C.) contacted me to share that their ColdFusion/XML/Flex/.NET team has an opening for a very senior principal position. They're looking for someone with extensive experience in ColdFusion, XML, OOP, frameworks and lots of Project Management. Email jason_blum (@) saa.senate.gov for details.
I'll add my own note here to say that I've known these guys for a long time. They are a fun bunch, the apps are cool, and they love the cutting-edge (including Flex).