背景介绍:
因为需要进行比较复杂的前台展示,主要是做网络拓扑图这部分的展示工作,决定在前台使用flex技术,但是后台以及其它大部分的前台仍然采用jsp技术来展示,因此现在需要将flex和struts所搭建的完整的web系统之间建立一个通道
Web系统环境:
Maven+Struts2+Blazeds+Hibernate+Mysql+Flex
环境:
MyEclipse8.5+FlashBuilder4.5
配置主要步骤:
1. MyEclipes部分因为是已经成熟的系统,这里就不多做介绍了,主要是对于flex部分的介绍
2. 首先,下载FlashBuilder4.5并安装FlashBuilder_4_5_LS10.exe。
3. 简单地熟悉了flex的一些基本操作:
http://www.adobe.com/cn/devnet/flex/quickstart/your_first_application/
4. 安装AdobeFlashBuilder451PatchInstaller.zip
5. 安装FlashBuilder4.5的eclipse插件
第一步:到flashbuilder4.5的安装目录,运行下图的程序
第二步:
安装完成之后打开Eclipse 3.5.2 中的 dropins 目录,把里面的 com.adobe.flexbuilder.feature.core.nl1.link 文件复制到 MyEclipse 8.5 中MyEclipse 8.x Latest/dropins 目录
第三步:
打开Myeclipse8.5,新建项目,如果出现下图所示情况,则安装插件成功:
3. 下面安装blazeds.war
blazeds是一套面向actionscript的前后台通信框架。
在服务器端,blazeDS以servlet的方式存在于java应用服务器上。它默认提供3中服务,远程调用
(在remoting-config.xml中配置)、访问代理(proxy-config.xml)、消息服务(messaging-config.xml),同时框架允许你添加自定义的服务(在services-config.xml中配置)。
第一步:下载个Blazds的包,解压
第二步:将blazeds导入工程
6. 创建java类-
包:com.swq.services; 类名:DemoService
/**
*
*/
package com.swq.services;
/**
* @author Administrator
*
*/
public class DemoService {
/**
*
*/
public DemoService() {
// TODO Auto-generated constructor stub
}
/**
* 接收参数name并响应信息到flex端
* @param name
* @return
*/
public String sayHello(String name){
return "Hello "+name;
}
}
7. 修改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="demoservice">
<properties>
<source>com.swq.services.DemoService</source>
</properties>
</destination>
</service>
8. 修改web.xml;修改struts过滤器,这个也是最重要的一部
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="struts_blank" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Struts Blank</display-name>
<filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.do</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<!-- Http Flex Session attribute and binding listener support -->
<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</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>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>
<!--
<context-param>
<param-name>flex.class.path</param-name>
<param-value>/WEB-INF/flex/hotfixes/WEB-INF/flex/jars</param-value>
</context-param>
-->
</web-app>
9. 在FlashBuilder中建立工程flexdemo
启动web工程,然后验证配置显示如下:
10. 编写xmxl文件
<?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:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
public var tempString:String = "";
protected function button1_clickHandler(event:MouseEvent):void
{
myService.sayHello(input.text);
}
protected function myService_resultHandler(event:ResultEvent):void
{
tempString += event.result +"\n";
outPut.text = tempString;
}
protected function myService_faultHandler(event:FaultEvent):void
{
Alert.show(event.fault.message);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:RemoteObject id="myService" destination="demoservice"
result="myService_resultHandler(event)"
fault="myService_faultHandler(event)"
showBusyCursor="true"/>
</fx:Declarations>
<s:VGroup>
<s:HGroup>
<s:TextInput id="input"/>
<s:Button label="Send" click="button1_clickHandler(event)"/>
</s:HGroup>
<s:TextArea id="outPut" width="100%">
</s:TextArea>
</s:VGroup>
</s:Application>
11. 运行flashbuilder,如下图所示:
http://help.adobe.com/zh_CN/Flex/4.0/AccessingData/WS2db454920e96a9e51e63e3d11c0bf69084-7fda.html
http://www.cnblogs.com/RocD-DuPeng/articles/1750382.html
http://www.cnblogs.com/RocD-DuPeng/articles/1751040.html
http://blog.163.com/jiang_tao_2010/blog/static/12112689020091118549424/
http://blog.csdn.net/attilax/article/details/6215133
http://www.adobe.com/devnet/flex/articles/fullstack_pt1.html