注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

Flex与Ajax交互方法  

2010-11-22 22:39:51|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
Flex与Ajax交互方法介绍。

Flex与Ajax都是开发AIR非常好的技术,它们各有优缺点。Flex更简单,效果更加酷!但是在功能开发等方面不及Ajax成熟。最理想的就是全部用Flex来开发实现,但这只是一种理想状态,很多时候我们还是要用到Ajax。我们经常需要将嵌入到 Ajax 应用程序中的基于 Flash 的资源集成在一起。FABridge(Adobe Flex Ajax Bridge)是由 Adobe 开发的代码库,用于Flex与Ajax之间的交互,意味着连接Flex与Ajax的桥梁。本文将介绍如何使用 FABridge 将 Flash 内容与现有 Ajax 内容集成在一起。
1、FABridge库文件
FABridge库包含两个文件:FABridge.as和FABridge.js。
一般情况,如果用户安装了Flex Builder,则在安装路径下的sdks3.1.0frameworksjavascriptfabridgesrcbridge路径下,如C:Program FilesAdobeFlex Builder 3sdks3.1.0frameworksjavascriptfabridgesrcbridge,如下图所示:

如果用户没有这两个文件,可以参考附录,将代码复制到文本中,然后保存为FABridge.as文件和FABridge.js文件。
2、新建一个Flex项目,项目名称为FlexAjax,如下图所示:

3、新建一个文件夹,其名称为bridge,并把文件FABridge.as复制到该文件夹中,如下图所示:

4、新建一个文本,其内容如下:
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
   // ...
</script>
</head>
<body>
</body>
</html>
把该文本文件名称及后缀改为index.html,并保存至项目的bin-debug文件夹内。同时将FABridge.js文件保存至bin-debugbridge文件夹内,如下图所示:

5、在FlexAjax.mxml文件的名称空间内引用前面复制的FABridge.as文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:bridge="bridge.*" layout="absolute">
    <bridge:FABridge bridgeName="flex" />
   <mx:TextInput id="txt_test" fontSize="12" x="10" y="10" text="Flex与Ajax交互例子!"/>
</mx:Application>
编译FlexAjax.mxml文件,它将在项目的bin-debug文件夹内生成一个FlexAjax.swf文件。同时可以通过修改index.html文件来添加swf到网页中去,如在<body>和</body>之间添加如下代码:
<embed src="FlexAjax.swf"/>
6、获得 Flex 应用程序的引用。在index.html文件中编辑,在<script type="text/javascript">后添加如下:
    // 定义Flex程序对象
    var flexApp;   
    var flexApp = FABridge.flex.root();//通过FABridge指向Flex应用程序
7、连接到Flex文件。前面虽说已经建立了Flex程序对象,但是没有获取到具体的事例(即Flash文件),所以还不能对Flash进行操作。连接flexApp到Flash主要通过下面代码实现:
    <script>
        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");
        document.write("</object>");
</script>
其中height和width分别为Flash的高度和宽度,id为前面JS中定义的Flash对象变量,value为连接到的Flash文件。
8、使用 ActionScript 对象
现在获得了 Flex 应用程序的全局引用,就可以使用 ActionScript 对象了。但是在JS中无法显示AS对象的方法与属性,于是AS提供了一种使用get关键字的方法,现在举一个例子说明:在Flex的mxml文件中,假如定义了一个TextInput文本输入控件,它的id为txt_test,在JS中要获得这个文本输入控件,只需要通过flexApp.getTxt_test即可获得该对象。若要获得该控件中输入的文字,在Flex中TextInput文本输入控件中输入的文字在它的text属性里面,所以在JS中只要通过getText即可获得文本输入控件中输入的文字,即flexApp.getTxt_test().getText()。值得注意的是:无论在MXML中对象的id、属性或方法的首写字母大写还是小写,在JS中使用关键字get和set后必须为大写。
如下例所示:
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
    // 定义Flex程序对象
    var flexApp; 

    function ClickButton()
    {
        var flexApp = FABridge.flex.root();
        var txt = flexApp.getTxt_test();
        alert( "输入的文字为: "+txt.getText());
    }
</script>
</head>
<body>
<input type="button" value="点击" onclick="ClickButton()" />
<div>
    <script>

