Render Me This
I was recently working with item renderers on a project and wanted to post an example of using an ActionScript (class) based item renderer and compare it with an MXML version.
It is nice to have the option to choose either, but I like the control an ActionScript class gives the coder and it tends to yield a more lightweight approach than MXML.
My first code block below is the AS class approach. The renderer simply applies a currency format to a field of numbers in a data grid. The second is utilizing the MXML approach. As you can see they yield the same results.
Notice how both approaches override the data setter for the label class they extend. Also see how how listData is utilized to associate the drop-in item renderer with the data from the list control.
With this rather basic example you can see how any control can be displayed via MXML or ActionScript and drawn out i.e. rendered in a list based class.
I have attached a zipped project that displays 2 grids using both renderers. I hope this helps you better understand the power of item renders and what you can do with them.
********* UPDATE: ************
I forgot to mention in this blog that a custom label could be applied via the DataGridColumn labelFunction to get the same effect in assigning a currency symbol.
Please see an example of the code below.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
private var cars:ArrayCollection = new ArrayCollection( [
{ Make: "Infiniti", Model: "G37", Year:2008, Cost: 44081 },
{ Make: "Lexus", Model: "IS 350", Year:2008, Cost: 45205 },
{ Make: "BMW", Model: "3 Series", Year:2008, Cost: 49100 } ]);
// this function is call via the DataGridColumn labelFunction // and it utilizes the CurrencyFormatter below private function currencyLabelFunction(item:Object, column:DataGridColumn):String {
return cf.format(item["Cost"]);
}
]]>
</mx:Script>
<mx:CurrencyFormatter id="cf" precision="2"/>
<mx:Panel title="Label Function Example" layout="horizontal">
<mx:DataGrid dataProvider="{cars}" id="labelFuncCars">
<mx:columns>
<mx:DataGridColumn headerText="Make" dataField="Make" width="60" />
<mx:DataGridColumn headerText="Model" dataField="Model" width="60" />
<mx:DataGridColumn headerText="Year" dataField="Year" width="60" />
<mx:DataGridColumn headerText="Cost" dataField="Cost" width="100" textAlign="right" labelFunction="currencyLabelFunction" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
CurrencyRendererAS Class
{
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
import mx.formatters.CurrencyFormatter;
public class CurrencyRendererAS extends Label
{
private var cf : CurrencyFormatter = new CurrencyFormatter();
public function CurrencyRendererAS()
{
super();
// set precision for formatter cf.precision = 2;
}
// Override the set method for the data property. override public function set data(value:Object):void {
super.data = value;
if (value != null)
{
this.text = cf.format(value[DataGridListData(this.listData).dataField]);
this.setStyle("textAlign","right");
}
super.invalidateDisplayList();
}
}
}
CurrencyRendererMXML MXML
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%">
<mx:CurrencyFormatter id="cf" precision="2"/>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
import mx.formatters.CurrencyFormatter;
override public function set data(value:Object):void {
super.data = value;
if (value != null)
{
this.text = cf.format(value[DataGridListData(this.listData).dataField]);
this.setStyle("textAlign","right");
}
super.invalidateDisplayList();
}
]]>
</mx:Script>
</mx:Label>
AS Approach Output
MXML Approach Output
Label Function Output
<Label xmlns="...">
<text>{cf.format(value[DataGridListData(this.listData).dataField])}</text>
<textAlign>right</textAlign>
<CurrencyFormatter id="cf" precision="2"/>
</Label>
Ffive lines in total, which also shows the benefit of using MXML: brevity.
Thanks for the reply but this code does not work for a few reasons.
One, you still have to import your DataGridListData. (can't get away from script here).
Secondly, value is passed via the data setter override (won't compile)
Third, if I hack it a bit and replace value with data I can get it to work, but receive compile warning due to data bindings being unable to detect dataField.
That was the point of the blog, (there's two ways to "skin the proverbial cat" here). Whether one chooses AS or MXML is truly preference. Per your reply I am leary of using "Object" as well because you lose your typing.
I only ask if you are going to post code here in the future that you test it out. Don't want to mislead my readers.
Thanks again for reading and good luck to you.
Thanks for the comment. A very good point indeed. You have an excellent blog. I have been fortunate enough to work on some great projects where I readily witnessed the power of writing AS classes that extended sprite or uicomponent.
Something I probably should have addressed, though I wanted to keep this blog entry simple and allow the readers imagination to take them into more advanced examples.