初次接觸GWT,知識點總括


初次接觸GWT,知識點概括

前言

本人最近開始研究 GWT(Google Web Toolkit) ,現將個人的一點心得貼出來,希望對剛開始接觸 GWT的程序員們有所幫助,也歡迎討論,共同進步。

先說說本人的硬件環境,機器是 dell inspiron 1464 , i5 的處理器, 6G 內存。軟件環境, Win7 32位操作系統, MyEclipse9.0 , JDK1.7 , GWT2.3.0 。

所有資料全部來源於網絡,主要是 Google 的官方手冊。另外有一本中文的 GWT 教程,叫做《 GWT 揭秘》,評價很高,但是我沒有找到電子版,書可以從網上買到,但是我不願意花錢,所以一直沒能拜讀。

1 、介紹

先來說一下概念性的知識, GWT 的介紹很多,大家可以自己查,我只說注意事項,有說錯的地方,還請大家指出。 GWT 是 Google 的東西,出來四五年了,免費,開源( JAR 包自帶源代碼,這應該算開源吧)。主要功能是把 java 語言寫的程序編譯成 Javascript ,以此來解放廣大熟悉 Java 編程但是對 Javascript 頭疼的程序員。

GWT 編譯的 JS 文件跨瀏覽器(也可以指定), GWT 以 Module 為單位,每個 Module 都是一個 Java 類,通過 GWT 編譯后會生成一組 js\html\gif 文件,使用時只需要在網頁上引用一個以Module 名命名的 js 文件即可。 GWT 的 UI 部分使用的是 EXT2.0 (目前 EXT 的版本是 4.0 ),因為 EXT2.1 (也有說是 2.2 )后開始收費,想用的話要么交錢,要么要求使用 EXT 的項目開源(無法忍受)!!所以 GWT 只內置了 EXT2.0 ,想用 EXT4.0 怎么辦?有個 GXT 的框架,目前的版本是 2.2.4 ,他其實是 EXT 的東西,不是 Google 的, GXT=EXT+ GWT ,內置最新版本的 EXT,所以開發 GWT 的系統時,順便把 GXT 的 JAR 也引入,增強頁面的友好度。當然了, EXT 都收費了, GXT 當然也收費!

還有一個 GAE(Google App Engine) ,看名字就知道也是 Google 的產品,主要功能是為用戶提供一個雲端的平台,讓用戶發布自己的服務。說白了就是免費的個人網站。我試着發布自己的服務,但是網絡一直顯示連不上,我懷疑是國內的網絡運營商搞的鬼!

所有相關並且可能用到的插件地址如下,大家可以邊下邊繼續往下看。

GWT 的 Eclipse 插件 (GPE) 下載地址: http://code.google.com/eclipse/docs/install-from-zip.html

GWT 的 SDK 下載地址: http://code.google.com/webtoolkit/download.html

GXT 的 SDK 下載地址: http://www.sencha.com/products/extgwt/download/

GAE 的下載地址: http://code.google.com/appengine/downloads.html

2 、搭建環境

部署 GWT 環境,網絡上有很多的教程,但是大多都是很久以前的,不太適合現在來看。想要最新的詳細的資料,最好還是看 Google 官方的英文文檔。我用的是 MyEclipse9.0 ,所以要安裝IDE 插件。

Google 的 IDE 插件有兩種安裝方式,一種是在線下載,另一種是下載離線安裝包后再安裝。本人強烈推薦后者,因為直接在線下載的話,速度是龜速,畢竟連的是境外服務器,不過在線安裝似乎能省去一些配置的工作。

這里介紹一下第一種在線安裝的方法。

 

如上圖,進入 MyEclipse Configuration Center 。多句嘴,不知道 MyEclipse 從哪個版本開始 (我之前用 6.5) ,所有插件的維護都跑到這里來了,而且還有一些配置也在這里,用起來很方便。提醒一下,離開按鈕在右上角,有個顏色很淺的箭頭,叫 Return to Workbench ,第一次用的時候害我找了半天。

 

進入之后,單擊 Software ,中央的面板會出現 4 個區域,在左上角的 Browse Software 里會顯示當前能夠安裝的插件,里面已經幫我們列出了 GPE 插件 ( 難道 GPE 在國外有這么出名,讓它出現在常用插件里 ) ,右擊選擇 add to profile ,就會發現 GPE 已經出現在了右上方的 My Software 里,同時在 Software Update Available 里面也會有響應的提示,說有新的插件添加,最后點 Pending Change 里面出現的 Apple 1change 就可以了,剩下的都是傻瓜化操作,這里不再贅述。

現在主要講一下第二種的離線安裝插件的方法。首先要下載安裝包 ( 地址在上面 ) ,接近160MB 的 zip 文件。安裝的時候還是要進入 MyEclipse Configuration Center :

 

這時候在 Software 的插件搜索框的右邊有個 add site 的鏈接,點進去會出現一個 Add Update Site 的對話框,在這里有兩個需要填寫的內容,一個是名稱,可以隨便填,另一個是插件在硬盤上的位置。這個插件的位置其實是有 3 種寫法,一種是填寫 Eclipse 傳統的 link 鏈接,是個URL 地址;一種是填寫本地的插件目錄,點 Add from local Folder ;還有一種就是填寫本地插件的zip 文件的位置。后兩種的區別一個是解壓的文件夾,一個是沒解壓的 zip 文件,效果其實一樣。

 

