- 浏览: 98114 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
chensong215:
无法获取到ProgressEvent中的bytesTotal
自定义DownloadProgressBar -
qq2464785999:
非常感谢。
测试后,发现要用相对路径的话,好像要这么写
va ...
Flex写XML文件
有时候我们需要在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应用中嵌入本站首页。
IFrameDemo.zip
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应用中嵌入本站首页。
IFrameDemo.zip
发表评论
-
flex 自定义多个命名空间以及标签名
2013-01-22 15:21 1271flex 自定义多个命名空 ... -
FLEX中使用AS动态创建DataGrid
2013-01-09 16:24 886FLEX中使用AS动态创建DataGrid 2010年2月6日 ... -
flex与flash之间相互调用
2012-12-12 12:39 612http://www.cnblogs.com/kaixuan/ ... -
Flex与Flex创建的swf通信
2012-12-12 10:16 707加载子SWF的Flex程序代码 <?xml vers ... -
[AS3]加载视频(FLV)文件
2012-12-06 15:11 848[AS3]加载视频(FLV)文件 分类: FLEX/CS3-- ... -
通过FileReference打开本地图片崩溃的解决方法
2012-12-06 14:02 705通过FileReference打开本地图片崩溃的解决方法 最近 ... -
使用FileReference的load()方法加载本地图片
2012-12-06 13:56 9001、要想使用FileReference的load()方法和da ... -
[AS3]Bitmap序列化(将BitmapData保存为原生Binary/ByteArray)
2012-12-06 13:48 749[AS3]Bitmap序列化(将BitmapData保存为原生 ... -
as3 画五角星算法
2012-12-05 16:49 2598as3 画五角星算法 阅读:10次 时间:2012-03- ... -
flex4 textArea的htmlText属性
2012-11-29 11:13 3099它现在包含Text布局框架(Text Layout Frame ... -
Tooltip应用
2012-11-29 11:11 705创建ToolTip: var errorToolTip:To ... -
数据绑定显示问题
2012-10-27 12:11 635数据绑定实时变化。 XMLListCollection 可以变 ... -
待解决问题
2012-09-18 23:48 6951.仪表盘 2.渐变填充的使用 3.发光效果的完美运用 能在一 ... -
as3加载外部图片的两种方式
2012-09-09 11:46 988package net.burchin.loading { ... -
公式as3
2012-09-06 18:13 0as3 1人收藏此文章, 我要收藏 发表于1年前(2011-0 ... -
Flex中多线程的实现
2012-09-06 10:49 3470破阵子_如是我闻 如是我闻。一时佛在舍卫国,祗树给孤独园.. ... -
自定义column renderer
2012-08-09 15:07 903<?xml version="1.0" ... -
drowshadowFilter
2012-08-09 15:05 650DropShadowFilter 类,在Flash中为各种对象 ... -
123123
2012-08-08 17:16 0http://www.oschina.net/code/sni ... -
flex 画面快照截图与显示
2012-08-08 11:32 1037一、对指定画面进行快 ...
相关推荐
flex嵌入网页的方法 解压,找到IFrameDemo\src\IFrame.as 复制到你自己的src里
在Flex中嵌入完整的网页所用到的类, xmlns:flexiframe="com.google.code.flexiframe.*" <flexiframe:IFrame id="helpFrame" source="assets/dreamweaver/help/helpHome....
一个很好的例子,怎样将HTML嵌入FLEX
flex中嵌入html,完整代码,下来即可使用
这个是升级版啊,一个很好的例子,怎样将HTML嵌入FLEX
将FLEX嵌入到JSP,其实是通过JSP的TAGLIB实现的. 步骤还是蛮简单的 1:去ADOBE下载FLEX的TAGLIB for JSP. 2:将flex-webtier-jsp.jar 拷贝到WEB-INF/flex/jars 文件夹. 3:在WEB.XML中添加 <taglib-uri>FlexTagLib ...
fb开发的视频,可以嵌入到html视频监控WEB观看端,用flash播放监控的视频的小例子 实现主要功能如下 1. 多屏切换,这里主要是tileLayout布局的使用 2. 单个视频双击全屏,整屏全屏 3. 右键菜单和屏蔽系统的右键...
Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题,包括Flex菜单、弹出界面、右键菜单等功能,本例中只提供解决对Flex 菜单的遮挡问题解决
NULL 博文链接:https://xiongjiajia.iteye.com/blog/1677182
flex把html页面作为类似iframe的样子的组件完全的嵌入到mxml中去。
在flex组件中嵌入html代码,可以利用flex iframe,下面为大家详细介绍下具体实现过程,感兴趣的朋友可以参考下
flex嵌入Html的IFrame插件;是一个很好的方式
将FLEX嵌入到JSP,其实是通过JSP的TAGLIB实现的. 步骤还是蛮简单的 1:去ADOBE下载FLEX的TAGLIB for JSP. 2:将flex-webtier-jsp.jar 拷贝到WEB-INF/flex/jars 文件夹. 3:在WEB.XML中添加 <taglib-uri>FlexTagLib ...
在Flex应用中嵌入HTML代码或者网页,可以使用Iframe实现
将FLEX嵌入到JSP,其实是通过JSP的TAGLIB实现的. 步骤还是蛮简单的 1:去ADOBE下载FLEX的TAGLIB for JSP. 2:将flex-webtier-jsp.jar 拷贝到WEB-INF/flex/jars 文件夹. 3:在WEB.XML中添加 <taglib-uri>FlexTagLib ...
IFrame组件,用于在flex页面中嵌入其他html,jsp等等页面!
FLEX问题总汇 论坛一直有些问题有人重复的发帖,...1:flex是否可以嵌入html? 2:flex可否访问系统里的资源,比如C盘D盘文件? 3:flex可否对文件进行操作? 4:为什么读取数据是Object object? 5:如何访问父级对象? . . .
该文档集合包括: 1、flex生成文件swf嵌入到html的常用的几种方法 2、flex与web工程结合的方法