GWT2.0新特性之UiBinder

在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+方法名即可表示相应的资源