`
zwnJava
  • 浏览: 208055 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

[转载]JavaScript、Flex、Air之间的相互通信的研究

    博客分类：
  • flex
 
阅读更多

文章转自：http://blog.csdn.net/txiejun/article/details/5675191 

 

在Air中嵌入的HTML控件中打开一个新的浏览器窗口是不行的，而通过Air本身的navigateToURL可以做到这点；为了能够实现在Air的HTML控件中打开一个新的浏览器窗口，我考虑到了使用JavaScript来作为中间媒介；通过HTML中的对象访问JavaScript函数，然后JavaScript函数在访问Air中的函数来调用Air的navigateToURL方法实现以上目的；可能这种方式不是最优解决方案，不过通过这几天的研究倒是把JavaScript、Flex、Air之间的相互通信有了更深入的了解；为了不浪费，所以写下来供以后参考，好了，开始吧；

    1.首先需要建立两个工程，一个名叫AppTest的Flex工程，另一个叫做AirWeb的Air工程；为了减少拷贝文件的操作，可以把AppTest工程的output路基设置到Air的bin-debug路径下（比如我目前的AppTest工程发布路径为:D:/workspace/AirWeb/bin-debug/AppTest.html），这样在启动Air的时候，就很方便的调用AppTest中生存的资源了；

    2.AppTest 工程的内容如下：

   

[java] view plaincopyprint?
 
  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
  3.      layout="absolute" creationComplete="init()" fontSize="13">     
  4.     <mx:Script>     
  5.         <!--[CDATA[  
  6.          import flash.net.navigateToURL;     
  7.             import mx.controls.Alert;     
  8.             import flash.external.ExternalInterface;     
  9.             private function init():void  
  10.             {     
  11.              //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
  12.                 this.html.domWindow.jsCallAir = jsCallAir;      
  13.             }     
  14.             private function jsCallAir(str:String):void  
  15.             {     
  16.                 airtext.text=str;   
  17.                 airCallJs();    
  18.             }     
  19.               
  20.             private function airCallJs():void  
  21.             {     
  22.              //调用js中airCallJs方法   
  23.                 //this.html.htmlLoader.window.airCallJs(airtext.text);  
  24.                 openWindowInAir();  
  25.             }  
  26.               
  27.             private function openWindowInAir():void  
  28.             {  
  29.              var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
  30.              navigateToURL(urlRequest);    
  31.             }  
  32.               
  33.         ]]-->     
  34.     </mx:Script>     
  35.              
  36.     <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
  37.     </mx:TextInput>     
  38.     <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
  39.     </mx:HTML>     
  40.     <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
  41.       
  42. </mx:WindowedApplication>   

 

 

3.AppTest.html 页面中的重要内容：

    

[javascript] view plaincopyprint?
 
  1. <html lang="en">  
  2. <head>  
  3. //...此处省略了一些代码  
  4. <mce:script language="JavaScript" type="text/javascript"><!--  
  5. //...此处省略了一些代码  
  6. function airCallJs(value)  
  7. {  
  8.     alert("air call js ="+value);  
  9. }  
  10.   
  11. function onJsCallAir()  
  12. {  
  13.     openWind();  
  14.     try{     
  15.        var str=document.getElementById("text").value;        
  16.        //function jsCallAir will be called in the air   
  17.        jsCallAir(str);      
  18.     }catch(e){     
  19.         alert("call funtion jsCallAir error:"+e.description);     
  20.     }     
  21. }  
  22.   
  23. function jsCallApp()  
  24. {  
  25.     var flashApp =window.document.getElementById("AppTest");  
  26.     if(flashApp)  
  27.     {  
  28.         try  
  29.         {  
  30.             flashApp.jsCallApp(text.value);  
  31.         }  
  32.         catch(err)  
  33.         {  
  34.             alert("call funtion jsCallApp error:"+err.description);  
  35.         }  
  36.     }  
  37. }  
  38.   
  39. function appCallJs(value)  
  40. {  
  41.     onJsCallAir();  
  42.     alert("app call js ="+value);  
  43. }  
  44.   
  45. function openWind()  
  46. {  
  47.     window.open("http://www.google.com");  
  48. }  
  49. // --></mce:script>  
  50. </head>  
  51.   
  52. <body scroll="no" >  
  53. <table>  
  54.     <input type="text" id="text"  value="It's a javascript text!"/>   
  55.     <input type="button" value="jsCallApp" onclick="jsCallApp()"/>   
  56.     <input type="button" value="jsCallAir" onclick="onJsCallAir()"/>      
  57. </table>  
  58. //...此处省略了一些代码  
  59. </body>  
  60. </html>  

 

 

4.AirWeb工程中的代码：

   

[java] view plaincopyprint?
 
  1. <?xml version="1.0" encoding="utf-8"?>     
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="1000" height="800"    
  3.      layout="absolute" creationComplete="init()" fontSize="13">     
  4.     <mx:Script>     
  5.         <!--[CDATA[  
  6.             import flash.net.navigateToURL;     
  7.             import mx.controls.Alert;     
  8.             import flash.external.ExternalInterface;     
  9.             private function init():void  
  10.             {     
  11.                 //注册JavaScript中的jsCallAir函数被调用时 将会调用Air中的jsCallAir方法  
  12.                 this.html.domWindow.jsCallAir = jsCallAir;       
  13.             }     
  14.             private function jsCallAir(str:String):void  
  15.             {     
  16.                 airtext.text=str;   
  17.                 airCallJs();    
  18.             }     
  19.               
  20.             private function airCallJs():void  
  21.             {     
  22.                 //调用js中airCallJs方法   
  23.                 //this.html.htmlLoader.window.airCallJs(airtext.text);  
  24.                 openWindowInAir();  
  25.             }  
  26.               
  27.             private function openWindowInAir():void  
  28.             {  
  29.                 var urlRequest:URLRequest = new URLRequest("http://www.baidu.com");  
  30.                 navigateToURL(urlRequest);    
  31.             }  
  32.               
  33.         ]]-->     
  34.     </mx:Script>     
  35.              
  36.     <mx:TextInput id="airtext" text="txiejun's Air test!" x="10" y="10">  
  37.     </mx:TextInput>     
  38.     <mx:HTML id="html" y="50" location="AppTest.html"  width="800" height="650">          
  39.     </mx:HTML>     
  40.     <mx:Button x="216" y="10" label="airCallJs" click="airCallJs()"/>  
  41. </mx:WindowedApplication>   

 

 

以上的代码分别实现了JavaScript于air的互相通信和JavaScript和flex app的互相通信，因此要实现，air和flex app的通信也就很简单了，借助JavaScript作为中间介质，也就实现了air和flex app的互相通信；

分享到：
| UML图之类图介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    SWF之间通信、Flex与SWF之间通信

    ExternalInterface是Flex和SWF之间通信的一种方式，它允许ActionScript代码调用JavaScript函数。这种方式适用于SWF文件需要与HTML页面交互的情况。 #### 三、C#与SWF之间的通信 除了SWF文件之间的通信外，有时候...

    Air Flex Sqlite通信

    本示例着重于“Air Flex Sqlite通信”，即如何在Adobe AIR应用中使用Flex与SQLite数据库进行交互。 SQLite是一个轻量级的、自包含的、无服务器的SQL数据库引擎，被广泛用于移动应用和嵌入式系统。在Adobe AIR中，...

    FLEX AIR天气预报查询

    这个小程序是开发者为了学习Flex与Web服务之间的通信机制而创建的，同时也为了方便其他学习者参考和使用。 【描述】中的关键知识点包括： 1. **Flex**：Flex是一种开源的、基于ActionScript的框架，用于构建富...

    Java flex 开发air完整源码+文档

    通过深入研究这些源码和文档，开发者能够学习到Java和Flex结合开发的实战经验，了解如何利用Spring3.0管理服务，以及如何使用Adobe AIR构建桌面应用程序。同时，Swizz框架的运用也能让开发者更高效地组织Flex代码。...

    Flex与Javascript相互调用例子(附源码)

    标题 "Flex与Javascript相互调用例子(附源码)" 指涉的是一个技术主题，主要探讨了如何在Adobe Flex应用程序中与JavaScript进行交互。Flex是基于ActionScript 3.0的开源框架，用于构建富互联网应用（RIA），而...

    FLEX_AIR教程

    【FLEX_AIR教程】是面向开发者的一系列深入学习教程，专注于Adobe的FLEX和AIR技术。FLEX是一种用于构建富互联网应用程序（RIA）的开放源代码框架，而Adobe AIR则是允许开发者创建跨平台的桌面应用程序，利用Web技术...

    flex/java通信包

    Flex和Java之间的通信是开发富互联网应用程序（RIA）时的一项关键技术。这个压缩包"flex/java通信包"包含了一些核心组件，使得Flex客户端可以与Java服务器进行无缝的数据交换。以下是关于Flex与Java通信以及压缩包中...

    flex资料箱（flex + adobe air)

    Adobe AIR（Adobe Integrated Runtime）则是一个跨平台的运行环境，允许开发者使用Web技术如HTML、CSS、JavaScript以及Flex来创建桌面应用。这个“flex资料箱（flex + adobe air)”包含了关于这两个技术的重要资源，...

    Flex与JS交互

    Flex与JavaScript交互是Web开发中的一个重要技术，它允许在Adobe Flash Player或Adobe AIR环境中运行的Flex应用程序与HTML页面中的JavaScript代码进行通信。这种交互性极大地扩展了富互联网应用（RIA）的功能，使得...

    基于Flex AIR制作的网页浏览器组件，支持多标签和文件下载.zip

    标题中的“基于Flex AIR制作的网页浏览器组件，支持多标签和文件下载”表明这是一个使用Adobe Integrated Runtime (AIR)和Flex技术开发的Web浏览器组件。Flex是ActionScript 3.0的开发框架，常用于构建富互联网应用...

    Flex4.5 与js，ocx相互调用

    压缩包中的 "Flex-js-activex-相互调用自己做的实例" 文件很可能是包含了一个实际应用示例，展示了如何实现 Flex 4.5 与 JavaScript 和 OCX 控件的交互。这个实例可能包括一个 Flex 项目，其中定义了与 JS 交互的...

    Flex与Servlet之间数据的交互

    Flex与Servlet之间的数据交互是JavaWeb开发中的一个重要环节，它涉及到客户端富互联网应用程序（RIA）与服务器端数据处理的协同工作。Flex作为一个基于Adobe Flash Player的前端开发框架，主要用于创建具有丰富用户...

    C#与flex交互

    标题中的"C#与Flex交互"指的是在开发过程中，使用C#作为后端处理逻辑，而Flex作为前端用户界面，两者之间进行数据和功能的通信。Flex是一种基于Adobe AIR和Flash Player运行时的开源框架，主要用于构建富互联网应用...

    flex与js交互 关于ExternalInterface使用的小例子

    ExternalInterface是Flex提供的一个API，允许ActionScript（Flex的主要编程语言）代码与JavaScript代码之间建立双向通信桥梁。 **ExternalInterface的基本用法** 1. **启用ExternalInterface**：在Flex中，首先...

    Android移动开发--基于Adobe AIR 源代码

    开发者可以通过研究这些例子，学习如何处理用户界面、数据存储、网络通信、多媒体播放以及设备特定功能的集成。 4. **ActionScript编程** ActionScript是Adobe AIR的主要编程语言，用于创建动态内容。开发者可以...

    flex帮助文档--（flex学习文档）

    编译后的Flex应用通常以SWF格式运行在浏览器的Flash Player插件上，也可以打包为桌面应用或移动应用（使用Adobe AIR）。 9. **Flex的版本迭代** 随着技术的发展，Flex经历了多个版本的更新，包括Flex 3、4、4.5等...

    flex

    2. **ActionScript**：Flex的应用逻辑主要通过ActionScript编写，这是一种面向对象的脚本语言，与JavaScript类似，但功能更强大。ActionScript用于处理程序逻辑、数据绑定和与服务器的通信。 3. **Flex SDK**：Flex...

    flex完全自学手册

    - 《Flex完全自学手册》这本书可能涵盖了Flex的基础知识、组件使用、数据绑定、网络通信、动画效果、AIR应用开发等内容，是学习Flex的全面指南。 - 光盘内容可能包含书中示例代码、额外的练习项目和可能的Flex SDK...

    flex 最佳实践教程

    然而，Flex也有一些不足，如FlexBuilder编译速度慢，数据输入体验不如数据展示，HTTPService和SOA的数据通信效率可能较低，以及生成的SWF文件体积较大。 ActionScript 3.0是Flex的主要编程语言，它是面向对象的，...

Magicbox
Global site tag (gtag.js) - Google Analytics