Flex: How to specify DataGrid sortFunction and Code refractor

1.  The previous article about data grid sort function that still have problems about code refractor.

http://davyjones2010.iteye.com/blog/1840335

 

2. Below are solutions for a cleaner code with code refractor.

 

    1. Vo (Compare functions are now moved from main application to value object. A better approach for code reusing)

 

package vo
{
	import mx.events.ItemClickEvent;
	import mx.formatters.NumberFormatter;
	import mx.utils.ObjectUtil;

	public class FlatFileUploadVo implements ComparableVo
	{
		public var id:Number;  
		public var isUpload:Boolean;  
		public var feedName:String;  
		public var reqBy:String;  
		public var profitVal:String;
		public var netProfitVal:String;
		public var exposure:String;
		private var numberDeFormatter:NumberFormatter
		
		public function FlatFileUploadVo()  
		{
			numberDeFormatter = new NumberFormatter();
			
			numberDeFormatter.decimalSeparatorFrom = ".";
			numberDeFormatter.decimalSeparatorTo = ".";
			numberDeFormatter.thousandsSeparatorFrom = ",";
			numberDeFormatter.thousandsSeparatorTo = "";
			numberDeFormatter.useThousandsSeparator = "false";
		}
		
		
		public function compare(vo:ComparableVo, compareField:String):int
		{
			var realVo:FlatFileUploadVo = (vo as FlatFileUploadVo);
			
			if("id" == compareField || "profitVal" == compareField || "netProfitVal" == compareField || "exposure" == compareField)
			{
				var val1:Number = new Number(numberDeFormatter.format(this[compareField]));
				var val2:Number = new Number(numberDeFormatter.format(realVo[compareField]));
				
				var res:int = compareNumber(val1, val2);
				
				if(0 == res)
				{
					return compareNumber(this.id, realVo.id);
				}
				else
				{
					return res;
				}
			}else
			{
				var result:int = compareString(this[compareField], realVo[compareField]);
				return (0 == result) ? (compareNumber(this.id, realVo.id)) : result;
			}
		}
		private function compareNumber(id1:Number, id2:Number):int
		{
			return ObjectUtil.numericCompare(id1, id2);
		}
		private function compareString(str1:String, str2:String):int
		{
			return ObjectUtil.stringCompare(str1, str2);
		}
	}
}

 

 

    2. Interface ComparableVo designed for comparing vo

 

package vo
{
	public interface ComparableVo
	{
		function compare(vo:ComparableVo, compareField:String):int;
	}
}

 

    3. Custom ComparableDataGridColumn that extends DataGridColumn

 

package components
{
	import mx.collections.Sort;
	import mx.controls.Alert;
	import mx.controls.dataGridClasses.DataGridColumn;
	
	import vo.FlatFileUploadVo;

	public class ComparableDataGridColumn extends DataGridColumn
	{
		public function ComparableDataGridColumn()
		{
			new FlatFileUploadVo();
		}
		
		override public function set dataField(value:String):void
		{
			super.dataField = value;
			super.sortCompareFunction = mySortCompareFunction;
		}
		private function mySortCompareFunction(obj1:Object, obj2:Object):int
		{
			return obj1.compare(obj2, this.dataField);
		}
	}
}

 

    4. Main Application

