AJAX Toolkit Framework（下面簡(jiǎn)稱(chēng)ATF）為 Eclipse 提供 Ajax 支持，其綁定當下最流行的 AJAX 框架（Dojo, Zimbra, Rico, etc），為 Eclipse 提供整合的模塊。Eclipse 用戶(hù)可以使用 AJAX Toolkit Framework 來(lái)編寫(xiě) AJAX 應用程序。就像在 Eclipse 中開(kāi)發(fā)平常的Java 程序一樣，非常方便。
我們現在就以開(kāi)發(fā) Dojo 應用為例，從快速開(kāi)發(fā) Dojo 應用，以及使用 DOM Inspector and JavaScript Console 來(lái)幫助 Dojo 應用的開(kāi)發(fā) 2 個(gè)方面，來(lái)看看 ATF 如何增強 Ajax 應用的開(kāi)發(fā)。
本文目標讀者主要是對 Ajax 技術(shù)感興趣，并能夠熟練安裝 Eclipse 插件，使用 Eclipse開(kāi)發(fā)和調試應用程序，對 Dojo Toolkit 有一定了解的 WEB 開(kāi)發(fā)者。
  |
|
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 軟件包，它集成了上面提到的兩項工具。
3） 安裝Tomcat5.0以上版本或者WTP所支持的服務(wù)器。
4） 下載并解壓縮XULRunner軟件包，隨后在命令行的方式下加入解壓縮后的目錄，輸入xulrunner --register-global 來(lái)注冊XULRunner，以便能夠讓Eclipse內嵌Mozilla瀏覽器。
5） 下載AJAX Toolkit Framework，這是一個(gè).jar文件，可以通過(guò)Eclipse更新選項里面的新的歸檔站點(diǎn)來(lái)添加這個(gè)插件到Eclipse中。
6） 下載最新的Dojo 工具包，目前最新的版本是0.3.1。解壓縮并把其下的所有文件拷貝至Eclipse的plug-in文件夾下的org.dojo.runtime_<version>目錄內。并確保Dojo解壓縮包下的src文件夾的所有文件都被拷貝至該目錄下。
7） 為了讓Eclipse能夠識別ATF插件的安裝，我們需要在啟動(dòng)Eclipse的時(shí)候，在其快捷方式上，右擊鼠標，并在出現的窗口中的目標一欄中修改相應信息，比如修改成：e:\eclipse\eclispe.exe - clean.
至此，使用ATF開(kāi)發(fā)Dojo應用的開(kāi)發(fā)環(huán)境就搭建好了，現在我們看一下使用ATF提供的功能：
  |
