Flex 4.5 action data communication

1,386 views

Published on

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

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,386
On SlideShare
0
From Embeds
0
Number of Embeds
296
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Flex 4.5 action data communication

    1. 1. Flex4.5 实战课程 数据交互与通信 http://weibo.com/agilelife 2011.08.26
    2. 2. 数据交互与通信 Contents 1. Flex中的数据集合 2. XML 数据表现形式 3. JSON 4. AMF 1. URLLoader 数据交互与通信 2. HTTPService 3.WebService 4. RemoteObject
    3. 3. 数据交互与通信 Overview
    4. 4. 数据交互与通信 DataCollection 1. Flex中的数据集合 Array ArrayCollection XMLList XMLListCollection
    5. 5. 数据交互与通信 DataCollection
    6. 6. 数据交互与通信 DataCollection private var nameArray:Array = ["jex", "kenny", "richard"]; //或者 private var nameArrayCollection:ArrayCollection = new ArrayCollection(nameArray); private var nameArrayCollection:ArrayCollection = new ArrayCollection(); nameArrayCollection.source = nameArray;
    7. 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. 8. 数据交互与通信 XML Array ArrayCollection XMLList XMLListCollection 区别何在?
    9. 9. 数据交互与通信 DataCollection
    10. 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. 11. 数据交互与通信 XML var xml:XMLList = dataXML.product; trace(xml.toXMLString(); 以XMLList方式列出所有Production的信息
    12. 12. 数据交互与通信 XML var xml:XMLList = dataXML.product.(@name == "苹果MC700CH"); var xml:XMLList = dataXML.product.(attribute("name")=="苹果MC700CH"); 得到name为“苹果MC700CH”这条Product
    13. 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. 14. 数据交互与通信 XML //等价于:var xml:XMLList = dataXML.product.price; var xml:XMLList = dataXML..price; 获取所有产品的price
    15. 15. 数据交互与通信 JSON JSON: JavaScript Object Notation 当前比较流行的一 轻量级数据交换格式 JavaScript标准的一个子集 在前端 发中常用 使用简单但 活性高
    16. 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. 17. 数据交互与通信 JSON JSON三类表示方式 3. 混合使用前 形式 {"persons":[ {"firstName":"jex", "lastName":"chan"}, {"fistName":"kenny", "lastName":"yang"}, {"fistName":"hafid", "lastName":"tang"} ]} Object
    18. 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. 19. 数据交互与通信 AMF AMF: Action Message Format http://opensource.adobe.com/wiki/download/attachments/1114283/amf3_spec_05_05_08.pdf Adobe专属的一 二进制压缩格式 分为AMF0和AMF3 个大的版本 在前端 发中常用 高效
    20. 20. 数据交互与通信 AMF http://www.jamesward.com/census
    21. 21. 数据交互与通信 AMF 不同语言的AMF实现 作为网 (AMF Gateway) ActionScript类型与其它语言类型的序列化与反序列化
    22. 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. 23. 数据交互与通信ata Communication 访问服务器端服务 URLLoader HTTPService WebService RemoteObject Socket
    24. 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. 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. 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. 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. 28. 数据交互与通信ata Communication URLLoader与HTTPService的不同
    29. 29. 数据交互与通信 WebService 简繁体转换Web服务 http://www.webxml.com.cn/WebServices/TraditionalSimplifiedWebService.asmx?wsdl
    30. 30. 数据交互与通信 WebService 利用WebService组件访问WebServiceprivate 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. 31. 数据交互与通信 AMF BlazeDS与LCDS在功能上的对比 http://www.jexchen.com/?p=94 Flex + BlazeDS + Java环境配置 http://www.jexchen.com/?p=87
    32. 32. 数据交互与通信 AMF BlazeDS Builds 4.0.1.21287 blazeds.war blazeds-spring.war samples.war samples-spring.war
    33. 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. 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. 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. 36. 数据交互与通信 Notes 作 业 ~~
    37. 37. 提问Q&A 谢谢〜~〜~ 微博: http://weibo.com/agilelife

    ×