GWT: 網頁前端設計

1. GWT: 網頁前端設計

2. 教材 湯秉翰 著(2013)， 雲端網頁程式設計－Google App Engine應用實作(第二版)， 博碩文化， ISBN 978-986-201-824-8 (書號 PG31356) 鍾葉青、鍾武君 著(2013)， 雲端計算， 東華書局， ISBN 9789861579030 (書號 CL009) 許清榮、林奇暻、買大誠 著(2012)， 掌握Hadoop翱翔雲端-Windoop應用實作指南， 博碩文化， ISBN 978-986-201-673-2 (書號 PG21241) 鍾葉青、李冠憬、許慶賢、賴冠州 著(2011)， 雲端程式設計: 入門與應用實務， 東華書局， ISBN 9789861578125 (書號 CL008)

3. 章節大綱 網頁系統技術 GWT 的組成要素 利用 Eclipse 以 GWT 方式設計留言板 GWT 的基礎元件 GWT 的表單元件 GWT 事件處理 GWT 的容器

4. 網頁前端設計-GWT • Google Web Toolkit（GWT） • 整合各種網頁前端技術，達到快速開發、具有彈性的目標 • 網頁前端技術：HTML、AJAX、CSS • 伺服器端技術：JSP/Servlet、Python、PHP、Ruby • 讓具有 Java 語言的開發人員，可以在短時間開發出豐富功能的網頁系統

5. 網頁系統技術 • 使用GWT就不需要瞭解任何網頁技術了嗎？當然不是的，瞭解這些基礎知識是必要的 • GWT的開發人員利用Java語言設計出網頁的畫面與資料傳遞等功能 • 後端還是由GWT將Java程式設計的流程與規範轉化為AJAX、HTML、CSS與伺服器溝通程式與機制。

6. 網頁系統技術 • HTML • CSS－樣式設計 • Javascript－網頁端程式語言

7. 整合性技術 Google Web Toolkit可降低技術門檻，並增加開發人員的效率。只要懂得Java語言，再加上一點學習，即可開發出符合需求的網頁系統

8. GWT 的組成要素 • Module（模組） • EntryPoint（進入點） • HTML

9. GWT 的組成要素：Module • GWT應用程式的「功能模組」 • 網頁系統的一個主要功能或是頁面的集合 • 例： • 股票看盤系統：stockwatcherModule • 會員註冊系統：register Module • 留言板功能：guestbookModule • 設計GWT應用程式像設計視窗應用程式 • 一個模組包括 Javascript、CSS 與圖檔資源 • 所有模組內的資源檔案皆在編譯後，放置於war 目錄下的 com.gb.Guestbook

10. GWT 的組成要素：EntryPoint EntryPoint像特定功能中的子功能區塊 一個 Module 可以有多個 EntryPoint 一個留言板 Module 中，可能有顯示留言清單與新增留言的兩個 EntryPoint區塊 開發人員在這兩個 EntryPoint中獨立實作程式邏輯

11. GWT 的組成要素： HTML GWT 將 EntryPoint類別與 Module（XML）編譯為 Javascript檔案，再將 Javascript嵌入HTML 中 瀏覽器開啟 HTML 時，匯入編譯後的Javascript檔案，顯示以 GWT 設計的畫面與功能

12. HTML Page HTML 檔案放在專案的 war 目錄下 以 <script> 標籤嵌入 GWT 模組

13. GWT 範例：留言板 專案名稱 gb 套件名稱 com.gb 不勾選範例頁面

15. 專案目錄結構

16. 新增 Module • Module Name：Guestbook • com.gb.Guestbook

17. Guestbook 模組 • 加入<entry-point class="com.gb.client.AddPost" /> • 在 com.gb 套件下 • 檔案名稱：Guestbook.gwt.xml

18. 新增 EntryPoint • 類別名稱：AddPost • 套件名稱： com.gb.client • com.google.gwt.core.client.EntryPoint

20. 在 EntryPoint 中設計表單 • 在 AddPost類別上按滑鼠右鍵選擇「Open With」下的「GWT Designer」。

21. 在 EntryPoint中設計表單

22. 在 EntryPoint中設計表單

23. 在 EntryPoint中設計表單

24. 編譯 GWT 專案

25. 編譯 GWT 專案

26. 新增 HTML Page

27. 新增 HTML Page • 修改guestbook.html原始碼中的<script>標籤內容將 src屬性 • src=".nocache.js" • 改為 • src="/com.gb.Guestbook/com.gb.Guestbook.nocache.js" • src="/modulename/modulename.nocache.js" • 修改完成後儲存檔案

28. 測試 • Run As/Web Application

29. 測試

30. GWT 基礎元件 • 視覺元件（Widget） • 對應 Java 類別 • 套件 com.google.gwt.user.client.ui • 參考 Java DOC

31. Widget 類別架構

32. 文字標籤－Label 類別 • 展示一段文字 • 顯示訊息 • 輸入方塊的說明文字 • 建構子 • public Label() • 建構一個Label物件，無預設文字（空字串） • public Label(String text) • 給予一個字串參數，依該字串建構一個Label物件 • public Label(String text, booleanwordWrap) • 給予一個字串參數與布林值，依該字串建構一個Label物件並依布林值wordWrap設計Label是否會自動斷行

