Google Web Toolkit(GWT) -- 用 Java 寫網頁

Google Web Toolkit(GWT) 是 Google 所發展的一套網頁應用程式開發工具,他可以讓開發者使用 Java 語言開發網頁上的應用程式,編譯時會將 Java 程式碼轉換為 JavaScript,使撰寫網頁就像撰寫一般的 Java 應用程式一樣,開發者不需考慮個平台與瀏覽器之間的差異,只要維護一份 Java 程式碼,剩下的 GWT 編譯器會自動將 Java 程式碼轉換為各種平台與瀏覽器所適用的 JavaScript 程式與網頁,這樣在開發與維護上都佔有很大的優勢。

另外 GWT 也支援 Eclipse,透過 Eclipse 的 Plugin,開發者可以非常快速的使用已經熟悉的 Java 開發環境來開發網頁應用程式。這以介紹如何安裝 Eclipse 與 GWT 開發環境。

安裝 Eclipse

首先安裝 Eclipse,直接到 Eclipse 官方網站下載後解壓縮即可使用,裡面有好多版本,筆者這裡以 Eclipse Classic 3.6.1 做為示範。

接下來安裝 Eclipse 的 GWT Plugin,在 Help > Install New Software 中加入下面這個 Repository:

http://dl.google.com/eclipse/plugin/3.6

若您所使用的 Eclipse 不是 3.6,請依照您所使用的版本修改此路徑。畫面看起來就像這樣


然後選擇要安裝的 Plugin,建議全部裝上去:


裝好之後就可以開始寫 GWT 網頁程式了。

第一個 GWT 程式

要建立一個 GWT 網頁應用程式,首先點選 File > New > Web Application Project 建立一個 Project,點選後會出現一個視窗,請將該填的東西填上去:


若您有安裝 Google App Engine SDK 可以把 Use Google App Engine 的選項打勾,這樣可以自動透過 Eclipse 將寫好的網頁上傳至 Google App Engine,不過您必須先申請好 Google App Engine 的帳號與空間。

這樣就建立好了,在左邊的 Package Explorer 中以滑鼠右鍵點選您剛剛所建立的 Project,選 Debug As > Web Application,這會建立一個 Web Application 的啟動設定,此設定會啟動一個本機的網頁伺服器與 GWT development mode 伺服器,隨後在下方的 Development Mode 視窗會出現一個網址,將網址點兩下就會開啟瀏覽器(或是將網址複製並貼在您的瀏覽器上):


若您是第一次使用瀏覽器開啟 Development Mode Server 的網頁,會出現要您安裝 Google Web Toolkit Developer Plugin 的畫面,就按照畫面指示安裝就可以了。


安裝完成後就會出現網頁應用程式的內容了:


此程式的內容都放在 src 資料夾中,其中會看見 com.mycompany.testapp.client 與 com.mycompany.testapp.server 兩個 Package,client 的部分會被轉成 JavaScript 在 Client 端執行,而 server 的部分則是轉成 bytecode 在 Server 端執行。


請看 Testapp.java 中的第 42 行左右,有一個設定按鈕名稱的程式碼:

final Button sendButton = new Button("Send");

將其改成

final Button sendButton = new Button("Send to Server");

存檔後,在瀏覽器上按下重新整理(或 F5 鍵),即可看到更新的結果。

這時候您可以在 Eclipse 中設定中斷點除錯,就像開發一般 Java 程式一樣。

編譯與發佈

若您程式已經開發完成,可以右鍵點選 Project 選擇 Google > GWT Compile,這樣會將所有的程式編譯好放在專案的 war 資料夾中,您可以直接開啟 war 中的網頁觀看結果。



發佈至 Google App Engine

若您有安裝並啟用 Google App Engine 功能,您可以使用這個功能很方便快速的將您的網頁應用程式上傳至 Google App Engine 中。

首先將 Google App Engine 功能啟用,右鍵點選您的專案後選 Google > App Engine Settings,勾選 Use Google App Engine,並填入您 Google App Engine 的 Application ID(Application ID 要先去 App Engine 的網站申請),填完之後按下 OK。



設定完成後,右鍵點選您的專案後選 Google > Deploy to App Engine,並輸入您的帳號與密碼,按下 Deploy 之後就會將您的程式上傳至 Google App Engine 了。
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站