Flex 通过FABridge与JS交互

关键字：ExternalInterface

所用类库：SWFObject

/**

* Flex调用Javascript函数

* @params functionName:String Javascript函数名称

* @params ...params Javascript函数参数

* @return 返回Javascript函数的return内容

**/

ExternalInterface.call(functionName:String, ...params);

----------------------------------------------------------------------

/**

* Javascript调用Flex函数

* @params functionName:String Javascript调用Flex函数名

* @params closure:Function Flex将要调用的函数

* @return void

**/

ExternalInterface.addCallback(functionName:String,closure:Function);

-----------------------------------------------------------------------

HTML内嵌swf文件，可用swfobject.embedSWF()来内嵌。javascript调用Flex的函数，必须要获得swf的ID,

可通过document.getElementById(),也可以使用swfobject.getObjectById();

--------------------------------------------

SWFObject使用补充：

swfobject.embedSWF()

swfobject.getObjectById("swfID")

swfobject.removeSWF("swfID")

一.swfobject.embedSWF：

内嵌swf文件，这个函数的参数比较多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes)，各个参数具体功能如下：

swfUrl（String，必须的）指定SWF的URL。

id（String，必须的）指定将会被Flash内容替换的HTML元素（包含你的替换内容）的id。

width（String，必须的）指定SWF的宽。

height（String，必须的）指定SWF的高。

version（String，必须的）指定你发布的SWF对应的Flash Player版本（格式为：major.minor.release）。

expressInstallSwfurl（String，可选的）指定express install SWF的URL并激活Adobe express install。

flashvars（String，可选的）用name:value对指定你的flashvars。

params（String，可选的）用name:value对指定你的嵌套 object元素的params。

attributes（String，可选的）用name:value对指定object的属性。

注意 ：在不破坏参数顺序的情况下，你可以忽略可选参数。如果你不想使用一个可选参数，但是会使用后面的一个可选参数，你可以简单的传入false作为参数的值。对flashvars、params和 attributes这些JavaScript对象来说，你也可以相应的传入一个空对象{}。

二.swfobject.getObjectById("swfId")

通过swfid获得swf对象，通过该对象可调用flex函数。

三.swfobject.removeSWF("swfId")

通过swfId删除swf。

注意 ：删除swf这里需要提醒下，因为embedSWF是替换标签，而不是填充。比如上面的例子<div id="myPanel">Flex content</div>，如果执行了swfobject.removeSWF后，想重新添加SWF必须要重新创建<div id="myPanel">或者更改embedSWF的第二个参数更改替换新的标签ID。因为在这里SWF替换了调了<div>

-----------------------------------------------------------------------

Flex-AJAX Bridge：重要点（当然FLEX项目中要右击--->create Ajax Bridge...会自动引入FABridge）

网页引入：

(1)<script type="text/javascript" src="fabridge/javascript/FABridge.js"></script>

<script type="text/javascript" src="fabridge/swfobject/swfobject.js"></script>

(2)写脚本插入生成的swf：

<script type="text/javascript">

　　var flashvars={};

　　flashvars.bridgeName="example";

　　var params={};//如：params.allowFullScreen="true";params.allowScriptAccess="always";等等在这里写，

　　var attributes={};

　　attributes.id="flexApp";

　　attributes.name="flexApp";

　　swfobject.embedSWF("app.swf","flashcontent","400","400","9.0.124","",flashvars,params,attributes);

</script>

（3）通过FABridge使Flex与脚本交互：

var flexApp=FABridge.example.root();//得到了Flex应用程序，通过它可以操作Flex中的控件。

---------FLEX以下为列----------

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" height="400" viewSourceURL="srcview/index.html">

<mx:Script>

<![CDATA[ import mx.controls.Alert;

import mx.controls.*;

public function testFunc(val1:String = "defaultParam" ):void

{

Alert.show(val1, "called remotely");

}

]]>

</mx:Script>

<mx:Panel width="100%" height="100%" id="panel" paddingLeft="20" paddingTop="20" >

<mx:Text width="100%" height="16">

<mx:text>

Refer to the controls below, via javascript, as slider(), check(), and button() respectively

</mx:text>

</mx:Text>

<mx:CheckBox x="49" y="34" label="Checkbox" id="check"/>

<mx:HSlider snapInterval=".01" id="slider" liveDragging="true"/>

<mx:Button id="button" label="generic button" />

</mx:Panel>

<fab:FABridge xmlns:fab="bridge.*" />

</mx:Application>

------------end---------------

1.var currentCheckValue=flexApp.getCheck().getSelected();//获得FLex中的id为check的控件的selected属性：（看这式子的写法）

2.var callback=function(){alert("Hello world!");}

flexApp.getButton().addEventListener("click",callback);//这个例子是给ID为button的控件的click加入一个事件处理函数

3.var buttonSam=FABridge.example.create("mx.controls.Button");//在flex应用程序中创建一个按钮

4.flexApp.testFunc("Hello,World!");//调用flex应用程序中的函数，传入参数。

------------------大体上就是这样，在获取得到FLEX中的控件后，可像在flex中一样处理它---------------