BuzzShare Inside備份 – 本站已搬遷至http://clay0529.blogspot.com

屬於分類 ‘google web toolkit’ 的文章

Google Web Tool Kit (GWT)入門 ─ 安裝篇

三月 7, 2009 · 張貼留言

在網站中適度加入Ajax技術可以加強使用者體驗,但各家瀏覽器支援的標準不一的問題一直困擾著程式設計師。為了讓程式碼能跟瀏覽器相親相愛,我們大可不必埋頭蠻幹,已經有人提供了至少三種解決方案:

1. 站在巨人的肩膀上:使用Javascript Framework or Library

由於瀏覽器對Javascript的版本標準支援度的差異,提高了程式執行環境的複雜程度。為瞭解決這個問題,我們可以選擇一些架構或Library來減輕寫Javascript的負擔。常見的解決方案有:Prototype, Yahoo UI Library(YUI)jQuery等。

2. 乾脆一點:放棄Javascript

寫Javascript除了要花上大把時間在除錯上,還得留意Server端與Client端不同語言間的資料型別轉換。有些人覺得,只要能做出Rich Internet application, RIA效果,使用什麼語言不是重點。因此他們決定釜底抽薪,從根本捨棄Javascript改學Actionscript,用Adobe Flash來做還可以一併免除CSS版本支援的困擾。

3. 迂迴前進:使其他語言開發,再轉成Javascript執行

本文要介紹的Google Web Tool Kit就是這類型的代表,除此之外還有jMaki, Java2Script(J2S)pacemaker, RJS(使用Ruby語言)可以選擇。

這種方案的好處是不需要熟悉Javascript語言,而且單一語言方便整合前後端資料。但缺點是普及程度還不夠,如果整個團隊只有你習慣這麼寫,最後還是得回歸大家共同習慣的方式Coding。

初探GWT:元件組成

在開啟專案前,先對GWT有個基本認識。首先,GWT可以簡單地分拆成四個元件理解:

分類 名稱 說明
Library JRE模擬Library 提供模擬環境讓編譯後的Javascript執行。
GWT Web UI Library 提供與Swing類似的API。每個元件稱為Widget,對應到各種HTML表單元件。
Tools Hosted Browser 開發時期使用的瀏覽器工具,由於這裡跑的並不是真的Javascript,所以可以開啟除錯模式,逐步執行程式碼、檢查伺服器物件狀態等。
GWT Java-to-Javascript Compiler 很像Javac的功能,可以把Java程式碼輸出成Javascrupt。

事前準備

1. 到官方網站Download Google Web ToolKit,目前最新版本是1.5.3版。

2. 準備Java開發環境:GWT採用「將Java程式碼轉換成Javascript與HTML」的方法來寫Ajax網站/應用程式,因此您的電腦需要安裝JDK

3. IDE(整合式開發環境): GWT提供utility產生eclipse專案檔。使用GWT不一定需要eclipse,但以下的範例將搭配eclipse說明。

安裝Google Web Toolkit

1. 解壓縮後,將名為「gwt-windows-1.5.3」的資料夾放到適當的位置,並將資料夾所在位置加到系統的PATH路徑中,這樣您的電腦才知道GWT的存在,並能使用GWT提供的工具。加入PATH步驟:[我的電腦] -> 右鍵 –> 內容 –> 進階 –> 環境變數 –> 將路徑加入Path變數中,(e.g., ;C:\gwt-windows-1.5.3)

產生Eclipse專案檔並匯入Eclipse

1. 使用GWT提供的工具ProjectCreator建立eclipse專案,往後的步驟會將這個專案加入eclipse中。

在命令列中輸入:

projectCreator -eclipse <專案名稱>

執行後自動建立src、test兩個資料夾及.project與.classpath兩個檔案。

2. 使用applicationCreator建立GWT專案,在命令列中輸入:

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

3. 將專案加入Eclipse

File –> Import… –> Existing Project into Workspace


圖片來源


圖片來源

執行結果:Host 模式


圖片來源

大功告成

到這裡我們已經成功建立了GWT專案,如果還有興趣的話,可以照著官方網站的教學實做一個Ajax版的看盤工具

Reference:

  1. Google Web Toolkit (GWT) by IBM中國
  2. 初玩 Google Web Toolkit by ericsk
  3. Google Web Toolkit的實作與活用 by 吉野 雅人 江川 崇 竹端 進
  4. Google Web Toolkit 新手常見問題 by Pesty
  5. The Google Web Toolkit (GWT): Using RPC to Access Server-Side Data

分類: Ajax · Java · google web toolkit · 程式設計