如何实现FLEX和JSP混合应用

混合JSP和FLEX应用的几种方式

      我们都知道,润乾报表V4系列版本中,最方便的报表发布方式是实用JSP中的自定义TAG方式发布报表模板。

而目前RIA应用中,ADOBE 的FLEX技术因其较强的交互能力和较友好的界面正在越来越多的B/S项目中使用,如果能够将JSP和FLEX混合应用,则润乾V4版本可适用的WEB项目领域将会更加广泛。同时因为FLEX天生就可以在J2EE的WEB容器下做无缝集成,所以在FLEX下集成润乾V4并使用润乾报表原有的JSP标签方式发布报表较润乾V4的非J2EE部署来讲会简单很多。

     下面我就简单介绍几种集成JSP和FLEX的方式:

一、通过JSP实现自定义标签嵌入FLEX控件:
步骤为:
1:去ADOBE下载FLEX的TAGLIB for JSP.

http://download.macromedia.com/pub/labs/flex2_tag_library_jsp/flex2_tag_library_for_jsp.zip

上面那个地址已经失效了,可以到这里下载:http://sourceforge.net/adobe/flexsdk/wiki/Downloads/

or http://flexorg.wip3.adobe.com/modules/226660/FlexModule_j2ee.zip

2:将下载下来的文件解压,里面有2个JAR文件.
将flex-bootstrap-jsp.jar拷贝到WEB-INF/lib 文件夹.
将flex-webtier-jsp.jar 拷贝到WEB-INF/flex/jars 文件夹.
3:在WEB.XML中添加
<taglib>
    <taglib-uri>FlexTagLib</taglib-uri>
    <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>
</taglib>

 

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
     <taglib>
        <taglib-uri>FlexTagLib</taglib-uri>
        <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>
    </taglib>
    
</web-app>

 
4:如果SERVER开着的话,重启.
5:可以在JSP文件中写FLEX代码了
test.jsp

<%@ taglib uri=”FlexTagLib” prefix=”mm” %>
<%@ page contentType=”text/html; charset=utf-8″ %>
<html>
这是一个JSP页面,这部分可以嵌入润乾报表自定义JSP标签
<br>
以下是FLEX组件部分
<mm:mxml source=”MainApp.mxml” width=”100%” height=”100%”>
</mm:mxml>
</html>

将原来写好的MXML文件嵌入到JSP中.MainApp.mxml可以改成你需要嵌入的FLEX文件.

      这种方法是以JSP为主页面,整个体系为J2EE的标准结构,将FLEX控件以标签方式嵌入整个JSP中。目前在国内的较大规模项目中,使用这种方式做FLEX嵌入还是比较多的。原因是J2EE体系比较成熟,而FLEX的界面较友好,采用FLEX做嵌入,可以兼顾两者的优点。

 

二、在FLEX中嵌入JSP:
在FLEX中嵌入JSP,原理大致都是在页面上生成iframe然后在iframe里引用html或JSP页面,我仅以自己较喜欢用的FLEXi框架举例;
Flexi.mxml源码如下:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
xmlns:arcadiocarballares=”com.arcadiocarballares.*”
paddingBottom=”0″ paddingLeft=”0″ paddingRight=”0″ paddingTop=”0″ viewSourceURL=”srcview/index.html”>
<mx:Script>
<![CDATA[
import com.PopUpEffect;
private var win:PopWin;
private function showWin():void{
win=new PopWin();
PopUpEffect.Show(win,Application.application as DisplayObject,true);
}

]]>
</mx:Script>
<mx:HBox width=”100%” height=”100%” paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ paddingTop=”10″>
<mx:VBox width=”50%” height=”100%”>
<mx:HBox width=”100%” height=”100%” backgroundColor=”#EEEEEE” horizontalAlign=”center”>
<arcadiocarballares:Flexi id=”myFlexi1″ url=”http://localhost:8080/demo/reportJsp/showReport.jsp “/>
</mx:HBox>
<mx:HBox>
<mx:Button label=”Hide” click=”myFlexi1.hideIFrame()”/>
<mx:Button label=”Show” click=”myFlexi1.showIFrame()”/>
</mx:HBox>
</mx:VBox>

<mx:VBox width=”50%” height=”100%”>
<mx:HBox width=”100%” height=”100%” backgroundColor=”#EEEEEE” horizontalAlign=”center”>
<arcadiocarballares:Flexi id=”myFlexi2″ url=” http://localhost:8080/demo/reportJsp/showReport1.jsp “/>
</mx:HBox>
<mx:HBox>
<mx:Button label=”Hide” click=”myFlexi2.hideIFrame()”/>
<mx:Button label=”Show” click=”myFlexi2.showIFrame()”/>
<mx:Button label=”测试窗口” click=”showWin()”/>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Application>

这种办法是在整个FLEX框架下,将整个JSP页面做iframe嵌入,在以FLEX框架为主的项目中,可以采用这种做法。

 

[参考] http://www.quiee.com.cn/archives/2949/

你可能感兴趣的:(Flex)