如何实现FLEX和JSP混合应用混合JSP和FLEX应用的几种方式

最新推荐文章于 2013-09-27 15:43:45 发布
最新推荐文章于 2013-09-27 15:43:45 发布
阅读量597 收藏
点赞数
文章标签： flex jsp button iframe application 报表

快逸如何实现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

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>
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>

这种方法是以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框架为主的项目中，可以采用这种做法。

 

angelatan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex+JSP Web应用开发实战详解
06-27
Flex+JSP Web应用开发实战详解 p1
快逸如何实现FLEX和JSP混合应用
w_y_loong的专栏
05-08 1530
混合JSP和FLEX应用的几种方式 我们都知道，润乾报表V4系列版本中，最方便的报表发布方式是实用JSP中的自定义TAG方式发布报表模板。 而目前RIA应用中，ADOBE 的FLEX技术因其较强的交互能力和较友好的界面正在越来越多的B/S项目中使用，如果能够将JSP和FLEX混合应用，则润乾V4版本可适用的WEB项目领域将会更加广泛。同时因为FLEX天生就可以在J2EE的WEB容器下做无缝集成
JSP调用Flex程序
walt wang
04-14 6208
 1.在javascript中调用flex中的方法时用document.getElementById("flexObject").flexfunction("param");flexObject是其html模板中的id或者name,即相对应的flex的实例化对象.要在flex中用ExternalInterface.addCallback("flexHelloWorld",flexHelloWorl
Flex和jsp整合实践
热门推荐
kmyhy的专栏
12-28 1万+
  一、前言  时下 RIA （ Rich Internet Applications ）非常时髦 , 而部门中已有很多项目开始使用 flex 框架进行开发。为了追上其他项目组新技术应用的步伐，因此我想在所负责的项目中尝试进行 flex 与 jsp 的整合，从而为下一步升级改造提供可借鉴的经验和基础。 二、简单介绍 测试地址： http://10.180.4.50/flex
Flex与jsp的联系
blueflex
08-07 126
Flex与jsp的联系 由于目前好多网友问关于flex与jsp的联系,现在我把有关它们联系的代码贴出来供大家参考.其实只要把jsp代码转换成XML开式就行,flex读取的是xml,下面是关于flex把值传给JSP和JSP把值传给FLEX. 文件FlexJsp.mxml &lt;mx:application xmlns:mx="http://www.adobe.com/2006/mxml" app...
jsp调用flex的基本写法
卧雏先生
09-27 320
as和js通信说明连接一个： http://www.blogjava.net/Alpha/archive/2009/06/27/284373.html
flex+jsp web 应用开发源代码前十一章
08-03
flex+jsp web 应用开发源代码前十一章
FLEX与JSP结合并测试HTTPService与java用XML通信.doc
12-03
FLEX与JSP结合并测试HTTPService与java用XML通信.doc
Jsp嵌入Flex 、Jsp Flash报表实现源码
09-05
Jsp嵌入Flex 、Jsp Flash报表实现源码 精华 jsp与flex报表结合
Flex+JSP Web应用开发实战详解-源代码.part1(共5)
10-23
Flex+JSP Web应用开发实战详解-源代码.part1(共5)
flex解决JSP遮盖
08-15
很好的解决了flex通过Ifram框架嵌入JSP后JSP页面遮盖flex元素的问题
Flex-jsp两个必要jar包
02-03
找了很久,太累了,大家体谅一下,给点资源分
FLEX3嵌入到JSP,实现的 jar 包
02-22
将FLEX嵌入到JSP,其实是通过JSP的TAGLIB实现的. 由于自己找包花了很长时间，特放上大家共享。
在JSP中嵌入Flex程序
编程语言小筑
11-21 115
当Flex项目开发差不多了，可以往J2EE平台上迁移 了，因此，就需要在JSP中嵌入Flex程序了。 开始以为会很难，试了一下，没想到非常简单。如下： 1. java代码就老样子，写在src里。 2. 将lib包拷贝到lib文件夹下，将flex文件夹拷贝在web-inf文件夹，修改里面的remoting-config.xml 3. 修改web.xml，加入节点 &lt;!--s...
直接在jsp页面上使用flex标签
lipeng的博客
06-21 144
  1:去ADOBE下载FLEX的TAGLIB for JSP.   http://download.macromedia.com/pub/labs/flex2_tag_library_jsp/flex2_tag_library_for_jsp.zip 2:将下载下来的文件解压,里面有2个JAR文件.       将flex-bootstrap-jsp.jar拷贝到WEB-INF/li...
[整理]Flex嵌入jsp开发心得
码U、me的专栏
07-02 9747
flex嵌入jsp、flex、jsp
Flex在jsp中的应用
bannamoon的专栏
08-18 154
此文仅在IE中试验。谷歌浏览器也支持。其他浏览器未做测试。 flex可以嵌入jsp页面中，从而利用flex的一些图形组件出图。 1.首先上[url]http://opensource.adobe.com/wiki/display/flexsdk/Downloads[/url]下载FlexModule_j2ee.zip([url]http://flexorg.wip3.adobe.com/mod...
jsp 左右箭头实现图片切换
最新发布
05-30
JSP 是一个用于开发动态Web应用程序的服务器端技术，它本身不直接提供实现图片切换的功能，但可以借助前端技术来实现。 以下是一个基础的 JSP 页面代码示例，实现了左右箭头控制图片切换的功能： ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> #slider { position: relative; width: 100%; height: 400px; overflow: hidden; } .slider-wrapper { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; } .slider-item { width: 33.33%; height: 100%; display: flex; justify-content: center; align-items: center; } .slider-item img { max-width: 100%; max-height: 100%; } .slider-item.active { transform: translateX(0%); } .slider-item.prev { transform: translateX(-33.33%); } .slider-item.next { transform: translateX(33.33%); } .slider-controls { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; z-index: 1; } .slider-control { background: rgba(255, 255, 255, 0.5); width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .slider-control span { font-size: 24px; color: #333; } </style> </head> <body> <div id="slider"> <div class="slider-wrapper"> <div class="slider-item active"> <img src="image1.jpg"> </div> <div class="slider-item"> <img src="image2.jpg"> </div> <div class="slider-item"> <img src="image3.jpg"> </div> </div> <div class="slider-controls"> <div class="slider-control prev"> <span><</span> </div> <div class="slider-control next"> <span>></span> </div> </div> </div> <script> const slider = document.querySelector('#slider'); const sliderWrapper = slider.querySelector('.slider-wrapper'); const sliderItems = slider.querySelectorAll('.slider-item'); const prevControl = slider.querySelector('.slider-control.prev'); const nextControl = slider.querySelector('.slider-control.next'); let currentIndex = 0; // 初始化 sliderItems[currentIndex].classList.add('active'); // 左箭头点击事件 prevControl.addEventListener('click', () => { const prevIndex = currentIndex === 0 ? sliderItems.length - 1 : currentIndex - 1; sliderItems[prevIndex].classList.add('prev'); sliderWrapper.classList.add('prev'); setTimeout(() => { sliderItems[prevIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('next'); sliderItems[prevIndex].classList.remove('prev'); sliderItems[currentIndex].classList.remove('next'); sliderWrapper.classList.remove('prev'); currentIndex = prevIndex; }, 500); }); // 右箭头点击事件 nextControl.addEventListener('click', () => { const nextIndex = currentIndex === sliderItems.length - 1 ? 0 : currentIndex + 1; sliderItems[nextIndex].classList.add('next'); sliderWrapper.classList.add('next'); setTimeout(() => { sliderItems[nextIndex].classList.add('active'); sliderItems[currentIndex].classList.remove('active'); sliderItems[currentIndex].classList.add('prev'); sliderItems[nextIndex].classList.remove('next'); sliderItems[currentIndex].classList.remove('prev'); sliderWrapper.classList.remove('next'); currentIndex = nextIndex; }, 500); }); </script> </body> </html> ``` 这个 JSP 页面代码中嵌入了 HTML、CSS、JavaScript 代码，实现了基础的图片切换效果。你可以根据自己的需求来修改样式和内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值