有時候Flex需要與外部容器互動，比如和別的項目互動，調用外部資料，則可以通過ExternalInterface來實現。畢竟Flex版本還是比較“年輕”，有些地方還不完美，需要藉助外部力量去實現。
ExternalInterface類是外部 API，這是一個在 ActionScript 和 Flash Player 容器之間實現直接通訊的API，例如，包含 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，代碼如下所示：
<?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> <!-- Place non-visualelements (e.g., services, value objects) here --> </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，代碼如下所示：
<%@ 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檔案：
/** * 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頁面。如果你實現了就說明你成功了。
原創文章，轉載請註明出處：http://www.dianfusoft.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
