zoukankan      html  css  js  c++  java
  • Flex+BlazeDS+Spring整合

    Flex与服务器通讯有3中方式:HTTPService 组件访问HTTP服务,WebService 组件访问WebService服务,RemoteObject 组件访问Server端对象。第三种方法是最常用最灵活的方法,这种方式通过AMF二进制形式传递数据,需要支持AMF协议的中间件,与java通讯时使用BlazeDS(免费开源)中间件。

            新建项目

            新建Flex项目,服务器选择J2EE-->BlazeDS,LCDS WAR文件选择blazeds.war文件(下载地址http://download.csdn.net/detail/sjepy/4464788),完成后在FlexDemo.mxml中添加如下代码:

    1. <mx:DataGridwidth="400"height="200"> 
    2.     <mx:columns> 
    3.         <mx:DataGridColumnheaderText="姓名"dataField="name"/> 
    4.         <mx:DataGridColumnheaderText="年龄"dataField="age"/> 
    5.         <mx:DataGridColumnheaderText="邮箱"dataField="email"/> 
    6.     </mx:columns> 
    7. </mx:DataGrid> 
    	<mx:DataGrid width="400" height="200">
    		<mx:columns>
    			<mx:DataGridColumn headerText="姓名" dataField="name"/>
    			<mx:DataGridColumn headerText="年龄" dataField="age"/>
    			<mx:DataGridColumn headerText="邮箱" dataField="email"/>
    		</mx:columns>
    	</mx:DataGrid>

            在Servers视图中添加FlexDemo,启动服务,访问http://localhost:8080/FlexDemo/FlexDemo.html,如果出现空列表则表明项目能正常运行。

            使用RemoteObject与java通讯

            1.在后台新建EmployeeService,返回员工信息到前台flex

    1. package demo.flex.service; 
    2.  
    3. import java.util.ArrayList; 
    4. import java.util.HashMap; 
    5. import java.util.List; 
    6. import java.util.Map; 
    7.  
    8. publicclass EmployeeService {  
    9.  
    10.     public List<Map> getEmpList() { 
    11.          
    12.         List<Map> empList = new ArrayList<Map>(); 
    13.         Map emp = null
    14.          
    15.         for (int i = 0; i < 5; i++) { 
    16.             emp = new HashMap(); 
    17.             emp.put("name", "name" + i); 
    18.             emp.put("age", 20 + i); 
    19.             emp.put("email", "email" + i + "@flex.demo"); 
    20.             empList.add(emp); 
    21.         } 
    22.  
    23.         return empList; 
    24.     } 
    package demo.flex.service;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    public class EmployeeService { 
    
    	public List<Map> getEmpList() {
    		
    		List<Map> empList = new ArrayList<Map>();
    		Map emp = null;
    		
    		for (int i = 0; i < 5; i++) {
    			emp = new HashMap();
    			emp.put("name", "name" + i);
    			emp.put("age", 20 + i);
    			emp.put("email", "email" + i + "@flex.demo");
    			empList.add(emp);
    		}
    
    		return empList;
    	}
    }

            2.在WEB-INF/flex/remoting-config.xml文件中添加EmployeeService 对应的 destination

    1. <destinationid="employeeService"> 
    2.     <properties> 
    3.         <source>demo.flex.service.EmployeeService</source> 
    4.     </properties> 
    5. </destination> 
    <destination id="employeeService">
        <properties>
            <source>demo.flex.service.EmployeeService</source>
        </properties>
    </destination>

            3.修改FlexDemo.mxml,通过RemoteObject直接调用后台EmployeeService的getEmpList()方法

    1. <s:Applicationxmlns:fx="http://ns.adobe.com/mxml/2009"  
    2.                xmlns:s="library://ns.adobe.com/flex/spark"  
    3.                xmlns:mx="library://ns.adobe.com/flex/mx"creationComplete="init()"> 
    4.     <fx:Script> 
    5.         <![CDATA[
    6.             import mx.collections.ArrayCollection;
    7.             import mx.controls.Alert;
    8.             import mx.events.FlexEvent;
    9.             import mx.rpc.events.FaultEvent;
    10.             import mx.rpc.events.ResultEvent;
    11.            
    12.             [Bindable]
    13.             private var empList:ArrayCollection;
    14.            
    15.             protected function empRemote_resultHandler(event:ResultEvent):void
    16.             {
    17.                 empList = event.result as ArrayCollection;
    18.             }
    19.            
    20.             protected function empRemote_faultHandler(event:FaultEvent):void
    21.             {
    22.                 Alert.show(event.toString());
    23.             }
    24.            
    25.             protected function init():void
    26.             {
    27.                 empRemote.getEmpList();
    28.             }
    29.         ]]> 
    30.     </fx:Script> 
    31.     <fx:Declarations> 
    32.         <s:RemoteObjectid="empRemote"destination="employeeService"> 
    33.             <s:methodname="getEmpList"result="empRemote_resultHandler(event)"fault="empRemote_faultHandler(event)"/> 
    34.         </s:RemoteObject> 
    35.     </fx:Declarations> 
    36.      
    37.     <mx:DataGridwidth="400"height="200"dataProvider="{empList}"> 
    38.         <mx:columns> 
    39.             <mx:DataGridColumnheaderText="姓名"dataField="name"/> 
    40.             <mx:DataGridColumnheaderText="年龄"dataField="age"/> 
    41.             <mx:DataGridColumnheaderText="邮箱"dataField="email"/> 
    42.         </mx:columns> 
    43.     </mx:DataGrid> 
    44. </s:Application> 
    <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" creationComplete="init()">
    	<fx:Script>
    		<![CDATA[
    			import mx.collections.ArrayCollection;
    			import mx.controls.Alert;
    			import mx.events.FlexEvent;
    			import mx.rpc.events.FaultEvent;
    			import mx.rpc.events.ResultEvent;
    			
    			[Bindable]
    			private var empList:ArrayCollection;
    			
    			protected function empRemote_resultHandler(event:ResultEvent):void
    			{
    				empList = event.result as ArrayCollection;
    			}
    			
    			protected function empRemote_faultHandler(event:FaultEvent):void
    			{
    				Alert.show(event.toString());
    			}
    			
    			protected function init():void
    			{
    				empRemote.getEmpList();
    			}
    		]]>
    	</fx:Script>
    	<fx:Declarations>
    		<s:RemoteObject id="empRemote" destination="employeeService" >
    			<s:method name="getEmpList" result="empRemote_resultHandler(event)" fault="empRemote_faultHandler(event)"/>
    		</s:RemoteObject>
    	</fx:Declarations>
    	
    	<mx:DataGrid width="400" height="200" dataProvider="{empList}">
    		<mx:columns>
    			<mx:DataGridColumn headerText="姓名" dataField="name"/>
    			<mx:DataGridColumn headerText="年龄" dataField="age"/>
    			<mx:DataGridColumn headerText="邮箱" dataField="email"/>
    		</mx:columns>
    	</mx:DataGrid>
    </s:Application>

            4.重新运行项目,界面显示后台返回的员工信息。如果弹出错误信息:HTTP:Status:url:http://localhost:8080/WebContent/messagebroker/amf....打开项目根目录,修改.flexProperties文件中serverContextRoot="/WebContent"为serverContextRoot="/FlexDemo",刷新项目重新运行。(注:我在做本测试时没有问题,但做数据推送测试时后台一直收不到前台订阅信息,浪费了很多时间,一直以为是配置问题,最后才发现是serverContextRoot的原因,建议一定修改serverContextRoot)         整合Spring

            1.测试使用Spring版本为3.0.5(下载3.1.1http://download.csdn.net/detail/sjepy/5516699),用到的jar包:

    springframework及依赖包: aopalliance.jar aspectjweaver.jar cglib-nodep-2.1_3.jar(下载地址http://download.csdn.net/detail/sjepy/5516813) org.springframework.aop-3.0.5.RELEASE.jar org.springframework.asm-3.0.5.RELEASE.jar org.springframework.beans-3.0.5.RELEASE.jar org.springframework.context-3.0.5.RELEASE.jar org.springframework.core-3.0.5.RELEASE.jar org.springframework.expression-3.0.5.RELEASE.jar org.springframework.web.servlet-3.0.5.RELEASE.jar org.springframework.web-3.0.5.RELEASE.jar BlazeDS + Spring整合: org.springframework.flex-1.0.3.RELEASE.jar(下载地址http://download.csdn.net/detail/sjepy/5516755)

            2.修改web.xml,去掉所有flex相关配置(如果有的话),添加如下配置:

    1. <servlet> 
    2.     <servlet-name>Spring MVC Dispatcher Servlet</servlet-name> 
    3.     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> 
    4.     <init-param> 
    5.         <param-name>contextConfigLocation</param-name> 
    6.         <param-value> 
    7.             classpath:applicationContext.xml 
    8.         </param-value> 
    9.     </init-param> 
    10.     <load-on-startup>1</load-on-startup> 
    11. </servlet> 
    12.  
    13. <!-- MessageBroker Servlet flex mapping--> 
    14. <servlet-mapping> 
    15.     <servlet-name>Spring MVC Dispatcher Servlet</servlet-name> 
    16.     <url-pattern>/messagebroker/*</url-pattern> 
    17. </servlet-mapping>     
    	<servlet>
    		<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    		<init-param>
    			<param-name>contextConfigLocation</param-name>
    			<param-value>
    				classpath:applicationContext.xml
        		</param-value>
    		</init-param>
    		<load-on-startup>1</load-on-startup>
    	</servlet>
    	
    	<!-- MessageBroker Servlet flex mapping-->
    	<servlet-mapping>
    		<servlet-name>Spring MVC Dispatcher Servlet</servlet-name>
    		<url-pattern>/messagebroker/*</url-pattern>
    	</servlet-mapping>	

            3.在classpath下添加Spring的配置文件applicationContext.xml:

    1. <?xmlversion="1.0"encoding="UTF-8"?> 
    2. <beansxmlns="http://www.springframework.org/schema/beans" 
    3.      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    4.      xmlns:flex="http://www.springframework.org/schema/flex" 
    5.      xmlns:context="http://www.springframework.org/schema/context" 
    6.      xsi:schemaLocation=" 
    7.      http://www.springframework.org/schema/beans  
    8.      http://www.springframework.org/schema/beans/spring-beans-3.0.xsd 
    9.      http://www.springframework.org/schema/flex  
    10.      http://www.springframework.org/schema/flex/spring-flex-1.0.xsd 
    11.      http://www.springframework.org/schema/context  
    12.      http://www.springframework.org/schema/context/spring-context-3.0.xsd"> 
    13.       
    14.     <context:component-scanbase-package="demo.flex"/> 
    15.     <flex:message-broker/> 
    16. </beans> 
    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns:flex="http://www.springframework.org/schema/flex"
         xmlns:context="http://www.springframework.org/schema/context"
         xsi:schemaLocation="
         http://www.springframework.org/schema/beans 
         http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
         http://www.springframework.org/schema/flex 
         http://www.springframework.org/schema/flex/spring-flex-1.0.xsd
         http://www.springframework.org/schema/context 
         http://www.springframework.org/schema/context/spring-context-3.0.xsd">
         
    	<context:component-scan base-package="demo.flex" />
    	<flex:message-broker/>
    </beans>

            4.在EmployeeService上添加注解:

    1. @Component 
    2. @RemotingDestination    // 把EmployeeService暴露给Flex 
    @Component
    @RemotingDestination	// 把EmployeeService暴露给Flex

            5.删除WEB-INF/flex下除services-config.xml以外的所有配置文件,修改services-config.xml

    1.     <services> 
    2. <!--        <service-include file-path="remoting-config.xml" />--> 
    3. <!--        <service-include file-path="proxy-config.xml" />--> 
    4. <!--        <service-include file-path="messaging-config.xml" />  --> 
    5.         <default-channels> 
    6.             <channelref="my-amf"/> 
    7.         </default-channels>       
    8.     </services> 
        <services>
    <!--        <service-include file-path="remoting-config.xml" />-->
    <!--        <service-include file-path="proxy-config.xml" />-->
    <!--        <service-include file-path="messaging-config.xml" />  -->
    		<default-channels>
    			<channel ref="my-amf"/>
    		</default-channels>      
        </services>

    前台代码不变,完成后重新运行项目,显示效果和前面一样,至此整合完成。

            最后附完整代码下载地址:http://download.csdn.net/detail/sjepy/5522399

  • 相关阅读:
    vertical-align
    剑指offer刷题
    ES6 promise
    wangyi准备
    spring定时器
    xshell下linux常用操作
    HSSFWorkbook生成excel文件
    梳理并分解继承体系
    JSON格式数据转换
    部署项目
  • 原文地址:https://www.cnblogs.com/regalys168/p/3627717.html
Copyright © 2011-2022 走看看