jQuery-1.8-Api-中文版,ATF搭建,DOJO,jChart,autoSize

 

1,jQuery Api1.8中文幫助文檔

2,js+css實現3D雲標籤(轉載自http://www.w3cfuns.com/

3,jQuery自動伸縮大小

4,  amcharts,很不錯的圖表類庫及實例

5,HighChart,基於jQuery的圖標插件

6,jqChart,基於jQuery的小巧的圖表插件

7,ajax toolkit framework eclipse開發dojo插件

 

使用 Ajax Toolkit Framework 開發 Dojo 應用

 

引言

AJAX Toolkit Framework(下面簡稱ATF)爲 Eclipse 提供 Ajax 支持,其綁定當下最流行的 AJAX 框架(Dojo, Zimbra, Rico, etc),爲 Eclipse 提供整合的模塊。Eclipse 用戶可以使用 AJAX Toolkit Framework 來編寫 AJAX 應用程序。就像在 Eclipse 中開發平常的Java 程序一樣,非常方便。

我們現在就以開發 Dojo 應用爲例,從快速開發 Dojo 應用,以及使用 DOM Inspector and JavaScript Console 來幫助 Dojo 應用的開發 2 個方面,來看看 ATF 如何增強 Ajax 應用的開發。

本文目標讀者主要是對 Ajax 技術感興趣,並能夠熟練安裝 Eclipse 插件,使用 Eclipse開發和調試應用程序,對 Dojo Toolkit 有一定了解的 WEB 開發者。

開發環境搭建

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所支持的服務器。

4) 下載並解壓縮XULRunner軟件包,隨後在命令行的方式下加入解壓縮後的目錄,輸入xulrunner --register-global 來註冊XULRunner,以便能夠讓Eclipse內嵌Mozilla瀏覽器。

5) 下載AJAX Toolkit Framework,這是一個.jar文件,可以通過Eclipse更新選項裏面的新的歸檔站點來添加這個插件到Eclipse中。

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

7) 爲了讓Eclipse能夠識別ATF插件的安裝,我們需要在啓動Eclipse的時候,在其快捷方式上,右擊鼠標,並在出現的窗口中的目標一欄中修改相應信息,比如修改成:e:\eclipse\eclispe.exe - clean.

至此,使用ATF開發Dojo應用的開發環境就搭建好了,現在我們看一下使用ATF提供的功能:

 

使用ATF開發Dojo應用快速入門

1.打開Eclipse3.2,切換到J2EE視圖,新建一個工程,選擇Dojo J2EE Project


 

2.填入合適的工程名,如果你沒有配置Target Runtime,則需要新建一個:


 

3.在新建Server Runtime environment界面中選擇一個你已經安裝好的應用服務器。這裏選擇Apache Tomcat v5.0作爲示例Dojo應用的服務器運行環境:


 

4.完成服務器運行時環境配置後,點擊完成按鈕,這樣一個開發Dojo應用的框架工程就搭建好了,我們便可以在這個基礎上開發自己Dojo應用:


 

5.在新建好的dojoDemo工程內,右鍵點擊WebContent,在彈出的菜單中選擇新建Dojo Application v0.2.2,如果沒有該選項,則可以先選擇Other,再在出現的菜單中選擇。


 

6.點擊Next,進入下一個頁面,輸入合適的工程名稱,比如dojoApp,其他保留默認值,點擊完成,這樣一個簡單的dojo應用就由ATF自動生成了:


 

我們看到在WebContent下生成了一個叫做dojoApp的目錄,其下面包含一個叫做dojoApp.html的文件,我們就可以直接在這個文件中輸入Dojo代碼。從而使用ATF簡化了dojo應用的開發。

7.我們在開發Dojo應用的時候,先在Eclipse下方選擇Snippets View,可以很方便的插入Dojo的代碼,同時你會看到ATF對其他流行的Ajax框架提供的支持,包括Zimbra和Rico等


 

8.在完成了相應的Dojo代碼編寫後,我們在開發好的的dojoApp.html上右擊,在彈出的菜單中,選擇Run As -> Run in Mozilla, 隨後會彈出一個信息面板,讓你選擇需要使用的運行時服務器,我們只要選擇剛纔配置好的Tomcat服務器,點擊完成。

這樣我們就可以在內嵌的Mozilla瀏覽器中發佈和查看開發好的dojo程序了,這裏使用Dojo提供的Widget中的Tree類型,做的一個小的Dojo應用程序的演示:


 

 

這裏只是演示了一個很簡單的開發Dojo應用的例子,主要目的是爲了說明,使用ATF對開發Dojo這樣的Ajax應用程序的方便。其利用了Eclipse提供的強大開發功能爲用戶在開發Ajax項目的時候,不必每次手動拷貝Dojo資源包,創建編寫繁瑣的輔助性代碼,更加專注於業務邏輯的開發。

使用ATF的DOM Inspector and JavaScript Console

我們先來看一下ATF的DOM Inspector提供的功能:

1.當我們在Mozilla中運行我們的dojo應用的時候,我們可以在Eclipse的Workspace右側看到DOM Inspector,它可以把整個html頁面的DOM結構,清晰完整的在裏面顯示出來。當你點擊任何一個標籤的時候,其相應的部分就在左側的頁面中以紅色邊框包圍,重複閃爍3次:


 

在DOM Inspector中,我們可以很方便的撲捉頁面的DOM樹結構,並可以打開某個節點,瀏覽其相應的子節點,可以方便定位頁面元素。


 

2.當我們在DOM Inspector中選擇一個節點的時候,它所包含的一些屬性就在下面的屬性-值得列表中顯示出來:


 

這些屬性分爲3類:

1)盒子模型:裏面主要是包含一些有關長寬高的屬性。

2)DOM屬性 :裏面包含的屬性是可以做修改的,不同的標籤節點,所對應的屬性不一樣。

3)計算的樣式 :主要是一些由CSS定義的值,可以在頁面使用的CSS文件中進行修改。

3.我們也可以在內嵌的Mozilla中訪問外部的web頁面,這時DOM Inspector也會根據加載的頁面,做相應的調整,從而顯示在Mozilla中當前加載的頁面的DOM信息:


 

在這個頁面中,加載的是IBM的官方站點,這時,在DOM Inspector中,也自動顯示該IBM首頁面的DOM信息。

4.我們可以使用ATF提供的JavaScript Console來撲捉當前Mozilla加載頁面所包含的錯誤,以及這些錯誤在頁面源文件中的行號,我們可以在JavaScript Console中對所提示的信息,根據級別,分別選擇All,Errors,Warnings,Messages等,就像我們開發普通的Java程序一樣,在下面的Console中提示友好的編輯信息,這樣便於我們發現和修改頁面中的錯誤。


 

5.在XHR Monitor view中我們還可以看到Dojo包加載機制對其頁面所加載的JavaScript文件的加載順序,其實也就是XmlHttpRequest 的監視控制檯:


 

結束語

伴隨着Web 2.0 的普及,Ajax應用層出不窮。正所謂工欲善其事,必先利其器。Dojo Toolkit作爲一款開源工具包,爲開發Ajax應用提供了極大的便利。而Ajax Toolkit Framework作爲Eclipse的一款插件,也方便了Dojo Toolkit等當下最流行的AJAX 框架的使用。希望本篇文章能夠帶領讀者快速進入Ajax應用開發的世界,更快更好地開發出優秀的Ajax應用。


參考資料

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章