FABridge 配置 (js与as通信)

在开始使用 FABridge 之前，下面提供了可以使用的资料和开发环境。下载最新的 Flex SDK 后，请配置清单 2 中所示的目录结构：
清单 2. FABridge 教程的目录结构

/
+--- bridge
|      +--- fabridge.js
|      +--- fabridge.as
|
+--- index.html

该目录结构非常简单：有一个索引页面和连接到 bridge 目录的 FABridge 脚本。FABridge 库文件的位置取决于您的环境。由于我使用的是 Mac OS X 中的 Flex Builder 3 Professional，因此我的库文件位于 install_root/sdks/frameworks/3.0.0/javascript/fabridge/ 中。

现在您已经准备好了合适的架构，您可以开始在 HTML/JavaScript 和 ActionScript 端创建骨架。使用清单 3 中的代码开发 HTML/JavaScript 骨架：
清单 3. HTML/JavaScript 骨架

<html>
<head>
<title>FABridge Tutorial</title>

<script type="text/javascript" src="bridge/FABridge.js"></script>
<script type="text/javascript">
   // ...
</script>

</head>
<body>
</body>
</html>

正如您所见，只需将 FABridge JavaScript 库与代码链接在一起，就立即可以使用桥接的所有功能。接下来，使用清单 4 中的代码在 ActionScript 端实现桥接：
清单 4. 应用程序骨架

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       xmlns:bridge="bridge.*"
       layout="absolute"
       width="300"
       height="142">

   <bridge:FABridge bridgeName="flex" />
   <mx:TextInput x="70" y="54" id="txt_test" text="FABridge rocks!"/>

</mx:Application>

您可能对这段代码更为陌生。通过定义带有 ID txt_test 和 FABridge rock 的默认值的单个文本输入控件，可以保持 UI 干净简单！定义了 bridge 名称空间，并且导入了 bridge 目录中的所有类。最后，给 Flex 应用程序命名以供桥接访问该应用程序时使用：flex。要将这段 Flex 代码编译到 SWF 工作文档中，请使用 Flex 3 SDK 中的 mxmlc 实用程序。清单 5 中显示了最基本的编译命令：
清单 5. 编译 MXML

                path_to_flex_bin_folder/mxmlc path_to_mxml file

清单 5 中的命令将编译源文件，并且在同一个目录中使用与 MXML 相同的名称输出 SWF 文件。假定编译成功，您现在可以将得到的 SWF 链接到 HTML 文件中，如清单 6 所示：
清单 6. 链接得到的 SWF 文件

<embed src=”main.swf” />

注：清单 6 中的代码主要用来演示 FABridge。除非您的目标是特定环境（清单 6 的目标环境是 Mozilla），否则需要在对象标记和其他加载脚本方面添加更多技巧。

假定一切运行正常，您的应用程序现在应当类似图 1：
图 1. 样例应用程序

现在您已经成功地编译并把 Flex 应用程序链接到 HTML 容器中，调用第一个 FABridge 函数以获得 Flex 应用程序的引用。使用清单 7 中的代码填充 HTML 骨架文件中的空 <script> 标记：
清单 7. 获得 Flex 应用程序的引用

// global variable, holds reference to the Flex application
var flexApp;  

var initCallback = function() {
   flexApp = FABridge.flex.root();
   return;
}
// register the callback to load reference to the Flex app
FABridge.addInitializationCallback( "flex", initCallback );

清单 7 中的代码将首先定义一个全局 JavaScript 变量，当 FABridge 获得 Flex 应用程序的引用后，该变量将保存它。将定义一个回调函数，该函数将设置全局变量并且通过 addInitializationCallback() FABridge 方法调用。使用这段代码只需要匹配在 Flex 应用程序中配置的桥接的名称。从这里开始，您可以从 JavaScript 代码访问各种 ActionScript 功能。

使用 ActionScript 对象

现在您已经获得了 Flex 应用程序的全局引用，您可以通过 FABridge 提供的一致接口访问 ActionScript 对象。在 ActionScript 世界中，您通常将通过点标记（dot notation）object.id 访问对象。但是，FABridge 不会在点标记中公开 ActionScript 对象，而是通过函数调用使这些对象可用。开始会觉得有点不同，但是您只需要知道要遵循的模板。在 ActionScript 中通常识别为 object.id 的对象现在可以作为 object.getId() 来访问。这最适合通过示例演示：将清单 8 中的代码键入到 HTML 骨架中，尝试一下：
清单 8. 通过 ID 获得 ActionScript 对象

// get the text input control
var txt = flexApp.getTxt_test();