33. 文字標籤－Label 類別 • 屬性 • String text • Label中顯示的字串。 • 常用方法 • public String getText() • 取得Label上所顯示的字串。 • public void setText(String text) • 設定Label使用新的字串。

34. HTML 展示標籤－HTML 類別 • 功能與 Label 相似，具有 HTML 標籤的能力 • 建構子 • public HTML() • 建構一個HTML物件，無預設文字（空字串）。 • public HTML(String html) • 給予一個字串參數html，依該HTML語法字串建構一個HTML物件。 • public HTML(String html, booleanwordWrap) • 給予一個字串參數與布林值，依該字串建構一個HTML物件並依布林值wordWrap設計HTML元件顯示時是否會自動斷行，當元件大小不足以顯示文字內容時，是否要自動斷行（依據文字內空格），預設為true，會自動斷行。

35. HTML 展示標籤－HTML 類別 • 常用方法 • public String getHTML() • public void setHTML(String html)

36. Example: Label and HTML

37. 超連結－Hyperlink 類別 • 代表 HTML 語法中的超連結 • 並非連結到外部網站或網址 • 瀏覽網頁時的「上一頁」、「瀏覽的歷史」等的控制功能 • GWT 以 History 類別存取瀏覽器的網址變動歷程。

38. Example: Hyperlink

40. GWT 表單元件 • 文字方塊（TextBox） • 單選鈕（RadioButton） • 核取方塊（CheckBox） • 清單或下拉式選單（ListBox） • 按鈕（Button）

41. FormPanel • 代表 HTML 表單，最終轉換成 <FORM> • 產生 FormPanel • FormPanel form = new FormPanel(); • 設定表單的傳遞方法 • form.setMethod(FormPanel.GET); • 設定表單送出的目的地網址 • form.setAction("/somewhere"); • 表單中加入元件 • TextBoxuserid = new TextBox(); • form.add(userid);

42. 按鈕－Button • Button是常見的按鈕元件 • 常用範例 • 產生一個標籤為「送出留言」的按鈕 • Button send = new Button("送出留言"); • 以程式碼模擬使用者按下按鈕的動作 • send.click();

43. 表單元件－輸入方塊 TextBox • 單行文字輸入 • 範例 • 建立一個 TextBox物件 • TextBoxtb = new TextBox(); • 取得目前使用者輸入的文字資料 • String s = tb.getText(); • 設定最多能輸入 10 個字 • tb.setMaxLength(10); • 設定最大可顯示的字數 • tb.setVisibleLength(6); • 設定元件寬度為 120 點 • tb.setWidth("120px");

44. 多行輸入區塊－TextArea • 輸入多行文字 • 範例 • 產生 TextArea物件 • TextArea ta = new TextArea(); • 取得目前使用者輸入的文字資料 • String s = ta.getText(); • 設定寬度可容納 30 個字元數 • ta.setCharacterWidth(50); • 設定元件可以容納 8 行的可見資料 • ta.setVisibleLines(8);

45. 下拉式選單－ListBox • ListBox清單/下拉式選單 • 範例 • 產生一個 ListBox物件 • ListBox list = new ListBox(); • 在ListBox內新增三個項目 • list.addItem("banana"); • list.addItem("apple"); • list.addItem("Orange"); • 設定ListBox可見元素為 3 個（成為清單選擇方式） • list.setVisibleItemCount(3);

46. 單選鈕－RadioButton • 選擇多個項目中的單一選項 • 範例 • 產生一個提示文字為 Blue 的單選鈕，並訂定其屬於color顏色群組 • RadioButton blue = new RadioButton("color", "Blue");

47. 單選鈕－RadioButton • 產生另外兩個顏色的單選鈕，亦屬於color群組 • RadioButton red = new RadioButton("color", "Red"); • RadioButton green = new RadioButton("color", "Green"); • 將三個同群組的單選鈕加入表單中 • FlowPanel panel = new FlowPanel(); • panel.add(blue); • panel.add(red); • panel.add(green);

48. 核取方塊－CheckBox • 複選 • 範例 • 產生一個選項文字為「同意」的核取方塊 • CheckBoxcb = new Check("同意"); • 設定核取方塊預設為勾選 • cb.setChecked(true); • 設定該選項在表單中的參數名稱為「agree」 • cb.setName("agree"); • 設定該選項的狀態為失效（不可勾選） • cb.setEnabled(false);

49. 表單設計範例 • 利用本章先前所建立的AddPost（新增留言的EntryPoint）進行表單設計

50. 事件處理 • 當使用者按下某一按鈕、滑鼠在某面版上移動或是按下滑鼠的右鍵這類與元件互動的動作時，系統都產生對應的事件（Event） • 事件出現時若能夠被被妥善的處理，就能為特定的事件進行程式碼的設計。 • Java 以 Observer Design Pattern 實作事件處理機制，事件處理常式稱為 Listener