- 浏览: 105250 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
yyzz1986:
楼主 。貌似发现你的代码有点小问题 。
客户端中文有乱码。
...
flex与java之间socket通信的教程4 -
hpyhgz:
写的不错啊,但是用ImageIO读图片,会有一部分色彩丢失的, ...
Java程序对图片的各种处理 -
远去的渡口:
LZ辛苦了,学习一下
初次接触flex,看到你的博客里面有关f ...
Flex + LCDS + Java 入门教程 -
BelieveTheGod:
...
jsp验证码生成以及刷新 -
chian_xxp:
作者强啊,能否写出点实例呢/
看作者的这些方法,发觉自己的知识 ...
提升JSP页面响应速度的七大秘籍绝招
有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTML要求的不同有以下两种方法:
1、Flex文本组件(Label、Text、TextArea)的htmlText属性支持一些基本的HTML代码,例如:
<mx:TextArea>
<mx:htmlText>
<![CDATA[
<p align="center"><font size="15" color="#3399ff">this is a html code</font></p>
]]>
</mx:htmlText>
</mx:TextArea>
2、我们可以将Flex应用嵌入到HTML页面中,然后通过Flex2中的ExternalInterface(Flex1.5使用getURL("javascript:javascriptMethod"))来实现Flex与HTML javascript的相互交互,进一步的,如果要在Flex应用中嵌入完整的HTML呢?
其实实现的方法很简单,只需要使用HTML的Iframe标签来导入需嵌入的HTML页面,然后使用ExternalInterface调用相应的javasript将该Iframe移动到我们Flex页面需要嵌入HTML页面的部分之上就可以了,示意图如下:
也就是说,我们包含Flex SWF文件的HTML页面主要有三个部分:
1、Flex swf 插件容器,FlexBuilder自动生成部分
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="IFrameDemo" width="100%" height="100%"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="IFrameDemo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<embed src="IFrameDemo.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="detectiontest" aligh="middle"
play="true" loop="false" quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
wmode="opaque"
swLiveConnect="true"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
2、HTML Iframe标签,绝对定位,用来导入HTML页面
<iframe id="myFrame" name="myFrame" frameborder="0"
style="position:absolute;background-color:transparent;border:0px;visibility:hidden;" />
3、移动Iframe和在Iframe中导入需嵌入FLEX中的HTML页面的脚本
<script>
function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById("myFrame");
frameRef.style.left=x;
frameRef.style.top=y;
frameRef.width=w;
frameRef.height=h;
}
function loadIFrame(url){
top.frames["myFrame"].location.href=url;
}
</script>
Flex中的导入Iframe页面和移动Iframe的代码如下:
import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;
private var __source: String;
private function moveIFrame(): void {
var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}
public function set source(source: String): void {
if (source) {
if (! ExternalInterface.available)
{
// TODO: determine if this Error is actually needed. The debugger
// build gives the error below. Assuming that this error will not show
// up in the release build but haven't checked.
throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
}
}
两个方法分别直接调用使用ExternalInterface.call调用前面我们提到的HTML页面上的两个Javascript方法。另外一个要注意的是<Canvas/>继承自flash.display.DisplayObject类的localToGlobal方法的使用,该方法将基于Flash场景的坐标转换为基于全局本地坐标,也就是浏览器页面坐标:
//Flash场景0,0坐标 var localPt:Point = new Point(0, 0); //转换为浏览器页面坐标 var globalPt:Point = this.localToGlobal(localPt);
这样就可以在Flex页面中嵌入任意的HTML页面了,为了方便,Brian写了个嵌入HTML页面的代理IFrame组件,该组件封装了所有需要的Flex端代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.macromedia.com/2005/mxml"
resize="callLater(moveIFrame)"
move="callLater(moveIFrame)">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;
private var __source: String;
private function moveIFrame(): void {
var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}
public function set source(source: String): void {
if (source) {
if (! ExternalInterface.available)
{
// TODO: determine if this Error is actually needed. The debugger
// build gives the error below. Assuming that this error will not show
// up in the release build but haven't checked.
throw new Error("The ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
}
}
public function get source(): String {
return __source;
}
override public function set visible(visible: Boolean): void {
super.visible=visible;
if (visible)
{
ExternalInterface.call("showIFrame");
}
else
{
ExternalInterface.call("hideIFrame");
}
}
]]>
</mx:Script>
</mx:Canvas>
该IFrame组件有个source属性用来记录需要载入的嵌入HTML页面的地址,每次source属性更新时,调用ExternalInterface.call("loadIFrame", source)调用javascript方法loadIFrame方法在HTML 页面中的IFrame中载入要嵌入的HTML页面。
另外,重载了Canvas的visible属性,以便在Canvas隐藏HTML页面中的IFrame。
如下使用该组件在Flex应用中嵌入HTML页面方法:
<IFrame id="iFrame" source="http://blog.eshangrao.com" width="300" height="400" />以上代码将在我们的Flex应用中嵌入本站首页。
查看示例|完整代码下载
原文:Embedding HTML in a Flex application in AS3
例子:
Iframe 组件
demo
http://www.deitte.com/IFrameDemo3/IFrameDemo.html
源码
http://www.deitte.com/IFrameDemo3/srcview/index.html
你看的那个例子是教程,对于不熟悉as和flex的人来说是很难看懂的,属于自定义控件,如果你是初学者,只是要使用,就用别人做好的吧。
发表评论
-
AS3安全沙箱,跨域加载SWF
2011-12-19 12:47 2120AS3的安全沙箱的确是让人很无奈,本篇文章仅用于解决一个特定的 ... -
当flex builder无法运行或者flashplayer无法安装时
2010-08-20 11:15 1702flashplayer无法安装,提示版本问题时。打开注册表HK ... -
flex与后台交互的4种方法
2009-04-18 14:06 1356一、HTTPService 程序代码: <?xm ... -
Flex + LCDS + Java 入门教程
2009-04-09 16:12 1575一.引 很多人在帖子和群中问到过一些关于建立F ... -
第一个ActionScript MySQL Driver:asSQL原理与实践
2009-03-31 14:14 1295熟悉Flex 的开发者都知道,在Flex中不能直接访问数据库, ... -
flex与j2ee交互
2009-03-31 14:12 1018MXML 程序代码 <?xml version=&qu ... -
Flex远程调用机制RemoteObject应用技巧
2009-03-31 14:11 1027本文主要讨论Flex在客户端与J2EE中间层数据交互的过程。 ... -
对ActionScript语言函数重载的理解
2009-03-31 14:11 1187ActionScript与JavaScript类似,都是符合E ... -
用Adobe Flex 2和Java创建富Internet应用
2009-03-31 14:10 1448用Adobe Flex 2和Java创建富Internet应用 ... -
12个Flex常用功能代码
2009-03-31 14:09 7651。 复制内容到系统剪贴板 CODE: System.set ... -
Flex 中 12 个简单但是很有用的函数
2009-03-31 14:08 874No.1 Copy content to clipboard: ... -
Flex加载图片的常用的几种方式
2009-03-31 14:06 1611<?xml version="1.0" ... -
FlexApplication初始化顺序
2009-03-31 14:05 660preloader->systemManager-> ... -
creationPolicy属性
2009-03-31 14:04 1065导航条容器内置推迟实 ... -
Flex 窗口最小化,最大化,拖动
2009-03-31 14:02 5238想当初,我不知道如何用flex怎么做透明air程序,非常郁闷, ... -
屏蔽FLEX右键
2009-03-31 14:01 1298屏蔽FLEX右键菜单以及实现自定义的FLEX右键功能 完全屏蔽 ... -
flex与java之间socket通信的教程5
2009-03-25 14:53 4082Flex和java的socket通信(五)聊天室的补充-在线列 ... -
flex与java之间socket通信的教程4
2009-03-25 14:50 3441(四)一个简单的聊天室目的:做一个简单的聊天室,用来实现消息广 ... -
flex与java之间socket通信的教程3
2009-03-25 14:48 2491三)多客户通信目的: ... -
flex与java之间socket通信的教程2
2009-03-25 14:44 2452二)单向通信目的:客 ...
相关推荐
在Flex中嵌入完整的网页所用到的类, xmlns:flexiframe="com.google.code.flexiframe.*" <flexiframe:IFrame id="helpFrame" source="assets/dreamweaver/help/helpHome....
flex嵌入网页的方法 解压,找到IFrameDemo\src\IFrame.as 复制到你自己的src里
在flex组件中嵌入html代码,可以利用flex iframe,下面为大家详细介绍下具体实现过程,感兴趣的朋友可以参考下
flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。
IFrame组件,用于在flex页面中嵌入其他html,jsp等等页面!
在Flex应用中嵌入HTML代码或者网页,可以使用Iframe实现
flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。
flex3的cookbook书籍完整版dpf(包含目录),目录是我花了两个多小时自己整理的,希望对大家有帮助。 目录: 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...
在我们每一个FLex web工程中,都有那么一个文件夹bin-debug,里面有个index.html文件,我的个人理解是这样的,首先网页运行的时候,mxml的文件会被编译为swf,那么swf如何在浏览器中展现,就是通过这个html文件,...
在HTML中嵌入SWF内容 在HTML页中使用ActionScript库 转换Date和RegExp对象 从ActionScript操作HTML样式表 跨脚本访问不同安全沙箱中的内容 第章:为AIRHTML容器编写脚本 HTMLLoader对象的显示属性 滚动HTML内容 访问...
该项目有一个带有图标的导航栏(该项目中未使用javascript),它还嵌入了图像和视频,以配合使用pararaphs和其中使用的各种字体。 建于 HTML CSS 使用的技术包括:Linters(灯塔,Webhint,Stylelint),扩展...
使用无Chrome和浮动浏览器窗口显示截屏视频中固定的网络摄像头的简单页面。 为什么? 通常我会用 quicktime 做简单的截屏视频——实际上我想保持这种方式。 有时我觉得露脸很有用,但我不想下载(特别购买)特定的...
在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中...
这是《纽约时报》的html页面。 在制作此网站的过程中,我学习了一些技巧,例如浮动,位置,网格,弹性属性,这些使我们的项目更加灵活。 原创设计 原始设计链接: 项目设计 项目设计截图: 操作说明 克隆项目:git ...
本例中所用的技术 7.2. simple-parent项目 7.3. simple-model模块 7.4. simple-weather模块 7.5. simple-persist模块 7.6. simple-webapp模块 7.7. 运行这个Web应用 7.8. simple-command模块 7.9. 运行这...
8.2.3在FlexBuilder3中进行调试 155 8.3处理ActionScript3.0中的异常 160 8.3.1使用try…catch…finally语句 160 8.3.2throw语句主动抛出异常 162 8.3.3处理异常事件 163 8.4异常类型 163 8.4.1异常对象 164 8.4.2...
■在搜索主页提供svg代码式嵌入示范。 ■提供SASS(SCSS)引用规范 。 ■基于rem单位进行编程。 ■修正2018年节日功能-全部加载SVG矢量图形。 ■改进前端模板为绿色主题。 ■文件引用从单http改为http、https自适应...