zoukankan      html  css  js  c++  java
  • 将Flex嵌入到Jsp页面实例-基于FlexModule插件

    如果我们只需要用到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/

  • 相关阅读:
    时间形式的转换
    vue 按enter键 进行搜索或者表单提交
    关于Cookie 关于前端存储数据
    复杂数组去重
    蜜蜂
    MongoDB学习记录一
    python 基础 day03—函数
    python 基础 day03—文件操作
    python 基础 day02—列表List / 元组Tuple
    python 基础 day02—初识模块
  • 原文地址:https://www.cnblogs.com/youqishini/p/3515739.html
Copyright © 2011-2022 走看看