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

最新推荐文章于 2024-11-01 14:48:20 发布
最新推荐文章于 2024-11-01 14:48:20 发布
阅读量855 收藏
点赞数
分类专栏： 业余学习 Java 文章标签： flex jsp java stream function video
如果我们只需要用到Flex的一部分功能，例如播放器功能，我们可以单独把Flex页面嵌入到Jsp页面中。要想实现此功能，需要下载一个工程，将其覆盖在服务器根目录下即可。你可以在次下载： FlexModule_j2ee.zip 。


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




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


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


[html] view plain copy print ?
  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>  
<?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文件，如下所示：


[html] view plain copy print ?
  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>  
<%@ 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.声明引入标签，如<%@tagliburi="FlexTagLib"prefix="mm"%>。如果web.xml文件中没有添加

[html] view plain copy print ?
  1. <taglib> 
  2.         <taglib-uri>FlexTagLib</taglib-uri> 
  3.         <taglib-location>/WEB-INF/lib/flex-bootstrap-jsp.jar</taglib-location> 
  4. </taglib>  
<taglib>
        <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://blog.csdn.net/youqishini/article/details/8062930

陌隋
关注
专栏目录
一.Java对象导论——Java编程思想第4版学习笔记
Bonjour~
05-23 866
1.1 抽象过程 所有编程语言都提供抽象机制，人们所能够解决的问题的复杂性直接取决于抽象的类型和质量。OOP允许根据问题来描述问题，而不是根据运行解决方案的计算机来描述问题。 Alan Kay曾经总结了面向对象语言的5个基本特性： 1）万物皆为对象。 2）程序是对象的集合，它们通过发送消息来告知彼此所要做的。 3）每个对象都有自己的由其他对象所构成的存储。 4）每个对象都拥有其类型。
flex嵌入JSP
08-14
flex嵌入JSP页面被遮挡的问题描述,试用代码
在java环境中添加flex页面（将各种错全部改正运行正确）
shanhuhau的专栏
03-20 1272
先下载blazeds.war，下载地址： 在javaWEB项目中添加flex支持 1、先建立一个 web工程：flexweb 2、向flexweb 工程手工添加Flex需要的元素。 1）将blazedsWar包中的WEB-INF文件夹和META-INF文件夹拷贝到工程的WebRoot文件夹下，会提示是否覆盖，点击yes to all 2）如果你的工程已经配置好了，只需要将出web.x
eclipse中调试flex（针对javaweb工程中嵌入FLEX页面）
lch2848508的博客
03-21 3464
1.eclipse中安装FLEX插件 首先要安装Adobe Flash Builder 4.7，安装破解成功后，进入安装目录中Adobe Flash Builder 4.7 (64 Bit)\utilities中， 找到名字为Adobe Flash Builder 4.7 Plug-in Utility.exe的执行文件，打开，按照安装步骤设置好FLEX4.7和eclipse的路径。完成后ec
前端面试笔记随笔---kalrry
kalrry
04-05 9771
面试笔记---kalrry第一部分：HTML5+CSS31、父元素和子元素宽高不固定，如何实现水平垂直居中2、分别实现骰子中的'一点' 和 '三点' 的布局。3、简述选择器~和+的区别。4、简述box-sizing的有效值以及所对应的盒模型规则。**5、flex中元素的margin是否会合并？**6、简述align-items和align-content的区别。7、简述data:属性的用法（如何设置，如何获取），有何优势？8、简述 title与h1的区别，b与strong的区别，i与em的区别。9、什么是标
Flex学习笔记（十四）——网页交互
dananhai381的专栏
08-06 520
向flash中传入参数          如果是通过Url调用swf文件，可通过  *.swf?name=aaa  传入。在swf中通过application.parameters获得参数。          如果swf是以嵌入方式被调用，需要在包装网页（调用swf的网页）中编写代码，如下：                    在action或jsp中对parameters进行解析
J2EE学习笔记----java pk .net
qjoycn
07-18 192
大概五年前，微软发布了.NET Framework，这是Java/J2EE和.NET平台上最流行的几个“专家级”产品之一。从那以来，我一直在讲Java/.NET的协调性。无论我在哪里讲，都有一个出现频率极高的问题（来自我的朋友，参会人员，咨询客户等等）。 问：说实话，我不会传出去的。你最喜欢哪一个？是Java还是.NET？ 我并不偏好哪一个，两个我都同样喜欢。说实话这个答案不太容易令人信服。所...
[一起行动] 第1次Flex公开课笔记(v)
04-02
- **html-template**：包含HTML模板和JS脚本，用于将SWF文件嵌入到HTML页面中。 - **source**：存放源代码文件。 4. **html-template目录的作用**： - **自动检测FlashPlayer版本**：确保用户安装了正确的版本以...
Flex学习笔记二（Flex功能列表）
fcltctl的专栏
11-29 133
[size=medium]Flex 功能列表 强大的编程模型与类库 JSP － 样式编程模型 通过熟悉的 JSP 样式模型创建 Web 应用程序，在中心位置管理文件与资源。Flex 支持用户熟悉的工具并可对修改过的工作自动进行重新编译。 MXML 利用 MXML（基于 XML 的语言）创建应用程序 Flex。MXML 语言元素可用于描述用户界面，创建数据模型及访问服务器资源。 ...
Flex 学习笔记之一：Flex 简介
zhouzhiwengang的专栏
11-03 858
Flex 是一个高效、免费的开源框架，可用于构建具有表现力的 Web 应用程序，这些应用程序利用 Adobe Flash Player和 Adobe AIR, 运行时跨浏览器、桌面和操作系统实现一致的部署
Flex技术精华集：接口设计、数据库交互与Java整合
"Flex经典资料积累" 这篇资料集合是关于Flex技术的学习资源，主要由...这些文章构成了一个全面的Flex学习资源库，对于想要掌握Flex开发技术的人来说非常有价值，不仅包含了基础教程，还有许多实际应用示例和技巧分享。
【Java】javaEE的13个技术规范
热门推荐
至尊宝
01-01 2万+
强烈推荐一个大神的人工智能的教程：http://www.captainbed.net/zhanghan 【前言】 这段时间小编在准备面试和面试之间奔波，javaEE也放了一段时间了，再次拿起来看发现根本不明白在讲些什么，差不多能听明白的是JDBC，和这个材料的共鸣很少，不过在后边的学习过程还要继续学习，所以第一遍先了解一下是什么，在项目中实践时再去用。J2EE的13个技术规范：...
14【JavaWeb】视图-Thymeleaf
极正君
06-03 420
14【JavaWeb】视图-Thymeleaf
[自用，更新自day5]瑞吉外卖代码及笔记
最新发布
lapiii的博客
11-01 419
当使用ThreadLocal维护变量时，ThreadLocal为每个使用该变量的线程提供独立的变量副本，所以每一个线程都可以独立地改变自己的副本，而不会影响其它线程所对应的副本。Mybatis Plus公共字段自动填充，也就是在插入或者更新的时候为指定字段赋予指定的值，使用它的好处就是可以统一对这些字段进行处理，避免了重复代码。因为在分页查询的Dish的records(菜品记录中)，只有这个菜品所属的categoryId，但是我们需要分页的时候展示的是菜品名字。
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1271
项目功能：商品分类,商品信息,用户。
（1）Java 编程基础概览：数据类型、常量、变量、标识符与运算符
码界领航的Cherry Yang的博客
10-28 1049
8 位，占1个字节，有符号的，范围 -128（-2^7）至 127（2^7-1）。32 位，占4个字节，范围 -2,147,483,648（-2^31）至 2,147,483,647（2^31 - 1）。Java 提供了六种数字类型，其中四个为整数类型，两个为浮点类型，还有字符类型，以及布尔型。16 位，占2个字节，范围 -32768（-2^15）至 32767（2^15 - 1）64 位，占8个字节，范围 -2^63 至 2^63 - 1。16 位 Unicode 字符，占 2 个字节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值