初玩 Google Web Toolkit

或許這是讓我繼續寫 Java 的動力?

前言

之前一直沒有時間研究 Google Web Toolkit (GWT for short),最近比較有空了就順手摸(因為還沒有很深入地瞭解)了一下,才瞭解到 GWT 這個 toolkit 就像其它常見的 application toolkit (or framework) 如 QTGTk 等一樣,用來開發所謂的 application,只是 GWT 開發出來的是 web application 而已,別的 framework 開發完所產生的可能是 native 的 binary executable,但 GWT 產生的則是 HTML 及 JavaScript 檔案

而 GWT 最大的特色是用來開發使用 AJAX 技術的網頁(或者你要說 web application 也行),對這樣一個網頁來說,網頁上各個元件(如:輸入表單)的呈現就是這個 application 的 UI,需要與 server 溝通的話就透過 AJAX。在 GWT 裡,網頁上的呈現算是 client-side application,你寫的 Java code 將被轉換成 JavaScript 的 code 在網頁裡運作;而 server 的部份則是用 RPC 的方式來模擬 AJAX 與 server 溝通, GWT 提供的執行測試環境有個簡單的 server ,從 client-side 來的 request 都是由這個 server 處理,你只要開發處理 request 的 server impl. class 即可。所以說用 GWT 來開發主要讓你著重在 UI logic 的部份,server 的部份當你部署(deployment)時再替換成你 server 處理 request 的環境囉。

事前準備

至於官方網站上所下載的 toolkit 要怎麼使用呢?首先你必須要有 Java 開發環境(SDK),因為 GWT 這個 toolkit 是基於 Java 語言所開發的,而你也必須使用 Java 語言來開發你的 application,如果你還沒有安裝過 J2SE SDK 的話,可以到 Java 官方網站下載 SDK (而不是 JRE )安裝。

另外,如果你想要有一個整合式開發環境(IDE),GWT 提供了 utility 產生了 Eclipse 的專案檔,基本上我也推薦使用這個 IDE 來作開發,如此就不必煩惱 classpath 或是 build 的問題,直接在 Eclipse 按幾個按紐就完成了。

如何開始

下載回來的 GWT 解開後,裡面有幾個可執行的 script ,你只需要在命令列下執行:

projectCreator -eclipse <專案名稱>

它就會產生基本的 Eclipse 專案檔,但是一些編譯的指令還沒有產生,所以還要再執行:

applicationCreator -eclipse <專案名稱> <應用程式名稱>

注意其中的 <應用程式名稱> GWT 會建議你取成 XXX.XXX.client.OOO 的樣子, XXX 可能是你的 package name ,而 OOO 是在 client 下的 class ,也就是你的 application name (也會是首頁的名稱)。執行完成後就是一個完整的 Eclipse 專案了,這時你可以再用 Eclipse import 這個 project 到你的 workspace 下。

這裡提供一個小技巧,如果你是 Windows 的使用者,可以先把你解開的 GWT 目錄加到 %PATH% 系統變數中,這樣就可以在各個目錄下來操作上述的步驟,以下是圖例示範:

產生專案檔
Project Creation

產生應用程式及指令檔
Application Creation

用 Eclipse import 在 D:Hello 的專案
用 Eclipse import 專案

如此操作完成之後,你就可以直接用 Eclipse 的 Run 來測試你的網頁程式(它會啟動一個小 web server),而且編譯後的結果會輸出到 bin 目錄下,而裡面的 public 目錄則是你要放在真正 web server 上面的網頁、CSS 及 JavaScript 檔案。稍微看一下 Hello.java 的內容,應該就可以感覺到寫網頁就像在寫一般 Java application 一樣,如:宣告元件、然後把它放到 panel 中如此云云。不過我目前還沒有研究太多,所以就不亂作介紹了 :p

執行測試 application
執行測試

用 GWT 來開發的好處是如果你本來就很熟悉 Java 程式語言的話,可以直接利用這個 toolkit 來產生 JavaScript code 以便做出你想要的 web application ,而不需要另外學習要怎麼寫 JavaScript 等等,如此一來開發者便能放更多心思在整個 application 的 logic 上,而不是語法。(當然啦,還是有人比較喜歡要自己手動刻 HTML, CSS 及 JavaScript 的 code )。