GWT之UiEditor

96
安之不安
2016.08.15 22:04* 字数 1544
  1. UiEditor概述
    1.1 什么UiEditor?

    UiEditor是GWT(Google Web Toolkit)所提供的一种框架。

1.1.1 UiEditor有什么用处?

UiEditor是用来在Client和Server中的JavaBean进行数据绑定。比如:在系统的Client端有一个form表单,具有两个TextBox输入框(name和title),在Server端有一个JavaBean,具有两个Fields(name和title)。通过UiEditor框架,可以将这两个属性自动映射到对应的JavaBean中,进行数据的直接存储与查询。

1.1.2 使用UiEditor需要什么?

The Editor framework is meant to perform this work for you by automatically mapping bean fields to, usually, UI elements. It does this by using a driver, known as SimpleBeanEditorDriver, to take defined values from your UI, known as the editor,and synchronize them with a local (on the client) JavaBean。上面解释到,当你要进行属性的自动映射,需要使用SimpleBeanEditorDriver(映射本地JavaBean的情况下)这个接口驱动。
使用UiEditor主要需要四个方面:Domain object(Javabean)、Editor、Editor的子接口、Driver

  1. UiEditor的使用

a) 对象之间的合作

i. The editor需要将Client的数据存储到JavaBean
ii. The editor需要将JavaBean的数据查询并显示在Client端
上述两个操作,是由UiEditor框架的两个接口(SimpleBeanEditorDriver、RequestFactoryEditorDriver)提供的两个方法—flush、edit。
如下图2-1:


图2-1

图中,Editor的数据,通过Driver的子接口(SimpleBeanEditorDriver或RequestFactoryEditorDriver)的Flush方法将数据存储在DomainObejct(JavaBean)中,反之亦然。
b) Example
为了整体的了解UiEditor的使用,我们通过一个例子来解释,见下图:

图2-2

第一步:编写用来存储数据的JavaBean—Employee, 他具有三个Fields(属性)—id、name、title。

图2-3

注:每个属性,必须要有对应的get和set方法,不然无法进行
第二步:使用UiBinder创建Client并进行Editor映射(UiBinder的具体内容请参考UiBinder详解,这里只对涉及到的进行讲述)
EmployeeEditor.java

图2-4

因为我们只是创建一个简单的控件,所以需要继承Composite,此类有一个初始化控件(Widget)的方法initWidget(),同时,必须实现Editor接口,此接口是一个泛型,需要将Javebean绑定为Employee,所以泛型传入Employee。其中声明了一个内部接口EmployeeEditorUiBinder,此接口为实现UiBinder必须有的,具体原因参见UiBinder详解
每一个EmployeeEditorUiBinder接口都对应一个EmployeeEditor.ui.xml配置文件,详细内容参见UiBinder详解。第5行代码中实例化EmployeeEditorUiBinder接口为uiBinder,并通过GWT.create进行延迟绑定。

在EmployEditor类中,我们声明了三个参数,参数类型分别为TextBox、Label。此类型对应的是EmployeeEditor.ui.xml中的类型。@UiField是UiBinder中的注解,用来将.ui.xml的属性与本类中的属性进行绑定。如果我们没有显式的声明@Path,则此类的属性会与Employee.java中的属性名一一对应,前提是此类中的属性名要与JavaBean中的属性名相同,如果不同,则需要加上@Path(value=” ”),其中value为对应的javaBean中的属性。@Ignore注解是忽略映射,就是此id映射到JavaBean中的id。
在构造方法中,通过uiBinder.createAndBindUi()将
.ui.xml绑定成Widget。
EmployeeEditor.ui.xml

图2-5

上述xml文件中,我们声明了一个html页面中的Body标签对应的HTMLPanel类,HTMLPanel类具有诸如FlowPanel等子类。 需要注意的是,第9行代码中ui:field=“name”的意思是引用EmployeeEditor中的属性,他的属性名叫name,类型是TextBox,同时在EmployeeEditor中的name属性需要加上@UiFiled注解,这样xml中的属性就与类中的属性进行了绑定。
第三步:创建图2-1中的Driver-EmployeeView.java。
在该类中,我们创建了三个按钮,用来触发flush、edit和EmployEditor.java中对应的resetValues()方法。
EmployeeView.java

图2-6
续图2-6
续图2-6

现在让我们来解释这样的一个类。
因为我们需要在前台显示三个触发不同事件的button,所以需要继承composite,理由跟EmployEditor一样。
重点在于25行,我们需要声明一个内部接口Driver派生于SimpleBeanEditorDriver,该接口是个泛型,第一个泛型参数为你的JavaBean,第二个泛型参数为你的Editor,通过这样的一个结合,我们整个UiEditor的流程就已经打通。
31行中,我们通过GWT.create()方法实例化Driver接口,之后我们就能调用Driver中的flush和edit方法了。
通过@UiField注解来绑定EmployeeView.ui.xml中的对应的ui:field。在该类的构造方法中,通过调用driver.initialize()和driver.edit()来初始化editor driver和Push the data in an object graph into the Editor given to initialize(E)。
@UiHandler为UiBinder中的注解,@UiHandler(“saveEmployeeButton”)的意思就是给EmployeeView.ui.xml中的ui:field的属性名叫saveEmployeeButton的属性绑定一个事件。事件的属性是该方法传入的参数,本例中传入的参数是ClickEvent,则为点击事件。该方法中的driver.flush(),就是将数据存储到JavaBean中。
EmployeeView.ui.xml

图2-7

第四步:走完前三步,我们要做的基本完成,最后一步就是要运行了,要运行GWT项目,首先得有一个入口,这个入口是需要实现EntryPoint接口,并且实现此接口中的onMoudleLoad()方法。

图2-8

最终效果

图2-9


当点击Save时,会将数据保存到JavaBean,点击Get按钮,就能从JavaBean获取到上一步你Save的信息了。

因为当时是写在word文档里面,好像直接复制的时候会把word的样式也复制过来,然后通过notePad++转换。理解这个需要一些基本的GWT基础知识。

GWT