GWT - UiBinder

GWT UiBinder - 从基本概念到高级概念，从简单简单的步骤学习Google Web Toolkit（GWT）编程，其中包括概述，环境设置，Web应用程序创建，部署和调试应用程序，CSS样式，组件模型，基本，表单和复杂小部件，布局面板，事件处理，自定义小部件，UIBinder，RPC通信，JUnit集成，国际化，历史类，书签支持，日志框架。

简介

UiBinder是一个用于分离功能和用户界面视图的框架.

UiBinder框架允许开发人员将gwt应用程序构建为HTML页面，并在其中配置GWT小部件.
UiBinder框架可以更轻松地与比Java源代码更熟悉XML，HTML和CSS的UI设计人员
UIBinder提供了一种定义用户界面的声明方式.
UIBinder从UI中分离出程序逻辑.
UIBinder类似于JSP对Servlets的作用.

UiBinder工作流程

步骤1 - 创建UI声明XML文件

创建基于XML/HTML的用户界面声明文件.我们在示例中创建了一个 Login.ui.xml 文件.

...

第2步 - 使用ui:字段进行后期绑定

在XML/HTML元素中使用ui:field属性将XML中的UI字段与JAVA文件中的UI字段相关联，以便以后绑定.

步骤3 - 创建UI XML的Java对应物

通过扩展Composite小部件，创建基于XML的基于XML的布局.我们在示例中创建了一个 Login.java 文件.

package com.it1352.client;    ...public class Login extends Composite {   ...}

第4步 - 使用UiField批注绑定Java UI字段

在 Login.java 中使用@UiField批注指定对应的类成员绑定到登录中基于XML的字段.ui.xml

public class Login extends Composite {   ...   @UiField   Label completionLabel1;   @UiField   Label completionLabel2;     ...}

步骤5 - 使用带有UiTemplate注释的UI XML绑定Java UI

指示GWT使用@UiTemplate注释绑定基于java的组件 Login.java 和基于XML的布局 Login.ui.xml

public class Login extends Composite {   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);   /*    * @UiTemplate is not mandatory but allows multiple XML templates    * to be used for the same widget.     * Default file loaded will be .ui.xml    */      @UiTemplate("Login.ui.xml")   interface LoginUiBinder extends UiBinder {   }   ...}

第6步 - 创建CSS文件

创建一个外部CSS文件 Login.css 和基于Java的Resource LoginResources.java 文件等效于css样式

