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应用程序。
上一小节中介绍在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应用程序。