GWT之UiEditor

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

2. 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基础知识。