使用Flex-Ajax Bridge实例

?

Flex-Ajax? Bridge技术是Adobe公司提供的一种服务技术。此技术为Ajax技术和Flex技术建立起特殊的联系。

?

Flex-Ajax? Bridge技术包括一个“FABridge.as”文件和“FABridge.js”文件。“FABridge.as”文件中定义了Flex客户端的各 种属性和方法。“FABridge.js”文件定义了JavaScript客户端的各种属性和方法。

?

Flex-Ajax Bridge技术使得Flex技术与Ajax技术的交互更加简单快捷。Flex-Ajax Bridge技术最大的特点是可控制Flex应用程序的组件外观，调用Flex应用程序中的方法和函数。

?

使用Flex-Ajax Bridge实例步骤如下：

1. 创建Flex工程

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
????? xmlns:s="library://ns.adobe.com/flex/spark"
????? xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
?<s:layout>
??<s:VerticalLayout />
?</s:layout>
?
?<fx:Script>
??<![CDATA[
???protected function button1_clickHandler(event:MouseEvent):void
???{
????// TODO Auto-generated method stub
????
???}
??]]>
?</fx:Script>
?
?<fx:Declarations>
??<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?</fx:Declarations>
?
?<s:TextInput verticalCenter="0" id="txtName"/>
?<s:Button label="Get value" verticalCenter="0" click="button1_clickHandler(event)" />
</s:Application>

?

2.在 Flex 包资源管理器中，右键单击项目并选择“创建 Ajax Bridge”，添加FABridge支持。这里会让你选择对当前工程中哪些类（属性，方法）进行FA桥接。这里我们只选中txtName前面的勾勾。点击确定按钮。

???

3.在src内自动生成一个bridge包，其内多了个FABridge.as；其次，在工程目录下，也自动创建了一个名为AjaxBridgeHelloFlexAjax的目录，其中lib下有一个对应的FABridge.js,两个文件HelloFlexAjax.js和HelloFlexAjax.html。

?

4.编辑自动创建的HTML文件HelloFlexAjax.html

1> 在head Tag内增加脚本：

<script type="text/javascript">
??? //修改文本框内的文本
?function jsSetText()
?{
?? var txtInput = HelloFlexAjax.getTxtName();
?? txtInput.setText("测试");
?}
?</script>

?

2> ?在body Tag内增加脚本：

<input type="button" value="设置文本框" onClick="jsSetText()"/>

?

5.编译后，打开HelloFlexAjax.html页面，点击“设置文本框”按钮，会发现文本框内容已经变成了“测试”。

?

6.修改HelloFlexAjax.mxml，增加按钮处理代码

protected function button1_clickHandler(event:MouseEvent):void
???{
????// TODO Auto-generated method stub
????txtName.text=String(ExternalInterface.call("getValueFromAjax"));
???}

?

7. HelloFlexAjax.html内增加Javascript代码getValueFromAjax函数

<script type="text/javascript">
??? //修改文本框内的文本
?function jsSetText()
?{
?? var txtInput = HelloFlexAjax.getTxtName();
?? txtInput.setText("测试");
?}
?function getValueFromAjax()
?{
??return "调用成功";
?}
?</script>

?

8.编译后，打开HelloFlexAjax.html，点击“Get value”按钮，会发现文本框内容变成了“调用成功”。

?

9.修改HelloFlexAjax.mxml，增加如下代码

<fx:Script>
??<![CDATA[
???import mx.controls.Alert;?
???public function btnClick():void?
???{?
????Alert.show("按钮被点击了","title");?
???}?

???]]>
?</fx:Script>

?<s:Button label="测试回调" id="btn"/>

?

10.修改HelloFlexAjax.js，增加HelloFlexAjax.getBtn 和 HelloFlexAjax.btnClick，如下代码

function HelloFlexAjaxReady() {

?// Initialize the "root" object. This represents the actual
?// "HelloFlexAjax.mxml" flex application.
?b_HelloFlexAjax_root = FABridge["b_HelloFlexAjax"].root();
?

?// Global variables in the "HelloFlexAjax.mxml" application (converted
?// to getters and setters)

?HelloFlexAjax.getTxtName = function () {
??return b_HelloFlexAjax_root.getTxtName();
?};
?
?HelloFlexAjax.getBtn = function () {
??return b_HelloFlexAjax_root.getBtn();
?};

?HelloFlexAjax.btnClick = function() {?
??b_HelloFlexAjax_root.btnClick();?
??? };
?

?// Global functions in the "HelloFlexAjax.mxml" application

}

?

11. 修改HelloFlexAjax.html

head Tag内增加

function jsSetCallback()
?{
??HelloFlexAjax.getBtn().setLabel("可以测试回调了");
??HelloFlexAjax.getBtn().addEventListener("click",HelloFlexAjax.btnClick);?
?
?}

?

body Tag内增加

<input type="button" value="设置回调" onClick="jsSetCallback()"/>

?

