用ExternalInterface实现Flex与外部容器交互

发布时间：2020-12-15 04:46:10 所属栏目：百科来源：网络整理

导读：有时候Flex需要与外部容器交互，比如和别的项目交互，调用外部数据，则可以通过ExternalInterface来实现。毕竟Flex版本还是比较“年轻”，有些地方还不完美，需要借助外部力量去实现。 ? ---点击阅读更多 ??? ? ? ? ?ExternalInterface类是外部 API，这是一

有时候Flex需要与外部容器交互，比如和别的项目交互，调用外部数据，则可以通过ExternalInterface来实现。毕竟Flex版本还是比较“年轻”，有些地方还不完美，需要借助外部力量去实现。

?--->点击阅读更多 ???

? ? ? ?ExternalInterface类是外部 API，这是一个在 ActionScript 和 Flash Player 容器之间实现直接通信的应用程序编程接口，例如，包含 JavaScript 的 HTML 页。Adobe 建议使用 ExternalInterface 实现 JavaScript 与 ActionScript 之间的所有通信。这个类主要有两个方法：

? ? ? ?●addCallback(functionName:String,closure:Function):void?将ActionScript 方法注册为可从容器调用。成功调用addCallBack() 后，容器中的 JavaScript 或 ActiveX 代码可以调用在 Flash Player 中注册的函数。

? ? ? ? ●call(functionName:String,...arguments):*?? 调用由 Flash Player 容器公开的函数，不传递参数或传递多个参数。如果该函数不可用，调用将返回null；否则，它返回由该函数提供的值

? ? ? ? ?具体用法可以查阅Flex4API，里面讲的很详细。

? ? ? ? ?本人今天做了一个Flex与外部交互的小例子，做了之后对ExternalInterface有了更深的认识。

--->点击阅读更多 ???

? ? ? ? ?新建一个mxml页面ExternalInterfaceDemo.mxml，代码如下所示：

[html] view plain copy print ?

<?xml?version="1.0"encoding="utf-8"?>??
<s:Application?xmlns:fx="http://ns.adobe.com/mxml/2009"??
??????????????xmlns:s="library://ns.adobe.com/flex/spark"??
??????????????xmlns:mx="library://ns.adobe.com/flex/mx"?minWidth="955"?minHeight="600"?creationComplete="app_creationCompleteHandler(event)">??
????<fx:Script>??
???????<![CDATA[?
???????????import?mx.controls.Alert;?
???????????import?mx.events.FlexEvent;?
???????????
???????????protected?function?app_creationCompleteHandler(event:FlexEvent):void?
???????????{?
??????????????//?TODOAuto-generated?method?stub?
??????????????ExternalInterface.addCallback("sendData",sendDataSelectHandler);?
??????????????getData.addEventListener(MouseEvent.CLICK,mouseClickHandler);?
???????????}?
???????????private?function?mouseClickHandler(event:MouseEvent):void{?
??????????????ExternalInterface.call("getData");?
???????????}?
???????????private?function?sendDataSelectHandler(obj:Object):void{?
??????????????var?name:String=obj['username'];?
??????????????var?pass:String=obj['passworld'];?
??????????????username.text=name;?
??????????????passworld.text=pass;?
???????????}?
???????]]>??
????</fx:Script>??
????<fx:Declarations>??
?????????
????</fx:Declarations>??
????<s:Panel?x="205"?y="116"?width="574"?height="324">??
????<s:Button?id="getData"?x="261"?y="196"?width="134"?height="42"?fontSize="16"?label="获取外部数据"/>??
????<s:Label?x="179"?y="92"?width="71"?fontSize="19"?text="姓名："/>??
????<s:TextInput?x="254"?y="92"?id="username"?fontSize="16"?editable="false"/>??
????<s:Label?x="179"?y="145"?fontSize="18"?text="密码："/>??
????<s:TextInput?x="256"?y="137"?id="passworld"?fontSize="16"?editable="false"/>??
????</s:Panel>??
</s:Application>??
???

