Flex与Spring集成架构详解

### Flex与Spring集成架构详解 #### 1. 引言 Flex正迅速成为构建交互式富互联网应用（RIA）的标准选择之一，而Spring多年来一直是向不同视图技术交付内容的流行Java框架。本文将深入探讨Flex与Spring的集成，介绍相关的最佳实践和简化架构的方法。 #### 2. 传输架构 许多应用采用三层架构，数据存储在数据库中，Web服务器运行Java服务来访问数据库并检索信息，Java类负责处理业务逻辑，客户端利用浏览器技术运行Flash应用，向Java服务请求所需信息。以下是标准的三层架构图： ```mermaid graph LR classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px; A(客户端):::process -->|调用服务| B(Tomcat服务器):::process B -->|访问数据库| C(数据库):::process B -->|执行Spring服务| D(Spring服务):::process D -->|返回数据| B B -->|返回结果| A ``` 在这个架构中，编译后的Flex和Spring代码驻留在Tomcat服务器上，客户端工作站下载Flex SWF及相关文件，这些文件包含对Spring服务的调用。为了访问数据库，可以使用iBATIS和Hibernate等ORM解决方案，ORM框架也使用依赖注入（DI）。 #### 3. 三种Flex通信协议 Flex提供了通过远程过程调用（RPC）的异步通信和实时通信选项，主要的通信协议有HTTPService、WebService和RemoteObject。在讨论这些协议之前，先了解一下Flex可以使用的后端服务器，以下是一些服务器端技术选项及集成方式： | 服务器技术 | 集成技术 | Flex协议 | | --- | --- | --- | | Java EE | GraniteDS | RemoteObject | | Java EE | LiveCycle DS, BlazeDS | RemoteObject | | .NET | WebORB .NET | RemoteObject | | PHP | WebORB PHP | RemoteObject | | SAP | BSPs | HTTPService | | Spring MVC | JSPs | HTTPService | | Spring | Spring BlazeDS Integration | RemoteObject | | Spring | AMF via SpringFactory | RemoteObject | ##### 3.1 HTTPService协议 HTTPService协议用于Flex客户端通过HTTP(S)使用XML与基于XML的后端服务进行通信，这些后端服务是非SOAP实体，有时也称为代表性状态转移（REST）服务。其请求/响应模型如下： ```mermaid graph LR classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px; A(Flex客户端):::process -->|发送请求| B(后端服务):::process B -->|返回响应| A ``` HTTPService包含一个URL属性，即要调用的Web服务或数据文件的实际URL，数据以纯文本形式通过HTTP通道传输，可以处理XML文件、JSP页面、ASP页面、SAP BSP页面或PHP脚本。大多数HTTPService通信使用HTTP GET和POST方法，GET方法用于从服务器获取数据，POST方法用于向服务器发送数据。 以下是一个Flex HTTPService的示例代码： ```xml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" width="100%" height="100%" verticalGap="0" creationComplete="httpRSS.send()"> <mx:HTTPService id="httpRSS" url="{AF_RSS_FEED_URL}" resultFormat="object" result="onComplete(event)" fault="onFault(event)" showBusyCursor="true"/> <mx:Script> <![CDATA[ import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.controls.Alert; import mx.formatters.DateFormatter; import flash.net.navigateToURL; import mx.collections.ArrayCollection; public var AF_RSS_FEED_URL:String = "http://www.appfoundation.com/blogs/giametta/feed?format=xml"; public var AF_COMPANY_BLOG:String = "http://www.appfoundation.com/blogs/giametta/"; public var AF_HOME_PAGE:String = "http://www.appfoundation.com"; [Bindable] private var externalData:ArrayCollection; private function onComplete(event:ResultEvent):void { var tmp:Object = event.result.rss.channel.item; var items:Array = new Array(); for( var i:String in tmp ) { items.push(tmp[i]); } externalData = new ArrayCollection(items); } private function onFault(event:FaultEvent):void { Alert.show(event.fault.faultString, 'Error'); } private function processURL(url:String):void { var request:URLRequest = new URLRequest(url); navigateToURL(request); } private function rollOutHandler(event:Event):void { moreNews.setStyle("color", 0x28568F); } private function rollOverHandler(event:Event):void { moreNews.setStyle("color", 0x5B88BA); } ]]> </mx:Script> <mx:Panel title="HTTPService Example" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10" horizontalAlign="center" width="416" height="377"> <mx:HBox width="100%" horizontalAlign="left" verticalAlign="middle" paddingLeft="5" paddingRight="10"> <mx:Image source="assets/images/icon_RSS.png" height="16" width="16" useHandCursor="true" buttonMode="true" mouseChildren="false" click="{processURL(AF_RSS_FEED_URL)}" toolTip="RSS Source"/> <mx:Label text="Latest AF News" styleName="frontPageHeaderText"/> <mx:Spacer width="100%"/> <mx:Label id="moreNews" text="More News >>" rollOut="rollOutHandler(event)" rollOver="rollOverHandler(event)" styleName="hyperLinkText" click="{processURL(AF_COMPANY_BLOG)}" useHandCursor="true" buttonMode="true" mouseChildren="false"/> </mx:HBox> <mx:Spacer height="5" /> <mx:HRule height="10" width="100%"/> <mx:VBox width="100%" height="100%" verticalGap="0" paddingLeft="5" paddingRight="10"> <mx:Repeater width="100%" id="rp" count="6" dataProvider="{ externalData }" > <local:RSSEntryRenderer blogItem="{rp.currentItem}" verticalGap="0" /> </mx:Repeater> </mx:VBox> <mx:Label text="www.appfoundation.com" rollOut="rollOutHandler(event)" rollOver="rollOverHandler(event)" styleName="hyperLinkText" click="{processURL(AF_HOME_PAGE)}" useHandCursor="true" buttonMode="true" mouseChildren="false"/> </mx:Panel> </mx:Application> ``` HTTPService适合快速获取数据到Flex客户端的情况，但如果需要在Flex应用中处理XML，可能会比较繁琐，第三方库如JSON可以帮助进行数据交换。 ##### 3.2 WebService协议 WebService是基于HTTP的SOAP消息，使用`<mx:WebService>` MXML标签在Flex中声明Web服务，通过WSDL属性指定要使用的Web服务的URL。以下是WebService的请求/响应模型： ```mermaid graph LR classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px; A(Flex客户端):::process -->|发送请求| B(Web服务):::process B -->|返回响应| A ``` Web服务的两个重要属性是fault和result处理程序，用于处理错误和数据结果。以下是一个Flex WebService的示例代码，用于从公共Web服务获取天气信息： ```xml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"> <mx:WebService id="weatherService" wsdl="http://www.webservicex.net/WeatherForecast.asmx?WSDL" useProxy="false" showBusyCursor="true" fault="Alert.show(event.fault.faultString), 'Error'" result="onResult(event)" > <mx:operation name="GetWeatherByZipCode" resultFormat="e4x" > <mx:request> <ZipCode>{zipcode.text}</ZipCode> </mx:request> </mx:operation> </mx:WebService> <mx:Script> <![CDATA[ import mx.messaging.SubscriptionInfo; import mx.controls.dataGridClasses.DataGridColumn; import mx.rpc.events.ResultEvent; import mx.managers.CursorManager; import mx.controls.Alert; default xml namespace = "http://www.webservicex.net"; [Bindabl ```