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

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

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

将Flex嵌入到Jsp页面实例-基于FlexModule插件_第1张图片

 

注意要将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文件,如果成功运行则证明成功了:

将Flex嵌入到Jsp页面实例-基于FlexModule插件_第2张图片

 

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

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

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

你可能感兴趣的:(Flex)