整合Flex與Ajax應用程式

傳統的Ajax開發依舊是實現富 Internet 應用程式（RIA）的最主要方法。但 是，Adobe® Flex 的流行度不容忽視。本文將介紹 Adobe Flex Ajax Bridge (FABridge)，這是讓您可以採用輕鬆而一致的方法整合 Ajax 與 Flex 內容的程式碼程式庫。閱讀完本文後，您將能夠利用通過 Flash 資源獲得的豐富功能 。

構建 Ajax 應用程式已被證明是提供優秀應用程式的一致方法。但是， Adobe Flex 的流行不容忽視。在不斷努力實現最佳使用者體驗時，我們經常需要 面對一項困難的任務：將嵌入到 Ajax 應用程式中的基於 Flash 的資源整合在 一起。本文將討論如何使用 FABridge 將 Flash 內容與現有 Ajax 內容整合在 一起，FABridge 是由 Adobe開發的程式碼程式庫，用於處理這項特殊任務。

作 為一名 Ajax開發人員，現在是個特殊時刻。我們始終站在第一線，準備迎合用 戶並讓他們對我們構建的應用程式留下最佳的第一印象。隨著 Web 標準不斷演 進並且越來越多的供應商決定執行這些標準，我們的工作變得越來越輕鬆，使我 們可以將精力集中在使用者體驗上。JavaScript 架構（例如 Ext JS、jQuery和 Prototype）的進一步推進也使我們很少擔心代碼是否可以跨要求支援的平台工 作，因此有更多時間進行創新。

雖然現在我們可以使用的工具、技術和 資源的確越來越多，但是推動 Flash開發的開發方法也在發生變化。對於許多工 作室，開發流程將涉及使用者介面（UI）組，從而實現支援在伺服器端產生的應用 程式的設計。使用現在已有的JavaScript 架構，我們正朝著用戶端應用程式開 發的方向發展。但是，Flex 平台 — 產生 Flash 應用程式的免費開源框 架 — 的出現將我們進一步引入應用程式開發的競技場。這類創新帶給我 們的好處在於用戶端，但是必須確保充分、仔細地處理它與當前架構的整合。

在介紹展示如何使用 Ajax和Flex 資源的代碼範例之前，您必須瞭解必 備的工具和技巧：

我使用 Ext JS JavaScript 庫產生了本文中的Ajax 範例，因此需要 下載包含庫和支援文檔的.zip 檔案。

接下來，擷取擁 有調試功能的Adobe Flex 3 SDK和Adobe Flash Player 9 免費副本（如果您還 沒有的話）。

雖然本文不作要求，但是您至少還需要查看 Adobe Flex Builder 3 的試用版本，這是基於 Eclipse 的IDE，除了進階調試和分析功能之 外，您還可以快速地進行 Flex 應用程式開發（請參閱 參考資料）。

最 後，瞭解 PHP 的工作知識十分有協助。

整合問題

如果您期望用 Flex 資源替代所有 Ajax 內容，您的任務將更簡單一些。但是，這是一種不太 可能而且通常不切實際的方法，因為經常需要保留傳統的Ajax 功能。幸運的是 ，您完全可以利用兩種環境的優點來產生豐富、整合的應用程式。

將數 據從 Flash 容器（HTML/JavaScript 代碼）傳遞到 ActionScript 代碼中有許 多種簡單方法，包括使用查詢字串和 <param> 標記。但是，這種方法 僅限於將資料傳遞到容器中。一種功能更強大的技術是使用 ExternalInterface 類，這是一個API（API），它用於代理 ActionScript 與 JavaScript 語言之間的通訊。清單 1 中的樣本最佳示範了 ExternalInterface 的使用：

清單 1. ExternalInterface 樣本

// ActionScript code
function exposed():String
{
　 return "Hello, JavaScript!";
}
ExternalInterface.addCallback( "getActionScript", exposed );
// HTML/JavaScript code
<script language="JavaScript">
var result = flashObject.getActionScript();
</script>
<object id="flashObject" ...>
　 <embed name="flashObject" ... />
</object>

清單 1 示範了如何使用 ExternalInterface 類註冊 ActionScript 函數，以便 JavaScript 代碼可以調用該函數。您可以通 過先定義 ActionScript 函數，然後使用 addCallback() 方法將該函數公開給 要執行的JavaScript 來完成操作。在 HTML 端，只需獲得 Flash 容器的控制代碼並 調用該函數，該函數是使用 addCallback() 方法的第一個參數命名的。雖然此 示範主要是將函數公開給 JavaScript 代碼，但是您可以使用另一種方式：使用 ExternalInterface 類的call() 方法。

ExternalInterface 類可以十分 強大，但是實現該類有很大的缺點。要使用 ExternalInterface，必須可以編寫 代碼以實現 ActionScript和JavaScript 環境。這不但要求額外的技巧，而且需 要翻倍的工作量。在這種情況下，維護代碼以及兩個非常健壯的技能集可能會變 得很困難。

為瞭解決針對 Flash 外部 API 的開發限制，Adobe 發布了 FABridge。Flex SDK 附帶的FABridge 是用於公開 Flash 內容以編寫瀏覽器腳 本的小型庫，並且它可以在大多數主要瀏覽器平台中工作。使用 FABridge，現 在實質上不再需要直接實現 Flash 外部 API 所需的管道代碼。此外，實現橋接 所需的技能也不再健壯。作為一名 JavaScript開發人員，您只需能夠瞭解哪些 ActionScript 屬性和方法可用。讓我們從示範 FABridge 功能的一些樣本開始 。