施用Flex-Ajax Bridge实例

使用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；其次，在工程目录下，也自动创建了一个名为AjaxBridge\HelloFlexAjax的目录，其中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

}