使用Flex,Java，Json更新postgresql数据

首先来看下这个例子的界面功能设计：包含一个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>

接下来将更新数据的功能。