BlogJava-ivaneeo's blog-随笔分类-flex-我酷所以我在

Flex组件IFrame中嵌入HTML页面的方法

ivaneeo — Thu, 08 Mar 2012 14:48:00 GMT

功能描述：在Flex中嵌套框架，并且进行数值传递

１、编辑Flex框架组件iFrame.mxml

http://www.adobe.com/2006/mxml"
resize="callLater(moveIFrame)"
move="callLater(moveIFrame)">

        import flash.external.ExternalInterface;
        import flash.geom.Point;
        import flash.net.navigateToURL;

private var __source: String;

        /**
         * Move iframe through ExternalInterface. The location is determined using localToGlobal()
         * on a Point in the Canvas.
         **/
        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);
}

        /**
         * The source URL for the IFrame. When set, the URL is loaded through ExternalInterface.
         **/
        public function set source(source: String): void
        {
            if (source)
            {

                if (! ExternalInterface.available)
                {
                    throw new Error("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);
                moveIFrame();
            }
        }

        public function get source(): String
        {
            return __source;
        }

        /**
         * Whether the IFrame is visible.
         **/
        override public function set visible(visible: Boolean): void
        {
            super.visible=visible;

            if (visible)
            {
                ExternalInterface.call("showIFrame");
            }
            else
            {
                ExternalInterface.call("hideIFrame");
            }
        }

]]>

２、放置到要使用框架的Flex中index.mxml，并写入引用哪个frame.html

３、在引用框架的Flex生成页index.html里加入：

<1. wmode set to opaque

在调用swf的后面加上"wmode","opaque"

例如："pluginspage", "http://www.adobe.com/go/getflashplayer",

"wmode","opaque"
<2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods

<3. the 'myFrame' div

在这前写入：

４、在Flex页面index.mxml输入的函数值,调用index.html中的'getEditorText'函数，并且写入到text1.text中

text1.text=ExternalInterface.call('getEditorText',param1,param2,param3,...)

getEditorText:函数名称

param:参数值

５、在生成页中取得框架中的函数

框架内的frame.html，放置在head之间:

function GetEditorText1(){
return getHTML(params);

index.html生成页的调用，设置在head之间：

     function getEditorText(){
      return document.getElementById("myIFrame").contentWindow.GetEditorText1();
     }

后记：实际中在这里只是调用一个层放在对应位置而已，当我们在Flex中做申缩动作时，层也要跟着改变，我是如此处理的：

设置move或show事件，当move或show时则调用：iFrame.source = "frame.html"

参考：

http://www.cnflex.cn/html/mxml/20070321/95.html

http://www.cnblogs.com/dannyr/archive/2004/11/24/68026.aspx

http://renaun.com/flex2/posts/flexsearch/index.html（有源码下载）

具体的一个例子——使用IFrame这个框架的一个页面的代码如下：

classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'

codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14

,0'
   width='100%' height='100%'
   id='flexapp' name='flexapp'>

height='100%'
       flashvars=''
       src='EXPIframe.swf'
       name='flexapp'
       wmode="opaque"
       swLiveConnect="true"
   />

frameborder="0"
style="position:absolute;background-

color:transparent;border:0px;visibility:hidden;">

ivaneeo 2012-03-08 22:48 发表评论

Flex addEventListener增加事件侦听函数时传递多个参数

ivaneeo — Fri, 16 Dec 2011 09:43:00 GMT

今天在flex里通过addEventListener函数给控件动态加载click事件侦听函数时，除了事件本身传递的Event类型参数外，还需要传递更多的参数，在网上找了一段代码，用起来还不错，张贴到这里。

package
{
    public class EventArgExtend
    {
        public function EventArgExtend()
        {
        }

        public static function create(f:Function,... arg):Function
        {
               var F:Boolean=false;
               var _f:Function=function(e:*,..._arg)
               {
                   _arg=arg
                   if(!F)
                   {
                       F=true
                       _arg.unshift(e)
                   }
                   f.apply(null,_arg)
               };
               return _f;
        }
        public static function toString():String
        {
               return "Class JEventDelegate";
        }
    }
}

=========================================== 使用的方式：
txtShow.addEventListener(MouseEvent.CLICK,EventArgExtend.create(clickHandler,1,"str"));

            private function clickHandler(e:Event,...arg):void
            {
                Alert.show(arg[0].toString());
                Alert.show(arg[1].toString());
            }

还有另外一个方法，没有封装效果，不过代码更加容易理解：

var sayHello:String = "欢迎光临www.FlashJ.cn -Flash,Ria技术博客";
btn1.addEventListener(MouseEvent.CLICK,function (e:MouseEvent){clickHandlerWithArg(e,sayHello)});
function clickHandlerWithArg(e:MouseEvent,arg:String):void
{
var out:String= e.target + "发出事件(有参数) :" + arg;
trace(out);
}

ivaneeo 2011-12-16 17:43 发表评论

将HTML页面嵌入FLEX应用中

ivaneeo — Thu, 01 Dec 2011 06:48:00 GMT

先用现成的组件玩一下，一会再去看看组件源码研究一下。

http://code.google.com/p/flex-iframe/

下载了flexiframe.swc，引入工程。

flex代码

http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:code="http://code.google.com/p/flex-iframe/">
      height="400">

        label="Google"
      source="http://www.google.com"
      width="100%"
      height="100%"/>

运行，发现，可以了。

不过，有个问题，鼠标点击别处的时候，网页消失了。

找了很多地方，找到了解决方法。设置wmode。

首先了解一下wmode是什么。

window mode(wmode)

wmode即窗口模式总共有三种：

window 模式

默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。

但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。

Opaque 模式

这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。

Transparent 模式

透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。

这边，我们将wmode设置为transparent。

我直接修改了工程的html模板，红色字体部分为新增加的代码。

if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;

AC_FL_RunContent(
  "src", "playerProductInstall",
  "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
  "width", "${width}",
  "height", "${height}",
  "align", "middle",
  "id", "${application}",
  "quality", "high",
  "bgcolor", "${bgcolor}",
  "name", "${application}",
  "allowScriptAccess","sameDomain",
  "type", "application/x-shockwave-flash",
  "pluginspage", "http://www.adobe.com/go/getflashplayer",
  "wmode","transparent"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
   "src", "${swf}",
   "width", "${width}",
   "height", "${height}",
   "align", "middle",
   "id", "${application}",
   "quality", "high",
   "bgcolor", "${bgcolor}",
   "name", "${application}",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer",
   "wmode","transparent"
);
} else { // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
   + 'Get Flash';
    document.write(alternateContent); // insert non-flash content
}

       width="${width}" height="${height}" name="${application}" align="center"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    wmode="transparent">

