探索 Eclipse 的 Ajax Toolkit Framework

Ajax Toolkit Framework（ATF）是新的 Open Ajax Initiative 的核心部分，旨在通過 Eclipse Foundation 提高對功能強大的 Web 編程技術的可訪問性。通過為各種開源 Ajax 工具包（包括 Dojo、Zimbra 和 Rico）添加 Asynchronous JavaScript and XML（Ajax）開發環境，ATF 擴充了 Eclipse Web Tools Platform (WTP)。本文包括一個 HelloWorld 樣本，您將在其中安裝和配置 ATF，然後使用 Eclipse 和 Dojo 來建立基本的 Web 應用程式。

本文是我在 2006 年 5 月介紹 Open Ajax Initiative 的標題為 “將 Ajax 帶入 Eclipse 的 Ajax Toolkit Framework 的兩個工具” 的文章和近期的 ATF（請參閱 參考資料）的後續延展。從那時到現在，項目已從當初的宣布發行到 alphaWorks 版本再到現在的 Eclipse 項目發布的V0.1 版本。

ATF 位於 Eclipse WTP 的頂部，WTP 在 Web 開發社區中使用得十分廣泛。WTP 通過添加用於開發 Java 2 Platform，Enterprise Edition (J2EE) Web 應用程式的工具擴充了 Eclipse。

ATF 通過為各種開發源碼的 Ajax 工具包（包括 Dojo、Zimbra 和 Rico）添加 Ajax 開發環境擴充了 WTP。它增強了 JavaScript 編輯功能，提供了 edit-time 語法檢查、文件物件模型（Document Object Model，DOM）和層疊樣式表（Cascading Style Sheet，CSS）Inspector 和整合 Mozilla 瀏覽器。ATF 允許開發人員使用 Eclipse 作為開源工具包所需的企業級整合式開發環境（IDE）。ATF 背後的 Open Ajax Initiative 的目標是提高對 Ajax 的可訪問性，Ajax 正在迅速流行開來，但是對於新的開發人員來說概念還是很晦澀難懂。

本文使用 Eclipse、ATF 和 Dojo 將 ATF 的安裝步驟和建立樣本 Ajax 應用程式緊密聯絡在一起。“將 Ajax 帶入 Eclipse 的 Ajax Toolkit Framework 的兩個工具” 介紹了 Dojo 和 Zimbra，並且先提供了 “Hello World!” 樣本，然後提供了用 ATF 將 Dojo 整合到 Eclipse 中的方法。本文利用了 V0.1 版來建立類似的項目，並且更加簡單。

安裝 ATF

啟動之前，請先閱讀在 Microsoft Windows 下安裝的快速說明（有關詳細資料和下載，請參閱 參考資料）。如果尚未使用 Eclipse，請下載 J2EE 項目包，其中包括 Core Eclipse V3.2.1 和 Eclipse WTP（使用 ATF 時要求使用 WTP）。如果尚未安裝和使用 Eclipse，這是滿足 ATF 基本要求的最簡單方法。

要開始使用 ATF，請執行以下操作：

1. 從 Eclipse.org 下載 ATF 的最新版本。本文是基於 V0.1 版 (0.1-20060912)。在下載並安裝以下所有必需的組件之前，請先不要安裝。
2. 下載 Java Runtime Environment (JRE) V1.4.2，它在當前的 V0.1 版中是必需的。Sun Microsystems 或 IBM 版本都可以使用。
3. 下載 Apache Tomcat V5 用作本地 Web 服務器和 XULRunner，用於協助 Eclipse 建立與 Mozilla 的介面（請參閱 參考資料）。
4. 安裝 XULRunner、JRE，然後安裝 Tomcat V5。

   註：Tomcat V5 更傾向於使用 JRE V5，因此還可能需要下載它，以避免特殊的 Tomcat 安裝指導。

5. 安裝 Eclipse（如果系統中沒有安裝的話）。

安裝了 Eclipse 之後，您就可以準備安裝 ATF 了。有關詳細的安裝細節，請參閱 參考資料。

