Flex3.0新特性2----Flex-Ajax Bridge

23.5  使用Flex-Ajax Bridge技术控制Flex应用程序
上一小节中介绍在Flex中如何调用Ajax技术。反之，也可使用Ajax技术控制Flex应用程序。JavaScript程序通过Flex-Ajax Bridge技术可控制Flex应用程序组件及外观。本小节将为读者介绍Flex-Ajax Bridge技术的基础知识和使用方法。

23.5.1  Flex-Ajax Bridge技术简介
Flex-Ajax Bridge技术是Adobe公司提供的一种服务技术。此技术为Ajax技术和Flex技术建立起特殊的联系。通过Flex-Ajax Bridge技术可达到控制Flex应用程序的效果。例如，单击网页中的按钮，Flex应用程序中新增一个按钮组件。

Flex-Ajax Bridge技术包括一个“FABridge.as”文件和“FABridge.js”文件。“FABridge.as”文件中定义了Flex客户端的各种属性和方法。“FABridge.js”文件定义了JavaScript客户端的各种属性和方法。有关“FABridge.as”文件和“FABridge.js”文件的相关内容将在后续章节中介绍。

Flex-Ajax Bridge技术的源文件包含在Flex Builder 3.0或LiveCycle Data Service 2.5的安装路径下。具体位置为“Flex Builder 3.0安装路径\sdks\moxie\frameworks\javascript\fabridge”或“LiveCycle Data Service 2.5安装路径\resources\FABridge”。

Flex-Ajax Bridge技术使得Flex技术与Ajax技术的交互更加简单快捷。Flex-Ajax Bridge技术最大的特点是可控制Flex应用程序的组件外观，调用Flex应用程序中的方法和函数。

23.5.2  Flex-Ajax Bridge技术的运行原理
Flex-Ajax Bridge技术只包含两个源文件：“FABridge.as”文件和“FABridge.js”文件。通过定义两个不同客户端（Flex客户端和JavaScript客户端）的对应属性和方法，实现不同客户端间的相互调用。

“FABridge.as”类继承EventDispatcher类，同时实现IMXMLObject接口。其主要功能是存储各种Flex组件的属性和方法，为各种方法添加对应的调用名称。“FABridge.as”类中最重要的实现方法为initializeCallbacks方法。

以下是initializeCallbacks方法的定义代码。

public function initializeCallbacks():void

{

    if (ExternalInterface.available == false)

    {

        return;

    }

    //为js_getRoot方法添加调用名称

    ExternalInterface.addCallback("getRoot", js_getRoot);

    //为js_getPropFromAS方法添加调用名称

    ExternalInterface.addCallback("getPropFromAS", js_getPropFromAS);

    //为js_setPropertyInAS方法添加调用名称

    ExternalInterface.addCallback("setPropInAS", js_setPropertyInAS);

    //为js_invokeMethod方法添加调用名称

    ExternalInterface.addCallback("invokeASMethod", js_invokeMethod);

    //为js_invokeFunction方法添加调用名称

    ExternalInterface.addCallback("invokeASFunction", js_invokeFunction);

    //为js_releaseASObjects方法添加调用名称

    ExternalInterface.addCallback("releaseASObjects", js_releaseASObjects);

    //为js_create方法添加调用名称

    ExternalInterface.addCallback("create", js_create);

    //为js_releaseNamedASObject方法添加调用名称

     ExternalInterface.addCallback("releaseNamedASObject",js_releaseNamedASObject);

    //为incRef方法添加调用名称

    ExternalInterface.addCallback("incRef", incRef);

    //为releaseRef方法添加调用名称

    ExternalInterface.addCallback("releaseRef", releaseRef);

}

（57）       ExternalInterface类的addCallback方法为指定函数添加调用名称。定义调用名称后就可在JavaScript中调用。例如，在JavaScript语言中使用“getRoot();”语句调用Flex程序中的js_getRoot方法。

（58）       addCallback方法只定义调用名称，而不定义参数。所以在调用函数时，参数个数和顺序必须与Flex程序的方法的定义相同。例如，在JavaScript语言中使用“setPropInAS(21,’text’,’aaaaaa’);”语句调用Flex程序中的js_setPropertyInAS方法。

