Flex4.5实战课程 - 数据交互与通信

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

2. 数据交互与通信
Contents
1. Flex中的数据集合
2. XML
数据表现形式
3. JSON
4. AMF
1. URLLoader
数据交互与通信 2. HTTPService
3.WebService
4. RemoteObject

3. 数据交互与通信
Overview

4. 数据交互与通信
Data
Collection
1. Flex中的数据集合
Array ArrayCollection
XMLList XMLListCollection

5. 数据交互与通信
Data
Collection

6. 数据交互与通信
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;

7. 数据交互与通信
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);

8. 数据交互与通信
XML
Array ArrayCollection
XMLList XMLListCollection
区别何在？

9. 数据交互与通信
Data
Collection

10. 数据交互与通信
var dataXML:XML =
XML
<products>
<product id="001" name="苹果MC700CH">
<price>8988.00</price>
<quatity>20</quatity>
</product>
<product id="002" name="戴尔Inspiron 14R">
<price>4399.00</price>
<quatity>50</quatity>
</product>
<product id="003" name="索尼VPCS138EC">
<price>7699.00</price>
<quatity>45</quatity>
</product>
</products>;

11. 数据交互与通信
XML
var xml:XMLList = dataXML.product;
trace(xml.toXMLString();
以XMLList方式列出所有Production的信息

12. 数据交互与通信
XML
var xml:XMLList = dataXML.product.(@name == "苹果MC700CH");
var xml:XMLList = dataXML.product.(attribute("name")=="苹果MC700CH");
得到name为“苹果MC700CH”这条Product

13. 数据交互与通信
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信息

14. 数据交互与通信
XML
//等价于：var xml:XMLList = dataXML.product.price;
var xml:XMLList = dataXML..price;
获取所有产品的price

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

16. 数据交互与通信
JSON JSON三类表示方式
1. 名称/值 集合
{"firstName":"Jex", "lastName":"Chan", "age":34}
Ojbect
2. 值的有序列表
[{"firstName":"jex", "lastName":"chan"},
{"fistName":"kenny", "lastName":"yang"},
{"fistName":"hafid", "lastName":"tang"}]
Array

17. 数据交互与通信
JSON JSON三类表示方式
3. 混合使用前 形式
{"persons":[
{"firstName":"jex", "lastName":"chan"},
{"fistName":"kenny", "lastName":"yang"},
{"fistName":"hafid", "lastName":"tang"}
]}
Object

18. 数据交互与通信
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+")");

19. 数据交互与通信
AMF
AMF: Action Message Format
http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf
Adobe专属的一 二进制压缩格式
分为AMF0和AMF3 个大的版本
在前端 发中常用
高效

20. 数据交互与通信
AMF
http://www.jamesward.com/census

21. 数据交互与通信
AMF
不同语言的AMF实现
作为网 （AMF Gateway）
ActionScript类型与其它语言类型的序列化与反序列化

22. Java --- BlazeDS Granite Data Service
数据交互与通信 http://opensource.adobe.com/wiki/display/blazeds/BlazeDS
http://www.graniteds.org/confluence/
ata Communication Ruby --- RubyAMF
https://github.com/thillerson/rubyamf
.Net --- FluorineFx
http://www.fluorinefx.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

23. 数据交互与通信
ata Communication
访问服务器端服务
URLLoader
HTTPService
WebService
RemoteObject
Socket

24. 数据交互与通信
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);
}

25. 数据交互与通信
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);

26. 数据交互与通信
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);
%>

27. 数据交互与通信
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);

28. 数据交互与通信
ata Communication
URLLoader与HTTPService的不同

29. 数据交互与通信
WebService
简繁体转换Web服务
http://www.webxml.com.cn/WebServices/TraditionalSimplifiedWebService.asmx?wsdl

30. 数据交互与通信
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企业级应用最佳实践");
}

31. 数据交互与通信
AMF
BlazeDS与LCDS在功能上的对比
http://www.jexchen.com/?p=94
Flex + BlazeDS + Java环境配置
http://www.jexchen.com/?p=87

32. 数据交互与通信
AMF
BlazeDS Builds 4.0.1.21287
blazeds.war
blazeds-spring.war
samples.war
samples-spring.war

33. 数据交互与通信
AMF
配置AMF网关 endpoint
http://localhost:8080/hello/messagebroker/amf
配置BlazeDS remoting-config.xml
<destination id=”helloservice”>
<properties>
<source>com.jexchen.blazeds.HelloWorldService</source>
</properties>
</destination>

34. 数据交互与通信
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>

35. 数据交互与通信
AMF
扩展阅读及参考资源:
BlazeDS 内置范例
Spring Flex:
http://www.springsource.org/spring-flex
BlazeDS 30minute test drive:
http://www.adobe.com/devnet/livecycle/articles/blazeds_testdrive.html
Christophe Coenraets:
http://coenraets.org/blog/

36. 数据交互与通信
Notes
作 业 ～～

37. 提问
Q&A
谢谢〜～〜～
微博: http://weibo.com/agilelife