引言

AJAX Toolkit Framework（下面簡(jiǎn)稱ATF）為 Eclipse 提供 Ajax 支持，其綁定當(dāng)下最流行的 AJAX 框架（Dojo, Zimbra, Rico, etc），為 Eclipse 提供整合的模塊。Eclipse 用戶可以使用 AJAX Toolkit Framework 來(lái)編寫 AJAX 應(yīng)用程序。就像在 Eclipse 中開(kāi)發(fā)平常的Java 程序一樣，非常方便。

我們現(xiàn)在就以開(kāi)發(fā) Dojo 應(yīng)用為例，從快速開(kāi)發(fā) Dojo 應(yīng)用，以及使用 DOM Inspector and JavaScript Console 來(lái)幫助 Dojo 應(yīng)用的開(kāi)發(fā) 2 個(gè)方面，來(lái)看看 ATF 如何增強(qiáng) Ajax 應(yīng)用的開(kāi)發(fā)。

本文目標(biāo)讀者主要是對(duì) Ajax 技術(shù)感興趣，并能夠熟練安裝 Eclipse 插件，使用 Eclipse開(kāi)發(fā)和調(diào)試應(yīng)用程序，對(duì) Dojo Toolkit 有一定了解的 WEB 開(kāi)發(fā)者。

回頁(yè)首

開(kāi)發(fā)環(huán)境搭建

1） 安裝最新的Eclipse SDK 3.2 以及Java SDK 1.4 （或者更高版本）

2） 安裝Eclipse Web Tools Project （WTP） 1.5 （以及它的前置軟件安裝包） 推薦安裝 ：wtp-all-in-one-sdk-R-1.5.0-200606281455-win32.zip 軟件包，它集成了上面提到的兩項(xiàng)工具。

3） 安裝Tomcat5.0以上版本或者WTP所支持的服務(wù)器。

4） 下載并解壓縮XULRunner軟件包，隨后在命令行的方式下加入解壓縮后的目錄，輸入xulrunner --register-global 來(lái)注冊(cè)XULRunner，以便能夠讓Eclipse內(nèi)嵌Mozilla瀏覽器。

5） 下載AJAX Toolkit Framework，這是一個(gè).jar文件，可以通過(guò)Eclipse更新選項(xiàng)里面的新的歸檔站點(diǎn)來(lái)添加這個(gè)插件到Eclipse中。

6） 下載最新的Dojo 工具包，目前最新的版本是0.3.1。解壓縮并把其下的所有文件拷貝至Eclipse的plug-in文件夾下的org.dojo.runtime_<version>目錄內(nèi)。并確保Dojo解壓縮包下的src文件夾的所有文件都被拷貝至該目錄下。

7） 為了讓Eclipse能夠識(shí)別ATF插件的安裝，我們需要在啟動(dòng)Eclipse的時(shí)候，在其快捷方式上，右擊鼠標(biāo)，并在出現(xiàn)的窗口中的目標(biāo)一欄中修改相應(yīng)信息，比如修改成：e:\eclipse\eclispe.exe - clean.

至此，使用ATF開(kāi)發(fā)Dojo應(yīng)用的開(kāi)發(fā)環(huán)境就搭建好了，現(xiàn)在我們看一下使用ATF提供的功能：

回頁(yè)首

使用ATF開(kāi)發(fā)Dojo應(yīng)用快速入門

1．打開(kāi)Eclipse3.2,切換到J2EE視圖,新建一個(gè)工程，選擇Dojo J2EE Project

2．填入合適的工程名，如果你沒(méi)有配置Target Runtime，則需要新建一個(gè)：

3．在新建Server Runtime environment界面中選擇一個(gè)你已經(jīng)安裝好的應(yīng)用服務(wù)器。這里選擇Apache Tomcat v5.0作為示例Dojo應(yīng)用的服務(wù)器運(yùn)行環(huán)境：

4．完成服務(wù)器運(yùn)行時(shí)環(huán)境配置后，點(diǎn)擊完成按鈕，這樣一個(gè)開(kāi)發(fā)Dojo應(yīng)用的框架工程就搭建好了，我們便可以在這個(gè)基礎(chǔ)上開(kāi)發(fā)自己Dojo應(yīng)用：

5．在新建好的dojoDemo工程內(nèi)，右鍵點(diǎn)擊WebContent，在彈出的菜單中選擇新建Dojo Application v0.2.2，如果沒(méi)有該選項(xiàng)，則可以先選擇Other，再在出現(xiàn)的菜單中選擇。

6．點(diǎn)擊Next，進(jìn)入下一個(gè)頁(yè)面，輸入合適的工程名稱，比如dojoApp，其他保留默認(rèn)值，點(diǎn)擊完成，這樣一個(gè)簡(jiǎn)單的dojo應(yīng)用就由ATF自動(dòng)生成了：

我們看到在WebContent下生成了一個(gè)叫做dojoApp的目錄，其下面包含一個(gè)叫做dojoApp.html的文件，我們就可以直接在這個(gè)文件中輸入Dojo代碼。從而使用ATF簡(jiǎn)化了dojo應(yīng)用的開(kāi)發(fā)。

7．我們?cè)陂_(kāi)發(fā)Dojo應(yīng)用的時(shí)候，先在Eclipse下方選擇Snippets View，可以很方便的插入Dojo的代碼，同時(shí)你會(huì)看到ATF對(duì)其他流行的Ajax框架提供的支持，包括Zimbra和Rico等

8．在完成了相應(yīng)的Dojo代碼編寫后，我們?cè)陂_(kāi)發(fā)好的的dojoApp.html上右擊，在彈出的菜單中，選擇Run As -> Run in Mozilla, 隨后會(huì)彈出一個(gè)信息面板，讓你選擇需要使用的運(yùn)行時(shí)服務(wù)器，我們只要選擇剛才配置好的Tomcat服務(wù)器，點(diǎn)擊完成。