<?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/mx" 
			   xmlns:components="components.*"
			   creationComplete="onComplete(event)" 
			   >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ISort;
			import mx.collections.Sort;
			import mx.collections.SortField;
			import mx.controls.Alert;
			import mx.events.DataGridEvent;
			import mx.messaging.channels.StreamingAMFChannel;
			
			import vo.FlatFileUploadVo;
			
			[Bindable]
			public var queList:ArrayCollection = new ArrayCollection();
			private var sortA:ISort;
			private var flatFile:FlatFileUploadVo;
			
			private function onComplete(event:Event):void
			{
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName01";
				flatFile.reqBy = "system";
				flatFile.id = new Number(1);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName02";
				flatFile.reqBy = "system";
				flatFile.id = new Number(2);
				flatFile.profitVal = "323,123.12";
				flatFile.netProfitVal = "5,123.12";
				flatFile.exposure = "933.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName03";
				flatFile.reqBy = "system";
				flatFile.id = new Number(3);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "14,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName04";
				flatFile.reqBy = "system";
				flatFile.id = new Number(4);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName05";
				flatFile.reqBy = "system";
				flatFile.id = new Number(5);
				flatFile.profitVal = "5,123.12";
				flatFile.netProfitVal = "923.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName06";
				flatFile.reqBy = "system";
				flatFile.id = new Number(6);
				flatFile.profitVal = "83.12";
				flatFile.netProfitVal = "23.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName07";
				flatFile.reqBy = "system";
				flatFile.id = new Number(7);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName08";
				flatFile.reqBy = "system";
				flatFile.id = new Number(8);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName09";
				flatFile.reqBy = "system";
				flatFile.id = new Number(9);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName10";
				flatFile.reqBy = "system";
				flatFile.id = new Number(10);
				flatFile.profitVal = "123,123.12";
				flatFile.netProfitVal = "23,123.12";
				flatFile.exposure = "4,233.12";
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName02";
				flatFile.reqBy = "system";
				flatFile.id = new Number(11);
				flatFile.profitVal = "1,123,123.12";
				flatFile.netProfitVal = "123,123.12";
				flatFile.exposure = "9.12";
				queList.addItem(flatFile);
			}
			
		]]>
	</fx:Script>
	
	<mx:DataGrid dataProvider="{queList}" width="600">
		<mx:columns>
			<mx:DataGridColumn headerText="Initiate?" sortable="false" editable="false" dataField="isUpload" itemRenderer="components.CheckBoxColumnRenderer"/>
			<components:ComparableDataGridColumn headerText="ID" sortable="true" editable="false" dataField="id" width="20"/>
			<components:ComparableDataGridColumn headerText="Feed Name" sortable="true" editable="false" dataField="feedName" width="100"/>
			<components:ComparableDataGridColumn headerText="Request By" sortable="true"  editable="false" dataField="reqBy" width="100"/>
			<components:ComparableDataGridColumn headerText="Profit" sortable="true"  editable="false" dataField="profitVal" width="100"/>
			<components:ComparableDataGridColumn headerText="Net Profit" sortable="true"  editable="false" dataField="netProfitVal" width="100"/>
			<components:ComparableDataGridColumn headerText="Exposure" sortable="true"  editable="false" dataField="exposure" width="100"/>
		</mx:columns>
	</mx:DataGrid>
	
</s:Application>

 

    5. Custom CheckBoxRenderer that extends CheckBox

package components
{
	import flash.events.MouseEvent;
	
	import mx.controls.Alert;
	import mx.controls.CheckBox;
	
	import vo.FlatFileUploadVo;
	
	public class CheckBoxColumnRenderer extends mx.controls.CheckBox
	{
		public function CheckBoxColumnRenderer()
		{
		}
		
		override public function set data(value:Object):void
		{
			super.data = value;					//This line is important! Internally set data to the value passed in.
			
			var isUpload:Boolean = value.isUpload;
			if(true == isUpload)
			{
				selected = true;
			}
			else
			{
				selected = false;
			}
		}
		
		override protected function clickHandler(event:MouseEvent):void
		{
			var selectedCheckBox:CheckBoxColumnRenderer = event.currentTarget as CheckBoxColumnRenderer;
			
			(selectedCheckBox.data as FlatFileUploadVo).isUpload = !(selectedCheckBox.data as FlatFileUploadVo).isUpload;
			selectedCheckBox.selected = !selectedCheckBox.selected;
		}
	}
}

 

Explaination:

  1. The main reson to custom a data grid column is to provide a better approach to compare Number values that displayed as String(Because we want to display number as the format of 111,222.333 and it's no longer a Number type any more) If we don't override such a method, the default sort method will sort these number as String. The result is not that desirable. What's more, the only way I find out to utilize the compare function defined in Vo is to rewrite the DataGridColumn.

 

Now the code is less redundancy and more clean.

And the ComparableDataGridColumn is more common and general that can be applied with any Vo that implements the ComparableVo interface. Just like a litte frame work.