- 浏览: 83051 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
kaidi0314:
sunnyfaint 写道没耐心,所以我只肯花10分钟,但确保 ...
一道意思的智力题 -
sunnyfaint:
右手扶圣经,我以前没做过。
另外,你那方法我也看不懂。我的智商 ...
一道意思的智力题 -
sunnyfaint:
没耐心,所以我只肯花10分钟,但确保有50%的机会称出来,运气 ...
一道意思的智力题
http://godfei.blog.163.com/blog/static/214256102007102510411407/
FLEX的TextArea实现部分HTML的,你可以直接写HTML中的链接来实现
比如
<mx:TextArea>
<mx:htmlText>
<![CDATA[
<a href="http://www.riachina.com" target="_blank"><u>链接1</u></a>
<a href="http://www.riachina.com" target="_blank"><u>链接2</u></a>
<a href="http://www.riachina.com" target="_blank"><u>链接3</u></a>
]]>
</mx:htmlText>
</mx:TextArea>
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应用中嵌入本站首页。
FLEX的TextArea实现部分HTML的,你可以直接写HTML中的链接来实现
比如
<mx:TextArea>
<mx:htmlText>
<![CDATA[
<a href="http://www.riachina.com" target="_blank"><u>链接1</u></a>
<a href="http://www.riachina.com" target="_blank"><u>链接2</u></a>
<a href="http://www.riachina.com" target="_blank"><u>链接3</u></a>
]]>
</mx:htmlText>
</mx:TextArea>
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应用中嵌入本站首页。
发表评论
-
flex数组详解(转)
2011-12-22 09:53 1241http://hi.baidu.com/lz0830/blog ... -
java Flex as3 数据类型对应关系表
2011-12-19 11:26 989http://blog.csdn.net/whqcfp/art ... -
flex验证器
2011-12-19 09:30 1377Flex有很多值得学习的地方,这里向大家描述一下常用Flex验 ... -
Flex 对Java端返回Collection的处理
2011-12-15 10:12 880Flex 对Java端返回Collection的处理方法 将F ... -
flex的数据类型和数字计算
2011-12-14 16:49 1752类型名 类型描述 Boolean ... -
flex常用问题收藏
2011-12-06 16:19 01、FLEX Module 模块高宽百分比设置 http:// ... -
flex画图
2011-11-25 15:37 0birdeye 第三方免费的组 ... -
flex动态获取remoteobject
2011-11-16 19:55 0package common { import mx. ... -
spring+blazeds集成
2011-11-14 19:57 1079考文档是 Spring BlazeDS Integration ... -
Java程序员学习Flex和BlazeDS的十三个理由
2011-11-14 16:32 651本文列述了13个Java程序员应当学习Flex和BlazeD ... -
关于BlalzeDs RDS
2011-11-14 15:33 789http://blog.csdn.net/wannshan/a ... -
DataGrid Web Control 连载之八
2011-10-15 15:32 955http://www.diybl.com/course/1_w ... -
实现Flex页面跳转行之有效的办法
2011-09-24 23:13 925http://developer.51cto.com/art/ ...
相关推荐
flex实现对图片的旋转与拖动,简单的小例子,希望对大家有所帮助
简洁的实现了在flex中实现背景音乐的功能
完美解决Flex3 中 实现 图文混排 。
程序通过图片的展示实现产品图片的旋转视角效果
提供如何在Flex中如何前台链接后台并链接数据库
flex中文帮助flex中文帮助flex中文帮助flex中文帮助
flex中默认的tab都是一行的,要使用多行的tab,可以参考这个例子的代码。
简洁实现flex中条形统计图,更加美观,适合初学者学习
flex实现 ComboBox中下拉checkbox 经测试好用,还有可移动面板,和可改大小面板实例
Flex实现的朝4个方向翻转的效果,可以扩展实现很多特殊展示效果
完美解决 Flex 4 中 实现 图文混排
flex 4.6 中实现手机端图片导入和旋转图片 里面有 3 个图片 文件没有上传(旋转按钮上的图标left.png right.png 和一个默认图片视图=^.^=.jpg 可自己修改一下)例如 自己加图片在 assets中并命名为这些名字 或 在...
在网络技术快速发展的今天,flex越来越重要,通过这个你能学到登陆界面的制作
实现财务数字大写功能,可以直接在flex开发中使用。如13,转为壹拾叁;
flex中文帮助文档flex中文帮助文档
flex实现了图片的拖拽功能,包括,拖动图片不删除原来图片,和拖动图片删除原来图片
动态实现多文件上传,基于flex技术,可以动态监控上传进度。
flex基础列子,利用flex技术实现计算器功能
flex 嵌入外部文字样式,弥补flex内部字体不足的缺憾
flex进行开发开发的视频语音文字聊天程序