精通Flex 3.0――14.4.3 DataManagement的Flex应用的客户端代码-优快云博客

本文介绍了一个名为LCDSFlexStu项目的客户端实现细节，主要包括MXML界面设计、值对象(VO)的创建及事件处理脚本等内容。客户端通过DataGrid组件展示学生信息，并实现了添加、删除、搜索等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　在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对象当中的数据发生变化，组件当中显示的数据也会同步发生变化。