初次接觸GWT，知識點總括

時間 2019-11-08

標籤初次接觸 gwt 知識總括简体版

原文原文鏈接

初次接觸GWT，知識點歸納css

前言

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

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

全部資料所有來源於網絡，主要是 Google 的官方手冊。另外有一本中文的 GWT 教程，叫作《 GWT 揭祕》，評價很高，可是我沒有找到電子版，書能夠從網上買到，可是我不肯意花錢，因此一直沒能拜讀。程序員

1 、介紹

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

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.htmlapp

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/