1 / 18

UiBinder 設計畫面

UiBinder 設計畫面. 教材. 湯秉翰 著 (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)

anastasia-sutton
Download Presentation

UiBinder 設計畫面

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UiBinder 設計畫面

  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. 章節大綱 UiBinder 的架構 設計一個 UiBinder 實作聯絡人詳細資料

  4. 前言 • Why UiBinder ? • 美工設計師通常不寫程式 • 程式設計師通常缺乏美感 • 將畫面與程式邏輯分離 • 畫面=>美工設計師 • 讓網頁設計師進行修改與設計 • 程式邏輯=>程式設計師 • 專業分工提高生產力

  5. UiBinder • Owner class • 以 XML 檔案描述 UI，並支援 i18n • I18n: internationalization

  6. 使用 UiBinder • 使用 UiBinder精靈 • 建立一個新專案： • 專案名稱：ui • 套件：com.ui • 勾選 產生範例程式碼（Generate project sample code）

  7. 使用 UiBinder 續上一章的 gb 專案 在 com.gb.client 套件中按滑鼠右鍵，選擇「New/Other/展開Google Web Toolkit/UiBinder」，再按「Next」，開啟UiBinder 產生精靈

  8. 使用 UiBinder • HelloWidget.ui.xml • <ui:style> 相當於 CSS 樣式定義 • 定義一個名為 .important 的樣式，加黑字型 • 另有一個HTML的區塊，內有一個己套用了「.important」樣式的按鈕，按鈕的名稱為「button」 • Design 設計介面 • HelloWidget.java 是 HelloWidget.ui.xml 的 Owner class • 程式存取 XML 樣版中的元件 • 繼承 Composite 類別 • 以 uiBinder 的 createAndBindUi 方法將此類別與HelloWidget.ui.xml 的樣版綁在一起

  9. 將 HelloWidget加入 EntryPoint

  10. 將 HelloWidget加入 EntryPoint

  11. 測試 • 執行「ui專案」

  12. 實作聯絡人詳細資料 • 以實務常用的「聯絡人詳細資料」為例，以一個類似名片的畫面，利用UiBinder設計出類似以下的元件

  13. 實作聯絡人詳細資料 • ContactWidget.ui.xml

  14. 實作聯絡人詳細資料

  15. 測試 啟動 ui 專案後，開啟瀏覽器的畫面如下

More Related