在網站中適度加入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中。 在命令列中輸入: 執行後自動建立src、test兩個資料夾及.project與.classpath兩個檔案。 2. 使用applicationCreator建立GWT專案,在命令列中輸入: 3. 將專案加入Eclipse File –> Import… –> Existing Project into Workspace 執行結果:Host 模式 大功告成 到這裡我們已經成功建立了GWT專案,如果還有興趣的話,可以照著官方網站的教學實做一個Ajax版的看盤工具。 Reference: projectCreator -eclipse <專案名稱>
applicationCreator -eclipse <專案名稱> <應用程式名稱>