這樣我們就可以在內(nèi)嵌的Mozilla瀏覽器中發(fā)布和查看開(kāi)發(fā)好的dojo程序了，這里使用Dojo提供的Widget中的Tree類型，做的一個(gè)小的Dojo應(yīng)用程序的演示：

這里只是演示了一個(gè)很簡(jiǎn)單的開(kāi)發(fā)Dojo應(yīng)用的例子，主要目的是為了說(shuō)明，使用ATF對(duì)開(kāi)發(fā)Dojo這樣的Ajax應(yīng)用程序的方便。其利用了Eclipse提供的強(qiáng)大開(kāi)發(fā)功能為用戶在開(kāi)發(fā)Ajax項(xiàng)目的時(shí)候，不必每次手動(dòng)拷貝Dojo資源包，創(chuàng)建編寫繁瑣的輔助性代碼，更加專注于業(yè)務(wù)邏輯的開(kāi)發(fā)。

回頁(yè)首

使用ATF的DOM Inspector and JavaScript Console

我們先來(lái)看一下ATF的DOM Inspector提供的功能：

1．當(dāng)我們?cè)贛ozilla中運(yùn)行我們的dojo應(yīng)用的時(shí)候，我們可以在Eclipse的Workspace右側(cè)看到DOM Inspector，它可以把整個(gè)html頁(yè)面的DOM結(jié)構(gòu)，清晰完整的在里面顯示出來(lái)。當(dāng)你點(diǎn)擊任何一個(gè)標(biāo)簽的時(shí)候，其相應(yīng)的部分就在左側(cè)的頁(yè)面中以紅色邊框包圍，重復(fù)閃爍3次：

在DOM Inspector中，我們可以很方便的撲捉頁(yè)面的DOM樹(shù)結(jié)構(gòu)，并可以打開(kāi)某個(gè)節(jié)點(diǎn)，瀏覽其相應(yīng)的子節(jié)點(diǎn)，可以方便定位頁(yè)面元素。

2．當(dāng)我們?cè)贒OM Inspector中選擇一個(gè)節(jié)點(diǎn)的時(shí)候，它所包含的一些屬性就在下面的屬性-值得列表中顯示出來(lái)：

這些屬性分為3類：

1）盒子模型：里面主要是包含一些有關(guān)長(zhǎng)寬高的屬性。

2）DOM屬性 ：里面包含的屬性是可以做修改的，不同的標(biāo)簽節(jié)點(diǎn)，所對(duì)應(yīng)的屬性不一樣。

3）計(jì)算的樣式 ：主要是一些由CSS定義的值，可以在頁(yè)面使用的CSS文件中進(jìn)行修改。

3．我們也可以在內(nèi)嵌的Mozilla中訪問(wèn)外部的web頁(yè)面，這時(shí)DOM Inspector也會(huì)根據(jù)加載的頁(yè)面，做相應(yīng)的調(diào)整，從而顯示在Mozilla中當(dāng)前加載的頁(yè)面的DOM信息：

在這個(gè)頁(yè)面中，加載的是IBM的官方站點(diǎn)，這時(shí)，在DOM Inspector中，也自動(dòng)顯示該IBM首頁(yè)面的DOM信息。

4．我們可以使用ATF提供的JavaScript Console來(lái)?yè)渥疆?dāng)前Mozilla加載頁(yè)面所包含的錯(cuò)誤，以及這些錯(cuò)誤在頁(yè)面源文件中的行號(hào)，我們可以在JavaScript Console中對(duì)所提示的信息，根據(jù)級(jí)別，分別選擇All，Errors，Warnings，Messages等，就像我們開(kāi)發(fā)普通的Java程序一樣，在下面的Console中提示友好的編輯信息，這樣便于我們發(fā)現(xiàn)和修改頁(yè)面中的錯(cuò)誤。

5．在XHR Monitor view中我們還可以看到Dojo包加載機(jī)制對(duì)其頁(yè)面所加載的JavaScript文件的加載順序，其實(shí)也就是XmlHttpRequest 的監(jiān)視控制臺(tái)：

回頁(yè)首

結(jié)束語(yǔ)

伴隨著Web 2.0 的普及，Ajax應(yīng)用層出不窮。正所謂工欲善其事，必先利其器。Dojo Toolkit作為一款開(kāi)源工具包，為開(kāi)發(fā)Ajax應(yīng)用提供了極大的便利。而Ajax Toolkit Framework作為Eclipse的一款插件，也方便了Dojo Toolkit等當(dāng)下最流行的AJAX 框架的使用。希望本篇文章能夠帶領(lǐng)讀者快速進(jìn)入Ajax應(yīng)用開(kāi)發(fā)的世界，更快更好地開(kāi)發(fā)出優(yōu)秀的Ajax應(yīng)用。

回頁(yè)首

參考資料

• developerWorks 中國(guó)網(wǎng)站 Ajax 技術(shù)資源中心：在這里您可以找到更多關(guān)于 Ajax 的知識(shí)，包括 Ajax 基礎(chǔ)入門、使用 Java, PHP 等語(yǔ)言開(kāi)發(fā) Ajax 應(yīng)用的各種技巧和多種 Ajax 框架的技術(shù)信息。
  
  
• Dojo Toolkit 官方站點(diǎn)：http://www.
  
  
• Ajax Toolkit Framework 官方站點(diǎn)：http://www./atf
  
  
• Developer Works 上面的文章：Two tools bring Ajax to Eclipse‘s Ajax Toolkit Framework
  
  
• Developer Works 上面的文章：Build enterprise SOA Ajax clients with the Dojo toolkit and JSON-RPC