要將 ATF 安裝到 Eclipse 中，請開啟 Eclipse，然後單擊 Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site。然後選擇包含 ATF 的壓縮檔。通過安裝螢幕的提示指導您完成安裝，其間應當確保選擇所有 ATF 組件。確保仔細閱讀 ATF Download 資訊。一些 ATF 版本（包括 V0.1）包含特殊安裝說明，末尾介紹了如何安裝附加檔案。

在 ATF 中構建 Dojo 應用程式

現在您已經準備好構建第一個 Dojo 應用程式。開始先建立一個新項目。參考資料 包含一個指向 flash 動畫的連結，該動畫將示範此過程的初始步驟，但是您將越過此進程建立一個互動的 HelloWorld 應用程式。新項目開啟後，請完成以下步驟：

1. 開啟 Eclipse，然後單擊 File > New > Project。
2. 單擊 Web > Static Web Project，然後單擊 Next。

   圖 1. 選擇項目類型
   

3. 在 Project name 欄位中鍵入 HelloWorld，然後單擊 Target Runtime 下方的 New。此名稱將是整個項目的封閉名稱，可以在其中包括與所選名稱同名的子檔案夾和 Web 應用程式。

   圖 2. 為項目命名
   

4. 單擊 HTTP > HTTP Server，然後單擊 Next。在此步驟中，您將告訴 Eclipse 需要使用本地 HTTP 伺服器作為運行時目標。這就是安裝步驟過程中必須安裝 Tomcat V5（或其他支援 HTTP 的伺服器）的原因，允許您在本地分析 Eclipse 內應用程式行為。

   圖 3. 設定指向本地 HTTP 伺服器的連結
   

5. 為本地 HTTP 伺服器鍵入正確的連接埠（可能 80 或 8080），然後鍵入希望用於應用程式的目錄的名稱。
6. 選擇 Publish Projects to this Server，然後單擊 Browse 以選擇本地 Web 目錄。該樣本在我的系統中的路徑是 C:/Program Files/Apache Software Foundation/Tomcat 5.5/webapps/ROOT/helloworld。您可能需要建立 helloworld 目錄，但父目錄可能已經存在了。

單擊 Finish。
圖 4. 設定本地 HTTP 目錄

單擊 Next，然後單擊 ATF > Dojo。

取消選中 Rico 複選框，然後單擊 Finish。此步驟將按照使用 Dojo Toolkit 開發 Ajax 應用程式的所有必要要求來設定項目。

圖 5. 啟用 Dojo Toolkit

上述步驟將在 Eclipse 中建立 Dojo 項目骨架。現在必須開始著手建立一個應用程式。

建立應用程式

在 Navigator 中，展開 HelloWorld。接下來，按右鍵 WebContent ，然後單擊 New > Other。

圖 6. 建立新的 Web 內容

現在，展開 Dojo 並單擊 Dojo Application > Next。以上步驟將設定應用程式的架構，但是此步驟實際上將建立一個檔案，用於項目內的單個 Dojo 應用程式的編輯和構建過程。您可以在單個項目中建立多個應用程式。

圖 7. 建立 Dojo 應用程式

在 Name 欄位中鍵入 helloworldapp，然後單擊 Finish。每個應用程式名稱與項目名稱至少應當略有不同，以區分此組檔案所代表的內容。

圖 8. 為 Dojo 應用程式命名

此步驟將在 Eclipse 的中央架構中裝入 helloworldapp.html。在此架構中，編輯 helloworldapp.html 將其從只有骨架的應用程式更改為可啟動並執行 HelloWorld 應用程式。

圖 9. 檢驗編輯窗格

產生啟動並執行 HelloWorld 應用程式

首先將標題更改為 Hello World。這是一個常規的 HTML 檔案，它支援您所熟悉的文法和 HTML，而且還包括使用 Dojo 和 Dojo 控制項的 JavaScript 代碼。您可以像處理任何其他 Web 頁面一樣處理基本的 HTML 元素。

圖 10. 改變 HTML 以包括相應的項目名稱