? ? ? ?运行后页面如下所示：

? ? ? 接着需要新建一个JavaScript文件用于Flex与Jsp通信的桥梁。可是如果我们直接将JavaScript代码写在自动生成的ExternalInterfaceDemo.Html中的话，当我们再次修改ExternalInterfaceDemo.mxml文件后自动生成的ExternalInterfaceDemo.Html将覆盖原有的代码，这样我们的努力都会功亏与溃，那么怎么办？

? ? ? ? 查资料我才发现，每个自动生成的html页面都是由html-template目录下的index.template.html模板页生成，如果我们在此页面中添加一个JavaScript引入文件，那么所有的页面都会自动引入此JavaScript文件。问题就此解决了。

? ? ? ? 新建一个用于向Flex传送数据的Jsp文件externalInterfaceJsp.jsp，代码如下所示：

[html] view plain copy print ?

<%@?page?language="java"contentType="text/html;?charset=utf-8"??
????pageEncoding="utf-8"%>??
<!DOCTYPE?html?PUBLIC?"-//W3C//DTDHTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">??
<html>??
<head>??
<meta?http-equiv="Content-Type"content="text/html;?charset=ISO-8859-1">??
<title>测试</title>??
<script?type="text/javascript"src="../page/swf/commonJS.js"></script>??//引用创建的JavaScript文件??
<style?type="text/css">???
???????table.demo{border-collapse:?collapse;margin-left:50px;margin-top:10px;}???
???????table.demo?th,td?{padding:?0;?border:?1px?solid?#000;}???
????</style>???
</head>??
<body>??
????<form?>??
???????<table??class="demo"??width="400px"height="150px"??id="registerTable">???
???????????<thead>???
??????????????<tr?style="height:10px;"?>???
??????????????????<th?colspan="2"?align="center">注册表</th>???
??????????????</tr>???
???????????</thead>???
???????????<tbody>??????
??????????????<tr>???
??????????????????<td?style="text-align:?right;">姓名：</td>???
??????????????????<td><input?id="username"type="text">??</td>??????
??????????????</tr>???
??????????????<tr>???
??????????????????<td?style="text-align:?right;">密码：</td>???
??????????????????<td><input?id="passworld"type="password"?></td>???
??????????????</tr>???
??????????????<tr?>???
??????????????????<th?colspan="2"?align="center">?<input?type="button"?value="提交"?onClick="submitData()"></th>???
??????????????</tr>???
??????????</tbody>??
??????????</table>?????
????</form>??
</body>??
</html>??

? ? ?运行效果如下所示：

? ? ? ?接下来新建一个JavaScript文件commonJS.js，我是在输出目录下新建的一个JavaScript文件：

[javascript] view plain copy print ?

/**?
?*?Flex与Jsp交互?
?*/??
function?getData()??
{??
????var?url="../../jsp/externalInterfaceJsp.jsp";??
????window.open(url,"",?"height=200,width=500,status=no,resizable=yes,location=no,left=95,top=110,scroll=no,help=no");?//打开一个新窗口??
}??
function?submitData(){??
????try{??
????var?username=document.getElementById("username").value;??
????var?passworld=document.getElementById("passworld").value;??
????var?obj=new?Object();??
????obj.username=username;??
????obj.passworld=passworld;??
????var?ExternalInterfaceDemo=window.parent.opener.document.getElementById('ExternalInterfaceDemo');??//获得一个ExternalInterfaceDemo实例??
????ExternalInterfaceDemo.sendData(obj);??//调用ActionScript中的方法??
????window.close();?//关闭此子窗口??
????}catch(e){??
???????alert(e);??
????}??
}??

? ? ? ?好了，开始交互，当我们在externalInterfaceJsp.jsp中输入数值后，此页面的数据就会自动带回到Flex页面。如果你实现了就说明你成功了。

--->点击阅读更多 ???

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!