點 OK 之后,我們的 Browse Software 里就會新增一個插件,不過這不算玩,這頂多只表示Myeclipse 多了一個升級插件的選擇,想安裝,要像上圖那樣。上圖只顯示了一個插件,相同的辦法,可以安裝其他的插件。之后右側的 My Software 截圖如下,現在可以點執行按鈕了。

 

 

在經過幾步確認和一小會的等待后, MyEclipse 要求重啟。我的 MyEclipse 不知道是怎么的,點重啟就會死機,所以每次都是手工重啟 MyEclipse 。重啟之后,就會發現在工具條上多了四個按鈕:

 

第一個按鈕用來新建 GWT 的工程,他有 3 個下拉選項,我目前只知道最上面的那個是新建本地的工程,剩下的兩個功能是 GPE 剛剛加上去 的,還沒試驗過。第二個按鈕用來編譯已經存在的 GWT 項目。第三個按鈕是 Speed Tracer ,它是 GWT2.0 后新加的,主要是用來做性能分析,雖然沒用過,但我個人老感覺跟 Firebug 差不多。最后一個按鈕是將 GWT 項目發布到 Google 的雲端,就是我上面提到的 GAE 啦!

3 、創建工程

現在開始正式建立一個真正的 GWT 項目。單擊 ,彈出下面的對話框:

 

Package 很重要, GWT 的 Module 就放在這個目錄下。選上 ”Use Google Web Toolkit” ,這是引用 GWT 要用到的 JAR 包。去掉 ”Use Google App Engine” ,因為我們還不需要將項目發布到Google 的雲端。 ”Sample Code” 一定選上,這樣生成的項目會自動為我們建立好實例代碼。生成的項目結構如下:

 

雖然 GWT 應用在 Web 項目上,但是目前新建的這個工程並不是 web 項目 MyEclipse 只當他是個普通的 java 項目,可以通過右擊項目→ MyEclipse → Add Web Project Capabilities… 來追加Web 工程。不過要注意,這樣追加之后,項目的目錄和文件會發生變化,所以要小心些。

現在一個可以直接運行的項目就算建好了,很簡單吧。下面來試着運行它,看看效果。要運行該實例,根本不需要去部署項目, MyEclipse 自帶了 jetty-6 服務器,右擊項目→ Run As →Web Application ,這時 jetty 服務就會啟動,並加載當前的項目。

 

如上圖所示,這里會提供一個地址,表示服務已經啟動,大家是不是已經明白下面要做什么了!先別急,這時去訪問的話,瀏覽器會提示你安裝一個叫 Google Web Toolkit Developer Plugin的瀏覽器插件,否則不能瀏覽。要是把地址上的那段詭異的參數去掉,頁面會提示 ”GWT module 'mygwttest' may need to be (re)compiled” ,為什么呢?

 

現在想想,在 Eclipse 里,我們可以很方便的調試 java 代碼,而 GWT 的功能是把 java 代碼編譯成 JS ,那我們是不是也可以像調試 JAVA 代碼那樣,去調試 GWT 編譯的 JS 代碼呢? Google不會想不到這點,所以給 GWT 提供了兩種運行模式。一種是宿主模式 (Hosted Mode) ,現在改名叫做開發模式 (development mode) ;另一種是 WEB 模式,現在叫生產模式 (production mode)。兩種模式的區別網上有一大堆的解釋,本質區別就是,開發模式下可以通過 IDE 工具調試,生產模式直接發布到正式服務器,不能調試!

GWT 區分兩種模式的方法是通過一個本地的服務完成的,注意到訪問地中那段詭異的參數了嗎 gwt.codesvr=127.0.0.1:9997 ?沒錯,這個 9997 端口的服務就是用來調試的。除了服務器端需要開啟服務外,瀏覽器端也需要有所配合,這就是第一次訪問時需要安裝的 Google Web Toolkit Developer Plugin 。

 

安裝好瀏覽器插件后,頁面終於顯示了出來!很簡單的頁面,在文本框中輸入姓名后,點send ,會顯示出當前使用的后台服務器和當前瀏覽器的信息。注意,如果調試后台的 GWT 代碼的話,運行方式選擇 Debug As ,不是 Run As ,Run As下只能實現實時編譯。

這里要注意一點, GWT 的兩種運行模式編譯的 JS 文件是不一樣的,開發模式的 JS 會包含調試信息 ( 千萬不要把開發模式的 JS 發布到正式服務器上 ) ,訪問地址沒有參數的時候會出現”GWT module 'xxx' may need to be (re)compiled” 的提示,並且在服務關閉之后,還會提示鏈接斷開。要想使用生產模式的 JS 文件,要通過  來實現,它會將指定的文件編譯成可以發布到正式服務器的 JS 文件。



4 、代碼解釋

現在來說說這個實例的代碼。