“FABridge.js”文件定义了JavaScript客户端的各种属性和方法。其主要功能是存储JavaScript客户端的属性和数据，并提供连接Flex-Ajax Bridge的接口方法。

使用Flex-Ajax Bridge技术连接Ajax和Flex程序的步骤如下所示。

在MXML文件中添加FABridge组件。

在添加FABridge组件前，需要将FABridge源文件（“bridge”文件夹）复制至工程路径下。

在MXML文件中添加FABridge组件的语法如下所示。

<fab:FABridge xmlns:fab="bridge.*" />

编译MXML文件。

按下Ctrl+F11快捷键，编译运行MXML程序。

新建HTML网页。

在新网页中添加对Flex应用程序（SWF文件）的引用。

Flex Builder 3在编译MXML文件时会自动生成SWF文件并嵌套于同名的HTML网页中。用户可将其中嵌套SWF文件的代码复制至新网页，但要注意SWF文件的位置。

网页中嵌套SWF文件的语法如下所示。

<object id='SWF程序id'

    classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0'    height='高度值' width='宽度值'>

    <param name='src' value='SWF程序路径’/>

    <embed name='SWF程序id ' pluginspage='http://www.macromedia.com/go/ getflashplayer'

    src='SWF程序路径' height='高度值' width='宽度值'/>

</object>

SWF程序id可任意。src参数指明SWF程序的路径。

以下代码嵌套了“main.swf”应用程序。

<object id='faa'

    classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'    codebase='http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0'     height='400' width='400'>

    <param name='src' value='main.swf’/>

    <embed name='faa' pluginspage='http://www.macromedia.com/go/ getflashplayer'

    src='main.swf' height='400' width='400'/>

</object>

在object标签中添加flashvars变量。

flashvars变量用以存储Flex-Ajax Bridge实例的名称，是连接Flex应用程序的关键处。其语法如下所示。

<object …>

    …

    <param name='flashvars' value='bridgeName=Flex-Ajax Bridge实例的名称'/>

    <embed … flashvars='bridgeName= Flex-Ajax Bridge实例的名称'/>

</object>

Flex-Ajax Bridge实例的名称可任意。

以下代码嵌套了“main.swf”应用程序，并添加flashvars变量。

<object id='faa'

    classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'    codebase='http: //download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0'     height='400' width='400'>

    <param name='flashvars' value='bridgeName=example'/>

    <param name='src' value='main.swf’/>

    <embed name='faa' pluginspage='http://www.macromedia.com/go/ getflashplayer'

    src='main.swf' height='400' width='400' flashvars='bridgeName=example’/>

</object>

在网页中引用“FABridge.js”文件。

在<head>标签下使用<script>标签引用“FABridge.js”文件。

以下代码引用“FABridge.js”文件。

<head>

    <script src="bridge\FABridge.js" ></script>

</head>

在JavaScript中调用Flex应用程序。

在完成上述六步后，可在JavaScript中调用Flex应用程序。其语法如下所示。

FABridge.flashvars变量值.root();

（59）       flashvars变量存储了Flex-Ajax Bridge实例的名称。

（60）       root方法是“FABridge.js”文件中定义的方法，指向“FABridge.as”文件的js_getRoot方法。

以下代码在JavaScript中调用Flex应用程序。

FABridge.example.root();

23.5.3  使用getCompenentID方法获取组件
Flex-Ajax Bridge技术中使用getCompenentID方法获取组件。getCompenentID并不是确定的方法名，而表示“get”字符串连接组件id字符串。例如，Flex应用程序中定义了名为“myPanel”的组件，那么获取该组件的方法名为“getMyPanel”。需要注意的是，组件id字符串的第一个字母大写。

以下代码使用getCompenentID方法获取组件“myButton”。

//MXML文件

…

<mx:Button id="myButton" label="test"/>

//HTML文件

…

<head>

    <script src="bridge\FABridge.js"></script>

    <script>

        function tt()

        {

            var flexApp=FABridge.example.root();        //指向Flex应用程序

            var btn=flexApp.getMyButton();              //获取组件“myButton”

        }

    </script>

</head>

<body>

    <object id="fff"…>

        <param name="flashvars" value="bridgeName=example">

        <embed … flashvars="bridgeName=example"/>

    </object>

</body>

