Flex与Ajax交互方法
flex 2010-11-22 22:39:51 阅读54 评论0 字号：大中小 订阅
Flex与Ajax都是开发AIR非常好的技术，它们各有优缺点。Flex更简单，效果更加酷！但是在功能开发等方面不及Ajax成熟。最理想的就是全部用Flex来开发实现，但这只是一种理想状态，很多时候我们还是要用到Ajax。我们经常需要将嵌入到 Ajax 应用程序中的基于 Flash 的资源集成在一起。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>
把该文本文件名称及后缀改为index.html，并保存至项目的bin-debug文件夹内。同时将FABridge.js文件保存至bin-debugbridge文件夹内，如下图所示：
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>
编译FlexAjax.mxml文件，它将在项目的bin-debug文件夹内生成一个FlexAjax.swf文件。同时可以通过修改index.html文件来添加swf到网页中去，如在<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>
其中height和width分别为Flash的高度和宽度，id为前面JS中定义的Flash对象变量，value为连接到的Flash文件。
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>
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(/
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>
</div>
</body>
</html>
保存代码，在浏览器中打开网页，其效果如下图所示：
9、设置对象。前面是通过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();
txt.setText(myTXT.value);
alert( "输入的文字为: "+txt.getText());
}
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="输入" onclick="ClickButton()" />
<div>
<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("<embed name=\'flexApp\'src=\'FlexAjax.swf\' />");
document.write("</object>");
</script>
</div>
</body>
</html>
保存代码，在浏览器中打开网页，其效果如下图所示：
10、在JS中调用AS中事件。如下：
var txtCallback = function( event ) {
var swf_source = event.getTarget();
document.getElementById( "copy" ).innerHTML = swf_source.getText();
return;
}
txt.addEventListener( "change", txtCallback );
如果文本输入有变化那么在下面的Div中对应显示输入的文本，这也是Ajax技术中非常经典的一个用法。整个HTML文件如下：
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
// 定义Flex程序对象
var flexApp;
var txt;
function Init()
{
var flexApp = FABridge.flex.root();
txt = flexApp.getTxt_test();
var txtCallback = function( event ) {
var swf_source = event.getTarget();
document.getElementById( "copy" ).innerHTML = swf_source.getText();
return;
}
txt.addEventListener( "change", txtCallback );
}
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="开始" onclick="Init()"/>
<div>
<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 /div div id=copy/div /body /html 点击按钮，开始监听文本的输入事件。 保存代码，在浏览器中打开网页，其效果如下图所示： 11、JS控制Flash添加组件。首先在MXML文件中将代码改
document.write("</object>");
</script>
</div>
<div id="copy"></div>
</body>
</html>
点击按钮，开始监听文本的输入事件。
保存代码，在浏览器中打开网页，其效果如下图所示：
11、JS控制Flash添加组件。首先在MXML文件中将代码改为如下：
<?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:Panel id="myPanel" width="468" height="325" layout="vertical" title="Flex与Ajax交互" fontSize="14">
<mx:TextInput id="txt_test" fontSize="12" text="Flex与Ajax交互例子！" x="10" y="10"/>
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function FlexAlert():void
{
Alert.show("这是由Flex创建的函数!");
}
]]>
</mx:Script>
</mx:Application>
在此创建了一个Panel面板，定义了一个函数，编译程序。
将HTML文件中的代码改为如下：
<html>
<head>
<title>Flex与Ajax交互</title>
<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
// 定义Flex程序对象
var flexApp;
var buttonNum=0;
function createFlexButton(){
//通过FABridge指向Flex应有程序
var flexApp = FABridge.flex.root();
alert(flexApp.getMyPanel().getTitle());
buttonNum+=1;
var btn = FABridge.flex.create("mx.controls.Button");
btn.setWidth(70);
btn.setHeight(25);
btn.setLabel("按钮"+buttonNum);
var callback = function(){
var aa = flexApp.FlexAlert();//调用Flex应用程序的FlexAlert函数
alert("这是JavaScript中的警告窗口！");
}
//为按钮的单击事件添加处理函数
btn.addEventListener("click",callback);
//添加按钮到Flex应用程序
flexApp.getMyPanel().addChild(btn);
}
</script>
</head>
<body>
<input id="myTXT" type="text" />
<input type="button" value="开始" onclick="createFlexButton()"/>
<div>
<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("<embed name=\'flexApp\'src=\'FlexAjax.swf\' />");
document.write("</object>");
</script>
</div>
<div id="copy"></div>
</body>
</html>
其中，“alert(flexApp.getMyPanel().getTitle());”是显示获取到的Panel面板的标题，即“Flex与Ajax交互”。“var btn = FABridge.flex.create("mx.controls.Button");”是创建按钮。“flexApp.getMyPanel().addChild(btn); ”是将新建的按钮添加到Panel面板中。
转发至微博