● GreetingService.java 和 GreetingServiceAsync.java 要放在一起,這是兩個接口,其中GreetingService 繼承了 com.google.gwt.user.client.rpc.RemoteServic 接口。 GreetingServiceAsync是作為代理出現的,它的名字不能改,只能叫這個名,為什么呢?因為這兩個接口是用來實現RPC 功能的,說白了就相當於是 Struts 的后台 Action 響應,只不過 RPC 傳的的對象。現在來說說他們倆的命名規則,假如我們新建了一個叫 XXX 的接口,繼承了com.google.gwt.user.client.rpc.RemoteServic ,有幾個方法 fn1(par…) 、 fn2(par…) ……。那么在這個 XXX 接口的同包下,必須有一個叫 XXXAsync 的接口,並且連方法都必須跟 XXX 一樣,只不過每個方法要多加一個參數 com.google.gwt.user.client.rpc.AsyncCallback<String> callback ,於是有了 fn1(par…,callback) 、 fn2(par…,callback) … .. 。這所有的規則都是有校驗的,不清楚MyEclipse 的插件是怎么實現的,反正不滿足就回報錯,還能幫用戶修改,很方便。

●光有兩個接口而沒有實現類是沒有用的, GreetingServiceImpl.java 就是一個對GreetingService 的實現類,注意不是那個代理接口。同時這個類還繼承了com.google.gwt.user.server.rpc.RemoteServiceServlet ,要是不繼承他, GreetingService 也就沒什么特別的了。這個類里面所有實現的方法,相當於是 Struts 的后台業務邏輯。

●以上的幾個文件配額起來能夠實現類似於 AJAX 的功能,而 MyGWTtest.java 則實現前台的業務邏輯,將來它會編譯成 JS 文件,該文件還是一個入口文件,在頁面上引用的 JS 文件就是它編譯的,這有點類似 java 中的 main 方法。這里有個注意事項,因為要編譯成 JS ,所以 import的類只能有以下 3 種情況: java.lang 包和 java.util 包下的類; GWT 的類;符合上面 2 點而且也會編譯成 JS 的類。

● FieldVerifier.java 里的代碼是在沒什么好說的,只有一個簡單的不能再簡單的方法。但是要注意,這個類也會編譯成 JS 代碼。

● MyGWTtest.gwt.xml 是個重頭戲,它是 GWT 的配置文件,功能類似 Hibernate 的*.hbm.xml 。這個文件所在的包加上這個文件的文件名 ( 不包括 gwt.xml) 就是 GWT 的一個Module 名。哪個類是入口類,那個類會被編譯,都在這里定義。同時文件中還會有多個繼承,inherits 元素指定;有且只有一個入口, entry-point 元素指定;多個資源, source 元素指定。

●空着的 com.jsltool.client 包是 JUtil 測試用的,可以不用理睬。

● MyGWTtest.html 是用來測試用的頁面, MyGWTtest.css 是它的樣式。

●在運行過一次這個實例之后,會發現項目的 war 包下面會多一個 mygwttest 的文件夾,文件夾的名字也就是 Module 名。這個文件夾里的文件就是 GWT 編譯好的 JS 文件。使用的時候,在頁面上將該文件夾下 的 Module 名 .nocache.js 引入就可以了。

對每個文件的詳細說明,我已經以注釋的形式寫入了代碼里,大家可以將項目下下來在自己的機器上部署。把 GWT 發布到正式的服務器上,注意不要忘記把編譯之后的 JS 文件夾拷過去,GWT 不會像 DWR 那樣產生一個虛擬的 JS 文件。

1 樓 yx200404 2011-06-16  
gxt收費嗎?
GAE 看運氣..運氣好碰到牆有洞 就訪問到了.
2 樓 jsltool 2011-06-30  
yx200404 寫道
gxt收費嗎?
GAE 看運氣..運氣好碰到牆有洞 就訪問到了.

GXT是收費的……GAE我目前還沒有成功連接過……
3 樓 jiangzezhou1989 2011-09-12  
b3log團隊在gae上有個博客項目你可以關注下。項目主頁:http://www.b3log.org/
4 樓 longthen 2011-09-21  
6G內存裝32位系統不是浪費么
5 樓 飯特稀 2011-10-11  
GAE 年初的時候貌似很正常,不過后來就掛了
6 樓 jsltool 2011-10-13  
longthen 寫道
6G內存裝32位系統不是浪費么

同時開兩個MyEclipse,3個主流程的瀏覽器,Oracle服務……這樣就不覺得浪費了。主要還是因為工作上需要的幾個程序不支持64位
7 樓 liuweihong47java 2011-10-22  
good收藏起來了
8 樓 zhangyou1010 2011-11-18  
博主你好,我有< GWT 揭秘>的電子版,如果需要的話,可以聯系我。
9 樓 ayaga 2011-12-20  
編譯速度怎樣?
10 樓 Kivewen 2012-02-16  
問題是如果我在Grails項目中怎么集成GWT進去?
11 樓 jsltool 2012-02-19  
Kivewen 寫道
問題是如果我在Grails項目中怎么集成GWT進去?

呵呵,這個還真不清楚,現在我還在使用基本的SSH框架做開發呢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM