GWT UIbinder

来源：互联网发布：平田真悲剧男知乎编辑：程序博客网时间：2024/05/21 10:37

GWT UIbinder

2010-11-11 20:32:50| 分类：GWT | 标签：gwt uibinder youbinliu liuyoubin |字号大中小订阅

在Google code的GWT英文文档中新添加了GWT UIbinder
这个主要是在自定义页面模板中有很重要的作用，还有就是类似ASP.NET单页面式绑定。其中主要有HTML绑定，事件绑定，CSS样式等资源绑定，总之就是对一个模板页面（XML）实现变量共享控制。与ASP.NET实现机制不一样的是，GWT核心思想是客户端JS突出，而不是基于C/S的事件机制。所以这个绑定最终也是JS代码，是客户端的UI 逻辑。
以下是一些小DEMO

一、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>

        
        

        
        <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="http://liuyoubin1118611.blog.163.com/blog/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+方法名即可表示相应的资源