flex java mysql,使用Flex,Java，Json更新Mysql数据【2】

前面我们已经说过了后台java bean的处理，接着我们讲前台flex app的处理。flex app界面包含一个datagrid,两个button和一个Label。所以前台的JsonGrid.mxml代码设计如下：

creationComplete="{initDataGrid()}" editable="true" itemEditEnd="{checkName(event)}" verticalScrollPolicy="on">

界面设计好了之后，我们开始做读取数据的处理。我们采用的是remoteObject的方法所以，在mxml中添加,destination指定的为后台java bean中的json.JsonGrid中的getJsonArray()这个方法。

由于getJsonArray方法返回的是一个array类型的数据，所以我们要在mxml中的AS定义一个dataArray，同时这个dataArray也作为datagrid的一个data provier.我们的设计是在程序加载的时候自动读取数据，所以要在在中使用了creationComplete="{initDataGrid()}" 来初始化这个dataArray,以及执行读取数据的功能和对结果进行处理：

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+"条员工信息";

}

]]>

按钮执行的是同样的功能。其实这时候已经完成了读取数据的工作了。要成功的运行的话，我们还需要在flex/remoting-config.xml指定channel作为flex app与java bean的沟通渠道。即添加：

jsongrid.JsonGrid

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

首先我们要把datagrid中的data provider中的数据，这里是我们前面说的dataArray,转换成json格式，然后作为参数由remoteObject的方式传给java bean,由java bean完成跟新数据的操作。为了确保用户在更新datagrid之后能够与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:

然后开始做用户安下更新按钮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添加：

jsongrid.JsonGrid

所以你前台的flex app代码应该类似如下：

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;

}

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);

}

]]>

creationComplete="{initDataGrid()}" editable="true" itemEditEnd="{checkName(event)}" verticalScrollPolicy="on">

这个程序到此就讲解结束了，基本实现了flex app利用balzeds，java,json完成和后台的mysql的沟通：数据的读取和更新。缺点在与每次更新的时候，传递都是整个data provider中的数据，无论有的row没有被更新，都会被传递到后台做更新处理，浪费了资源。当然我们可以做到只传递更新部分的数据！！