Flex与JavaScript交互


早就再留意Flex与Js的交互方式了,网上看了就三两句代码就解决了,从前对此比较不屑,自认为什么时 候想用了花个5分钟看看就搞定了。

今天终于静下来自己测试和整理了下,才发现其实要调试成功并没那么简单,这几行代码折腾了我大半天 真是的。

下面我把我的测试代码和心得和大家分享下:

Js2Flex.mxml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">  
  3.      <mx:Script>  
  4.         <!--[CDATA[  
  5.             import mx.controls.Alert;     
  6.             
  7.             public function flexHelloWorld(param1:String, param2:String):String {     
  8.                   Alert.show("param1: " + param1 + "; param2:" + param2);     
  9.                return "Hello " + param1 + param2;     
  10.             }     
  11.                  
  12.             public function initApp():void {     
  13.                 ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld);     
  14.             }     
  15.                  
  16.             public function jspHello():void {     
  17.                var s:String = ExternalInterface.call("hello", "Flex");     
  18.                 Alert.show(s);     
  19.            }       
  20.         ]]-->  
  21.      </mx:Script>  
  22.     <mx:Button x="52" y="58" label="call javascript" click="jspHello()"/>   
  23. </mx:Application>  
 

testSwf.html

  1. <html>  
  2. <head>  
  3. <mce:script type="text/javascript" src="swfobject.js" mce_src="swfobject.js"></mce:script>  
  4. </head>  
  5. <body>  
  6. <div id="flashcontent">  
  7. This text is replaced by the Flash movie.  
  8. </div>  
  9. <br>  
  10. <input type=button value="Call Flex" onclick="callflex()"/>  
  11. <mce:script language="javascript"><!--  
  12. var so = new SWFObject("Js2Flex.swf", "flexObject", "640", "300", "7", "#336699");  
  13.   so.write("flashcontent");  
  14. function hello(param) {      
  15.      return "jsp Hello:" + param;     
  16.     }     
  17.      
  18. function callFlexFunction() {    
  19.      var fl = document.getElementById("flexObject");  
  20.     var x= fl.flexHelloWorld("Hello", "world");      
  21.    }    
  22. function callflex()  
  23. {  
  24. callFlexFunction();  
  25. }  
  26. // --></mce:script>  
  27. </body>  
  28. </html>   
 

其实交互主要是通过 Flex自带接口ExternalInterface的addCallback和call方法来实现的,一个是命名方法代理,一个是条用Js方法。然后通 过swfobject.js自带的方法嵌入swf实现Flex和JavaScript的无缝交互

注意:一定要到网上下载swfobject.js,然后再<head>内导入,然后用new SWFObject()嵌入swf,用<html>的<object><embed>嵌入的swf无法传递参数,这 个就是为什么我弄了大半天没调试成功的原因,这个原因还没弄明白,不过swf还是尽量用js来嵌入,这样更符合html标准。

还有就是如果把生成的swf更换目录 然后本地调试会有安全沙箱问题,所以最好在服务器上调试。

posted on 2010-05-13 12:01  念时  阅读(361)  评论(0编辑  收藏  举报

细节决定成败!态度决定一切!