精通Flex 3.0――14.4.3 DataManagement的Flex应用的客户端代码

　　在LCDSFlexStu项目客户端代码包括会生成一个student.mxml文件。两个as文件，studentVO.as和studentScript.as文件。
student.mxml文件代码主要与客户端进行交互，代码如下所示。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" pageTitle="student"
creationComplete="initApp()" backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script source="studentScript.as" />
<mx:ViewStack id="applicationScreens" width="100%" height="100%">
<mx:Canvas id="view" width="100%" height="100%">
<mx:DataGrid id="dataGrid"
dataProvider="{dataArr}"
rowCount="8"
editable="true"
resizableColumns="true"
headerRelease="setOrder(event);"
right="10" left="10" top="10" bottom="71">
<mx:columns>
<mx:DataGridColumn headerText="id" dataField="id" editorDataField="convertedValue">
<mx:itemEditor>
<mx:Component>
<mx:TextInput>
<mx:Script>
<![CDATA[
public function get convertedValue():Number
{
return new Number(text);
}

]]>
</mx:Script>
</mx:TextInput>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="Name" />
<mx:DataGridColumn headerText="Sex" dataField="Sex" />
<mx:DataGridColumn headerText="age" dataField="age" editorDataField="convertedValue">
<mx:itemEditor>
<mx:Component>
<mx:TextInput>
<mx:Script>
<![CDATA[
public function get convertedValue():Number
{
return new Number(text);
}

]]>
</mx:Script>
</mx:TextInput>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Address" dataField="Address" />
<mx:DataGridColumn headerText="Remark" dataField="Remark" />
</mx:columns>
</mx:DataGrid>
<mx:Button id="btnAddNew" click="goToUpdate()" icon="@Embed('icons/AddRecord.png')" toolTip="Add Record" x="10" bottom="10"/>
<mx:Button id="btnDelete" click="deleteItem()" icon="@Embed('icons/DeleteRecord.png')" toolTip="Delete Record" x="58" bottom="10"/>
<mx:Label text="Search by Name" right="300" bottom="11"/>
<mx:TextInput id="filterTxt" width="238" toolTip="Search by Name" enter="filterResults()" right="58" bottom="11"/>
<mx:Button click="filterResults()" id="filterButton" icon="@Embed('icons/SearchRecord.png')" toolTip="Search by Name" right="10" bottom="10"/>

</mx:Canvas>

<mx:Canvas id="update" width="100%" height="100%">
<mx:Form width="100%" height="80%" id="studentForm">
<mx:FormItem label="Name:" id="Name_form">
<mx:TextInput id="NameCol" text=""/>
</mx:FormItem>
<mx:FormItem label="Sex:" id="Sex_form">
<mx:TextInput id="SexCol" text=""/>
</mx:FormItem>
<mx:FormItem label="Age:" id="age_form">
<mx:TextInput id="ageCol" text=""/>
</mx:FormItem>
<mx:FormItem label="Address:" id="Address_form">
<mx:TextInput id="AddressCol" text=""/>
</mx:FormItem>
<mx:FormItem label="Remark:" id="Remark_form">
<mx:TextInput id="RemarkCol" text=""/>
</mx:FormItem>
</mx:Form>
<mx:Button label="Save" id="btnSubmit" click="insertItem()" right="81" bottom="10"/>
<mx:Button label="Cancel" id="btnCancel" click="goToView()" right="10" bottom="10"/>
</mx:Canvas>

</mx:ViewStack>