保存，运行。问题解决了。

ivaneeo 2011-12-01 14:48 发表评论

Flex中TextInput组件用restrict限制某些字符的输入用法

ivaneeo — Mon, 21 Nov 2011 10:24:00 GMT

restrict限制的意思

1. 限制某个字符的输入，用符号 ^ 跟上要限制的字符，可跟多个字符









2. 设置只能输入某些字符，将允许输入的字符罗列出来即可，也可以用 - 组合表示字符范围













3. 组合使用

下面罗列出了一些常用的正则表达式：

^/d+$　　//匹配非负整数（正整数 + 0）
^[0-9]*[1-9][0-9]*$　　//匹配正整数
^((-/d+)|(0+))$　　//匹配非正整数（负整数 + 0）
^-[0-9]*[1-9][0-9]*$　　//匹配负整数
^-?/d+$　　　　//匹配整数
^/d+(/./d+)?$　　//匹配非负浮点数（正浮点数 + 0）
^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*))$　　//匹配正浮点数
^((-/d+(/./d+)?)|(0+(/.0+)?))$　　//匹配非正浮点数（负浮点数 + 0）
^(-(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9][0-9]*)))$　　//匹配负浮点数
^(-?/d+)(/./d+)?$　　//匹配浮点数
^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^/w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$　　　　//匹配email地址
^[a-zA-z]+://匹配(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$　　//匹配url

匹配中文字符的正则表达式： [/u4e00-/u9fa5]
匹配双字节字符(包括汉字在内)：[^/x00-/xff]
匹配空行的正则表达式：/n[/s| ]*/r
匹配HTML标记的正则表达式：/<(.*)>.*|<(.*) //>/
匹配首尾空格的正则表达式：(^/s*)|(/s*$)
匹配Email地址的正则表达式：/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*
匹配网址URL的正则表达式：^[a-zA-z]+://(/w+(-/w+)*)(/.(/w+(-/w+)*))*(/?/S*)?$
匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
匹配国内电话号码：(/d{3}-|/d{4}-)?(/d{8}|/d{7})?
匹配腾讯QQ号：^[1-9]*[1-9][0-9]*$
下表是元字符及其在正则表达式上下文中的行为的一个完整列表：
/ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个后向引用、或一个八进制转义符。
^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的Multiline 属性，^ 也匹配 ’/n’ 或 ’/r’ 之后的位置。
$ 匹配输入字符串的结束位置。如果设置了 RegExp 对象的Multiline 属性，$ 也匹配 ’/n’ 或 ’/r’ 之前的位置。
* 匹配前面的子表达式零次或多次。
+ 匹配前面的子表达式一次或多次。+ 等价于 {1,}。
? 匹配前面的子表达式零次或一次。? 等价于 {0,1}。
{n} n 是一个非负整数，匹配确定的n 次。
{n,} n 是一个非负整数，至少匹配n 次。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。在逗号和两个数之间不能有空格。
? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。
. 匹配除 “/n” 之外的任何单个字符。要匹配包括 ’/n’ 在内的任何字符，请使用象 ’[./n]’ 的模式。
(pattern) 匹配pattern 并获取这一匹配。
(?:pattern) 匹配pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。
x|y 匹配 x 或 y。
[xyz] 字符集合。
[^xyz] 负值字符集合。
[a-z] 字符范围，匹配指定范围内的任意字符。
[^a-z] 负值字符范围，匹配任何不在指定范围内的任意字符。
/b 匹配一个单词边界，也就是指单词和空格间的位置。
/B 匹配非单词边界。
/cx 匹配由x指明的控制字符。
/d 匹配一个数字字符。等价于 [0-9]。

