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>
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>
如在<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>
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>