這篇文章主要是follow GWT的Tutorial來介紹GWT.  
參考Google文件 : https://developers.google.com/web-toolkit/doc/latest/tutorial/

GWT Overview

GWT是給Java developer能夠在寫Web App的時候能夠盡量不使用到Javascript，讓Web client端的程式碼也可以用Java的程式，利用GWT的Complier將Java編譯成Javascript code,而且還能夠相容於各個瀏覽器，這正是GWT最重要的目的。

GWT Client支援的JRE - 參考Google  https://developers.google.com/web-toolkit/doc/latest/RefJreEmulation

好處 : 1. 可以使用Java寫Web程式
         2. 可以使用Eclipse來debug client side的程式!! 就跟debug java一樣!
         3. 不需要管User使用什麼瀏覽器，交給Google來處理就好了! 

缺點 : 1. 需要花時間來學習GWT
         2. 一開始的loading時間會比較長，會稍微比Servlet-JSP慢一些 (只限於develope mode , 感謝Monty大指正) 

插播 : GWT2.0改進的地方 - http://pt2club.blogspot.com/2009_12_01_archive.html

 

Build一個GWT的範例程式 - Stock Watcher

Step1. 開一個新的GWT應用程式

Eclipse -> New Web Project -> check GWT -> done

Step2. 了解需求

連結 :https://developers.google.com/web-toolkit/doc/latest/tutorial/design
基本上就是一個可以新增股票看他會跳動多少的程式，另外需要計算漲跌

Step3. 建立UI

UI展示&Source http://gwt.google.com/samples/Showcase/Showcase.html?locale=en 
UI Gallery(Widget & Panel) https://developers.google.com/web-toolkit/doc/latest/RefWidgetGallery

上面沒有提到的Panel,實際上就是一個block的<div>
ex : <div class="gwt-Label">Last update : Oct 1, 2008 1:31:48 PM</div>

Layout Panel : 
在GWT2.0以前,沒有Layout Panel這個Class,都是使用一般的Panel去操作. 
2.0以前的缺點 :
    1. 不可預測的Layout
    2. 常常需要用其他的程式碼去fix

2.0之後使用Layout Table : 
    1. 完全可以預測(乖乖的呈現)
    2. 可以使用動畫去操作變化 

使用Layout Panel注意事項

參考 : https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels#Design

1. 所有的Layout Panel都要包在RootLayoutPanel之內,RootLayoutPanel extends LayoutPanel, 允許在裡面的Panel加入一些限制條件

2. 也可以使用UIBinder來新增LayoutPanel的效率,UIBinder是使用新的XML language來建立新的layout,有點類似andorid. 效果會比翻譯之後的JS快.
    UIBinder : https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder 
3. 各種Layout Panel簡介

DockLayoutPanel : 用東南西北來新增元件
SplitLayoutPanel : 類似DockLayoutPanel,但是內部各個元件都可以resize
TabLayoutPanel : 可以一次assign

4. LayoutPanel的功能只限於Panel, 其他的Widget基本上是不受影響的 

實做StockWatcher - 重點分享


1. 將需要的元件都放在成員變數上(因為可能會有多個method共用) 

2. Debug模式只需要refresh瀏覽器就可以了 (只限於Client-side code)

3. 畫面事件文件 - 非常好的模式!! 容易溝通簡單明瞭! 可以學起來

Task UI Event (Trigger mechanism) Response
User enters a stock code. Clicks the Add button
or presses return in the input box.
  • Verify input.
  • Check if stock already exists.
  • Add a new row.
  • Create a delete button.
User deletes stock from the table. Presses the Remove button.
  • Remove row from table.

 PS. GWT1.6之後很多XXXListener都被Handler取代了
 (原文)Starting with GWT 1.6, the ClickHandler, KeyDownHandler, KeyPressHandler, and KeyUpHandler interfaces have replaced the now deprecated ClickListener and KeyBoardListener interfaces.

4. 通常會用一個List暫存Table的key來做為後續update,delete的用途

5. Timer可以變成一個Single Thread的用途, ex : timer.schedule(int) => setTimeout() ; timer.scheduleRepeating(int); => setInterval();

6. 設定CSS檔案的地方有兩個

  •     moduleName.gwt.xml
  •     xxx.html直接使用<link>   

7. 修改CSS的方式

    A. 直接在CSS檔案內部修改 - 適用在此module所有的Widget
    B. 在元件新增一個Class
    C. Override預設元件的style.(primary style) ex : <button class="gwt-Button" tabindex="0" type="button">Add</button> 
    D. 直接inline方式改掉style
    E.  改Theme

 8. Theme
    在moduleName.gwt.xml裡面有Theme的設定,可以修改來改變預設的Theme. 

 9. Deffered binding
     在Production mode, GWT會依照browser給不同適應的js.
     如果有實做i18n, 也會依照不同的language給不同的語言設定

 10. 利用Annotation的方式實做i18n
       GWT提供一套系統來實做i18n
       參考Google文件 : https://developers.google.com/web-toolkit/doc/latest/tutorial/i18n

  11. Serializable
       使用Serializable & gwt的 isSerializable都可以(google比較建議使用isSerializable),因為client的JRE並沒有支援java.io的package
       能夠被GWT的client side使用的物件有 :

  • The type is primitive, such as char, byte, short, int, long, boolean, float, or double.
  • The type an instance of the String, Date, or a primitive wrapper such as Character, Byte, Short, Integer, Long, Boolean, Float, or Double.
  • The type is an enumeration. Enumeration constants are serialized as a name only; none of the field values are serialized.
  • The type is an array of serializable types (including other serializable arrays).
  • The type is a serializable user-defined class.
  • The type has at least one serializable subclass.
  • The type has a Custom Field Serializer

   12. 錯誤處理
       一般在呼叫Service的時候，產生錯誤(例外)分成兩種情形 : 有宣告throws錯誤 vs 沒有宣告throws錯誤

  • 沒有宣告throws錯誤 : 只會在onFaliure(Throwable ex)得到InvocationException with msg "The call failed on the server; see server log for details"
  • 有宣告throws錯誤 : 可以在onFailure(Throwable ex)得到跟Server side一樣的Exception

   13. JSNI
       將已經有的Javascript lib轉換成可以被GWT呼叫的method. https://developers.google.com/web-toolkit/doc/latest/DevGuideCodingBasicsJSNI 

   14. RPC serviceImpl就是 [Servlet]      

 

晚場插播 : 查到的GWT中文網站

don't care : http://blog.dontcareabout.us/ 

GWT 技術筆記本 : http://gwt-note.psmonkey.org/index

  

minglight 發表在 痞客邦 留言(2) 人氣()