GWT Task-3

[MontyPan]

Task-3

• 項目：UiBinder
• 完成條件：pull request accept

安裝 Eclipse Plugin

1. Eclipse ready
2. Menu Bar→Help→Eclipse Marketplace
3. 找「GWT Eclipse Plugin」然後安裝

注意：我用的還是很舊的版本（還叫 Google Plugin for Eclipse），不確定新版的支援 & 操作方式，但是看官方 repo 說是有支援 UiBinder Editor，有需要 call help。

技能介紹

UiBinder 是 GWT 當中設計 layout 的方式之一。
教學文件參見官網介紹（只需要看 1～7 節），
並搭配 GXT Example 學習 <ui:with> 的用法
（官網沒有直接介紹，跟著 style 手法一起講讓人混亂 ＝＝"）。

作業需求

用 UiBinder 寫出一個名為 Task-3 的 component，
使下面這個 entry point 可以作到這個網頁的效果：http://montypan.github.io/GYT/task2.html

	@Override
	public void start() {
		Viewport vp = new Viewport();
		vp.add(new Task3());
		RootPanel.get().add(vp);
	}

另外，當「問號」的 button 按下去時，用 Window.alert() 跳出一個 browser 的 alert 視窗（內容隨意）。

注意：

1. component 只能使用 VerticalLayoutContainer、HorizontalLayoutContainer、TextButton
2. layout 必須全部都在 Task3.ui.xml 當中定義，程式都得寫在 Task3.java 中
3. Eclipse（with GWT plugin）可以幫你產生 UiBinder（在 new 的選單可以找到），
   不過要注意，Task3 extend 的 class 必須改成 com.sencha.gxt.widget.core.client.Composite，
   不然畫面的大小會不正常。
4. GXT Example 的 ui.xml 程式碼，裡頭的 container:child 很多餘，所以我們也不會這樣寫。我直接給你一個等同意思的改良版本......

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder 
    xmlns:ui='urn:ui:com.google.gwt.uibinder' 
    xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client" 
    xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" 
    xmlns:b="urn:import:com.sencha.gxt.widget.core.client.button">

  <ui:with field="sideMargins" type="com.sencha.gxt.core.client.util.Margins">
    <ui:attributes top="10" right="10" bottom="10" left="10" />
  </ui:with>

  <ui:with field="centerMargins" type="com.sencha.gxt.core.client.util.Margins">
    <ui:attributes top="10" right="0" bottom="10" left="0" />
  </ui:with>

  <ui:with field="centerLayoutData" type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData">
    <ui:attributes width="0.5" height="1" margins="{centerMargins}" />
  </ui:with>

  <ui:with field="sideLayoutData" type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData">
    <ui:attributes width="0.25" height="1" margins="{sideMargins}" />
  </ui:with>

  <gxt:ContentPanel headingText="Horizontal Layout">
    <container:HorizontalLayoutContainer>
      <b:TextButton text="Test label 1" layoutData="{sideLayoutData}" />
      <b:TextButton text="Test label 2" layoutData="{centerLayoutData}" />
      <b:TextButton text="Test label 3" layoutData="{sideLayoutData}" />
    </container:HorizontalLayoutContainer>
  </gxt:ContentPanel>
</ui:UiBinder>

Task Feedback

此次 task 包含了兩個部份，分別是：

• 程式部份
  • 檔案名稱必定為 Task3.java、Task3.ui.xml，package 跟 entry point 一樣即可
• 文件部份
  • 以實作 Task-3 的過程經驗（這表示：即使你找得到，也請不要用 UiBinder 的 source code 來回答）
    試圖回答 UiBinder 的底層運作原理
  • 如果不懂要回答什麼，那也可以用「對 UiBinder 的疑惑」來代替（無論有沒有回答，你都可以問）
  • 寫在 Task3.md 當中，跟 Task3.java 放在一起即可

程式寫完先發 pull request，讓我可以先 review，然後文件再陸續補上，這樣比較節省時間。