級別： 中級

Tim McIntire, 顧問, Freelance Writer

2007 年 1 月 22 日

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

啟動之前，請先閱讀在 MicrosoftR WindowsR 下安裝的快速說明（有關詳細信息和下載，請參閱 參考資料）。如果尚未使用 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 或 IBMR 版本都可以使用。
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 目錄，但父目錄可能已經存在了。
7. 單擊 Finish。

   圖 4. 設置本地 HTTP 目錄
   

8. 單擊 Next，然後單擊 ATF > Dojo。
9. 取消選中 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 應用程序的輸出
   

單擊 Press Me，然後您將看到 「Hello World!」 顯示在調試控制台中。如果正常顯示並且沒有其他消息，則可以確信 ATF 安裝和項目代碼運行正常。

圖 14. 嘗試使用按鈕

擴展應用程序的功能

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

圖 15. 預制的代碼片段

展開 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）更多組件的詳細信息。