/D 匹配一个非数字字符。等价于 [^0-9]。
/f 匹配一个换页符。等价于 /x0c 和 /cL。
/n 匹配一个换行符。等价于 /x0a 和 /cJ。
/r 匹配一个回车符。等价于 /x0d 和 /cM。
/s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ /f/n/r/t/v]。
/S 匹配任何非空白字符。等价于 [^ /f/n/r/t/v]。
/t 匹配一个制表符。等价于 /x09 和 /cI。
/v 匹配一个垂直制表符。等价于 /x0b 和 /cK。
/w 匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。
/W 匹配任何非单词字符。等价于 ’[^A-Za-z0-9_]’。
/xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。
/num 匹配 num，其中num是一个正整数。对所获取的匹配的引用。
/n 标识一个八进制转义值或一个后向引用。如果 /n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
/nm 标识一个八进制转义值或一个后向引用。如果 /nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 /nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 /nm 将匹配八进制转义值 nm。

ivaneeo 2011-11-21 18:24 发表评论

flex学习-----Flex两页面间的传值

ivaneeo — Fri, 21 Oct 2011 08:32:00 GMT

众所周知Flex主要用于B/S结构程序的开发，凡是这类型的开发都存在页面间的传值的问题，通常一般的B/S开发主要不外乎使用地址修改法，隐藏表单域等方法，但是这些方法在Flex中确没有用，原因是应为Flex支持的模型和普通的B/S开发语言不一样，一般的B/S开发语言使用的主要是请求/响应模型，而Flex采用的是事件驱动模型(这种模型主要见于C/S结构程序),所以我们的Form表单等传值方法就无效了，哪么我们如何在两个这样模型的页面中传递数据呢？下面我们讲述下两种常用的传值方法:
一、 利用ExternalInterface调用Javascript
a) 该方法主要利用ExternalInterface的call方法调用Javascript函数，进而修改地址(有点类似于地址修改法),在接受页面上主要是靠BrowserManager获取地址栏信息，并利用URLUtil截取参数。
b) 该方法虽然简单但是确调用了2种语言，给编写带来一定的困难
发送页面代码(second.html)：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
    function kk():void{
   var val:String = myparam.text;
 ExternalInterface.call("function(){window.location.href='http://localhost:8080/send/page.html#param1="+val+"'}");  }
  ]]>
 
   id="myparam">
  name="ok" click="kk()" x="185" label="提交">

接收页面代码(page.html):

 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" >
 
     import mx.managers.IBrowserManager;
   import mx.managers.BrowserManager;
   import mx.utils.URLUtil;
   [Bindable]
   var param:String;
   function init():void
   {
    var bm:IBrowserManager = BrowserManager.getInstance(); 
    bm.init();
    var o:Object = URLUtil.stringToObject(bm.fragment,"&");
    param = o.param1;
   }
  ]]>
 
  id="val" text="{param}">
 

二、 利用SharedObject(本地共享对象传送)
a) 该对象类似于Cookie，将需要传送的数据放在SharedObject对象中，而实际上在本机大致在（win2k和 win xp中，默认路径为C:/Documents and Settings/username/Application Data/Macromedia/Flash Player/#SharedObjects (username为机器的用户名)）位置生成一个sol文件，该对象具有一个data属性，只要将你要传的数据按键值对放进去就好了，下次读取的时候就在本地直接读取即可
b) 遗憾的是，该对象要求你自己创建还要自己清除，并且在写入数据时一定要强制刷新，否则数据无法希尔
发送页面代码(index.html)：

 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
     function s mit():void
   {
    var param:String = myparam.text;
    //创建全局SharedObject,如果不用全局就去掉后面的"/",一旦去掉那么cookie只能被自己的Application使用，其他Applicaiton无法看见
    //myparam是要求在本机创建一个叫cookie.sol的文件
    var obj:SharedObject = SharedObject.getLocal("cookie","/");
    obj.data.username=myparam.text;
    obj.flush();
    //调用URLReqst将跳转到second.html页面
    var reqst:URLReqst =new URLReqst();
    reqst.url="second.html";
    navigateToURL(reqst);
   }
  ]]>
 
  id="myparam">
  label="提交" click="s mit()" x="177">

接收页面代码(second.html):

 xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
 
     [Bindable]
   var param:String;
   function init():void
   {
    //在本地找到myparam.sol文件
    var obj:SharedObject =SharedObject.getLocal("cookie","/");
    //读取前页存入的数据
    param = obj.data.username;
    //用完了别忘了将myparam.sol文件删除
    obj.clear();
   }
  ]]>
 
  id="mypar" text="{param}">

ivaneeo 2011-10-21 16:32 发表评论