Flex 2.0 与 .NET 2.0 协作应用

1. Flex 2.0与.NET 2.0协作应用 陈明达 厦门读客网程序员 厦门.NET俱乐部会员

2. 我将讲些什么 • Flex概述 • Flex基本数据操作 • Flex和.NET的协作方式 • HttpService • WebService • Socket • Flex和.NET联合调试 • 学习方式

3. Flex技术简介 • 看看Flex都能做些什么 • Demo01 • Demo02

4. 学习Flex的价值 (图片来源:Building Killer Desktop RIAs: Adobe's Next Gen Technology)

5. Flex运行环境构成 (图片来源:Flex 2 technical overview )

6. Action Script 3.0基本语法 Action Script 3.0 C#

7. <mx:Panel width="364" height="110"> <mx:TextInput id="TB_Input" x="10" y="10" width="324"/> <mx:Button x="280" y="38" label="Send"/> <mx:Button x="10" y="38" label="Close Connection"/> </mx:Panel> MXML

8. 列表数据 • 实例化空的列表: var_data:Array = newArray(); • 用已有值初始化列表: var_data:Array = [1,2,3…];//Action Script int[] _data = newint[]{1,2,3….};//C# • 用已有值组合成对象后初始化列表: [Bindable] //当对象作为绑定数据源时要使用Bindable标签 var_data:Array = [ {Name:’Peter’, ID:1}, {Name:’Tom’, ID:2}…]; var_obj1:Object =newObject(); var _obj2:Object =newObject(); _obj1.Name =‘Peter’; _obj1.ID = 1; _obj2.Name =‘Tom’; _obj2.ID = 2; var_data2:Array = [_obj1, _obj2];

9. XML数据 • 以mxml语法定义: <mx:XML id=“_data”> <root> <Member name=“Peter” id=“1” /> </root> </mx:XML> • 以AS3语法定义: //当对象作为绑定数据源时要使用Bindable标签 [Bindable] var_data:XML= <root> <Member name=“Peter” id=“1”> </root>;

10. XML操作 var _data:XML = <root> <member id=“1” name=“Peter”> <city>厦门</city> </member> <member id=“2” name=“Tom”> <city>福州</city> </member> </root> ; _data.member; //XMLList对象 _data.member[0].city; //厦门 _data.member.(@id == 1).city; //厦门 _data.member.(city == “福州”).@name; //Tom

11. 绑定数据 • 在AS中设置数据源: _tree.dataProvider = _data; • 在mxml设置数据源: <mx:Tree dataProvider={_data} … /> • 数据绑定的效果 Demo03

12. 使用HttpService • 建立aspx页面，用于接收或者返回数据 • Flex中创建HttpService，指向上一步创建的aspx页面 <mx:HttpServiceurl=“../Service/xx.aspx” result=“OnResult(event)” /> • 调用HttpService _myService.send(); //无参数 _myService.send({Name:”xxx”, Email:”yyy”}); var _data:Object = new Object(); _data.Name = “XXX”; _data.Email = “yyy”; _myService.send(_data); //参数传递，这种形式在服务端使用Request.Params获取参数 • 在返回事件中处理数据 privatefunction OnResult(event:ResultEvent):void{ _tree.dataProvider = event.result as XML; …… } 示例Demo04

13. HttpService的优点与缺点 • 优点 • 数据格式灵活 • 数据冗余比WebService小) • 缺点 • 需要手动解释数据 • 不适合构建复杂系统 • 难以满足高负载和实时性要求高的需求

14. 使用WebService • 建立.NET WebService，复制WebService的说明地址 • Flex中创建WebService调用，指向.NET WebService <mx:WebService wsdl=“../Service/xxx.asmx?WSDL” result=“OnResult(event)”> <mx:operation name=“HelloWorld” resultFormat=“object”> <mx:request> <name>{TB_Name.text}</name> <email>{TB_Email.text}</email> </mx:request> </mx:operation> </mx:WebService> • 调用WebService //使用operation声明形式时，这样调用 _myService.HelloWorld(); //没有声明操作时，使用这种形式调用 _myService.HelloWorld(TB_Name.text, TB_Email.text); 实例Demo05

15. WebService的优点与缺点 • 优点 • 操作代码简洁直观 • 比HttpService更适合用于复杂系统 • 基于标准，利于系统扩展和移植 • 缺点 • 数据冗余 • 难以满足高负载和实时性要求高的需求

16. 使用Socket连接 • 建立TCP/IP服务器,监听特定端口,例如: TcpListener _listener = new TcpListener(new IPEndPoint(IPAddress.Any, 10000)); • 在Flex中建立Socket对象,连接.NET服务器: var _socket:Socket = new Socket("localhost", 10000); • 发送消息 _socket.writeUTFBytes(“Hello”); //发送Hello到缓冲区，但不立即发送到服务器 _socket.flush(); //将缓冲区的数据一次发送到服务器 • 接收消息 _socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler); privatefunction socketDataHandler(event:ProgressEvent):void { var str:String = readUTFBytes(_socket.bytesAvailable); …..//做爱做的事 } 示例 Demo06服务器Demo06

17. Socket的优点与缺点 • 优点 • 全双工的通讯模式 • 数据量小 • 效应速度快 • 服务器负载小 • 协议灵活 • 缺点 • 开发周期长 • 技术难度较高

18. 设置联合调试环境 • 将VS项目设置成IIS调试，防止调试地址变更 • 设置Flex项目的生成路径到VS项目所在目录或其子目录中 • 将Flex项目的运行和调试路径设置成URL指向以上设置的目录 • 视频演示

19. 学习方式 理论学习方式: • 学基本语法和控件使用 • 学习和服务器协作 • 理解Flex框架的结构，并学着扩展它 我的学习方式: • 想一个有能力实现，但有挑战性并且有意思的项目 • 去实现它，遇到问题时查帮助文档和上网搜索 • 力求完美，令可重做几次

20. FAQ May I Help You?