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

首先来看下这个例子的界面功能设计:包含一个dataGrid控件,两个按钮(读取和更新数据)以及一个Label控件用来提示用户操作的结果。dataGrid包含四个列:员工的编号,姓名,性别以及部门。其中姓名这个列是可以编辑修改的:编辑后通过检查后,按更新按钮更新数据库。


接着来看下工作流程:Flex app是通过remoteObject方式与后台的java bean沟通的,然后在由java bean连接postgresql database,读取或更新数据。然后返回给flex app. 由于使用blazeDS,flex app可以直接调用java 的方法,所以发送请求和接受数据都变的简单了。

 那么,我门开始工作了。
 首先,创建一个数据库

CREATE TABLE employee(
  id character varying NOT NULL,
  name character varying NOT NULL,
  gender character varying NOT NULL,
  department character varying NOT NULL,
  PRIMARY KEY (id)
)


我们来先看看那后台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>

阅读更多
个人分类: flex
上一篇flex datagrid Tab键事件
下一篇ActionScript创建中文DateField
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