Flex4中绑定JSON数据到DataGrid组件中

在网上看到一位老兄写的文章，觉得写的不错，特转来，以备以后参考：

 

一直都只有看到从Mysql读取数据到Flex app中然后显示在DataGrid控件中。还很少见到从Flex app中的Datagrid取得数据写回数据库的例子。在网上搜索了找到一篇用Flex,PHP,JSON的方法：具体请参考：Using Flex, PHP, and JSON to Modify a MySQL Database 。写的非常的简单明白，可惜的是自己没学过PHP。无法按照例子上完整的去实现，所以我把它更改用Java-Json的方法来实现同样的功能。

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

 接 着来看下工作流程：Flex app是通过remoteObject方式与后台的java bean沟通的，然后在由java bean连接mysql database，读取或更新数据。然后返回给flex app. 由于使用blazeDS，flex app可以直接调用java 的方法，所以发送请求和接受数据都变的简单了。
 那么，我门开始工作了。
 首先，创建一个数据库：在mysql提示框中输入以下的SQL就可以创建一个简单的员工信息资料表。
Sql代码
CREATE DATABASE IF NOT EXISTS test;   
USE test;   
  
DROP table IF EXISTS `employee`;   
CREATE table `employee` (   
  `id` varchar(10) NOT NULL,   
  `name` varchar(45) NOT NULL,   
  `gender` varchar(10) NOT NULL,   
  `department` varchar(45) NOT NULL,   
  PRIMARY KEY (`id`)   
) ENGINE=InnoDB DEFAULT CHARSET=latin1;  
view plaincopy to clipboardprint?
CREATE DATABASE IF NOT EXISTS test;  
USE test;  
  
DROP <a title="table" href="http://www.alimama.com/membersvc/buyadzone/buy_ad_zone.htm?adzoneid=892989%20" target="_blank">table</a> IF EXISTS `employee`;  
CREATE <a title="table" href="http://www.alimama.com/membersvc/buyadzone/buy_ad_zone.htm?adzoneid=892989%20" target="_blank">table</a> `employee` (  
  `id` varchar(10) NOT NULL,  
  `name` varchar(45) NOT NULL,  
  `gender` varchar(10) NOT NULL,  
  `department` varchar(45) NOT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=InnoDB DEFAULT CHARSET=latin1;  
CREATE DATABASE IF NOT EXISTS test; USE test;  DROP table IF EXISTS `employee`; CREATE table `employee` (   `id` varchar(10) NOT NULL,   `name` varchar(45) NOT NULL,   `gender` varchar(10) NOT NULL,   `department` varchar(45) NOT NULL,   PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; 我们来先看看那后台java bean的处理：他要接受flex app的读取数据和更新数据的请求，而且他们之间的数据传递格式采用的是json.所以我们的java bean的一个框架结构应该是：
Xml代码
public class JsonGrid {   
    private Connection con = null;   
    private String myDriver = "com.mysql.jdbc.Driver";   
    private String conURL = "jdbc:mysql://localhost:3306/test";   
    private String userName = "root";   
    private String userPass = "12345";   
       
    public Connection conToDB(){   
         try{   
             Class.forName(myDriver);   
             con = DriverManager.getConnection(conURL,userName,userPass);   
         }catch(Exception e){   
             e.printStackTrace();   
         }   
         return con;   
     }   
    public String getJsonArray(){   
        String result= new String();           
        return result;   
    }   
    public String sendJsonArray(String jsonData){   
        String result= new String();   
     return result;   
    }   
}  
view plaincopy to clipboardprint?
public class JsonGrid {  
    private Connection con = null;  
    private String myDriver = "com.mysql.jdbc.Driver";  
    private String conURL = "jdbc:mysql://localhost:3306/test";  
    private String userName = "root";  
    private String userPass = "12345";  
      
    public Connection conToDB(){  
         try{  
             Class.forName(myDriver);  
             con = DriverManager.getConnection(conURL,userName,userPass);  
         }catch(Exception e){  
             e.printStackTrace();  
         }  
         return con;  
     }  
    public String getJsonArray(){  
        String result= new String();          
        return result;  
    }  
    public String sendJsonArray(String jsonData){  
        String result= new String();  
     return result;  
    }  
}  
public class JsonGrid {     private Connection con = null;     private String myDriver = "com.mysql.jdbc.Driver";     private String conURL = "jdbc:mysql://localhost:3306/test";     private String userName = "root";     private String userPass = "12345";          public Connection conToDB(){          try{              Class.forName(myDriver);              con = DriverManager.getConnection(conURL,userName,userPass);          }catch(Exception e){              e.printStackTrace();          }          return con;      }     public String getJsonArray(){         String result= new String();                 return result;     }     public String sendJsonArray(String jsonData){         String result= new String();      return result;     } } 里面包含了两个重要的方法（getJsonArray()和sendJsonArray()）分别对应flex app的读取数据和更新数据的请求。在getJsonArray()方法中，要连接数据库，取得员工的信息资料，然后按照json格式封装数据，结果返回 给flex app，由flex app中的datagrid显示出来。我们具体看看getJsonArray()这个方法：
Xml代码
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;   
    }  
view plaincopy to clipboardprint?
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 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;     } 内容其实都很简单，只是读取数据和封装成json格式的数据，最后把json array格式的jsonEmployeeArray转换成string格式传输给flex app.即return语句。而当flex app要使用这个json array格式的数据，自然需要按照json格式解码等，后面在介绍。接着看看那个更新数据的方法sendJsonArray():
Java代码
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;   
    }  
view plaincopy to clipboardprint?
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;  
    }  
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;     } 即把flex app传递过来的String类型的json格式的的数据解码开来，然后根据对应的Id把更新后的名字保存在数据库中。这里我们传递过来的是整个 datagrid的信息，不管是有没有更新的，都要循环的更新所有员工的信息。所以呢，在你的程序中你的JsonGrid.java文件应该类似：
Xml代码
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 = "com.mysql.jdbc.Driver";   
    private String conURL = "jdbc:mysql://localhost:3306/test";   
    private String userName = "root";   
    private String userPass = "liceven";   
       
    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();   
        //jsonDatajsonData = 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;   
    }   
}  
view plaincopy to clipboardprint?
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 = "com.mysql.jdbc.Driver";  
    private String conURL = "jdbc:mysql://localhost:3306/test";  
    private String userName = "root";  
    private String userPass = "liceven";  
      
    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();  
        //jsonDatajsonData = 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;  
    }  
}  
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 = "com.mysql.jdbc.Driver";     private String conURL = "jdbc:mysql://localhost:3306/test";     private String userName = "root";     private String userPass = "liceven";          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;     } } 接下来我们看看flex app前台的处理。

前面我们已经说过了后台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没有被更新，都会被传递到后台做更新处理，浪费了资源。当然我们可以做到只传递更新部分的数据！！

 

文章来自: 闪客居(www.flashas.net) 详文参考：http://www.flashas.net/html/Flex/20080611/3214.html