So you’ve got a DataGrid and you want to format the dates and sort the dates regardless of how its formatted. It’s pretty straight forward using the labelFunction and sortCompareFunction on the DataGridColumn.
First we’ll set up the data and datagrid.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{ID:1, datePosted:"03/15/2009"},
{ID:2, datePosted:"02/18/2009"}
]);
]]>
</fx:Script>
<mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
<mx:DataGridColumn headerText="Date" dataField="datePosted" />
</mx:columns>
</mx:DataGrid>
</s:Application>
Now lets add the date formatter. Add the date formatter component and identify the resulting format you’re looking for. Next we add a function that uses that date formatter.
Finally we’ll add a call to our function from the datagrid column using labelFunction
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{ID:1, datePosted:"03/15/2009"},
{ID:2, datePosted:"02/18/2009"}
]);
private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
{
return dateFormatter.format(item.datePosted);
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
<mx:DataGridColumn headerText="Date" dataField="datePosted" labelFunction="dateFormat"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
To add the sorting we’ll add a sorting method and call it from our datagrid column using sortCompareFunction
Here is the Completed Code
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectUtil;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{ID:1, datePosted:"03/15/2009"},
{ID:2, datePosted:"02/18/2009"}
]);
private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
{
return dateFormatter.format(item.datePosted);
}
private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
/* Date.parse() returns an int, but
ObjectUtil.dateCompare() expects two
Date objects, so convert String to
int to Date. */
var dateA:Date = new Date(Date.parse(itemA.date));
var dateB:Date = new Date(Date.parse(itemB.date));
return ObjectUtil.dateCompare(dateA, dateB);
}
]]>
</fx:Script>
<mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
<mx:DataGridColumn headerText="Date" dataField="datePosted" sortCompareFunction="date_sortCompareFunc"
labelFunction="dateFormat"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
One of the most compelling aspects of Flex is its ability to integrate with a wide variety of data sources. Many of the introductory tutorials online teach how to connect to http services to pull data. The result is typically an XML response. Flex makes it easy to manage XML but there are better ways. using XML requires an object on the server to be serialized to a text format which adds processing time. The response is also larger due to the variety of XML tags that need to be added in order to properly represent the object’s structure. Yes I hear you in the back telling me that JSON is a lighter weight response that doesn’t require all the tags. Regardless the response still needs to be parse out in the client. Finally the contract between client and server is not well defined with straight XML or JSON. Web services do provide a strict contract for the interface that the client can rely on but the objects are still serialized with extraneous tags used to define the structure.
