GWT 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。 它类似于 JSP 之于 Servlets。

UI Binder 路线图

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

步骤 2： 使用 ui:field 进行延迟绑定

步骤 3： 创建 UI XML 的 Java 对应项

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

步骤 5： 使用 UiTemplate 注解将 Java UI 与 UI XML 绑定

步骤 6： 创建 CSS 文件

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

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

以上所有步骤按顺序执行，使开发人员能够创建 GWT 应用程序，并将编程逻辑与前端或 UI 分离开来。

UI Binder 示例

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

步骤 2： 选择 UiBinder，然后单击“下一步”。在下一个屏幕中，给出 UiBinder 类的名称。 将其他值保留为默认值。

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

GWTUiBinder.gwt.xml

步骤 4：编译 i.e. 要编译应用程序，请右键单击项目，选择“Google”→“GWT 编译”。

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

步骤 5：运行应用程序

要运行应用程序，请右键单击项目，选择“运行为”→“Web 应用程序 (GWT Classic Dev Mode)”。

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

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

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

输出