变量 txt 是用 Flex 应用程序中的 ID txt_test 表示文本输入控件的对象。您可以查看要按 ID 访问其他 ActionScript 对象所必须遵循的模板。该声明首先是 Flex 应用程序的全局引用，然后是始终以字符串 get 为开头、后接目标对象 ID 的方法调用。注意，此声明中的 ID 名称必须以大写字母为开头。

获得并设置 ActionScript 对象的属性与刚才的过程类似。承接处理文本输入控件的示例，使用清单 9 中的代码获得并设置 text 属性：
清单 9. 获得并设置 ActionScript 属性

alert( "old: " + txt.getText() );

txt.setText( "Reset!" );

alert( "new: " + txt.getText() );

清单 9 中的代码将首先警告 Flex 应用程序中的文本输入控件的初始值。通过遵循前述模板，您可以看到通过一个函数调用获得了 text 属性，前面附加 get 字符串，并且属性名应用驼峰匹配原则（camel cased）。set() 方法将使用相同的过程，但是将接受用于配置对象新值的参数。在执行了清单 9 中的代码后，您应当会看到类似于图 2 的屏幕：
图 2. 设置 ActionScript 对象属性

现在，让我们继续执行最简单的操作：调用 ActionScript 对象方法。此过程不需要特别注意。JavaScript 代码中使用了 ActionScript 对象方法，就像在 ActionScript 代码中使用这些对象方法一样。清单 10 中的代码演示了如何在文本输入控件中调用方法：
清单 10. 调用 ActionScript 方法

txt.setVisible( false );

清单 10 中的代码将把 Flex 应用程序中的文本输入控件设为不可见。仍然可以引用和处理该对象，只是在物理上不可见而已。在 ActionScript 与 JavaScript 之间，调用方法的方式没有改变。

FABridge 的最强大功能之一是能够在 JavaScript 和 ActionScript 代码之间传递函数。查看清单 11 中的代码，这段代码将把 Flex 中的文本输入值动态复制到 HTML/JavaScript 端的 <div> 中：
清单 11. 传递函数

// define a function used as a callback to JavaScript
var txtCallback = function( event ) {
   // get the object which fired the event
   var swf_source = event.getTarget();  

   document.getElementById( "copy" ).innerHTML = swf_source.getText();

   return;
}
txt.addEventListener( "change", txtCallback );

清单 11 中的代码是 JavaScript 回调函数，每次 Flex 应用程序中的文本输入控件值发生更改时都将触发该函数。当值更改时，将把该值连同 ID 一起复制到 <div> 标记中。此类功能非常强大，尤其是尝试在 Ajax 与 Flex 内容之间进行任何类型的集成时。由于两个环境都严重依赖事件，因此结合两者的能力很重要。

本文探究的最后一项功能是异常处理。默认情况下，在 JavaScript 代码中使用 try . . . catch 代码块，您至少能够访问错误代码，然后可以在 ActionScript 错误的联机参考中查找。这种方法肯定奏效，但是在开发期间，您会希望提前查看尽可能多的信息。在使用 FABridge 时，只需安装带有调试功能的 Flash Player 9，您就可以获得这些信息。安装了这项功能后，您可以访问行号、文件名、错误类型和堆栈跟踪。使用清单 12 中的代码查看一个示例：
清单 12. 异常处理

try {
   alert( flexApp.throwsAnError() );
}
catch( e ) {
   var msg = "";
   for( var i in e ) {
      msg += i + " = " + e[i];
   }
   alert( msg );
}

清单 12 中的代码抛出了一个错误，因为 throwsAnError() 方法不存在。catch 块中的代码将输出类似于图 3 的警告：
图 3. 异常数据

正如您所见，这些数据远比单个错误代码有用，并且所需的错误诊断工作也更加少。当您要处理诸如 JavaScript 和 ActionScript 之类的不同技术之间的复杂集成问题时，您会很庆幸自己得到了额外的帮助。

一个js改变swf文本框值的事例

   function testFAB(){
   var flexApp;
   var initCallback = function() {
   flexApp = FABridge.b_jstoAS2.root();
   flexApp.getTxt_test().setText( “改变了文本框哈” ); //getTxt_test() 是swf文本框，注意get后面是文本框的ID(必须首字母大写)。
   }
   FABridge.addInitializationCallback(”flex”,initCallback);
   }

flexApp.XiaoshouAlert(Date()+username); //调用swf里面函数与swf中的函数名一致即可。

为什么把FABridge.b_jstoAS2.root();复制给全局变量，全局就访问不了呢。郁闷，还得继续研究

FABridge 配置 (js与as通信)

你可能感兴趣的:(JavaScript,Ajax,Flex,bridge)