在ArrayCollection和DataGrid代码例举下展示的Flex控件、数据结构乃至flex语言存在的衍生性和关联性

        本文简单讲述了DataGrid等控件在利用labelField\labelFunction等属性进行功能性扩展和展示了使用Array、ArrayList、ArrayCollection等数据结构作为数据效果及及其在mxml和ActionScript中的表现形式和它们的衍生功能增强性关系，意在概要说明控件间、数据类型间乃至mxml和ActionScript间存在某种有律可寻的学习和使用方式。

        诸如DataGrid、List、DropDownList、ComboBox等Flex控件在默认情况会显示数据源中的label属性值，但如果没有此属性也可通过labelField(DataGrid为dataField)来指定控件显示数据源的哪个属性值。此属性的存在使控件的可塑性大为增强，我们可以通过改变此属性值来动态修改控件显示内容，此外诸多控件都提供了labelFunction功能，可以对通过labelField既定的属性的值再次进行格式化（横向：不知是显示指定字段内容，还可以增加其他显示内容，如DataGrid中将多个字段值显示在一个字段上；纵向：对该字段值进行深度加工，达到显示效果更符合要求和习惯，例如改变某时间字段的时间格式等）。

        对于不同控件labelFunction指定函数的参数不同，下面代码展示DataGrid格式化格林尼治时间。

<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.formatters.DateFormatter;
			import mx.controls.Alert;

			private var arrayCollection = new ArrayCollection([
				{name:'A',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},
				{name:'B',date:new Date('Wed,   30   May   2007   15:19:43   GMT+8 ')},
			]);
			
			private function date_labelFunction(item:Object,column:DataGridColumn):String{
				var dateFormatter:DateFormatter = new DateFormatter();
				dateFormatter.formatString = "YYYY年MM月DD日 JJ:NN:SS";
				var dateStr:String = dateFormatter.format(item[column.dataField]);
				//Alert.show(dateFormatter.error);
				return dateStr;
			}

		]]>
	</fx:Script>
	<s:HGroup>
		<s:VGroup>
			<mx:DataGrid dataProvider="{arrayCollection}">
				<mx:columns>
					<mx:DataGridColumn dataField="name" />
					<mx:DataGridColumn dataField="date" width="300"/>
				</mx:columns>
			</mx:DataGrid>
			<mx:DataGrid dataProvider="{arrayCollection}">
				<mx:columns>
					<mx:DataGridColumn dataField="name"/>
					<mx:DataGridColumn dataField="date" width="300"  labelFunction="date_labelFunction" />
				</mx:columns>
			</mx:DataGrid>
		</s:VGroup>

 

效果如下图所示：

        上面代码作为数据源ArrayCollection的定义也可以使用mxml标签来表达，此外还有很多这样的例子。这个事实的原理类似于jsp和java，其实jsp是对java的标签化封装，而mxml也是对actionScript的一种 封装，使之更适合web开发人员使用。下面的代码是对本段描述的一种展示，同时也是“一切mxml表示的内容都可以使用actionScript来表达”的一个例证。

<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:ArrayCollection id="declarArrayCollection">
			<fx:Object name="E" date="Thu Jan 5 10:49:39 GMT+0800 2012"/>
			<fx:Object name="F" date="Wed,   30   May   2007   15:19:43   GMT+8"/>
		</s:ArrayCollection>
		
		<s:ArrayList id="declarArrayList">
			<fx:Object name="C" age="12"/>
			<fx:Object name="D" age="16"/>
		</s:ArrayList>
		
		<fx:Array id="declarArray">
			<fx:Object name="A" age="18"/>
			<fx:Object name="B" age="19"/>
		</fx:Array>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.containers.Form;
			
			private var array:Array = new Array([
				{name:"A",age:"18"},
				{name:"B",age:"19"},
			]);
			
			private var arrayList:ArrayList = new ArrayList([
				{name:"C",age:"12"},
				{name:"D",age:"16"},
			]);
			
			
			private var arrayCollection = new ArrayCollection([
				{name:'E',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},
				{name:'F',date:new Date('Wed,   30   May   2007   15:19:43   GMT+8 ')},
			]);
	</fx:Script>

 

         Array、ArrayList、ArrayCollection这几种数据结构非常相似，而且大都可以作为同一控件的数据源，不过ArrayList出现在Flex4.0，出现原因之一是应对Spark下一些一些dataProvider类型为实现IList，如List控件等。

         上述三种数据结构可以说具有衍生性，Array是基础，   它作为数据源时控件不能很好的感知数据源Array的变化；而ArrayCollection则对Array扩展了很多功能，诸如检索、过滤、排序、分类、更新监控等功能；至于Flex4.中新增加的ArrayList则可将其看做轻量级的ArrayCollection，它不能像ArrayCollection进行筛选过滤数据。下面代码展示ArrayCollection利用Sort针对时间字段值进行排序过程。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.containers.Form;
	 	private var arrayCollection = new ArrayCollection([
			{name:'A',date:new Date('Wed,   30   May   2007   15:19:43   GMT+8 ')},
			{name:'B',date:new Date("Thu Jan 5 10:49:39 GMT+0800 2012")},
		]);
		 
		import mx.formatters.DateFormatter;
		import mx.controls.Alert;
		private function date_labelFunction(item:Object,column:DataGridColumn):String{
			var dateFormatter:DateFormatter = new DateFormatter();
			dateFormatter.formatString = "YYYY-MM-DD JJ:NN:SS";
			var dateStr:String = dateFormatter.format(item[column.dataField]);
			//Alert.show(dateFormatter.error);
			return dateStr;
		}
		import mx.collections.SortField;
		import mx.collections.Sort;
		protected function button1_clickHandler(event:MouseEvent):void
			{
				var sort:Sort = new Sort();
				sort.fields = [new SortField("date",true,false,null)];
				arrayCollection.sort = sort;
				arrayCollection.refresh(); 
			}

		]]>
	</mx:Script>
	<mx:VBox>
		
		<mx:DataGrid dataProvider="{arrayCollection}">
			<mx:columns>
				<mx:DataGridColumn dataField="name" />
				<mx:DataGridColumn dataField="date" width="300" labelFunction="date_labelFunction"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button  label="排序" click="button1_clickHandler(event)">
			
		</mx:Button>

	</mx:VBox>
</mx:Application>

 

     单击【排序】前后对比

        控件间往往存在功能上的相似性，例如List和DataGrid，前者是单列数据，后者则是多列数据（我们还可以比较下DropDownList和ComboBox等）。各种数据结构间也存在关联性或衍生性，如本文所提到的Array、ArrayList和ArrayCollection。在学习和使用上注意对比区分利用其衍生和关联，选择最合适的对象完成所需功能。