document.write(object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'); document.write(param name=\'src\' value=\'FlexAjax.swf\'/); document.write(/
        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");
        document.write("</object>");
    </script>
</div>
</body>
</html>
保存代码,在浏览器中打开网页,其效果如下图所示:

9、设置对象。前面是通过get关键字来获取对象的属性、方法,还可以通过set关键字来设置对象的属性等,方式和前面一样。如下代码:
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
    // 定义Flex程序对象
    var flexApp; 

    function ClickButton()
    {
        var flexApp = FABridge.flex.root();
        var txt = flexApp.getTxt_test();
        txt.setText(myTXT.value);
        alert( "输入的文字为: "+txt.getText());
    }
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="输入" onclick="ClickButton()" />
<div>
    <script>
        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");
        //document.write("<embed name=\'flexApp\'src=\'FlexAjax.swf\' />");
        document.write("</object>");
    </script>
</div>
</body>
</html>
保存代码,在浏览器中打开网页,其效果如下图所示:

10、在JS中调用AS中事件。如下:
        var txtCallback = function( event ) { 
            var swf_source = event.getTarget(); 
            document.getElementById( "copy" ).innerHTML = swf_source.getText();  
            return; 
            } 
        txt.addEventListener( "change", txtCallback );
如果文本输入有变化那么在下面的Div中对应显示输入的文本,这也是Ajax技术中非常经典的一个用法。整个HTML文件如下:
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
    // 定义Flex程序对象
    var flexApp; 
    var txt;
    function Init()
    {
        var flexApp = FABridge.flex.root();
        txt = flexApp.getTxt_test();
        var txtCallback = function( event ) { 
            var swf_source = event.getTarget(); 
            document.getElementById( "copy" ).innerHTML = swf_source.getText();  
            return; 
            } 
        txt.addEventListener( "change", txtCallback );
    }
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="开始" onclick="Init()"/>
<div>
    <script>
        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>"); document.write(/object); /script /div div id=copy/div /body /html 点击按钮,开始监听文本的输入事件。 保存代码,在浏览器中打开网页,其效果如下图所示: 11、JS控制Flash添加组件。首先在MXML文件中将代码改
        document.write("</object>");
    </script>
</div>
<div id="copy"></div>
</body>
</html>
点击按钮,开始监听文本的输入事件。
保存代码,在浏览器中打开网页,其效果如下图所示:
11、JS控制Flash添加组件。首先在MXML文件中将代码改为如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:bridge="bridge.*" layout="absolute">
    <bridge:FABridge bridgeName="flex" />
    <mx:Panel id="myPanel" width="468" height="325" layout="vertical" title="Flex与Ajax交互" fontSize="14">
       <mx:TextInput id="txt_test" fontSize="12" text="Flex与Ajax交互例子!" x="10" y="10"/>
    </mx:Panel>  
   <mx:Script>
   <![CDATA[
        import mx.controls.Alert;
        public function FlexAlert():void
        {
           Alert.show("这是由Flex创建的函数!");
        }
   ]]>
   </mx:Script>
</mx:Application>
在此创建了一个Panel面板,定义了一个函数,编译程序。
将HTML文件中的代码改为如下:
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
    // 定义Flex程序对象
     var flexApp;
     var buttonNum=0;
     function createFlexButton(){
        //通过FABridge指向Flex应有程序
        var flexApp = FABridge.flex.root();
        alert(flexApp.getMyPanel().getTitle());
        buttonNum+=1;
        var btn = FABridge.flex.create("mx.controls.Button");
        btn.setWidth(70);
        btn.setHeight(25);
        btn.setLabel("按钮"+buttonNum);
        var callback = function(){
            var aa = flexApp.FlexAlert();//调用Flex应用程序的FlexAlert函数
            alert("这是JavaScript中的警告窗口!");
        }
        //为按钮的单击事件添加处理函数
        btn.addEventListener("click",callback);
        //添加按钮到Flex应用程序
        flexApp.getMyPanel().addChild(btn);
    }
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="开始" onclick="createFlexButton()"/>
<div>
    <script>
        document.write("<object id=\'flexApp\' classid=\'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\' height=\'350\' width=\'400\'>");
        document.write("<param name=\'src\' value=\'FlexAjax.swf\'/>");
        //document.write("<embed name=\'flexApp\'src=\'FlexAjax.swf\' />");
        document.write("</object>");
    </script>
</div>
<div id="copy"></div>
</body>
</html>
其中,“alert(flexApp.getMyPanel().getTitle());”是显示获取到的Panel面板的标题,即“Flex与Ajax交互”。“var btn = FABridge.flex.create("mx.controls.Button");”是创建按钮。“flexApp.getMyPanel().addChild(btn); ”是将新建的按钮添加到Panel面板中。

  评论这张
 
阅读(660)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017