狠狠撸

Flex4.5 实战课程
数据交互与通信
http://weibo.com/agilelife

2011.08.26


Contents
1. Flex中的数据集合
2. XML
数据表现形式
3. JSON
4. AMF

1. URLLoader
数据交互与通信 2. HTTPService
3.WebService
4. RemoteObject


Overview

Data
Collection

1. Flex中的数据集合
Array ArrayCollection
XMLList XMLListCollection

Data
Collection

Data
Collection

private var nameArray:Array = ["jex", "kenny", "richard"];

//或者 private var nameArrayCollection:ArrayCollection = new ArrayCollection(nameArray);

private var nameArrayCollection:ArrayCollection = new ArrayCollection();
nameArrayCollection.source = nameArray;


XML private var personXML:XML =
<root>
<person>
<firstName>jex</firstName>
<lastName>chan</lastName>
</person>
<person>
<firstName>kenny</firstName>
<lastName>yang</lastName>
</person>
<person>
<firstName>hafid</firstName>
<lastName>tang</lastName>
</person>
</root>;

xmlListCollection = new XMLListCollection(personXML.person);


XML

Array ArrayCollection
XMLList XMLListCollection

区别何在？

var dataXML:XML =
XML
<products>
<product id="001" name="苹果MC700CH">
<price>8988.00</price>
<quatity>20</quatity>
</product>
<product id="002" name="戴尔Inspiron 14R">
</product>
<product id="003" name="索尼VPCS138EC">
</product>
</products>;


XML

var xml:XMLList = dataXML.product;
trace(xml.toXMLString();

以XMLList方式列出所有Production的信息


XML

var xml:XMLList = dataXML.product.(@name == "苹果MC700CH");

var xml:XMLList = dataXML.product.(attribute("name")=="苹果MC700CH");

得到name为“苹果MC700CH”这条Product


XML

var xml:XMLList = dataXML.product.(quatity == 50);

得到quatity为50的Product信息

var xml:XMLList = dataXML.product.(@id == "001" || quatity == 45);

得到id为001或quatity为50的Product信息


XML

//等价于：var xml:XMLList = dataXML.product.price;
var xml:XMLList = dataXML..price;

获取所有产物的price


JSON

JSON: JavaScript Object Notation
当前比较流行的一轻量级数据交换格式
JavaScript标准的一个子集
在前端发中常用
使用简单但活性高


JSON JSON三类表示方式

1. 名称/值集合
{"firstName":"Jex", "lastName":"Chan", "age":34}

Ojbect
2. 值的有序列表
[{"firstName":"jex", "lastName":"chan"},
{"fistName":"kenny", "lastName":"yang"},
{"fistName":"hafid", "lastName":"tang"}]

Array


JSON JSON三类表示方式

3. 混合使用前形式
{"persons":[
{"firstName":"jex", "lastName":"chan"},
{"fistName":"kenny", "lastName":"yang"},
{"fistName":"hafid", "lastName":"tang"}
]}

Object


JSON 在Flex程序中读取JSON
https://github.com/mikechambers/as3corelib

//JSON解码
JSON.decode(srcStr)
(1)
//JSON编码
JSON.encode(srcObj);

//小技巧：直接通过EnternalInterface调用JavaScript方法解析JSON字符串
(2) //var myObj:Object = ExternalInterface.call('eval', "("+jsonStr+")");


AMF

AMF: Action Message Format
http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf

Adobe专属的一二进制压缩格式
分为AMF0和AMF3 个大的版本
在前端发中常用
高效


AMF

http://www.jamesward.com/census


AMF

不同语言的AMF实现

作为网（AMF Gateway）
ActionScript类型与其它语言类型的序列化与反序列化

Java --- BlazeDS Granite Data Service
数据交互与通信 http://opensource.adobe.com/wiki/display/blazeds/BlazeDS
http://www.graniteds.org/con?uence/
ata Communication Ruby --- RubyAMF
https://github.com/thillerson/rubyamf

.Net --- FluorineFx
http://www.?uorinefx.com/

Python --- pyAMF amfast
http://pyamf.org/
http://code.google.com/p/amfast/

PHP --- phpAMF
https://github.com/amfphp/amfphp-1.9

Node.JS --- node-amf
https://github.com/timwhitlock/node-amf

Objective-C --- cocoa-amf
https://github.com/nesium/cocoa-amf

Erlang --- erlang-amf
http://github.com/mujaheed/erlang-amf

WebORB http://www.themidnightcoders.com/products.html


ata Communication

访问服务器端服务
URLLoader
HTTPService
WebService
RemoteObject
Socket


URLLoader

URLLoader
private function onClick():void {
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, onLoadComplete);
urlLoader.load(new URLRequest("../assets/person.xml"));
}

