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中添加如下代码:
- <mx:DataGridwidth="400"height="200">
- <mx:columns>
- <mx:DataGridColumnheaderText="姓名"dataField="name"/>
- <mx:DataGridColumnheaderText="年龄"dataField="age"/>
- <mx:DataGridColumnheaderText="邮箱"dataField="email"/>
- </mx:columns>
- </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
- package demo.flex.service;
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
- publicclass 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;
- }
- }
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
- <destinationid="employeeService">
- <properties>
- <source>demo.flex.service.EmployeeService</source>
- </properties>
- </destination>
<destination id="employeeService"> <properties> <source>demo.flex.service.EmployeeService</source> </properties> </destination>
3.修改FlexDemo.mxml,通过RemoteObject直接调用后台EmployeeService的getEmpList()方法
- <s:Applicationxmlns: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:RemoteObjectid="empRemote"destination="employeeService">
- <s:methodname="getEmpList"result="empRemote_resultHandler(event)"fault="empRemote_faultHandler(event)"/>
- </s:RemoteObject>
- </fx:Declarations>
- <mx:DataGridwidth="400"height="200"dataProvider="{empList}">
- <mx:columns>
- <mx:DataGridColumnheaderText="姓名"dataField="name"/>
- <mx:DataGridColumnheaderText="年龄"dataField="age"/>
- <mx:DataGridColumnheaderText="邮箱"dataField="email"/>
- </mx:columns>
- </mx:DataGrid>
- </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相关配置(如果有的话),添加如下配置:
- <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>
<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:
- <?xmlversion="1.0"encoding="UTF-8"?>
- <beansxmlns="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-scanbase-package="demo.flex"/>
- <flex:message-broker/>
- </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上添加注解:
- @Component
- @RemotingDestination // 把EmployeeService暴露给Flex
@Component @RemotingDestination // 把EmployeeService暴露给Flex
5.删除WEB-INF/flex下除services-config.xml以外的所有配置文件,修改services-config.xml
- <services>
- <!-- <service-include file-path="remoting-config.xml" />-->
- <!-- <service-include file-path="proxy-config.xml" />-->
- <!-- <service-include file-path="messaging-config.xml" /> -->
- <default-channels>
- <channelref="my-amf"/>
- </default-channels>
- </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