2010年8月2日 星期一

Flex_ArrayCollection的操作_存入ValueObject

今天有同事提到一個問題:想把從txt檔讀出的XY字串轉到DataGrid上面呈現,並且自動依照X欄位排序,所以做了以下的測試。

課程上了一半,在資料處理上感覺還是ArratCollection的操作最為重要,單就為了快速的Binding就幾乎絕大部分的資料最後都要選擇存入當中;但要存進什麼?怎麼樣存?就看各種不同的需求而定了。而在上課的時候,老師極力推薦使用ValueObject的概念。所以這篇將會利用ValueObject的概念來處理資料(相關資料:Flex_ArrayCollectionFlex_Array與ArrayCollection的差異Flex_混亂的arrayCollection與[Bindable])
假設我們已經取得文字檔當中的字串為(3,70;4,90;2,40;1,60),(該結構為(X1,Y1;X2,Y2),也就是XY用逗號相隔,每組資料用分號相隔)。所以我想要做的流程是:
1. 利用字串的split函式將XY資料拆出來。
2. 建立一個XYObject的ValueObject儲存XY值。
3. 將XYObject存入ArrayCollection當中。
4. 建立一個設定使用X排序的Sort,指定給ArrayCollection。
5. 將ArrayCollection動態Binding到DataGrid上。

所以程式裡面會需要三個東西:
1. 處理XY值的ValueObject。
2. 給文字檔字串返回存有ValueObject的ArrayCollection函式。
3. 設定排序欄位返回sort的函式。

直接看程式碼:
1. ValueObject:只有存取XY值,並未對XY值做任何判斷及處理。

2. 主程式碼:

3.執行結果:

最後,貼上可以複製的程式碼:
1. ValueObject

package
{
public class XYObject
{
public var X:int;
public var Y:int;

public function XYObject(X:int,Y:int)
{
this.X=X;
this.Y=Y;
}
}
}

2. 主程式碼

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.SortField;
import mx.collections.Sort;
import mx.collections.ArrayCollection;

[Bindable]
public var XYArrayCollection:ArrayCollection = new ArrayCollection();
public var XY:String="3,70;4,90;2,40;1,60";

private function clickHandler():void
{
//清除之前紀錄
XYArrayCollection.removeAll();
//給XY字串,返回資料存入XYObject的ArrayCollection
XYArrayCollection=PutXYObjectToAC(XY);
//給排序欄位,返回以設定好之Sort
XYArrayCollection.sort = CreateSort("X");
//為了排序,重新整理ArrayCollection
XYArrayCollection.refresh();
}
private function PutXYObjectToAC(XYString:String):ArrayCollection
{
var XYarray:Array = new Array();
var XYAC:ArrayCollection = new ArrayCollection();
XYarray = XY.split(";");
for (var i:int=0; i<XYarray.length;i++)
{
var XYValue:Array = new Array();
XYValue = XYarray[i].toString().split(",");
XYAC.addItem(new XYObject(XYValue[0],XYValue[1]));
}
return XYAC
}

private function CreateSort(SortFieldName:String):Sort
{
var sort:Sort=new Sort();
var f1:SortField=new SortField(SortFieldName,true,false);
sort.fields=new Array(f1);
return sort;
}
]]>
</mx:Script>

<mx:DataGrid width="300" dataProvider="{this.XYArrayCollection}">
<mx:columns>
<mx:DataGridColumn headerText="里程" dataField="X"/>
<mx:DataGridColumn headerText="高程" dataField="Y"/>
</mx:columns>
</mx:DataGrid>
<mx:Button id="btn_Go" label="執行" click="clickHandler()"/>

</mx:Application>

利用這樣的概念去處理資料,真的是相當漂亮。

沒有留言:

張貼留言