后面我们说到了后
台java bean的处理,接着我们讲前台flex app的处理。flex app界面包含一个datagrid,两个button和一个Label。所以前台的JsonGrid.mxml代码设计如下:
<mx:Panel title="员工信息管理" x="61" y="41" width="476" height="385" layout="absolute"> <mx:DataGrid id="dgData" toolTip="姓名可编辑" x="10" y="10" width="436" height="250" dataProvider="{dataArray}" creationComplete="{initDataGrid()}" editable="true" itemEditEnd="{checkName(event)}" verticalScrollPolicy="on"> <mx:columns> <mx:DataGridColumn headerText="编号" dataField="id" editable="false"/> <mx:DataGridColumn headerText="姓名*" dataField="name" editable="true"/> <mx:DataGridColumn headerText="性别" dataField="gender" editable="false"/> <mx:DataGridColumn headerText="部门" dataField="department" editable="false"/> </mx:columns> </mx:DataGrid> <mx:Label id="lblStatus" x="27" y="305" width="372" height="25" fontFamily="Times New Roman" fontSize="13" color="#BF03FD"/> <mx:Button id="getJson" label="读取" toolTip="读取员工数据" x="61" y="268" width="74" height="29" click="getDataAction()"/> <mx:Button id="sendJson" x="254" y="268" label="更新" height="29" click="sendDataAction()" width="74"/> </mx:Panel>
|
界面设计好了之后,我们开始做读取数据的处理。我们采用的是remoteObject的方法所以,在mxml中添加<mx:RemoteObject>,destination指定的为后台java bean中的json.JsonGrid中的getJsonArray()这个方法。
<mx:RemoteObject id="getData" destination="getJsonData" source="jsongrid.JsonGrid" showBusyCursor="true" result="getJsonData(event)"> <mx:method name="getJsonArray" result="getJsonData(event)"/> </mx:RemoteObject>
|
由于getJsonArray方法返回的是一个array类型的数据,所以我们要在mxml中的AS定义一个dataArray,同时这个dataArray也作为datagrid的一个data provier.我们的设计是在程序加载的时候自动读取数据,所以要在在<mx:DataGrid>中使用了creationComplete="{initDataGrid()}" 来初始化这个dataArray,以及执行读取数据的功能和对结果进行处理:
<mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.controls.TextInput; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; import com.adobe.serialization.json.JSON; [Bindable] private var dataArray:ArrayCollection; private function initDataGrid():void{ dataArray = new ArrayCollection(); getData.getOperation('getJsonArray').send(); } private function getDataAction():void{ getData.getJsonArray(); lblStatus.text="正在读取...请稍候"; } private function getJsonData(event:ResultEvent):void{ var rawArray:Array; var arraySize:int; var rawData:String = event.result as String; rawArray = JSON.decode(rawData) as Array; dataArray = new ArrayCollection(rawArray); arraySize = dataArray.length; lblStatus.text="读取成功,总共"+arraySize+"条员工信息"; } ]]> </mx:Script>
|
按钮<mx:Button id="getJson" label="读取" toolTip="读取员工数据" x="61" y="268" width="74" height="29" click="getDataAction()"/>执行的是同样的功能。其实这时候已经完成了读取数据的工作了。要成功的运行的话,我们还需要在flex/remoting-config.xml指定channel作为flex app与java bean的沟通渠道。即添加:
<destination id="getJsonData">
<properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
接下来将更新数据的功能。
首先我们要把datagrid中的data provider中的数据,这里是我们前面说的dataArray,转换成json格式,然后作为参数由remoteObject的方式传给java bean,由java bean完成跟新数据的操作。为了确保用户在更新datagrid之后能够与dataArray的数据信息保持同步,我们还需要做绑定的工作:
<mx:Binding source="dgData.dataProvider as ArrayCollection" destination="dataArray"/>
|
在更新之前,我们也有确保用户输入无误:我们只做简单的检查:用户名不能为空而且长度小于10:
private function checkName(event:DataGridEvent):void{ var texIn:TextInput = TextInput(event.currentTarget.itemEditorInstance); var nameValue:String = texIn.text; if(nameValue ==""|| nameValue.length>10){ event.preventDefault(); lblStatus.text="姓名不能为空而且长度小于10"; } }
|
这样之后,我们开始做更新的操作,还是要先定义一个remoteObject,指定destiontion:
<mx:RemoteObject id="sendData" destination="sendJsonData" showBusyCursor="true" result="updatedJsonDataResult(event)"/>
|
然后开始做用户安下更新按钮<mx:Button id="sendJson" x="254" y="268" label="更新" height="29" click="sendDataAction()" width="74"/>之后所做的程序操作,发送数据和返回结果:
private function sendDataAction():void{ //var objSend:Object = new Object(); var dataString:String = JSON.encode(dataArray.toArray()); //dataString = escape(dataString); sendData.sendJsonArray(dataString); lblStatus.text = "请稍后...正在处理"; } private function updatedJsonDataResult(event:ResultEvent):void{ lblStatus.text = String(event.result as String); }
|
发送数据是以json编码再换成string格式传到后台,再有后台解码找到对应的id和name做更新操作。操作的结果会显示在lblStatus这个Label上。同样若要正确的执行程序还需要指定channel,即为flex app中的sendDataAction调用后台的sendJsonArray()方法提供沟通渠道:记载remoting-config.xml添加:
<destination id="sendJsonData">
<properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
所以你前台的flex app代码应该类似如下:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> Panel { fontSize:16; fontFamily: Times New Roman; } Button { fontSize:16; color: blue; fontFamily: Times New Roman; } DataGrid { fontSize:16; color:green; fontFamily: Times New Roman; } </mx:Style> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.controls.TextInput; import mx.rpc.events.ResultEvent; import mx.collections.ArrayCollection; import com.adobe.serialization.json.JSON; [Bindable] private var dataArray:ArrayCollection; private function initDataGrid():void{ dataArray = new ArrayCollection(); getData.getOperation('getJsonArray').send(); } private function getDataAction():void{ getData.getJsonArray(); lblStatus.text="正在读取...请稍候"; } private function getJsonData(event:ResultEvent):void{ var rawArray:Array; var arraySize:int; var rawData:String = event.result as String; rawArray = JSON.decode(rawData) as Array; dataArray = new ArrayCollection(rawArray); arraySize = dataArray.length; lblStatus.text="读取成功,总共"+arraySize+"条员工信息"; } private function checkName(event:DataGridEvent):void{ var texIn:TextInput = TextInput(event.currentTarget.itemEditorInstance); var nameValue:String = texIn.text; if(nameValue ==""|| nameValue.length>10){ event.preventDefault(); lblStatus.text="姓名不能为空而且长度小于10"; } } private function sendDataAction():void{ //var objSend:Object = new Object(); var dataString:String = JSON.encode(dataArray.toArray()); //dataString = escape(dataString); sendData.sendJsonArray(dataString); lblStatus.text = "请稍后...正在处理"; } private function updatedJsonDataResult(event:ResultEvent):void{ lblStatus.text = String(event.result as String); } ]]> </mx:Script> <mx:RemoteObject id="sendData" destination="sendJsonData" showBusyCursor="true" result="updatedJsonDataResult(event)"/> <mx:RemoteObject id="getData" destination="getJsonData" source="jsongrid.JsonGrid" showBusyCursor="true" result="getJsonData(event)"> <mx:method name="getJsonArray" result="getJsonData(event)"/> </mx:RemoteObject> <mx:Binding source="dgData.dataProvider as ArrayCollection" destination="dataArray"/> <mx:Panel title="员工信息管理" x="61" y="41" width="476" height="385" layout="absolute"> <mx:DataGrid id="dgData" toolTip="姓名可编辑" x="10" y="10" width="436" height="250" dataProvider="{dataArray}" creationComplete="{initDataGrid()}" editable="true" itemEditEnd="{checkName(event)}" verticalScrollPolicy="on"> <mx:columns> <mx:DataGridColumn headerText="编号" dataField="id" editable="false"/> <mx:DataGridColumn headerText="姓名*" dataField="name" editable="true"/> <mx:DataGridColumn headerText="性别" dataField="gender" editable="false"/> <mx:DataGridColumn headerText="部门" dataField="department" editable="false"/> </mx:columns> </mx:DataGrid> <mx:Label id="lblStatus" x="27" y="305" width="372" height="25" fontFamily="Times New Roman" fontSize="13" color="#BF03FD"/> <mx:Button id="getJson" label="读取" toolTip="读取员工数据" x="61" y="268" width="74" height="29" click="getDataAction()"/> <mx:Button id="sendJson" x="254" y="268" label="更新" height="29" click="sendDataAction()" width="74"/> </mx:Panel> </mx:Application>
|
这个程序到此就讲解结束了,基本实现了flex app利用balzeds,java,json完成和后台的mysql的沟通:数据的读取和更新。缺点在与每次更新的时候,传递都是整个data provider中的数据,无论有的row没有被更新,都会被传递到后台做更新处理,浪费了资源。