</mx:Application>
studentVO.as文件是值对象文件只是进行简单的数据存取。代码如下所示。
package
{
[Managed]
[RemoteClass(alias="com.lcdsstu.dao.dao.StudentVO")]
public class StudentVO
{
public var id:Number;
public var Name:String;
public var Sex:String;
public var age:Number;
public var Address:String;
public var Remark:String;
public function StudentVO()
{
}
}
}
同13章当中生成VO对象有所不同。上面的代码中通过两个元数据标签，[Managed]标签和[RemoteClass(alias="com.lcdsstu.dao.dao.StudentVO")]标签将studentVO这个ActionScript类变成一个与Java类com.lcdsstu.dao.dao.StudentVO相关的远程数据管理类。当远端的Java类StudentVO值发生变化时AcionScript类studentVO也会自动变化。
studentScript.as文件定义了一组响应student.mxml当中组件事件的函数。并且DataService调用远端的DAO类进行数据的添、删、改和查的操作。代码如下所示。
import mx.collections.ArrayCollection;
import mx.data.DataService;
import mx.data.events.DataConflictEvent;
import mx.data.events.DataServiceFaultEvent;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.DataGridEvent;
import mx.rpc.AsyncToken;
import mx.rpc.events.ResultEvent;
import mx.managers.CursorManager;
import StudentVO;
public var ds:DataService;
[Bindable]
public var dataArr:ArrayCollection = new ArrayCollection();
private var indexForDelete:int = -1;
[Bindable]
private var totalRows:Number = 0;
[Bindable]
private var totalPages:Number = 0;
private var orderColumn:Number;
private var countToken:AsyncToken;
private var commitToken:AsyncToken;
private var fillToken:AsyncToken;
public function initApp():void
{
ds = new DataService("studentJava");
ds.autoCommit = true;
ds.addEventListener(DataConflictEvent.CONFLICT, function (event:DataConflictEvent):void
{
Alert.show("Conflicts detected, reverting to server value.", "Conflicts");
event.conflict.acceptServer();
});
ds.addEventListener(ResultEvent.RESULT, function (event:ResultEvent):void
{
if (event.token == countToken)
{
totalRows = Number(event.result);
}
else if (event.token == fillToken)
{
CursorManager.removeAllCursors();
this.enabled = true;
}
else //COMMIT Token
{
fill();
goToView();
}
});
ds.addEventListener(DataServiceFaultEvent.FAULT, function (event:DataServiceFaultEvent):void {
Alert.show(event.fault.faultString);
});
fill();
dataGrid.addEventListener(DataGridEvent.ITEM_EDIT_BEGINNING, editCellHandler);
}
private function editCellHandler(e:DataGridEvent):void
{
if(e.dataField == "id")
{
e.preventDefault();
return;
}
}
private function filterResults():void
{
fill();
}
private function setOrder(event:DataGridEvent):void
{
orderColumn = event.columnIndex;
var col:DataGridColumn = dataGrid.columns[orderColumn];
col.sortDescending = !col.sortDescending;
event.preventDefault();
fill();
}
public function insertItem():void
{
var vo:StudentVO = new StudentVO();
vo.Name = NameCol.text;
vo.Sex = SexCol.text;
vo.age = new Number(ageCol.text);
vo.Address = AddressCol.text;
vo.Remark = RemarkCol.text;
dataArr.addItem(vo);
commitToken = ds.commit();
}
private function openEditorAt(col:int, row:int):void
{
if(col == 1)
{
return;
}
var o:Object = new Object();
o.columnIndex = col;
o.rowIndex = row;
dataGrid.editedItemPosition = o;
}
private function deleteItem():void {

if (dataGrid.selectedItem) {
indexForDelete = dataGrid.selectedIndex.valueOf();
Alert.show("Are you sure you want to delete " + dataArr[indexForDelete].id + "? ",
"Confirm Delete", 3, this, deleteClickHandler);
}

}
private function fill(count:Boolean=true):void
{
var desc:Boolean = false;
var orderField:String = '';
if(!isNaN(orderColumn))
{
var col:DataGridColumn = dataGrid.columns[orderColumn];
desc = col.sortDescending;
orderField = col.dataField;
}
var params:* = {"orderField": orderField,"orderDirection": (desc) ? "DESC" : "ASC",
"filter": filterTxt.text
};
CursorManager.setBusyCursor();
if(count)
{
countToken = ds.count(params);
}
fillToken = ds.fill(dataArr, params);
}
private function deleteClickHandler(event:CloseEvent):void
{
if (indexForDelete == -1)
{
return;
}
if (event.detail == Alert.YES)
{
dataArr.removeItemAt(indexForDelete);
commitToken = ds.commit();
indexForDelete = -1;
setTimeout( function():void{ dataGrid.destroyItemEditor(); },1);
}
}
public function goToUpdate():void
{
applicationScreens.selectedChild = update;
}
public function goToView():void
{
applicationScreens.selectedChild = view;
}
在上面的代码中通过[Bindable]标签，保证了在ActionScript对象当中的数据发生变化，组件当中显示的数据也会同步发生变化。