将 Flex 集成到 Java EE java+Flex分离配置

来源:互联网 发布:淘宝店怎么铺货 编辑:程序博客网 时间:2024/04/26 10:52
        如何将 Flex 集成至该 Java EE 应用呢?现在,我们希望用 Flex 替换掉原有的 Servlet 和 JSP 页面,就需要让 Flex 和 Java EE 后端通信。Flex 支持多种远程调用方式,包括 HTTP,Web Services 和 AMF。不过,针对 Java EE 开发的服务器端应用,可以通过集成 BlazeDS,充分利用 AMF 协议并能轻易与 Flex 前端交换数据
1.下载jar包

2.创建项目java_flex

首先我们要从网上下载相应的jar包blazeds-bin-4.0.1.21287.zip将jar包解压把lib里面的所有jar复制到项目的lib目录下,

然后修改web.xml文件在 web.xml 中添加 HttpFlexSession 和 Servlet 映射。HttpFlexSession 是 BlazeDS 提供的一个 Listener,负责监听 Flex 远程调用请求,并进行一些初始化设置:

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  <display-name>java_flex</display-name>  <welcome-file-list>    <welcome-file>index.html</welcome-file>    <welcome-file>index.htm</welcome-file>    <welcome-file>index.jsp</welcome-file>    <welcome-file>default.html</welcome-file>    <welcome-file>default.htm</welcome-file>    <welcome-file>default.jsp</welcome-file>  </welcome-file-list>  <listener>      <listener-class>flex.messaging.HttpFlexSession</listener-class>  </listener>  <servlet><!-配置flexservlet->      <servlet-name>messageBroker</servlet-name>      <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>      <init-param>          <param-name>services.configuration.file</param-name>          <param-value>/WEB-INF/flex/services-config.xml</param-value>      </init-param>      <load-on-startup>1</load-on-startup>  </servlet>  <servlet-mapping>      <servlet-name>messageBroker</servlet-name>      <url-pattern>/messagebroker/*</url-pattern>  </servlet-mapping></web-app>

BlazeDS 所需的所有配置文件均放在 /WEB-INF/flex/ 目录下。BlazeDS 将读取 services-config.xml 配置文件,该配置文件又引用了 remoting-config.xml、proxy-config.xml 和 messaging-config.xml 这 3 个配置文件,所以,一共需要 4 个配置文件。

services-config.xml :

<?xml version="1.0" encoding="UTF-8"?><services-config><services><service-include file-path="remoting-config.xml" /><service-include file-path="proxy-config.xml" /><service-include file-path="messaging-config.xml" /></services><security><login-command class="flex.messaging.security.TomcatLoginCommand"server="Tomcat" /><!-- Uncomment the correct app server <login-command class="flex.messaging.security.TomcatLoginCommand" server="JBoss"> <login-command class="flex.messaging.security.JRunLoginCommand" server="JRun"/> <login-command class="flex.messaging.security.WeblogicLoginCommand" server="Weblogic"/> <login-command class="flex.messaging.security.WebSphereLoginCommand" server="WebSphere"/> --><!-- <security-constraint id="basic-read-access"> <auth-method>Basic</auth-method> <roles> <role>guests</role> <role>accountants</role> <role>employees</role> <role>managers</role> </roles> </security-constraint> --></security><channels><channel-definition id="my-amf"class="mx.messaging.channels.AMFChannel"><endpointurl="http://{server.name}:{server.port}/{context.root}/messagebroker/amf"class="flex.messaging.endpoints.AMFEndpoint" /><properties><polling-enabled>false</polling-enabled></properties></channel-definition><channel-definition id="my-secure-amf"class="mx.messaging.channels.SecureAMFChannel"><endpointurl="https://{server.name}:{server.port}/{context.root}/messagebroker/amfsecure"class="flex.messaging.endpoints.SecureAMFEndpoint" /><properties><add-no-cache-headers>false</add-no-cache-headers></properties></channel-definition><channel-definition id="my-polling-amf"class="mx.messaging.channels.AMFChannel"><endpointurl="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling"class="flex.messaging.endpoints.AMFEndpoint" /><properties><polling-enabled>true</polling-enabled><polling-interval-seconds>4</polling-interval-seconds></properties></channel-definition><!-- <channel-definition id="my-http" class="mx.messaging.channels.HTTPChannel"> <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/http" class="flex.messaging.endpoints.HTTPEndpoint"/> </channel-definition> <channel-definition id="my-secure-http" class="mx.messaging.channels.SecureHTTPChannel"> <endpoint url="https://{server.name}:{server.port}/{context.root}/messagebroker/httpsecure" class="flex.messaging.endpoints.SecureHTTPEndpoint"/> <properties> <add-no-cache-headers>false</add-no-cache-headers> </properties> </channel-definition> --></channels><logging><target class="flex.messaging.log.ConsoleTarget" level="Error"><properties><prefix>[BlazeDS] </prefix><includeDate>false</includeDate><includeTime>false</includeTime><includeLevel>false</includeLevel><includeCategory>false</includeCategory></properties><filters><pattern>Endpoint.*</pattern><pattern>Service.*</pattern><pattern>Configuration</pattern></filters></target></logging><system><redeploy><enabled>false</enabled><!-- <watch-interval>20</watch-interval> <watch-file>{context.root}/WEB-INF/flex/services-config.xml</watch-file> <watch-file>{context.root}/WEB-INF/flex/proxy-config.xml</watch-file> <watch-file>{context.root}/WEB-INF/flex/remoting-config.xml</watch-file> <watch-file>{context.root}/WEB-INF/flex/messaging-config.xml</watch-file> <watch-file>{context.root}/WEB-INF/flex/data-management-config.xml</watch-file> <touch-file>{context.root}/WEB-INF/web.xml</touch-file> --></redeploy></system></services-config>

由于 BlazeDS 需要将 Java 接口 FlexService 暴露给 Flex 前端,因此,我们在配置文件 remoting-config.xml 中将 FlexService 接口声明为一个服务:

remoting-config.xml:

<?xml version="1.0" encoding="UTF-8"?><service id="remoting-service"     class="flex.messaging.services.RemotingService">    <adapters>        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>    </adapters>    <default-channels>        <channel ref="my-amf"/>    </default-channels>    <destination id="test"><properties><source>org.demo.service.impl.FlexServiceImpl</source> <!-- 注意路径 --><scope>application</scope>    </properties></destination></service>


proxy-config.xml :

<?xml version="1.0" encoding="UTF-8"?><service id="proxy-service"     class="flex.messaging.services.HTTPProxyService">    <properties>        <connection-manager>            <max-total-connections>100</max-total-connections>            <default-max-connections-per-host>2</default-max-connections-per-host>        </connection-manager>        <allow-lax-ssl>true</allow-lax-ssl>    </properties>    <adapters>        <adapter-definition id="http-proxy" class="flex.messaging.services.http.HTTPProxyAdapter" default="true"/>        <adapter-definition id="soap-proxy" class="flex.messaging.services.http.SOAPProxyAdapter"/>    </adapters>    <default-channels>        <channel ref="my-amf"/>    </default-channels>    <destination id="DefaultHTTP">    </destination></service>


messaging-config.xml:

<?xml version="1.0" encoding="UTF-8"?><service id="message-service"     class="flex.messaging.services.MessageService">    <adapters>        <adapter-definition id="actionscript" class="flex.messaging.services.messaging.adapters.ActionScriptAdapter" default="true" />        <!-- <adapter-definition id="jms" class="flex.messaging.services.messaging.adapters.JMSAdapter"/> -->    </adapters>    <default-channels>        <channel ref="my-polling-amf"/>    </default-channels></service>
接下来我们就是写java代码了(这里我没用框架)。

BaseDao

package org.demo.dao;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import javax.servlet.jsp.jstl.sql.ResultSupport;import org.apache.tomcat.dbcp.dbcp.BasicDataSource;public class BaseDao {private static BasicDataSource bds = new BasicDataSource();static {bds.setDriverClassName("com.mysql.jdbc.Driver");bds.setUrl("jdbc:mysql://localhost:3306/myweb");bds.setUsername("root");bds.setPassword("123456");}public Connection getConnection(){try {//Class.forName("oracle.jdbc.driver.OracleDriver");//return DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ORCL","liu","liu");return bds.getConnection();} catch (Exception e) {e.printStackTrace();}return null;}public void closeReSources(ResultSet rs,Statement st,Connection conn){try {if(rs!=null)rs.close();if(st!= null) st.close();if(conn != null)conn.close();} catch (SQLException e) {e.printStackTrace();}}public int excuteUpdate(String sql,Object...params){Connection conn = null;PreparedStatement pst = null;int rt = 0;try{conn = getConnection();pst = conn.prepareStatement(sql);if(params != null && params.length>0){for (int i = 0; i < params.length; i++) {pst.setObject(i+1, params[i]);}}rt = pst.executeUpdate();}catch(Exception e){e.printStackTrace();}finally{closeReSources(null,pst,conn);}return rt;}public javax.servlet.jsp.jstl.sql.Result excuteQuery(String sql,Object...params){Connection conn = null;PreparedStatement pst = null;ResultSet rs = null;javax.servlet.jsp.jstl.sql.Result r = null;try{conn = getConnection();pst = conn.prepareStatement(sql);if(params != null && params.length>0){for (int i = 0; i < params.length; i++) {pst.setObject(i+1, params[i]);}}rs = pst.executeQuery();//将ResultSet封装成Resultr = ResultSupport.toResult(rs);}catch(Exception e){e.printStackTrace();}finally{closeReSources(rs,pst,conn);}return r;}}
实体类FileInfo:
package org.demo.po;import java.sql.Timestamp;public class FileInfo {private Integer id;private String name;private String realPath;private Timestamp date;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getRealPath() {return realPath;}public void setRealPath(String realPath) {this.realPath = realPath;}public Timestamp getDate() {return date;}public void setDate(Timestamp date) {this.date = date;}}
要暴露给flex的接口FlexService:

package org.demo.service;import java.util.List;import org.demo.po.FileInfo;public interface FlexService {public List<FileInfo> getData(int num);}

FlexServiceI的实现类FlexServiceImpl:

package org.demo.service.impl;import java.sql.Timestamp;import java.util.ArrayList;import java.util.List;import java.util.SortedMap;import javax.servlet.jsp.jstl.sql.Result;import org.demo.dao.BaseDao;import org.demo.po.FileInfo;import org.demo.service.FlexService;public class FlexServiceImpl extends BaseDao implements FlexService {@Overridepublic List<FileInfo> getData(int num) {List<FileInfo> files = new ArrayList<FileInfo>();try {Result r = super.excuteQuery("select * from tb_uploads limit "+num);if(r.getRowCount()!=0&&r!=null){for(SortedMap row :r.getRows()){FileInfo f = new FileInfo();f.setId(Integer.valueOf(row.get("id").toString()));f.setName(row.get("name").toString());f.setRealPath(row.get("realpath").toString());f.setDate(Timestamp.valueOf(row.get("date").toString()));files.add(f);}}} catch (Exception e) {throw new RuntimeException(e);}return files;}}
项目结构如下:


这时java代码就完成了,接下来就是创建flex项目了(这里我创建的项目名为java_flex)

新建flex项目---第一步

新建flex项目---第二步


因此,需要填入 java_flex 项目的 web 根目录,该目录下必须要存在 /WEB-INF/flex/。点击“验证配置”验证配置文件是否正确,只有通过验证后,才能继续。Flex Builder 默认把生成的 Flash 文件放到 java_flex 项目的java_flex-debug 目录下,点击完成。

flex项目结构如下:


为了能在 Flex 中实现远程调用,我们需要定义一个 RemoteObject 对象。可以通过 ActionScript 编码创建该对象,也可以直接在 MXML 中定义一个 RemoteObject 对象

<s:RemoteObject id="flexServiceRo" destination="test" result="resultHandler(event)" fault="faultHandler(event)"/>

java_flex.mxml代码如下:

<?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"   initialize="init()"><fx:Style source="java_flex.css"/><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.rpc.events.FaultEvent;import mx.rpc.events.ResultEvent;import mx.utils.ArrayUtil;[Bindable]private var arr:ArrayCollection;private function init():void{var num:int = 10;flexServiceRo.getData(num);}protected function getData_clickHandler(event:MouseEvent):void{}//获取数据protected function flexService_resultHandler(event:ResultEvent):void{var obj:Object = new Object;arr = event.result as ArrayCollection;DataTable.dataProvider=arr;}protected function faultHandler(event:FaultEvent):void{Alert.show(event.fault.toString());}]]></fx:Script><fx:Declarations><!-- 将非可视元素(例如服务、值对象)放在此处 --><s:RemoteObject id="flexServiceRo" destination="test" result="flexService_resultHandler(event)" fault="faultHandler(event)"/></fx:Declarations><s:Button id="getData" y="70" width="107" height="45" label="获取数据"  click="getData_clickHandler(event)" horizontalCenter="-89"/><s:DataGrid id="DataTable" width="876" height="417" horizontalCenter="-46" requestedRowCount="4"verticalCenter="-73"><s:columns><s:ArrayList><s:GridColumn width="100" dataField="id" headerText="id"></s:GridColumn><s:GridColumn width="100" dataField="name" headerText="name"></s:GridColumn><s:GridColumn width="300" dataField="realPath" headerText="realPath"></s:GridColumn><s:GridColumn width="100" dataField="date" headerText="date"></s:GridColumn></s:ArrayList></s:columns><s:typicalItem><fx:Object dataField1="示例数据" dataField2="示例数据" dataField3="示例数据"></fx:Object></s:typicalItem><s:ArrayList></s:ArrayList></s:DataGrid></s:Application>
弄好后运行效果如下图: