FABridge 配置 (js與as通訊)

[使用flash builder 4 點擊工程-->右鍵-->建立Ajax Bridge 添加支持]javascript

在開始使用 FABridge 以前，下面提供了可使用的資料和開發環境。下載最新的 Flex SDK 後，請配置清單 2 中所示的目錄結構：
清單 2. FABridge 教程的目錄結構html

/
+--- 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/ 中。java

如今您已經準備好了合適的架構，您能夠開始在 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. 應用程序骨架app

<?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 文件post

<embed src=」main.swf」 />

注：清單 6 中的代碼主要用來演示 FABridge。除非您的目標是特定環境（清單 6 的目標環境是 Mozilla），不然須要在對象標記和其餘加載腳本方面添加更多技巧。flex

假定一切運行正常，您的應用程序如今應當相似圖 1：
圖 1. 樣例應用程序
ui

如今您已經成功地編譯並把 Flex 應用程序連接到 HTML 容器中，調用第一個 FABridge 函數以得到 Flex 應用程序的引用。使用清單 7 中的代碼填充 HTML 骨架文件中的空 <script> 標記：
清單 7. 得到 Flex 應用程序的引用spa

// 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();複製給全局變量，全局就訪問不了呢。鬱悶，還得繼續研究