|
使用ATF開(kāi)發(fā)Dojo應用快速入門(mén)
1．打開(kāi)Eclipse3.2,切換到J2EE視圖,新建一個(gè)工程，選擇Dojo J2EE Project
2．填入合適的工程名，如果你沒(méi)有配置Target Runtime，則需要新建一個(gè)：
3．在新建Server Runtime environment界面中選擇一個(gè)你已經(jīng)安裝好的應用服務(wù)器。這里選擇Apache Tomcat v5.0作為示例Dojo應用的服務(wù)器運行環(huán)境：
4．完成服務(wù)器運行時(shí)環(huán)境配置后，點(diǎn)擊完成按鈕，這樣一個(gè)開(kāi)發(fā)Dojo應用的框架工程就搭建好了，我們便可以在這個(gè)基礎上開(kāi)發(fā)自己Dojo應用：
5．在新建好的dojoDemo工程內，右鍵點(diǎn)擊WebContent，在彈出的菜單中選擇新建Dojo Application v0.2.2，如果沒(méi)有該選項，則可以先選擇Other，再在出現的菜單中選擇。
6．點(diǎn)擊Next，進(jìn)入下一個(gè)頁(yè)面，輸入合適的工程名稱(chēng)，比如dojoApp，其他保留默認值，點(diǎn)擊完成，這樣一個(gè)簡(jiǎn)單的dojo應用就由ATF自動(dòng)生成了：
我們看到在WebContent下生成了一個(gè)叫做dojoApp的目錄，其下面包含一個(gè)叫做dojoApp.html的文件，我們就可以直接在這個(gè)文件中輸入Dojo代碼。從而使用ATF簡(jiǎn)化了dojo應用的開(kāi)發(fā)。
7．我們在開(kāi)發(fā)Dojo應用的時(shí)候，先在Eclipse下方選擇Snippets View，可以很方便的插入Dojo的代碼，同時(shí)你會(huì )看到ATF對其他流行的Ajax框架提供的支持，包括Zimbra和Rico等
8．在完成了相應的Dojo代碼編寫(xiě)后，我們在開(kāi)發(fā)好的的dojoApp.html上右擊，在彈出的菜單中，選擇Run As -> Run in Mozilla, 隨后會(huì )彈出一個(gè)信息面板，讓你選擇需要使用的運行時(shí)服務(wù)器，我們只要選擇剛才配置好的Tomcat服務(wù)器，點(diǎn)擊完成。
這樣我們就可以在內嵌的Mozilla瀏覽器中發(fā)布和查看開(kāi)發(fā)好的dojo程序了，這里使用Dojo提供的Widget中的Tree類(lèi)型，做的一個(gè)小的Dojo應用程序的演示：
這里只是演示了一個(gè)很簡(jiǎn)單的開(kāi)發(fā)Dojo應用的例子，主要目的是為了說(shuō)明，使用ATF對開(kāi)發(fā)Dojo這樣的Ajax應用程序的方便。其利用了Eclipse提供的強大開(kāi)發(fā)功能為用戶(hù)在開(kāi)發(fā)Ajax項目的時(shí)候，不必每次手動(dòng)拷貝Dojo資源包，創(chuàng )建編寫(xiě)繁瑣的輔助性代碼，更加專(zhuān)注于業(yè)務(wù)邏輯的開(kāi)發(fā)。
|
|
使用ATF的DOM Inspector and JavaScript Console
我們先來(lái)看一下ATF的DOM Inspector提供的功能：
1．當我們在Mozilla中運行我們的dojo應用的時(shí)候，我們可以在Eclipse的Workspace右側看到DOM Inspector，它可以把整個(gè)html頁(yè)面的DOM結構，清晰完整的在里面顯示出來(lái)。當你點(diǎn)擊任何一個(gè)標簽的時(shí)候，其相應的部分就在左側的頁(yè)面中以紅色邊框包圍，重復閃爍3次：
在DOM Inspector中，我們可以很方便的撲捉頁(yè)面的DOM樹(shù)結構，并可以打開(kāi)某個(gè)節點(diǎn)，瀏覽其相應的子節點(diǎn)，可以方便定位頁(yè)面元素。
2．當我們在DOM Inspector中選擇一個(gè)節點(diǎn)的時(shí)候，它所包含的一些屬性就在下面的屬性-值得列表中顯示出來(lái)：
這些屬性分為3類(lèi)：
1）盒子模型：里面主要是包含一些有關(guān)長(cháng)寬高的屬性。
2）DOM屬性 ：里面包含的屬性是可以做修改的，不同的標簽節點(diǎn)，所對應的屬性不一樣。
3）計算的樣式 ：主要是一些由CSS定義的值，可以在頁(yè)面使用的CSS文件中進(jìn)行修改。
3．我們也可以在內嵌的Mozilla中訪(fǎng)問(wèn)外部的web頁(yè)面，這時(shí)DOM Inspector也會(huì )根據加載的頁(yè)面，做相應的調整，從而顯示在Mozilla中當前加載的頁(yè)面的DOM信息：
在這個(gè)頁(yè)面中，加載的是IBM的官方站點(diǎn)，這時(shí)，在DOM Inspector中，也自動(dòng)顯示該IBM首頁(yè)面的DOM信息。
4．我們可以使用ATF提供的JavaScript Console來(lái)?yè)渥疆斍癕ozilla加載頁(yè)面所包含的錯誤，以及這些錯誤在頁(yè)面源文件中的行號，我們可以在JavaScript Console中對所提示的信息，根據級別，分別選擇All，Errors，Warnings，Messages等，就像我們開(kāi)發(fā)普通的Java程序一樣，在下面的Console中提示友好的編輯信息，這樣便于我們發(fā)現和修改頁(yè)面中的錯誤。
5．在XHR Monitor view中我們還可以看到Dojo包加載機制對其頁(yè)面所加載的JavaScript文件的加載順序，其實(shí)也就是XmlHttpRequest 的監視控制臺：
|
|
伴隨著(zhù)Web 2.0 的普及，Ajax應用層出不窮。正所謂工欲善其事，必先利其器。Dojo Toolkit作為一款開(kāi)源工具包，為開(kāi)發(fā)Ajax應用提供了極大的便利。而Ajax Toolkit Framework作為Eclipse的一款插件，也方便了Dojo Toolkit等當下最流行的AJAX 框架的使用。希望本篇文章能夠帶領(lǐng)讀者快速進(jìn)入Ajax應用開(kāi)發(fā)的世界，更快更好地開(kāi)發(fā)出優(yōu)秀的Ajax應用。
|
|
聯(lián)系客服
