使用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 实例运行后效果
1563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