現在，為 HelloWorld 應用程式添加代碼。這些程式碼片段在先前的 HelloWorld 樣本中也有使用，但在本例中，應用程式的架構是用 Eclipse 設定的。將此指令碼插入 helloworldapp.html 代碼的 head 部分的末尾。使用此程式碼片段建立一個按鈕，使用者可以按下該按鈕將 “Hello World!” 寫入調試視窗。

圖 11. 向代碼中添加 Button 控制項

最後，在 body 部分的頂部，添加代碼使按鈕實際顯示在使用者的螢幕上。由於您已經裝入了 Dojo Button 控制項，因此現在可以在 HTML 的主體中引用它。注意，這比只列印出 hello world 句子而沒有使用者互動的典型 HelloWorld 應用程式稍進階一些，但訊息被輸出到了調試視窗。

圖 12. 向內容地區中添加實際按鈕

儲存、編譯並運行應用程式

現在需要儲存、編譯和運行您建立的 HelloWorld 應用程式：

1. 單擊 File > Save。
2. 在 Eclipse 的 Navigator 架構中展開 HelloWorld、WebContent 和 helloworldapp。
3. 按右鍵 helloworldapp.html，然後單擊 Run As > Run in Mozilla。
4. 單擊 Finish 將開啟運行 HelloWorld 應用程式的整合 Mozilla 瀏覽器。

   圖 13. 檢驗 Dojo 應用程式的輸出
   

5. 單擊 Press Me，然後您將看到 “Hello World!” 顯示在偵錯主控台中。如果正常顯示並且沒有其他訊息，則可以確信 ATF 安裝和項目代碼運行正常。

6. 圖 14. 嘗試使用按鈕
   

7. 擴充應用程式的功能
8. 現在，您已經有了一個基本的運行應用程式，接下來利用 ATF 附帶的程式碼片段來擴充功能。如果 Eclipse 視圖中還沒有 Snippets 窗格，請單擊 Window > Show View > Other。展開 General，單擊 Snippets，然後單擊 OK。Snippets 窗格應當會出現在 Eclipse 視窗的右側。

9. 圖 15. 預製的程式碼片段
   

