UiBinder是一个用于分离功能和用户界面视图的框架.
UiBinder框架允许开发人员将gwt应用程序构建为HTML页面,并在其中配置GWT小部件.
UiBinder框架可以更轻松地与比Java源代码更熟悉XML,HTML和CSS的UI设计人员
UIBinder提供了一种定义用户界面的声明方式.
UIBinder从UI中分离出程序逻辑.
UIBinder类似于JSP对Servlets的作用.
创建基于XML/HTML的用户界面声明文件.我们在示例中创建了一个 Login.ui.xml 文件.
<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder' xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' xmlns:res = 'urn:with:com.IT屋.client.LoginResources'> <ui:with type = "com.IT屋.client.LoginResources" field = "res"> </ui:with> <gwt:HTMLPanel> ... </gwt:HTMLPanel> </ui:UiBinder>
在XML/HTML元素中使用ui:field属性将XML中的UI字段与JAVA文件中的UI字段相关联,以便以后绑定.
<gwt:Label ui:field = "completionLabel1" /> <gwt:Label ui:field = "completionLabel2" />
通过扩展Composite小部件,创建基于XML的基于XML的布局.我们在示例中创建了一个 Login.java 文件.
package com.it1352.client; ... public class Login extends Composite { ... }
在 Login.java 中使用@UiField批注指定对应的类成员绑定到登录中基于XML的字段.ui.xml
public class Login extends Composite { ... @UiField Label completionLabel1; @UiField Label completionLabel2; ... }
指示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 <class-name>.ui.xml */ @UiTemplate("Login.ui.xml") interface LoginUiBinder extends UiBinder<Widget, Login> { } ... }
创建一个外部CSS文件 Login.css 和基于Java的Resource LoginResources.java 文件等效于css样式
.blackText { font-family: Arial, Sans-serif; color: #000000; font-size: 11px; text-align: left; } ...
package com.it1352.client; ... public interface LoginResources extends ClientBundle { public interface MyCss extends CssResource { String blackText(); ... } @Source("Login.css") MyCss style(); }
附加外部CSS文件 Login.css 使用基于Java的小部件类的构造函数 Login.java
public Login() { this.res = GWT.create(LoginResources.class); res.style().ensureInjected(); initWidget(uiBinder.createAndBindUi(this)); }
此示例将指导您完成显示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.
<?xml version = "1.0" encoding = "UTF-8"?> <module rename-to = 'helloworld'> <!-- Inherit the core Web Toolkit stuff. --> <inherits name = 'com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. --> <inherits name = 'com.google.gwt.user.theme.clean.Clean'/> <!-- Inherit the UiBinder module. --> <inherits name = "com.google.gwt.uibinder.UiBinder"/> <!-- Specify the app entry point class. --> <entry-point class = 'com.IT屋.client.HelloWorld'/> <!-- Specify the paths for translatable code --> <source path ='client'/> <source path = 'shared'/> </module>
以下是修改后的样式表文件的内容 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 .
<html> <head> <title>Hello World</title> <link rel = "stylesheet" href = "HelloWorld.css"/> <script language = "javascript" src = "helloworld/helloworld.nocache.js"> </script> </head> <body> <h1>UiBinder Demonstration</h1> <div id = "gwtContainer"></div> </body> </html>
现在创建一个新的UiBinder模板和所有者类(File → New → UiBinder).
选择项目的客户端软件包,然后将其命名为Login.保留所有其他默认值.单击Finish按钮,插件将创建一个新的UiBinder模板和所有者类.
现在在 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内容替换为以下
<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder' xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' xmlns:res = 'urn:with:com.IT屋.client.LoginResources'> <ui:with type = "com.IT屋.client.LoginResources" field = "res"> </ui:with> <gwt:HTMLPanel> <div align = "center"> <gwt:VerticalPanel res:styleName = "style.background"> <gwt:Label text = "Login" res:styleName = "style.blackText" /> <gwt:TextBox ui:field="loginBox" res:styleName = "style.box" /> <gwt:Label text = "Password" res:styleName = "style.blackText" /> <gwt:PasswordTextBox ui:field = "passwordBox" res:styleName = "style.box" /> <gwt:HorizontalPanel verticalAlignment = "middle"> <gwt:Button ui:field = "buttonSubmit" text="Submit" res:styleName = "style.loginButton" /> <gwt:CheckBox ui:field = "myCheckBox" /> <gwt:Label ui:field = "myLabel" text = "Remember me" res:styleName = "style.blackText" /> </gwt:HorizontalPanel> <gwt:Label ui:field = "completionLabel1" res:styleName = "style.blackText" /> <gwt:Label ui:field = "completionLabel2" res:styleName = "style.blackText" /> </gwt:VerticalPanel> </div> </gwt:HTMLPanel> </ui:UiBinder>
用以下替换 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 <class-name>.ui.xml */ @UiTemplate("Login.ui.xml") interface LoginUiBinder extends UiBinder<Widget, Login> { } @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<String> 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<String> 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 - 创建应用程序章节中做了.如果您的应用程序一切正常,这将产生以下结果 :