在GWT2.0中提供了一個UiBinder類，通過它我們可以使用XML語言對界面進行描述，這種操作叫作綁定。通過UiBinder，可以實現許多功能：HTML綁定、控件綁定、CSS綁定、事件管理、資源打包、創建控件等
一、html綁定
新建一個Google Web Application Project，然後在其client包內新建一個UiBinder，命名爲HtmlBind，那麼系統會自動的生成一個HtmlBind.java和一個HtmlBind.ui.xml文件，然後將裏面的默認生產代碼全部清空（等你熟練後可以有選擇的進行處理）
將HtmlBind.ui.xml修改成如下代碼：
<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<div>
<input type="text"></input>
<input type="button" value="adc" ui:field="mybutton"></input>
</div>
</ui:UiBinder>
可以看到這個文件中直接嵌入的一段標準的html代碼。然後在HtmlBind.java中實現綁定。代碼如下
//自定義控件HtmlBind
public class HtmlBind extends Widget{
//定義繼承自UiBinder的接口
//第一個泛型參數 用來指定對應的xml文件綁定後生成的UI對象的類型，因爲在HtmlBind.ui.xml
//中根節點下是一個div對象，所以這裏使用DivElement
//第二個泛型參數 用來指定與生成的UI對象綁定的對象的 類型
interface MyUiBinder extends UiBinder <DivElement,HtmlBind>{}
//通過GWT的延遲綁定創建MyUiBinder的一個實例
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
//這是兩步：第一步聲明一個InputElement類型的變量，變量名應該與xml文件中的ui:field的值一致。
//第二步：給這個變量加一個註解，這樣在綁定後mybutton就可以代表xml中對應的元素了
@UiField InputElement mybutton;
public HtmlBind(String buttonText){
//通過綁定創建一個UI,並將其添加到HtmlBind中
setElement(uiBinder.createAndBindUi(this));
//通過mybutton，設置屬性ui:field值爲button的按鈕
mybutton.setValue(buttonText);
}
}
爲了實現效果，你需要在該項目的入口實現類中的onModuleLoad方法中添加代碼：
//測試 html綁定
RootPanel.get().add(new HtmlBind("visit"));
好了，運行看看結果吧
二、控件綁定
UiBinder支持對GWT控件的綁定，用（一）中的辦法再創建一個新的綁定ControlBind，ControlBind.ui.xml中代碼如下：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:FlowPanel>
<g:TextBox>
</g:TextBox>
<g:Button ui:field="mybutton" text="mybutton"></g:Button>
</g:FlowPanel>
</ui:UiBinder>
注意：在ControlBind.ui.xml中添加了一個名稱空間g。
ControlBind.java中代碼如下（注意與綁定html時的幾個不同之處）：
//因爲在這個類中要綁定Widget，所以這個類不能再繼承自Widget而必須繼承自其內部能包含Widget的控件，這裏使用了Composite
public class ControlBind extends Composite {
//定義綁定接口
//因爲綁定的 是一個控件，所以指定綁定返回的對象類型爲Widget
interface Binder extends UiBinder<Widget, ControlBind>{}
private static Binder binder = GWT.create(Binder.class);
@UiField Button mybutton ;
//在構造器中實現綁定
public ControlBind(String buttonText){
initWidget(binder.createAndBindUi(this));
mybutton.setHTML(buttonText);
}
}
三、CSS綁定
CSS綁定的方式有三種：直接添加、通過別名添加（樣式名稱相同時使用）、以編程方式設置(在資源打包中使用) 創建一個新的綁定：CSSBind，在CSSBind.ui.xml中添加代碼如下：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder">
<ui:style type="com.gwt.uibind.client.CSSBind.MyStyle">
.bluebox{
border:3px solid blue;
width:20px;
height:20px;
}
</ui:style>
<div>
<!-- css綁定的第一種方式，直接將這個樣式添加到div元素上，綁定div時也就實現了css的綁定
<div class="'{style.bluebox}'"></div>
-->
<!-- 綁定方式二：通過別名來添加
<div class="'{box1.redbox}'"></div>-->
<!-- 編程方式設置樣式
<div></div>
-->
<input type="text" value="css綁定"></input>
</div>
</ui:UiBinder>
CSSBind.java中代碼如下：
public class CSSBind extends Widget {
//定義綁定接口
interface MyBinder extends UiBinder<DivElement, CSSBind>{}
//生成綁定器
private static MyBinder myBinder = GWT.create(MyBinder.class);
//定義與css類型一致的接口，注意與xml文件中的type一致
interface MyStyle extends CssResource{
//添加一個方法，方法名同樣式名，返回的是編譯後的樣式名
String bluebox();
}
@UiField MyStyle style;
//在構造器中實現綁定
public CSSBind(){
DivElement div = myBinder.createAndBindUi(this);
//添加樣式
div.addClassName(style.bluebox());
setElement(div);
}
}
注意CSS也可以以獨立的文件存在，這是可以通過src屬性來引用：
<ui:style src="mystyle.css">
四、事件管理
創建新的綁定EventBind，在EventBind.ui.xml中添加代碼如下：
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:FlowPanel>
<g:TextBox>
</g:TextBox>
<g:Button ui:field="mybutton" text="mybutton"></g:Button>
</g:FlowPanel>
</ui:UiBinder>
在EventBind.java中添加代碼如下：
public class EventBind extends Composite {
//定義綁定接口
//因爲綁定的 是一個控件，所以指定綁定返回的對象類型爲Widget
interface Binder extends UiBinder<Widget, EventBind>{}
//生成綁定器
private static Binder binder = GWT.create(Binder.class);
@UiField Button mybutton ;
@UiHandler("mybutton")
void onClick(ClickEvent event){
Window.alert("event bind");
}
//在構造器中實現綁定
public EventBind(String buttonText){
initWidget(binder.createAndBindUi(this));
mybutton.setHTML(buttonText);
}
}
5、資源打包
在GWT2.0中提供了一個通用打包類ClientBundle，它可以支持圖片、文字文件的打包。
在GWT提供的Mail示例的Mailboxes.java中使用了資源打包，代碼如下：
public interface Images extends ClientBundle, Tree.Resources {
ImageResource drafts();
ImageResource home();
ImageResource inbox();
ImageResource sent();
ImageResource templates();
ImageResource trash();
@Source("noimage.png")
ImageResource treeLeaf();
}
說明：用@Source註解告訴GWT該函數綁定一個外部資源，參數來指明資源路徑，這是一個相對路徑（相對於當前類所在位置），當在同一個包下，資源名與方法名相同時註解可省略
綁定後的使用如下：
Images images = GWT.create(Images.class);
images+方法名即可表示相應的資源
