当前位置 :主页>知识堂>Flex专区教程>列表

详细讲解flex调用外部JS的用法

时间:2008-03-24 来源:www.uncool.cn  作者:uyang   点击:
    核心提示:用FLASH CS3开发,或者在FLEX里建立AS项目开发,与FLEX里建立FLEX项目开发,在对于调用外部的问题...
用FLASH CS3开发,或者在FLEX里建立AS项目开发,与FLEX里建立FLEX项目开发,在对于调用外部的问题,比如ExternalInterface类这个命令:结果一样吗?答案是不一样,这是个很奇怪的问题,其实是源于FLEX在建立的时候内部包含的东西很多,还加了个框架,如果你按照FLASH CS3里开发那样的命令,去调用外部JS,结果会很糟糕.应该说完全不同.
      首先来看一下一个简单的CASE,先说FLASH CS3里怎么做,不过这种方法,我已经在http://www.uncool.cn/blogs/read.php?117里写过,很简单.OK,我按照上面那个qq的例子,做一个改变,就是我在网页初始后,就希望得到一个我在JS里写好的值,并且初始化完成后,在FLASH里直接显示.怎么做?
      在网页代码里里,加一个JS命令,onLoad="所要执行的程序".然后在里写那个需要执行的程序,比如
< body  onLoad="pageInit()" >
然后在script里写上一个初始程序,我是按照以上那个QQ例子来做,那么就该写成
         function pageInit(){
                 callAS3(1);  
               }

       那么得到的结果是,在网页初始后,FLASH呈现的是穿上编号为1的那个衣服,而不是光着膀子.很简单,对吧,那么问题来了,如果按照同样的方法,在FLEX是否可以实现呢?那么我们来换一种例子来做,只是简单的传输一个字符.我们首先在FLEX里写:
  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  creationComplete="initApp()">
 <mx:Script>
   <![CDATA[
   import flash.external.*;
   
   public function initApp():void {
       ExternalInterface.addCallback("newMessage",newMessage);
       }
   
   public function newMessage(s:String):void {
         t.text = s;
      }
   ]]>
 </mx:Script>
 <mx:Text id="t"/>
</mx:Application>

      这样就做好了一个FLEX接受端,可以接受来自外部callApp JS命令,并且把字符在ID为T的text里显示.那么接着写JS端的(需要在FLEX建立完成后,再在BIN里修改那个HTML文件):


<html><head>
<title>Test.html</title>
</head>
<body scroll='no'>

<SCRIPT LANGUAGE="JavaScript">
   function callApp() {
       getSWF("TestSwf").newMessage(document.getElementById("newTitle").value);
   }
 function getSWF(movieName){
   if (navigator.appName.indexOf("Microsoft") != -1){
       return window[movieName]
   }
   else {
       return document[movieName]
   }
  }
</SCRIPT>

<h1>Test</h1>

<form id="f1">
   Enter a new Value: <input type="text" size="30" id="newTitle" >
                    <input type="button" name="btn" value="SEND" onClick="callApp()">
</form>

<table>
   <tr>
       <td valign="top">
           <object id="TestSwf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="200" width="400">
               <param name="src" value="test.swf"/>
               <embed name="TestSwf" src="test.swf" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" height="200" width="400"/>
           </object>
       </td>
   </tr>
</table>
</body></html>


     看这样就做好了一个很简单的在网页传输数据,并且在FLEX接收的程序了,那么我们继续玩点新花样,我需要在网页初始后,FLEX首先能够显示出我在网页里,或者JS里预加的值,比如:welcome什么的.怎么做?在一开头,我就用FLASH CS3写过,直接在object里放一个onload命令就可以了,但是FLEX能这样做吗?答案是否定的,很多人会被这个问题搞晕,那么到底该如何解决这个问题呢?
     其实就是比以前复杂一点,就是多加几个小确认.由于解释起来太麻烦,我就把每行代码都注释一下,先放FLEX端口的Script里的代码,其他的都一样.

 <mx:Script>
   <![CDATA[
   import flash.external.*;
   //程序的初始化
   public function initApp():void {
   //监听ExternalInterface.available的Boolean值,一般都为TRUE,如果想知道更详细的情况请参阅帮助文档
     if (ExternalInterface.available){
    //这个值来自与isContainerReady(),而isContainerReady(),的值是来自ExternalInterface.call("isReady");这个命令,这个命令就是写在JS里的,等下我贴JS代码的时候会放上,如果JS里的值返回是true,那么继续下面的Callback命令.
         var containerReady:Boolean = isContainerReady();          
         if (containerReady)  {
           Callback();            
         }
     }else{
       trace("Wrong Load!")
     }
       }
       private function isContainerReady():Boolean{
           var result:Boolean = ExternalInterface.call("isReady");
           return result;
   }
   private function Callback():void  {          
//这里就简单多了,先addCallback好准备要接收的东西,然后call JS里的命令,以便从JS发送一个值回来,注意次序不要搞错,错了就会不成功  
      ExternalInterface.addCallback("newMessage",newMessage);
         ExternalInterface.call("sendMessage");        
   }
   
   public function newMessage(s:String):void {
         t.text = s;
      }
   ]]>
 </mx:Script>

 下面是JS里的代码.同样也是SCRIPT里的代码,不过别忘了object 里要先写上onload="pageInit()"这个命令.

<SCRIPT LANGUAGE="JavaScript">
   var jsReady = false;

 //在预先设置jsReady这个值为false,然后在网页初始后,让其值为true;那么等FLEX在call isReady()这个命令后,会返回一个true值,这样FLEX里的程序才会继续执行.
 function pageInit(){
   jsReady = true;  
 }
 
 function isReady(){
   return jsReady;
 }
//这是等FLEX执行到Callback()后,所发送过来的事件命令,那么就可以执行这个程序了.执行完成后,就会newMessage 过去到FLEX里,这样FLEX里就会得到一个数值,并把他显示出来.
 function sendMessage(){
       getSWF("TestSwf").newMessage("Welcome");
   }
   function callApp() {
       getSWF("TestSwf").newMessage(document.getElementById("newTitle").value);
   }
 function getSWF(movieName){
   if (navigator.appName.indexOf("Microsoft") != -1){
       return window[movieName]
   }
   else {
       return document[movieName]
   }
  }
</SCRIPT>

      在FLEX里要实现网页初始,并能显示一个预先设置好的值的确复杂,要是FLASH CS3里就方便了很多,其他细节还需要自己细细体会了,以下是源文件,由于安全域问题,可能你把源文件弄过去后,比较难调试.干脆直接拷贝代码到你自己建立的项目就可以了,然后再改HTML的代码.


特别感谢:uyang 朋友对【我爱RIA网】教程筐频道的鼎力支持!
上一篇:没有了     下一篇:如何在一个类里面调用在Flex MXML文件里面定义的函数
版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。
特别注意:本站所提供的源文件,电子书,第三软件,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。
 评论内容:(最新评论共有 0) 位网友发表了评论不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码: 匿名? 马上注册
 
 
知识堂分类
 
本站所提供的所有素材版权归原作者所有,本站只供网友参考与交流,未经作者同意请勿用于商业用途
服务器带宽提供:零刻数据 本站CDN由海诺互动提供技术支持。 下载带宽支持:重庆万网
京ICP备08051668号