10. 展開 Snippets 窗格中的 Dojo，然後將 dojo.require 拖入 helloworldapp.html 編輯窗格的 JavaScript 塊中。系統將顯示一個對話方塊要求輸入軟體包名稱。對於本例，請鍵入 dojo.widget.Tree。這樣做將添加一行代碼用於裝入 Tree 控制項，它將允許您在代碼的內容地區使用控制項。
    圖 16. 裝入 Tree 控制項
    

    向下滾動至 helloworldapp.html 的主體部分，並將 Tree 從 Snippet 窗格拖到編輯窗格中。Eclipse 將詢問是否包括樣本資料。取消此複選框，從而僅添加封裝 Tree 代碼。然後，將 Tree Node 片段從 Snippet 窗格拖入編輯窗格的 Tree 標記內，然後將節點命名為 Hello。隨後，在 Hello 節點內再添加三個 Tree 節點。

    圖 17. 用 HelloWorld 資料建立 Tree 節點
    

    需要再次儲存、編譯和運行已建立的 HelloWorld 應用程式。單擊 File > Save。然後在 Eclipse 的 Navigator 架構中展開 HelloWorld、WebContent 和 helloworldapp。在 helloworldapp.html 上單擊滑鼠右鍵，然後單擊 Run As > Run in Mozilla。單擊 Finish 將開啟運行 HelloWorld 應用程式的整合 Mozilla 瀏覽器。您應當可以單擊展開和收縮 Hello 節點，這樣可以顯示或隱藏其子節點。

    結束語

    現在，您已經基本瞭解了如何在 Eclipse 中使用 ATF 建立 Dojo 項目的組件。要成為更進階的使用者，請瞭解如何在 Eclipse 中使用所選 Ajax 工具包的全部內容。而且，需要研究 Eclipse ATF 中使用的進階功能，例如 DOM Inspector、CSS Inspector 和 JavaScript 偵錯工具。使用 Dojo 建立一個簡單的 HelloWorld 應用程式極大地簡化了使用 Eclipse 的過程，構建完整的 Web 應用程式的優勢會在項目變得越來越複雜時不斷累積。接下來的文章將提供新版本及功能的更新，並進一步討論關於 ATF 及其他支援工具包（例如 Zimbra 和 Rico）更多組件的詳細資料。

    參考資料

    學習

    • 您可以參閱本文在 developerWorks 全球網站上的 英文原文 。

    • 訪問 IBM developerWorks 的 Eclipse 項目資源中心，瞭解關於 Eclipse 的更多資訊。
    • Ajax 技術資源中心：在這裡您可以找到更多關於 Ajax 的知識，包括 Ajax 基礎入門、使用 Java, PHP 等語言開發 Ajax 應用的各種技巧和多種 Ajax 架構的技術資訊。
    • 閱讀 “將 Ajax 帶入 Eclipse 的 Open Ajax Toolkit 的兩個工具” 關於 ATF 的介紹。
    • 閱讀 “使用 Ajax Toolkit Framework 開發 Dojo 應用” 介紹如何利用 Ajax Toolkit Framework 工具來使用 Dojo Toolkit 開源工具包，從而簡化和增強 Ajax 應用的開發。
    • “Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community”：2006 年 2 月的這篇 IBM 新聞稿提供了關於 Open Ajax Initiative 的詳細資料。
    • 訪問 Eclipse.org 以獲得關於 Eclipse IDE 的詳細資料。
    • 觀看 Flash 動畫 Dojo Project Cycle Demo，它是關於如何在 Ajax 中建立 Dojo 項目的。您可以將此資訊用在本文的某些步驟中。
    • 查看 Dojo Toolkit 文檔 獲得關於 Dojo 的更多資訊。
    • 查看 JotSpot wiki 中 HelloWorld 的詳細樣本。
    • 要獲得 Eclipse 平台的優秀介紹，請參閱 “Eclipse 平台入門”。
    • 隨時關注 developerWorks 技術講座和網路廣播。
    • 查閱最近將在全球舉辦的面向 IBM 開放源碼開發人員的會議、展覽、網路廣播和其他 活動。
    • 訪問 developerWorks Open source 專區 以獲得大量的 how-to 資訊、工具和項目更新資訊，可以協助您利用開放源碼技術進行開發，並與 IBM 的產品結合使用。
    • 要收聽針對軟體開發人員的有趣訪談和討論，一定要訪問 developerWorks podcasts。

    獲得產品和技術

    • 查看 ATF 項目。

    • 查看 Eclipse WTP 項目。
    • 下載 Eclipse Callisto 包 獲得安裝 ATF 所需的基本組件。
    • 從 Eclipse 下載最新版本的 ATF。
    • 下載 JRE，這是使用 ATF 所必需的組件。
    • 下載 Apache Tomcat V5，它是將整合到 ATF 中的相容 Web 服務器。
    • 請參閱 IBM alphaWorks 中最新的 Eclipse 技術下載。
    • 使用 IBM 試用軟體 改進您的下一個開放源碼開發項目，這些軟體可以通過下載或從 DVD 中獲得。

    討論

    • Eclipse 新聞群組 有很多參考資料適用於對使用和擴充 Eclipse 感興趣的人士。

    • 通過參與 developerWorks blogs 加入 developerWorks 社區。

    關於作者

    		Tim McIntire 是 Cluster Corp. 的顧問和創始人之一，該公司是 HPCC 軟體、支援和諮詢的市場領跑者。他還定期向 IBM developerWorks 和 Apple Developer Connection 投稿。Tim 領導 Oceanography 的 Digital Image Analysis Lab 的 Scripps Institution 進行了電腦科學方面的研究工作，在各種期刊上發表了相關研究成果，包括 Concurrency and Computation 和 IEEE Transactions on Geoscience and Remote Sensing。您可以訪問 TimMcIntire.net 以瞭解更多關於 Tim 的資訊。