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

有时候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页面。如果你实现了就说明你成功了。

--->点击阅读更多

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

相关推荐