23.5.4  使用getPropertyName方法获取属性值
getPropertyName方法用以获取组件的属性值。与getCompenentID方法一样，getPropertyName方法也不是确定的方法名，而是“get”字符串连接组件属性字符串。

在使用getCompenentID方法获取组件后，可使用getPropertyName方法获取组件属性。

以下代码使用getPropertyName方法获取按钮组件“myButton”的label属性。

var flexApp=FABridge.example.root();                    //指向Flex应用程序

var btn=flexApp.getMyButton();                          //获取组件“myButton”

alert(btn.getLabel());                                  //获取label属性值

与getCompenentID方法一样，组件属性字符串的第一个字母大写。

23.5.5  使用setPropertyName方法设置属性值
setPropertyName方法用以设置组件的属性值。与getCompenentID方法一样，setPropertyName方法也不是确定的方法名，而是“set”字符串连接组件属性字符串。

在使用getCompenentID方法获取组件后，可使用setPropertyName方法设置组件属性。其语法如下所示。

组件实例.set属性名(属性值);

以下代码使用setPropertyName方法更改按钮组件“myButton”的label属性。

var flexApp=FABridge.example.root();                    //指向Flex应用程序

var btn=flexApp.getMyButton();                          //获取组件“myButton”

btn.setLabel("rrrrrrrrrrrrrrrrr");                      //设置组件的label属性

与getCompenentID方法一样，组件属性字符串的第一个字母大写。

23.5.6  为组件添加监听事件
Flex-Ajax Bridge技术也可为组件添加监听事件。其语法如下所示。

组件实例.addEventListenner("事件名",JavaScript中的处理函数名);

使用getCompenentID方法获取组件后，可直接调用组件的所有方法（包括addEventListenner方法）。

以下代码使用addEventListenner方法为按钮组件“myButton”添加单击事件的监听。

var flexApp=FABridge.example.root();                    //指向Flex应用程序

var btn=flexApp.getMyButton();                          //获取组件“myButton”

var callback=function()

{

    alert("success");

}

btn.addEventListenner("click",callback);//为按钮组件“myButton”添加单击事件的监听

本程序说明通过Flex-Ajax Bridge技术可在JavaScript中处理Flex组件的事件。这样，可减少Flex应用程序的规模。

23.5.7  调用Flex程序中的函数
由于“FABridge.example.root()”语句指向的是Flex应用程序本身，所以可直接调用Flex程序的函数。

以下代码中调用了Flex程序中的test函数。

//MXML文件

function test():void

{

    Alert.show("hello world");

}

//HTML文件

var flexApp=FABridge.example.root();

flexApp.test();

23.5.8  Flex-Ajax Bridge技术控制Flex程序实例
本实例的效果为：在网页中操作按钮或下拉框组件，Flex应用程序的视图变化。

Flex-Ajax Bridge技术控制Flex程序实例的步骤如下所示。

新建Flex工程“Flex-AjaxBridgeExample”。

在工程根目录中添加“bridge”文件夹。

“bridge”文件夹包含Flex-Ajax Bridge源文件。

在工程根目录中添加“image”文件夹。

“image”文件夹存放图片资源（本例中使用了图片组件）。

编写“main.mxml”文件。

“main.mxml”文件中定义了testAlert函数及可视化组件。

以下代码是“main.mxml”文件的MXML代码。

<?xml version="1.0" encoding="utf-8"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:bridge="bridge.*"fontSize="13">

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;           //引用 Alert类

            public function testAlert():void

            {

                Alert.show("Hello World!");     //提示"Hello World!"

            }

        ]]>

    </mx:Script>

    <fab:FABridge xmlns:fab="bridge.*"/>        <!--Flex-Ajax Bridge组件-->

    <mx:Panel id="myPanel" width="400" height="350" verticalGap="1" title= "Flex-Ajax Bridge实例">

        <mx:HBox  width="100%" horizontalAlign="center">

            <mx:VBox id="myVbox"/>

            <!--图片组件-->

            <mx:Image id="myImage" width="300" height="300" source="image/ dog.jpg"/>

        </mx:HBox>

    </mx:Panel>

</mx:Application>

“main.mxml”文件的外观效果如图23-10所示。

按下Ctrl+F11快捷键，编译运行程序。

在工程的“bin”文件夹下新建“FABridge Example.html”文件。