.blackText {   font-family: Arial, Sans-serif;   color: #000000;   font-size: 11px;   text-align: left;}...

第7步 - 为CSS文件创建基于Java的资源文件

package com.it1352.client; ...public interface LoginResources extends ClientBundle {   public interface MyCss extends CssResource {      String blackText();      ...   }   @Source("Login.css")   MyCss style();}

步骤8 - 在Java UI代码文件中附加CSS资源.

附加外部CSS文件 Login.css 使用基于Java的小部件类的构造函数 Login.java

public Login() {   this.res = GWT.create(LoginResources.class);   res.style().ensureInjected();   initWidget(uiBinder.createAndBindUi(this));}

UIBinder完成示例

此示例将指导您完成显示a的用法的简单步骤GWT中的UIBinder.按照以下步骤更新我们在 GWT - 创建应用程序章节中创建的GWT应用程序;

步骤	描述
1	在包 com.it1352下创建一个名为 HelloWorld 的项目，如下所述在 GWT - 创建应用程序章节.
2	修改 HelloWorld.gwt.xml ， HelloWorld.css ， HelloWorld.html 和 HelloWorld.java 如下所述.保持其余文件不变.
3	编译并运行应用程序以验证实现的逻辑的结果.

以下是修改后的模块描述符的内容 src/com.it1352/HelloWorld.gwt.xml.

以下是修改后的样式表文件的内容 war/HelloWorld.css .

body {   text-align: center;   font-family: verdana, sans-serif;}h1 {   font-size: 2em;   font-weight: bold;   color: #777777;   margin: 40px 0px 70px;   text-align: center;}

以下是修改过的HTML主机文件的内容 war/HelloWorld.html .

         Hello World                              UiBinder Demonstration

现在创建一个新的UiBinder模板和所有者类(File → New → UiBinder).

GWT UiBinder Wizard步骤1

选择项目的客户端软件包，然后将其命名为Login.保留所有其他默认值.单击Finish按钮，插件将创建一个新的UiBinder模板和所有者类.

GWT UiBinder Wizard Step 2

现在在 src/com.it1352/客户端包中创建Login.css文件并将以下内容放入其中

.blackText {   font-family: Arial, Sans-serif;   color: #000000;   font-size: 11px;   text-align: left;}.redText {   font-family: Arial, Sans-serif;   color: #ff0000;   font-size: 11px;   text-align: left;}.loginButton {   border: 1px solid #3399DD;   color: #FFFFFF;   background: #555555;   font-size: 11px;   font-weight: bold;   margin: 0 5px 0 0;   padding: 4px 10px 5px;   text-shadow: 0 -1px 0 #3399DD;}.box {   border: 1px solid #AACCEE;   display: block;   font-size: 12px;   margin: 0 0 5px;   padding: 3px;   width: 203px;}.background {   background-color: #999999;   border: 1px none transparent;   color: #000000;   font-size: 11px;   margin-left: -8px;   margin-top: 5px;   padding: 6px;}

现在在 src/com.it1352/客户端包中创建LoginResources.java文件并放置以下内容

package com.it1352.client; import com.google.gwt.resources.client.ClientBundle;import com.google.gwt.resources.client.CssResource;public interface LoginResources extends ClientBundle {   /**    * Sample CssResource.    */   public interface MyCss extends CssResource {      String blackText();      String redText();      String loginButton();      String box();      String background();   }   @Source("Login.css")   MyCss style();}

将 src/com.it1352/客户端包中的Login.ui.xml内容替换为以下

用以下替换 src/com.it1352/客户端包中的Login.java的内容b $ b

package com.it1352.client; import com.google.gwt.core.client.GWT;import com.google.gwt.event.dom.client.ClickEvent;import com.google.gwt.event.logical.shared.ValueChangeEvent;import com.google.gwt.uibinder.client.UiBinder;import com.google.gwt.uibinder.client.UiField;import com.google.gwt.uibinder.client.UiHandler;import com.google.gwt.uibinder.client.UiTemplate;import com.google.gwt.user.client.Window;import com.google.gwt.user.client.ui.Composite;import com.google.gwt.user.client.ui.Label;import com.google.gwt.user.client.ui.TextBox;import com.google.gwt.user.client.ui.Widget;public class Login extends Composite {   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);   /*    * @UiTemplate is not mandatory but allows multiple XML templates    * to be used for the same widget.     * Default file loaded will be .ui.xml    */   @UiTemplate("Login.ui.xml")   interface LoginUiBinder extends UiBinder {   }   @UiField(provided = true)   final LoginResources res;   public Login() {      this.res = GWT.create(LoginResources.class);      res.style().ensureInjected();      initWidget(uiBinder.createAndBindUi(this));   }   @UiField   TextBox loginBox;   @UiField   TextBox passwordBox;   @UiField   Label completionLabel1;   @UiField   Label completionLabel2;   private Boolean tooShort = false;   /*    * Method name is not relevant, the binding is done according to the class    * of the parameter.    */   @UiHandler("buttonSubmit")   void doClickSubmit(ClickEvent event) {      if (!tooShort) {         Window.alert("Login Successful!");      } else {         Window.alert("Login or Password is too short!");      }   }   @UiHandler("loginBox")   void handleLoginChange(ValueChangeEvent event) {      if (event.getValue().length() < 6) {         completionLabel1.setText("Login too short (Size must be > 6)");         tooShort = true;      } else {         tooShort = false;         completionLabel1.setText("");      }   }   @UiHandler("passwordBox")   void handlePasswordChange(ValueChangeEvent event) {      if (event.getValue().length() < 6) {         tooShort = true;         completionLabel2.setText("Password too short (Size must be > 6)");      } else {         tooShort = false;         completionLabel2.setText("");      }   }}

让我们有以下Java文件内容 src/com.it1352/HelloWorld.java 将演示使用UiBinder.

package com.it1352.client; import com.google.gwt.core.client.EntryPoint;import com.google.gwt.user.client.ui.RootPanel;public class HelloWorld implements EntryPoint {   public void onModuleLoad() {      RootPanel.get().add(new Login());      }    }

完成所有更改后，让我们在开发模式下编译并运行应用程序在 GWT - 创建应用程序章节中做了.如果您的应用程序一切正常，这将产生以下结果 :

GWT UiBinder Demo