Flex数据交互之Remoting
一 前言
Flex数据交互常用的有三种方式:WebService、HttpService以及Remoting。
WebService方式已在这篇文章中给出,这篇文章主要讲解以Remoting方式进行数据交互,Remoting是基于AMF的数据交互,速度及性能均较WebService好,是公认最有效率的方法。
二 FluorineFX
FluorineFx是一个开源库,提供了一种在.NET Framework下对Flex/Flash的远程调用过程。FluorineFx官网地址在这,FluorineFx可以在这下载。
下载安装后,会在vs2008中自动增加两处模板:FluorineFx ServicesLibrary与FluorineFx ASP.NET Web Site。
接下来演示如何利用FluorineFx进行Flex与ASP.NET数据交互。
三 ASP.NET服务器开发
(1)新建FluorineFx ServicesLibrary类库,如下图:
(2)在刚才建立的解决方案FlexRemotingDemo中,添加FluorineFx ASP.NET Web Site网站,如下图:
该网站会自动引入FlexRemotingDemo.dll:
在类库FlexRemotingDemo的Sample.cs文件中可以添加自己的函数:
/// <summary> /// 获得监测站信息(14个监测站) /// </summary> /// <returns></returns>public string getStationInfo(){string json = "";DataTable dt = new DataTable();dt = helper.GetStationInfo();if (dt != null){json = ConverTableToJSON(dt);}return json;}
将网站发布到IIS下:运行即可看到结果:
(3)修改WEB-INF\flex下的services-config.xml配置文件:
<channels><channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel"><endpoint uri="http://localhost/FlexRemotingDemo/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/><properties><!-- <legacy-collection>true</legacy-collection> --></properties></channel-definition><!--<channel-definition id="my-rtmp" class="mx.messaging.channels.RTMPChannel"><endpoint uri="rtmp://{server.name}:2037" class="flex.messaging.endpoints.RTMPEndpoint"/><properties><idle-timeout-minutes>20</idle-timeout-minutes></properties></channel-definition>--></channels>
四 Flex客户端开发
(1)新建Flex项目:
(2)配置Flex项目FlexRemotingDemo:
(3)编写程序代码:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"><fx:Declarations><mx:RemoteObject id="RO" destination="fluorine" source="ServiceLibraryDemo.Sample"><mx:method name="getStationInfo" result="onResult(event)"/></mx:RemoteObject></fx:Declarations><fx:Script><![CDATA[import mx.events.FlexEvent;import mx.rpc.AbstractOperation;import mx.rpc.events.ResultEvent; protected function btn1_clickHandler(event:MouseEvent):void{ RO.getStationInfo();}public function onResult(evt:ResultEvent):void{txt1.text=evt.result.toString();}]]></fx:Script><s:Button id="btn1" label="获得14个监测站信息" x="630" y="50" click="btn1_clickHandler(event)"/><s:TextArea id="txt1" x="20" y="40" width="600" /> </s:Application>
运行结果如下:
五 源码下载
源码在这下载。
2013年12月12日修改
源码下载。
六 RemoteObject的封装
如上面,用起来相对比较麻烦,封装RemoteObject以方便使用,这篇文章给出了相应的封装方法,我略作改动以适用本程序。
(1)CYMRemoteObject.cs
package components {/*** @author chenyuming*/import mx.controls.Alert;import mx.rpc.AbstractOperation;import mx.rpc.AsyncToken;import mx.rpc.CallResponder;import mx.rpc.Responder;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;import mx.rpc.remoting.mxml.RemoteObject;public class CYMRemoteObject extends RemoteObject{public static const DEFAULT_DESTINATION:String = "fluorine";public static const DEFAULT_SOURCE:String = "";public function CYMRemoteObject(source:String,destination:String = DEFAULT_DESTINATION){this.source = source;super(destination);}public function call(methodName:String, callback:Function, ...args):void {var method:AbstractOperation = this.getOperation(methodName);//为了方便起见,如果有多个参数的话就把参数包成一个Array,在J2EE端使用Object[]来获取参数method.arguments = args;var call:AsyncToken = method.send();call.userDefinedCallback = callback;call.addResponder(new Responder(resultCallback, faultCallback));}public function resultCallback(event:ResultEvent):void {var callback:Function = event.token.userDefinedCallback as Function;if (callback != null) {var result:CYMRemoteObjectResult = new CYMRemoteObjectResult();result.error = false;result.result = event.result;callback(result);}}public function faultCallback(event:FaultEvent):void {var callback:Function = event.token.userDefinedCallback as Function;if (callback != null) {var result:CYMRemoteObjectResult = new CYMRemoteObjectResult();result.error = true;result.errorMessage = event.fault.toString();callback(result);}}} }
CYMRemoteObjectResult.cs
package components {/*** @author chenyuming*/public class CYMRemoteObjectResult{public function CYMRemoteObjectResult(){}public var error:Boolean = false;public var errorMessage:String = null;public var result:Object = null;} }
(2)引用方式
protected function btn1_clickHandler(event:MouseEvent):void {var ro:CYMRemoteObject = new CYMRemoteObject("ServiceLibraryDemo.Sample", "fluorine");ro.call("getStationInfo",onResult3);//RO.getStationInfo(); }public function onResult3(evt:CYMRemoteObjectResult):void {if(evt.error){Alert.show(evt.errorMessage);}else{txt1.text=evt.result.toString();}}
七 返回DataTable类型
上面利用getStationInfo返回的是json类型,有时服务器端更喜欢直接返回DataTable类型以便于直接绑定Flex中形如DataGrid的容器,下面演示数据交互类型为DataTable:
(1)服务器端:Sample.cs中增加函数getStationInfo2
/// <summary> /// 获得监测站信息(14个监测站) /// </summary> /// <returns></returns> public DataTable getStationInfo2() {DataTable dt = new DataTable();dt = helper.GetStationInfo();return dt; }
(2)客户端Flex:FlexRemotingDemo.mxml中添加DataGrid容器
<s:Button id="btn2" label="获得14个监测站信息" x="630" y="199" click="btn2_clickHandler(event)"/> <s:DataGrid id="dg" x="20" y="199" width="600" height="401" dataProvider="{arrColl}"requestedRowCount="14" textAlign="center"><s:columns><s:ArrayList><s:GridColumn width="{0.21 * this.dg.width}" dataField="jcd_name" headerText="监测点名称"></s:GridColumn><s:GridColumn width="{0.13 * this.dg.width}" dataField="ssly" headerText="所属流域"></s:GridColumn><s:GridColumn width="{0.30 * this.dg.width}" dataField="zyzbytr" headerText="主要植被与土壤"></s:GridColumn><s:GridColumn width="{0.10 * this.dg.width}" dataField="xqsl" headerText="小区数量"></s:GridColumn><s:GridColumn width="{0.13 * this.dg.width}" dataField="fjswylz" headerText="附近水文雨量站"></s:GridColumn><s:GridColumn width="{0.13 * this.dg.width}" dataField="jgsj" headerText="竣工时间"></s:GridColumn></s:ArrayList></s:columns> </s:DataGrid>
利用封装好的RemoteObejct对象CYMRemoteObject来绑定DataGrid:
[Bindable] private var arrColl:ArrayCollection = new ArrayCollection();protected function btn2_clickHandler(event:MouseEvent):void {var ro:CYMRemoteObject = new CYMRemoteObject("ServiceLibraryDemo.Sample","fluorine");ro.call("getStationInfo2",onResult2); }public function onResult2(evt:CYMRemoteObjectResult):void {if(evt.error){Alert.show(evt.errorMessage);}else{arrColl.removeAll();// 获取列名var columnName:Array = evt.result.serverInfo.columnNames as Array;//获取数据var columnData:Array = evt.result.serverInfo.initialData as Array;//列数组var columns:Array=new Array(); for(var rowIndex:int = 0; rowIndex < columnData.length; rowIndex++){var obj:Object = new Object();for(var colIndex:int = 0; colIndex < columnName.length; colIndex++){ var key:String = columnName[colIndex].toString();var value:String = columnData[rowIndex][colIndex].toString(); obj[key] = value;}arrColl.addItem(obj);}}}
运行结果:
八 相关文章
(1)Flex数据交互之WebService
Flex数据交互之Remoting相关推荐
- Flex数据交互之Remoting[转]
Flex数据交互之Remoting 一 前言 Flex数据交互常用的有三种方式:WebService.HttpService以及Remoting. WebService方式已在这篇文章中给出,这篇文章 ...
- JavaWeb项目使用BlazeDS整合Flex进行RemoteObject数据交互
目标: 1,Java Web Project整合Flex 2,Flex中AS代码调用RemoteObject与Java数据交互 环境: 1,JDK1.6 2,MyEclipse10 3,Adobe F ...
- flex与JavaScript的数据交互
上一篇发了 flex3 接受外部参数 ,但是后来想想,应该更进一步的了解 flex与JavaScript的数据交互. 第一种: test4.swf 代码: <?xml version=" ...
- 构建Flex数据服务程序
构建Flex数据服务程序 当我们使用Flex数据服务来开发程序,我们利用加强的数据服务体系结构.这个话题包含Flex数据服务的一个概览. 关于Flex数据服务 我们通过添加Flex数据服务构建基于Fl ...
- Springboot+Vue实现简单的前端后分离数据交互
目录 一,前后端分离介绍 二,与传统单体结构的比较 2.1,传统单体结构开发 2.2,前后端分离结构开发 三,简单实现前后端数据交互 1,准备的环境及工具 2,开发步骤 2.1,后端部分 2.2,前端 ...
- 微信小程序(第二十四章)- 数据交互前置
微信小程序(第二十四章)- 数据交互前置 讲解微信小程序前置的原因 参考文档 理解微信小程序 小程序简介 作用 提问 针对提问--uni-app介绍 小程序和普通网页开发的区别 小程序代码构成 文件个 ...
- AMFPhp与Flash||Flex 的交互后——台技术区分类导航
2010-12-03 21:07 http://bbs.9ria.com/redirect.php?tid=57798&goto=lastpost php简介及学习方法 [转载]PHP大潮将至 ...
- vue前端与Django后端数据交互
现在接触的项目是vue作为前端,Django作为后端的.二者之间的数据交互是二者连接起来的关键,这里以get为例,vue将后端拿到的数据进行展示.万事开头难,加油~ 后端 数据库 这是数据库中的数据, ...
- vue2 + vuex 高度还原 饿了么 App,与官方后台真实数据交互,获取商品信息,实现登陆、购物车、下单等功能...
前言 vue2的发布后自己也研究了一段时间,奈何公司的技术栈是以react为主,没有机会好好利用vue2去做一个完整的项目.虽然写了几个demo,但和写一个完整的项目还是有很大差别的.于是自己想着用空 ...
最新文章
- HTTP中Get与Post的区别
- JUnit报initializationError的解决方法
- java 肌汉模式_设计模式之原型模式详解(附源代码)
- linux网络编程之用多线程实现客户端到服务端的通信(基于udp)
- 一文带你熟知ForkJoin
- 50 岁程序员创业说:两个月提交 50 个 PR,三个月内融资 2000 万美元
- 计算机是怎样跑起来的
- html自动写对联,html中的对联代码
- 新版C语言面试题面试题库(含答案)
- 大数据用kettle还是python_kettle大数据抽取实际
- 【机器学习-学习笔记】吴恩达老师机器学习课的笔记(黄海广博士)
- 教你用python制作证件照片啦学会再也不用跑去照相馆拍照了~
- 算法系列——输出所有的笛卡尔积组合
- 求vector向量中的最大值与最小值
- 我的世界java版刷雪球机,我的世界手机版怎么刷雪球 无限刷雪球机
- vue echarts中改变canvas长和宽 自适应
- 压缩脚本linux shell
- HUST软测1504班第6周小组作业成绩
- 一张工程师的能力图的评述
- 购物打折C语言程序设计,算法提高 促销购物(动态规划+完全背包)-----------------C语言——菜鸟级...
热门文章
- 一般网页宽度设置多少像素合适?
- Altium Designer、EAGLE、OrCAD、Proteus、KiCAD、LTspice、NI Multisim这些软件各有什么优缺点...
- 论分布式数据库架构的“存”与“算”
- vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
- Spring Tools Suite (STS) 简介及下载
- 易用性测试及GUI常见的测试要求
- 欧债危机传染面再扩大 中国出口面临新冲击
- Javaweb教程(2023-1-10)
- 智能家居项目(六)之摄像头模块
- PS多个版本免费本地高速下载(包含2021)