zoukankan      html  css  js  c++  java

  • Java与Flex学习笔记（20）---将flex页面嵌入到jsp页面中

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

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

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

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

     

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



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

          接着新建一个jsp文件，如下所示：

     

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



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

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

     

    [html] view plaincopyprint?在CODE上查看代码片派生到我的代码片
     
    1. <taglib>  
    2.         <taglib-uri>FlexTagLib</taglib-uri>  
    3.         <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location>  
    4. </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/
  • 相关阅读:
    ActiveMQ消息队列技术融合Spring
    ActiveMQ消息队列技术Demo
    网页静态化技术Freemaker
    Solr的基本语法
    Solr的页面展示以及高亮显示
    Solr的了解与配置
    Angular中上传图片到分布式文件服务器FastDFS上
    分布式文件服务器FastDFS的使用
    自我学习笔记01
    数组转换成List集合
  • 原文地址：https://www.cnblogs.com/yaowen/p/4172645.html
Copyright © 2011-2022 走看看