`
dawuafang
  • 浏览: 1091630 次
文章分类
社区版块
存档分类
最新评论

JSON扫盲帖

 
阅读更多

[心得]JSON扫盲帖+JSON类教程

昨天发了json的AS3解析类,从大家的跟帖上来看,好多人还是不知道这个东西的,特建一个扫盲贴。
其实在AS中使用json其实并不是一个必须或是很好的选择,因为AS对xml的解析已经很不错了,但是为什么可以考虑使用json呢,有以下几点:
  • json是介于单纯的文本方式(如:firstName=Brett&lastName=McLaughlin&email=brett@newInstance.com)和xml(<request><firstName>Brett</firstName><lastName>McLaughlin</lastName><email>brett@newInstance.com</email></request>)中间的一种格式,他具有文本和xml的中性优势:数据量小和清晰的数据格式。
  • json是JavaScript Object Notation的简写,那么意思就是说他是来自于javascript的东西。因为现在ajax的流行,大部分网站会采用ajax的模式和构架,那么json会是一个数据传输的首选(文本方式太简单,要是大数据量的时候无法理解,xml的方式数据量大,在解析的时候会增加服务器负担),那么要是一个网站从ajax构架的基础上出一个flex/flash版的界面的时候使用json会最少地减少服务器端的程序改动。
  • 服务器端现在有成熟的JSON解析代码(因为JSON运用太广泛了),那么在开发的时候也不用担心服务器端的解析。
ps:我怎么只能想到上面三点啊,会不会理由太少了?

JSON是什么?

简单 JSON 示例
按照最简单的形式,可以用下面这样的 JSON 表示名称/值对:
  1. { "firstName": "Brett" }
复制代码
这个示例非常基本,而且实际上比等效的纯文本名称/值对占用更多的空间:
  1. firstName=Brett
复制代码
但是,当将多个名称/值对串在一起时,JSON 就会体现出它的价值了。首先,可以创建包含多个名称/值对的记录,比如:
  1. { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }
复制代码
从语法方面来看,这与名称/值对相比并没有很大的优势,但是在这种情况下 JSON 更容易使用,而且可读性更好。例如,它明确地表示以上三个值都是同一记录的一部分;花括号使这些值有了某种联系。

值的数组
当需要表示一组值时,JSON 不但能够提高可读性,而且可以减少复杂性。例如,假设您希望表示一个人名列表。在XML中,需要许多开始标记和结束标记;如果使用典型的名称/值对(就像在本系列前面文章中看到的那种名称/值对),那么必须建立一种专有的数据格式,或者将键名称修改为 person1-firstName 这样的形式。
如果使用 JSON,就只需将多个带花括号的记录分组在一起:
  1. { "people": [
  2. { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  3. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  4. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
  5. ]}
复制代码
这不难理解。在这个示例中,只有一个名为 people 的变量,值是包含三个条目的数组,每个条目是一个人的记录,其中包含名、姓和电子邮件地址。上面的示例演示如何用括号将记录组合成一个值。当然,可以使用相同的语法表示多个值(每个值包含多个记录):
  1. { "programmers": [
  2. { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  3. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  4. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
  5. ],
  6. "authors": [
  7. { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  8. { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  9. { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
  10. ],
  11. "musicians": [
  12. { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  13. { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
  14. ]
  15. }
复制代码
这里最值得注意的是,能够表示多个值,每个值进而包含多个值。但是还应该注意,在不同的主条目(programmers、authors 和 musicians)之间,记录中实际的名称/值对可以不一样。JSON 是完全动态的,允许在 JSON 结构的中间改变表示数据的方式。
在处理 JSON 格式的数据时,没有需要遵守的预定义的约束。所以,在同样的数据结构中,可以改变表示数据的方式,甚至可以以不同方式表示同一事物。

ps:以上例子都是来自http://www.ibm.com/developerworks/cn/web/wa-ajaxintro10/掌握 Ajax,自己懒,看人家有就顺便用了


当当当,我又回来了,上周忙这上班没顾上写用法,下面就介绍一下adobe的json类的用法。
上次发表的json类有问题(http://bbs.actionscript3.cn/thread-1625-1-1.html),因为我也是从别人处下载的,谁知道是一个半成品。望大家别生气啊,建议管理员给删除了!
这次是adobe的官方的类,我修改了一下包,这次就可以用了。

下面是教程,比较简单:
1、服务器端来的json
怎么样获得服务器端的json我就不说了吧(就是通讯),那么得到的应该是一个字符串,存入变量serverJSON,使用方式如下:
  1. import json.*;
  2. var json:Object = new Object();
  3. json = JSON.decode(serverJSON);
复制代码

json就是一个对象了,简单吧。
举一个例子:
上面的JSON的一段代码:
  1. { "programmers": [
  2. { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  3. { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  4. { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
  5. ],
  6. "authors": [
  7. { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  8. { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  9. { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
  10. ],
  11. "musicians": [
  12. { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  13. { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
  14. ]
  15. }
复制代码
存入变量:serverJSON

代码:
  1. var serverJSON:String = '{ "programmers": [{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },{ "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" }, { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }],"authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },{ "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },{ "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }],"musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },{ "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]}'
  2. var s:Object = JSON.decode(serverJSON);
  3. //开始使用
  4. trace(s.programmers[0].firstName);//输出:Brett
复制代码

不是吧这么简单。其实转变后就成为一个对象了,可以通过点语法来访问这些值了。XML靠边去。
2、本地对象做成JSON
你要是能自己拼出JSON字符串也可以,不过我们是在面向对象的世界啊,那么我们都是对象啊,到时候对象直接就可以来用了。
举一个例子:
  1. import json.*;
  2. var myObject:Object = new Object();
  3. myObject.ab = "adfsdf";
  4. myObject.cd = Math.random();
  5. trace(JSON.encode( myObject ));//输出:{"ab":"adfsdf","cd":0.0599129400216043}
复制代码

这样就可以给服务器了。
总结:就两个方法,JSON.decode(String),JSON.encode(Object),有这么简单的方式实现传输量小,而且简单的数据格式,我们为什么还不用呢?
其实XML自然也有他自己的强势,当一个结构复杂的数据结构出现的时候,这个时候JSON就很难搞定了,XML就是首选了。



要用到JSON,看了一篇(http://bbs.actionscript3.cn/thread-1657-1-1.html)的扫盲贴,在Flex中使用Json十分方便。json是介于纯文本方式与xml方式之间的一种格式,json能做到的事情,xml完成可以做到。为什么要用json呢,我看大部分还是像我一样,不得不用。json是ajax数据传输的首选,现有的项目使用的已经是json,如果增加flex界面时也使用json,那改动就会非常少。扫盲贴中说出的三个理由,我觉得这一个最充分。

要在flex中使用json,首先要下一个json包。是官方的,却在官方怎么也载不下来。终于在CSDN上用了3分才down下来。放在附件中,需要的可以拿去用。

贴一个例子:

<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
creationComplete
="init()">
<mx:Script>
<![CDATA[

importcom.adobe.serialization.json.*;


privatevarjsonStr:String;
privatevarjsonObj:Object;

privatevarjsonObj2:Object;
privatevarjsonStr2:String;

internalfunctioninit():void{
jsonStr='{"name":"zhanzhihu","age":22,"gender":"male"}';
jsonObj=newObject();
jsonObj=JSON.decode(jsonStr);
trace(jsonObj.name);

jsonObj2=newObject();
jsonObj2.firstName="bill";
jsonObj2.lastName="Gate";
jsonObj2.com="Microsoft";
jsonStr2=JSON.encode(jsonObj2);
trace(jsonStr2);
}

]]>
</mx:Script>
</mx:Application>

输出为:

zhanzhihu
{"firstName":"bill","lastName":"Gate","com":"Microsoft"}

jsonStr是一个json格式的字符串,用JSON.decode(String)便可以将它解析为as对象,同样用JSON.encode(Object)可以将as对象转为json字符串,flex前台对json的操作真是方便。

corelib下载地址:http://code.google.com/p/as3corelib/

分类:Flex 练习


FLEX处理返回的数据,然后绑定有很多种方法.不过看牛人们一般都是对数据进行处理成对象,再绑定到数据集.可能是这样更符合面向对象,也更合乎规范。用JSON对那些牛人来讲可能是方便不少,数据条理也相对清晰很多.
xml 代码
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"xmlns="*"layout="absolute"
  3. creationComplete="service.send()">
  4. <mx:Script>
  5. <![CDATA[
  6. importmx.collections.ArrayCollection;
  7. importmx.rpc.events.ResultEvent;
  8. importcom.adobe.serialization.json.JSON;
  9. privatefunctiononJSONLoad(event:ResultEvent):void
  10. {
  11. //gettherawJSONdataandcasttoString
  12. varrawData:String=String(event.result);
  13. //decodethedatatoActionScriptusingtheJSONAPI
  14. //inthiscase,theJSONdataisaserializeArrayofObjects.
  15. vararr:Array=(JSON.decode(rawData)asArray);
  16. //createanewArrayCollectionpassingthede-serializedArray
  17. //ArrayCollectionsworkbetterasDataProviders,astheycan
  18. //bewatchedforchanges.
  19. vardp:ArrayCollection=newArrayCollection(arr);
  20. //passtheArrayCollectiontotheDataGridasitsdataProvider.
  21. grid.dataProvider=dp;
  22. }
  23. ]]>
  24. </mx:Script>
  25. <mx:HTTPServiceid="service"resultFormat="text"
  26. url="http://weblogs.macromedia.com/mesh/mashedpotato.json"
  27. result="onJSONLoad(event)"/>
  28. <mx:DataGridid="grid"right="10"left="10"top="10"bottom="10">
  29. <mx:columns>
  30. <mx:DataGridColumnheaderText="Service"dataField="src"/>
  31. <mx:DataGridColumnheaderText="Title"dataField="title"/>
  32. </mx:columns>
  33. </mx:DataGrid>
  34. </mx:Application>





使用Flex,Java,Json更新Mysql数据【1】
一直都只有看到从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就可以创建一个简单的员工信息资料表。

CREATEDATABASEIFNOTEXISTS test;
USE test;

DROPTABLEIF EXISTS`employee`;
CREATETABLE`employee`(
`id`varchar(10)NOTNULL,
`name`varchar(45)NOTNULL,
`gender`varchar(10)NOTNULL,
`department`varchar(45)NOTNULL,
PRIMARY KEY(`id`)
)ENGINE=InnoDBDEFAULTCHARSET=latin1;

我们来先看看那后台java bean的处理:他要接受flex app的读取数据和更新数据的请求,而且他们之间的数据传递格式采用的是json.所以我们的java bean的一个框架结构应该是:

publicclassJsonGrid{
privateConnectioncon=null;
privateStringmyDriver="com.mysql.jdbc.Driver";
privateStringconURL="jdbc:mysql://localhost:3306/test";
privateStringuserName="root";
privateStringuserPass="12345";

publicConnectionconToDB(){
try{
Class.forName(myDriver);
con=DriverManager.getConnection(conURL,userName,userPass);
}catch(Exceptione){
e.printStackTrace();
}
returncon;
}
publicStringgetJsonArray(){
Stringresult=newString();
returnresult;
}
publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
returnresult;
}
}

里面包含了两个重要的方法(getJsonArray()和sendJsonArray())分别对应flex app的读取数据和更新数据的请求。在getJsonArray()方法中,要连接数据库,取得员工的信息资料,然后按照json格式封装数据,结果返回给flex app,由flex app中的datagrid显示出来。我们具体看看getJsonArray()这个方法:

publicStringgetJsonArray(){
JSONArray jsonEmployeeArray=newJSONArray();
ResultSetrs=null;
Stringresult=newString();
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
rs=stmt.executeQuery("select * from employee");
while(rs.next()){
JSONObject jsonEmployee=newJSONObject();
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(SQLExceptionex){
ex.printStackTrace();
}

returnresult;
}

内容其实都很简单,只是读取数据和封装成json格式的数据,最后把json array格式的jsonEmployeeArray转换成string格式传输给flex app.即return语句。而当flex app要使用这个json array格式的数据,自然需要按照json格式解码等,后面在介绍。接着看看那个更新数据的方法sendJsonArray():

publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
//jsonData = jsonData.replace("//", "");

JSONArray jsonArray=JSONArray.fromObject(jsonData);

try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
for(inti=0;i<jsonArray.size();i++){
JSONObject jsonObject=JSONObject.fromObject(jsonArray.getString(i));
Stringid=jsonObject.getString("id");
Stringname=jsonObject.getString("name");
stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
}
result="恭喜,成功更新数据!";
conToDb.close();
}catch(Exceptione){
e.printStackTrace();
}
returnresult;
}

即把flex app传递过来的String类型的json格式的的数据解码开来,然后根据对应的Id把更新后的名字保存在数据库中。这里我们传递过来的是整个datagrid的信息,不管是有没有更新的,都要循环的更新所有员工的信息。所以呢,在你的程序中你的JsonGrid.java文件应该类似:

packagejsongrid;

importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;

importnet.sf.json.JSONArray;
importnet.sf.json.JSONObject;

publicclassJsonGrid{
privateConnectioncon=null;
privateStringmyDriver="com.mysql.jdbc.Driver";
privateStringconURL="jdbc:mysql://localhost:3306/test";
privateStringuserName="root";
privateStringuserPass="liceven";

publicConnectionconToDB(){
try{
Class.forName(myDriver);
con=DriverManager.getConnection(conURL,userName,userPass);
}catch(Exceptione){
e.printStackTrace();
}
returncon;
}
publicStringgetJsonArray(){
JSONArray jsonEmployeeArray=newJSONArray();
ResultSetrs=null;
Stringresult=newString();
try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
rs=stmt.executeQuery("select * from employee");
while(rs.next()){
JSONObject jsonEmployee=newJSONObject();
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(SQLExceptionex){
ex.printStackTrace();
}

returnresult;
}
publicStringsendJsonArray(StringjsonData){
Stringresult=newString();
//jsonData = jsonData.replace("//", "");

JSONArray jsonArray=JSONArray.fromObject(jsonData);

try{
ConnectionconToDb=conToDB();
Statementstmt=conToDb.createStatement();
for(inti=0;i<jsonArray.size();i++){
JSONObject jsonObject=JSONObject.fromObject(jsonArray.getString(i));
Stringid=jsonObject.getString("id");
Stringname=jsonObject.getString("name");
stmt.executeUpdate("update employee set name='"+name+"' where id='"+id+"'");
}
result="恭喜,成功更新数据!";
conToDb.close();
}catch(Exceptione){
e.printStackTrace();
}
returnresult;
}
}

接下来我们看看flex app前台的处理。



使用Flex,Java,Json更新Mysql数据【2】
前面我们已经说过了后台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代码应该类似如下:

<?xmlversion="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没有被更新,都会被传递到后台做更新处理,浪费了资源。当然我们可以做到只传递更新部分的数据!!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics