GWT UI Binder用法 GWTUIBinder|GWT

本文概述

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副本
【GWT UI Binder用法】步骤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复制网址并在浏览器上运行。
输出：