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" οnchange="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应用程序。