文档章节

将Flex嵌入到Jsp页面实例-基于FlexModule插件

爱吃猫的小萌鱼
 爱吃猫的小萌鱼
发布于 2014/01/12 11:20
字数 680
阅读 274
收藏 3

如果我们只需要用到Flex的一部分功能,例如播放器功能,我们可以单独把Flex页面嵌入到Jsp页面中。要想实现此功能,需要下载一个工程,将其覆盖在服务器根目录下即可。你可以再次下载。

在eclipse下新建一个web工程,将刚才下载的工程解压缩,然后将webtier文件夹下的内容覆盖服务器根目录下,如本人的:

 

注意要将lib文件夹和jars文件夹下的jar包添加到到类路径下,这样就算是整合完成了吧。

接着新建一个flex的mxml文件PlayVideo.mxml,将其放在WebContent下,代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xmlversion="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
    import mx.controls.Alert;
    private var rtmpURL:String=" rtmp://localhost/oflaDemo";
    private var nc:NetConnection=new NetConnection();
    private var playerVideo:Video=new Video();
    [Bindable]
    private var stream:NetStream;
    private function init():void{
       playerVideo.width = 500;
       playerVideo.height = 400;
       connect();
    }
    private function connect():void{
       nc.addEventListener(NetStatusEvent.NET_STATUS,netStatus);
       nc.connect(rtmpURL);
    }
    private function netStatus(e:NetStatusEvent):void{
       trace(e.info.code);
       if(e.info.code=="NetConnection.Connect.Success"){
           stream=new NetStream(nc);
           playerVideo.attachNetStream(stream);
           stream.play("chirisyu_ytywn.flv");
           container.addChild(playerVideo);
       }
    }
]]>
</mx:Script>
    <mx:UIComponent id="container"></mx:UIComponent>
</mx:Application>

这个文件实现的是之前用Red5播放视频的减缩版。

接着新建一个jsp文件,如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language="java"contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="FlexTagLib"prefix="mm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>测试</title>
<style type="text/css">
    #mess{
       position: absolute;
       left: 250px;
       top: 25px;
       font-size: 22px;
    }
    #video{
       position: absolute;
       left: 250px;
       top: 70px;
    }
</style>
</head>
<body>
    <div id="mess">
    这是测试视频:
    </div>
    <div id="video">
       <mm:mxml source="PlayVideo.mxml"width="500" height="400">
       </mm:mxml>
    </div>
    
</body>
</html>

可以看出将mxml文件引入jsp需要做的事是:

  1. 声明引入标签,如<%@taglib uri="FlexTagLib" prefix="mm" %>。如果web.xml文件中没有添加<taglib>

  2. 缺少如下标签,则会报错

1
2
3
<taglib-uri>FlexTagLib</taglib-uri>
<taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>
</taglib>

 

2.在<mm:mxml/>标签中引入mxml文件,里面有一些属性,可以查看API,本人就不在此赘述了。

好了,这样就可以测试了,运行jsp文件,如果成功运行则证明成功了:

 

当然,这个mxml用的是flex 3文件,如果换成flex4的话会报错,因为目前使用的jar包不支持Flex4标签,不知道作者会不会更新。

原创文章,转载请注明出处:http://www.it161.com/article/webDetail?articleid=140112111941

更多原创内容,请访问:http://www.it161.com/

© 著作权归作者所有

爱吃猫的小萌鱼
粉丝 1
博文 16
码字总数 10296
作品 0
东城
私信 提问
FLEX嵌入JSP中(不是把swf签入到jsp)

1:去ADOBE下载FLEX的TAGLIB for JSP. http://download.macromedia.com/pub/labs/flex2taglibraryjsp/flex2taglibraryforjsp.zip 2:将下载下来的文件解压,里面有2个JAR文件. 将flex-bootstra......

zhenghuazhi
2010/11/11
0
0
FLEX嵌入JSP中(不是把swf签入到jsp)

1:去ADOBE下载FLEX的TAGLIB for JSP. http://download.macromedia.com/pub/labs/flex2taglibraryjsp/flex2taglibraryforjsp.zip 2:将下载下来的文件解压,里面有2个JAR文件. 将flex-bootstra......

zhenghuazhi
2010/11/25
0
0
资料记录:flex+red5+blazeds实现视频通话demo

刚实习几个月,最近要做一个视频聊天的功能,组长让我用flex做。虽然是很老的技术,资料也少,但还是努力去做了。真正做了以后发现反而没有想象中的难,主要就baidu、整理、分析、实验。 de...

豪猪大大
2017/02/25
0
0
Flex 与 spring mvc 整合 BlazeDB

本文主要学习Flex跟spring如何集成。参考文档是 Spring BlazeDS Integration Reference Guide。spring已经提供了与flex的集成的支持,主要的jar包下载地址:http://www.springsource.com /do...

继仕zac
2015/08/04
0
0
Flex与Web应用程序整合技术分享

采用BlazeDS进行java应用程序与flex应用程序间的通信。 (1) 在官网上下载blazeds的开发包,最好下载完整版,里面有一个例子和所有我们所需的所有文件(我下载的是blazeds-turnkey-4.0.0.1...

倪闯
2012/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式Session的实现方式

JWT Token 使用 JWT Token 储存用户身份,然后再从数据库或者 cache 中获取其他的信息。这样无论请求分配到哪个服务器都无所谓。 Tomcat + Redis 在 tomcat 的配置文件中配置: <Valve class...

禅明
13分钟前
0
0
Android饼图 PieChart

PieChart 饼图,android 图表。会根据定义PieChartView的大小自动居中,所以如果要调整位置,只需要在xml更改PieChartView位置大小即可。 https://github.com/ccMagic/PieChart 1、先看一下效...

ccMagic
17分钟前
1
0
说说我当初是如何学Linux的

今天我就说说我当初是如何从一名普通桌面维护工程师,通过学习和努力转成Linux运维工程师的,以及作为Linux运维工程师需要一些什么技能和知识,希望可以帮到一些对Linux有兴趣或者想往Linux...

Linux就该这么学
17分钟前
1
0
Tomcat启动异常Unable to register MBean [HikariDataSource (null)]:InstanceAlreadyExistsException

Unable to register MBean [HikariDataSource (null)] with key 'xxx'; nested exception is javax.management.InstanceAlreadyExistsException: com.zaxxer.hik ari:name=baseDataSource,ty......

sunranhou
22分钟前
2
0
qt从普通线程发信号到UI线程

加入从当前一个普通线程发送信号到ui,更新Ui只能使用Qt::BlockingQueuedConnection,用Qt::QueuedConnection会一会有用一会没用,并且会导致崩溃。 connect(this, &Task::startTask, this, ...

青黑
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部