首先来看下这个例子的界面功能设计：包含一个dataGrid控件，两个按钮（读取和更新数据）以及一个Label控件用来提示用户操作的结果。dataGrid包含四个列：员工的编号,姓名,性别以及部门。其中姓名这个列是可以编辑修改的：编辑后通过检查后，按更新按钮更新数据库。
接着来看下工作流程：Flex app是通过remoteObject方式与后台的java bean沟通的，然后在由java bean连接postgresql database，读取或更新数据。然后返回给flex app. 由于使用blazeDS，flex app可以直接调用java 的方法，所以发送请求和接受数据都变的简单了。
我们来先看看那后台java bean的处理：他要接受flex app的读取数据和更新数据的请求，而且他们之间的数据传递格式采用的是json.里面包含了两个重要的方法（getJsonArray()和sendJsonArray()）分别对应flex app的读取数据和更新数据的请求。在getJsonArray()方法中，要连接数据库，取得员工的信息资料，然后按照json格式封装数据，结果返回给flex app，由flex app中的datagrid显示出来。我们具体看看getJsonArray()这个方法,内容其实都很简单，只是读取数据和封装成json格式的数据，最后把json array格式的jsonEmployeeArray转换成string格式传输给flex app.即return语句。而当flex app要使用这个json array格式的数据，自然需要按照json格式解码等，后面在介绍。接着看看那个更新数据的方法sendJsonArray():即把flex app传递过来的String类型的json格式的的数据解码开来，然后根据对应的Id把更新后的名字保存在数据库中。这里我们传递过来的是整个datagrid的信息，不管是有没有更新的，都要循环的更新所有员工的信息。所以呢，在你的程序中你的JsonGrid.java文件应该类似：
package jsongrid;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class JsonGrid {
private Connection con = null;
private String myDriver = "org.postgresql.Driver";
private String conURL = "jdbc:postgresql://localhost:5432/test";
private String userName = "tad";
private String userPass = "123";
public Connection conToDB(){
try{
Class.forName(myDriver);
con = DriverManager.getConnection(conURL,userName,userPass);
}catch(Exception e){
e.printStackTrace();
}
return con;
}
public String getJsonArray(){
JSONArray jsonEmployeeArray = new JSONArray();
ResultSet rs = null;
String result= new String();
try{
Connection conToDb = conToDB();
Statement stmt = conToDb.createStatement();
rs=stmt.executeQuery("select * from employee");
while(rs.next()){
JSONObject jsonEmployee = new JSONObject();
jsonEmployee.put("id", rs.getString("id"));
jsonEmployee.put("name", rs.getString("name"));
jsonEmployee.put("gender", rs.getString("gender"));
jsonEmployee.put("department", rs.getString("department"));
jsonEmployeeArray.add(jsonEmployee);
}
result = jsonEmployeeArray.toString();
conToDb.close();
//result = new JSONObject().put("jsonEmployeeArray",jsonEmployeeArray).toString();
}catch(SQLException ex){
ex.printStackTrace();
}
return result;
}
public String sendJsonArray(String jsonData){
String result= new String();
//jsonData = jsonData.replace("\\", "");
JSONArray jsonArray = JSONArray.fromObject(jsonData);
try{
Connection conToDb = conToDB();
Statement stmt = conToDb.createStatement();
for(int i=0;i<jsonArray.size();i++){
JSONObject jsonObject = JSONObject.fromObject(jsonArray.getString(i));
String id = jsonObject.getString("id");
String name = jsonObject.getString("name");
stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
}
result="恭喜，成功更新数据!";
conToDb.close();
}catch(Exception e){
e.printStackTrace();
}
return result;
}
}
前面我们已经说过了后台java bean的处理，接着我们讲前台flex app的处理。flex app界面包含一个datagrid,两个button和一个Label。所以前台的JsonGrid.mxml代码设计如下：
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<!--<mx:RemoteObject id="sendData" destination="sendJsonData" showBusyCursor="true" result="updatedJsonDataResult(event)" endpoint="http://localhost:8080/testconndb/messagebroker/amf"/>
<mx:RemoteObject id="getData" destination="getJsonData" endpoint="http://localhost:8080/testconndb/messagebroker/amf" source="jsongrid.JsonGrid" showBusyCursor="true" result="getJsonData(event)">
<mx:method name="getJsonArray" result="getJsonData(event)"/>
</mx:RemoteObject>-->
</fx:Declarations>
<fx: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;
}
</fx:Style>
<fx:Script>
<![CDATA[
import com.adobe.serialization.json.JSON;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.TextInput;
import mx.core.IUIComponent;
import mx.events.DataGridEvent;
import mx.rpc.AbstractOperation;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.RemoteObject;
[Bindable]
private var dataArray:ArrayCollection;
var getData:RemoteObject=new RemoteObject();
var sendData:RemoteObject=new RemoteObject();
private function initDataGrid():void{
dataArray = new ArrayCollection();
getData.destination="getJsonData";
getData.endpoint="http://localhost:8080/testconndb/messagebroker/amf";
var op0:AbstractOperation=getData.getOperation("getJsonArray");
op0.send();
op0.addEventListener(ResultEvent.RESULT,getDataAction);
op0.addEventListener(FaultEvent.FAULT,customOperationHandleFault);
}
private function getDataAction(event:ResultEvent):void{
var strinfo:String = event.result as String;
var arr:Array = (JSON.decode(strinfo) as Array);
dataArray = new ArrayCollection(arr);
//lblStatus.text="正在读取...请稍候";
}
private function customOperationHandleFault(event:FaultEvent) : void
{
Alert.show(event.fault.toString(), "OK");
trace("customOperationHandleFault: " + event.fault.message);
}
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();
sendData.destination="sendJsonData";
sendData.endpoint="http://localhost:8080/testconndb/messagebroker/amf";
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);
}
]]>
</fx:Script>
<fx: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="sendJson" x="254" y="268" label="更新" height="29" click="sendDataAction()" width="74"/>
</mx:Panel>
</s:WindowedApplication>
我们还需要在flex/remoting-config.xml指定channel作为flex app与java bean的沟通渠道。即添加：
<destination id="getJsonData">
<properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
接下来将更新数据的功能。
<destination id="sendJsonData"><properties>
<source>jsongrid.JsonGrid</source>
</properties>
</destination>
9747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