12.编译后打开HelloFlexAjax.html，点击“设置回调”按钮，会发现测试回调按钮文本变成了“可以测试回调了”，点击这个按钮，会弹出提示框"按钮被点击了"

?

9.最后源代码文件

HelloFlexAjax.mxml内容如下：

?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:bridge="bridge.*"
			   minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;  
			public function btnClick():void  
			{  
				Alert.show("按钮被点击了","title");  
			}  

			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				txtName.text=String(ExternalInterface.call("getValueFromAjax"));
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<bridge:FABridge/>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:TextInput verticalCenter="0" id="txtName"/>
	<s:Button label="Get value" verticalCenter="0" click="button1_clickHandler(event)" />
	<s:Button label="测试回调" id="btn"/>  
</s:Application>

?

?HelloFlexAjax.html内容如下：

<!-- This file is just a basic wrapper for your bridged,Ajax/Flex,application.

	 This file will NOT be overwritten once it has been generated,therefor it
	 is perfectly safe to customize it to fit your needs.
	 
	 If you need to have this file re-generated,please delete it. -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>Test page for the HelloFlexAjax class</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="lib/FABridge.js"></script>
	<script type="text/javascript" src="HelloFlexAjax.js"></script>
	
	<script type="text/javascript">
    //修改文本框内的文本
	function jsSetText()
	{
	  var txtInput = HelloFlexAjax.getTxtName();
	  txtInput.setText("测试");
	} 
	function getValueFromAjax()
	{
		return "调用成功";
	}
	function jsSetCallback()
	{
		HelloFlexAjax.getBtn().setLabel("可以测试回调了");
		HelloFlexAjax.getBtn().addEventListener("click",HelloFlexAjax.btnClick);  
	
	}
	</script>
	
</head>

<body>

<h1>Test page for the <code>HelloFlexAjax</code> class</h1>

<input type="button" value="设置文本框" onClick="jsSetText()"/> 

<input type="button" value="设置回调" onClick="jsSetCallback()"/> 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="HelloFlexAjaxTest" width="700" height="600"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
	<param name="movie" value="../../bin-debug/HelloFlexAjax.swf" />
	<param name="flashvars" value="bridgeName=b_HelloFlexAjax"/>
	<param name="quality" value="high" />
	<param name="allowScriptAccess" value="sameDomain" />
	<embed src="../../bin-debug/HelloFlexAjax.swf" quality="high"
		width="700" height="600" name="HelloFlexAjaxTest" 
		align="middle"
		play="true"
		loop="false"
		quality="high"
		allowScriptAccess="sameDomain"
		type="application/x-shockwave-flash"
		pluginspage="http://www.adobe.com/go/getflashplayer" 
		flashvars="bridgeName=b_HelloFlexAjax">
	</embed>
</object>

<h2>Test controls</h2>
<p>Description text goes here.</p>

</body>

</html>

?

HelloFlexAjax.js文件如下：

/**
 * WARNING! THIS IS A GENERATED FILE,AND WILL BE RE-GENERATED EACH TIME THE
 * AJAXBRIDGE IS RUN.
 *
 * You should keep your javascript code inside this file as light as possible,* and rather keep the body of your Ajax application in separate *.js files. 
 *
 * Do make a backup of your changes,before re-generating this file (AjaxBridge 
 * will display a warning message to you).
 *
 * Please refer to the built-in documentation inside the AjaxBridge application 
 * for help on using this file.
 */
 
 
/**
 * Application "HelloFlexAjax.mxml"
 */

/**
 * The "HelloFlexAjax" javascript namespace. All the functions/variables you
 * have selected under the "HelloFlexAjax.mxml" in the tree will be
 * available as static members of this namespace object.
 */
HelloFlexAjax = {};


/**
 * Listen for the instantiation of the Flex application over the bridge
 */
FABridge.addInitializationCallback("b_HelloFlexAjax",HelloFlexAjaxReady);


/**
 * Hook here all the code that must run as soon as the "HelloFlexAjax" class
 * finishes its instantiation over the bridge.
 *
 * For basic tasks,such as running a Flex method on the click of a javascript
 * button,chances are that both Ajax and Flex may well have loaded before the 
 * user actually clicks the button.
 *
 * However,using the "HelloFlexAjaxReady()" is the safest way,as it will 
 * let Ajax know that involved Flex classes are available for use.
 */
function HelloFlexAjaxReady() {

	// Initialize the "root" object. This represents the actual 
	// "HelloFlexAjax.mxml" flex application.
	b_HelloFlexAjax_root = FABridge["b_HelloFlexAjax"].root();
	

	// Global variables in the "HelloFlexAjax.mxml" application (converted 
	// to getters and setters)

	HelloFlexAjax.getTxtName = function () {
		return b_HelloFlexAjax_root.getTxtName();
	};
	
	HelloFlexAjax.getBtn = function () {
		return b_HelloFlexAjax_root.getBtn();
	};

	HelloFlexAjax.btnClick = function() {  
		b_HelloFlexAjax_root.btnClick();  
    }; 
	

	// Global functions in the "HelloFlexAjax.mxml" application

}