“FABridgeExample.html”文件中定义了一个“创建按钮”按钮和一个下拉框组件。单击“创建按钮”按钮，调用createFlexButton函数来为Flex应用程序新增一个按钮。更改下拉框组件数据时，调用selectChange函数修改Flex应用程序中的图片组件。

以下代码是“FABridgeExample.html”文件的定义代码。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=”gb2312" />

        <script src="bridge\FABridge.js" ></script>

        <script language='javascript'>

            function createFlexButton()//创建按钮处理函数

            {

                var flexApp=FABridge.example.root();    //通过FABridge指向Flex应用程序

                //创建按钮

                var btn=FABridge.example.create("mx.controls.Button");

                btn.setWidth(70);                   //设置按钮宽度

                btn.setHeight(25);                  //设置按钮高度

                btn.setLabel("test");               //设置按钮标签

                var callback=function()             //定义callback函数

                {

                    flexApp.testAlert();            //调用Flex应用程序的testAlert函数

                    alert("Hello");                 //调用JavaScript的提示函数

                }

                   btn.addEventListener("click",callback); //为按钮的单击事件添加处理函数

                flexApp.getMyVbox().addChild(btn);  //添加按钮到Flex应用程序

            }

            function selectChange()                 //下拉框数据变化处理函数

            {

                var flexApp=FABridge.example.root();//通过FABridge指向Flex应用程序

                //设置Flex应用程序图片组件的source属性

                flexApp.getMyImage().setSource(imgSelect.value);

            }

        </script>

        <title>Flex-Ajax Bridge 实例</title>

    </head>

    <body>

        <div >

            <label>选择图片:</label>

            <select name="imgSelect" onchange="selectChange()"> <!--下拉框-->

                <option value="image\dog.jpg">dog.jpg</option>

                <option value="image\fruit1.jpg">fruit1.jpg</option>

                <option value="image\fruit2.jpg">fruit2.jpg</option>

                <option value="image\flower.jpg">flower.jpg</option>

            </select>

            <br/><br />

            <input type="button" onClick="createFlexButton()" value="创建按钮" />

        </div>

        <div>

            <script>

                document.write("<object

                                id='flexApp'

                                classid='clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=8,5,0,0'

                                height='350' width='400'>");

                document.write("<param name='flashvars' value='bridgeName= example'/>");

                document.write("<param name='src' value='main.swf'/>");

                document.write("<embed

                                name='flexApp'

                                pluginspage='http://www.macromedia.com/go/ getflashplayer'

                                src='main.swf' height='350' width='400'

                                flashvars='bridgeName=example'/>");

                document.write("</object>");

            </script>

        </div>

    </body>

</html>

（61）       要使用Flex-Ajax Bridge技术，有两处代码必不可少。一处为引用“FABridge.js”文件，一处为<object>标签中添加flashvars变量。

（62）       单击Flex应用程序中新增的按钮时，将调用Flex程序的testAlert函数和JavaScript语言中的alert函数。

保存“FABridgeExample.html”文件后，使用浏览器打开此文件。

实例运行前效果和运行后效果如图23-11、图23-12所示。

           

图23-11  实例运行前效果                   图23-12  实例运行后效果

23.6  小结
本章以实例的形式介绍了一些Flex 3.0新特性的应用。由于本书篇幅有限，不能一一介绍新特性。但本章介绍的新特性均为实用的、有代表性的特性，包括加载PDF文件、使用本地SQL数据库、升级AIR应用程序、集成Ajax技术等。通过本章的学习，读者能了解并掌握Flex 3.0的一些新特性，从而开发出功能更加丰富的RIA应用程序。

评论

3 楼 走山涉水 2010-08-11  

资料不错，正好解决问题。

2 楼 寒星2009 2009-06-12  

flyeagle 写道

你好，为什么我的使用Ajax Bridge 在Editplus中可以完成相应的功能，但是在IE中就报错呢？难道使用IE7.还有问题或者不支持？

不好意思 我对这个不了解 flex我一点都不了解
文章只是我转来的 留着以后学

1 楼 flyeagle 2009-06-12  

你好，为什么我的使用Ajax Bridge 在Editplus中可以完成相应的功能，但是在IE中就报错呢？难道使用IE7.还有问题或者不支持？