GWT UI Binder用法

本文概述

• UI绑定器的路线图
• UI Binder示例

GWT UI Binder用于以声明方式定义用户界面, 即, 它将编程逻辑与使用GWT（Google Web Toolkit）构建的Web应用程序的UI分开。

GWT UI Binder是一个框架, 允许用户将GWT应用程序构建为HTML页面。 HTML是设计UI的最佳方法。

由于GWT基于Java, 因此如果开发人员熟悉XHTML, HTML, XML和CSS, 则可以在GWT中轻松设计UI。它类似于Servlet的JSP。

UI绑定器的路线图

步骤1：在XML文件中创建UI声明

步骤2：使用ui：field进行以后的绑定

步骤3：创建UI XML的Java副本

步骤4：使用UiField批注绑定Java UI字段

步骤5：将Java UI与带有UiTemplate批注的UI XML绑定

步骤6：建立CSS档案

步骤7：为CSS文件创建基于Java的资源文件

步骤8：在Java UI Code文件中附加CSS资源。

上面所有按顺序排列的步骤, 使开发人员可以创建GWT应用程序, 并将编程逻辑和前端或UI分开。

UI Binder示例

步骤1：要创建UiBinder, 请选择客户端软件包, 然后单击文件→新建→其他。在向导中, 键入UiBinder。

步骤2：选择UiBinder, 然后单击Next（下一步）。在下一个屏幕中, 输入UiBinder类的名称。将其他值保留为默认值。

步骤3：这是GWT配置文件。入口点和源。源指定了可翻译代码的路径。

GWTUiBinder.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtuibinder'>
<inherits name='com.google.gwt.user.User'/>
<inherits name='com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class='com.srcmini.client.GWTUiBinder'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
<add-linker name="xsiframe"/>
</module>

步骤4：编译即编译应用程序, 右键单击项目Google→GWT Compile。

这将从客户端类创建Java脚本代码。以下是将在Eclipse上显示的输出。

Compiling module com.srcmini.GWTUiBinder
Compiling 5 permutations
Compiling permutation 0...
Compiling permutation 1...
Compiling permutation 2...
Compiling permutation 3...
Compiling permutation 4...
Compile of permutations succeeded
Linking into E:\siddharth\study\eclipse-workspace\GWTUiBinder\war\gwtuibinder
Link succeeded
Compilation succeeded -- 28.010s

步骤5：运行应用程序

要运行该应用程序, 请在项目上单击鼠标右键, 选择“运行方式”→“ Web应用程序”（GWT经典开发模式）。

Initializing App Engine server
August 22, 2017 11:56:49 PM com.google.apphosting.utils.config.AppEngineWebXmlReaderreadAppEngineWebXml
INFO: Successfully processed E:\siddharth\study\eclipse-workspace\GWTUiBinder\war\WEB-INF/appengine-web.xml
August 22, 2017 11:56:49 PM com.google.apphosting.utils.config.AbstractConfigXmlReaderreadConfigXml
INFO: Successfully processed E:\siddharth\study\eclipse-workspace\GWTUiBinder\war\WEB-INF/web.xml
August 22, 2017 11:56:49 PM com.google.appengine.tools.development.SystemPropertiesManagersetSystemProperties
INFO: Overwriting system property key 'java.util.logging.config.file', value 'E:\siddharth\study\eclipse\plugins\com.google.appengine.eclipse.sdkbundle_1.9.19\
appengine-java-sdk-1.9.19\config\sdk\logging.properties' with value 'WEB-INF/
logging.properties' from 'E:\siddharth\study\eclipse-workspace\GWTUiBinder\war\WEB-INF\appengine-web.xml'
August 22, 2017 11:56:49 PM com.google.apphosting.utils.jetty.JettyLogger info
INFO: Logging to JettyLogger(null) via com.google.apphosting.utils.jetty.JettyLogger
August 22, 2017 11:56:50 PM com.google.appengine.tools.development.DevAppServerImplsetServerTimeZone
WARNING: Unable to set the TimeZone to UTC (this is expected if running on JDK 8)
August 22, 2017 11:56:50 PM com.google.apphosting.utils.jetty.JettyLogger info
INFO: jetty-6.1.x
August 22, 2017 11:56:56 PM com.google.apphosting.utils.jetty.JettyLogger info
INFO: Started SelectChannelConnector@0.0.0.0:8888
August 22, 2017 11:56:56 PM com.google.appengine.tools.development.AbstractModulestartup
INFO: Module instance default is running at http://localhost:8888/
August 22, 2017 11:56:56 PM com.google.appengine.tools.development.AbstractModulestartup
INFO: The admin console is running at http://localhost:8888/_ah/admin
August 22, 2017 11:56:56 PM com.google.appengine.tools.development.DevAppServerImpldoStart
INFO: Dev App Server is now running

该应用程序将输出一些日志, 如下所示：

然后, 应用程序将在“开发模式”窗口中显示URL, 如下所示：

http://127.0.0.1:8888/GWTUiBinder.html复制网址并在浏览器上运行。

输出：