Flex – 與 Javascript 互相溝通

Flex 在擷取資料時一般都是自行內部使用 Http Service , Remote Object … 等等方式來取得，但如需用 Javascript 傳遞資料時，那需如何實作呢？下面程式碼提供此範例供參考.

<?xml version="1.0" encoding="utf-8"?>
 <!-- http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/ -->
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
         layout="vertical"
         verticalAlign="middle"
         backgroundColor="white">
  
     <mx:Script>
         <![CDATA[
             private function callJavaScript():void {
                 ExternalInterface.call("sayHelloWorld");
             }
         ]]>
     </mx:Script>
  
     <mx:Button label="Say 'Hello World'"
             click="callJavaScript();" />
  
 </mx:Application>

Javascript:

<script language="JavaScript" type="text/javascript">
    function sayHelloWorld() {
        alert("Hello World, from JavaScript");
    }
</script>

上面的範例就可以讓 Flex 來呼叫 Javascript 中的 Function.

import mx.collections.ArrayList;
            
protected function creationCompleteHandler(event:FlexEvent):void
{
    if (ExternalInterface.available) {
        ExternalInterface.addCallback("setMode", setMode);
    }
}
            
public function setMode(mode:int):void {
    modeBar.selectedIndex = mode - 1;
}

Javascript:

    var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "#FFFFFF"
        };
        var attributes = {id:"JSCallFlex"};
    swfobject.embedSWF("JSCallFlex.swf", "swfplayer", "500", "150", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
 
function alertshow(){
    getFlexApp('JSCallFlex').setMode(1);
}
 
function getFlexApp(appName){
  if (navigator.appName.indexOf ("Microsoft") !=-1){
    return window[appName];
  }else {
    return document[appName];
  }
}

上面的範例就可以讓 javascript 來呼叫 Flex 中的 Function.