private function onLoadComplete(evt:Event):void {
trace(evt.target.data);
}


URLLoader

利用URLLoader向服务端 Post数据 -- Flex端
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("http://localhost:8080/jsp_flex/hello_flex.jsp");
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
var params:URLVariables = new URLVariables();
params.userName = "JexChan";
params.address = "ChengDu";
request.data = params;
request.method = URLRequestMethod.POST;
loader.addEventListener(Event.COMPLETE, onLoadComplete);
loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
loader.load(request);


URLLoader

利用URLLoader向服务端 Post数据 -- JSP端
<%@page contentType="text/html;charset=gb2312" language="java" %>
<%
String name=request.getParameter("userName");
String address=request.getParameter("address");
out.println("Back from JSP: " + "userName= " + name + " address= " + address);
%>


HTTPService

利用HTTPService向服务端 Post数据 -- Flex端
//httpService = new HTTPService();
//httpService.destination = "http://localhost:8080/jsp_flex/hello_flex.jsp";
//httpService.method = "POST";
var params:Object = {};
params.userName = "JexChan";
params.address = "ChengDu";
httpService.addEventListener(ResultEvent.RESULT, onHTTPServiceResult);
httpService.addEventListener(FaultEvent.FAULT, onHTTPServiceFault);
httpService.send(params);


ata Communication

鲍搁尝尝辞补诲别谤与贬罢罢笔厂别谤惫颈肠别的不同


WebService

简繁体转换Web服务
http://www.webxml.com.cn/WebServices/TraditionalSimpli?edWebService.asmx?wsdl


WebService

利用WebService组件访问WebService
private function onClick():void {
webService = new WebService();
webService.wsdl = WSDL_URL;
webService.addEventListener(ResultEvent.RESULT, onWebServiceResult);
webService.addEventListener(FaultEvent.FAULT, onWebServiceFault);
webService.toTraditionalChinese.resultFormat = "object";

webService.loadWSDL(WSDL_URL);
webService.addEventListener(LoadEvent.LOAD, onWSDLLoad);
}

private function onWSDLLoad(evt:LoadEvent):void {
webService.toTraditionalChinese("Flex公司级应用最佳实践");
}


AMF

BlazeDS与LCDS在功能上的对比
http://www.jexchen.com/?p=94

Flex + BlazeDS + Java环境配置
http://www.jexchen.com/?p=87


AMF

BlazeDS Builds 4.0.1.21287
blazeds.war
blazeds-spring.war
samples.war
samples-spring.war


AMF

配置AMF网关 endpoint
http://localhost:8080/hello/messagebroker/amf

配置BlazeDS remoting-con?g.xml
<destination id=”helloservice”>
<properties>
<source>com.jexchen.blazeds.HelloWorldService</source>
</properties>
</destination>


AMF

private function onCall():void {
myService.sayHello(nameInput.text);
}

<fx:Declarations>
<s:RemoteObject id="myService" destination="helloservice"
endpoint="http://localhost:8080/hello/messagebroker/amf" />
</fx:Declarations>


AMF

扩展阅读及参考资源:

BlazeDS 内置范例
Spring Flex:
http://www.springsource.org/spring-?ex

BlazeDS 30minute test drive:
http://www.adobe.com/devnet/livecycle/articles/blazeds_testdrive.html

Christophe Coenraets:
http://coenraets.org/blog/


Notes

作业～～

提问
Q&A

谢谢?～?～
微博: http://weibo.com/agilelife

狠狠撸

Flex 4.5 action data communication

More Related Content

Flex 4.5 action data communication

Editor's Notes