📌  相关文章
📜  GWT UI活页夹

📅  最后修改于: 2021-01-02 12:49:35             🧑  作者: Mango

GWT UI活页夹

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：将Java UI字段与UiField批注绑定

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

步骤6：建立CSS档案

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

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

上面所有按顺序排列的步骤都允许开发人员创建具有编程逻辑和前端或UI分离的GWT应用程序。

UI活页夹示例

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

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

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

GWTUiBinder.gwt.xml

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

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

Compiling module com.javatpoint.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复制URL并在浏览器上运行。

输出：