vlambda博客
学习文章列表

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Chapter 5. Using GWT

Google Web Toolkit (GWT) 是一个用于开发复杂模型的 工具包-View-Presenter 模型,基于浏览器的 Web 应用程序。使用 GWT SDK 将客户端应用程序开发为 Java 并部署为已编译的 JavaScript。除了 Java API 之外,GWT 还提供了与 Ajax 支持集成在一起的小部件。在第4章中,使用 Ajax,我们使用 XMLHttpRequest 对象开发了一个 Ajax 应用程序,其中涉及创建、发送和处理 Ajax 请求。 GWT SDK 编译器将 Java 编译成 JavaScript,其中包括优化以在所有浏览器上运行的 XMLHttpRequest

本章由以下部分组成:

  • 设置环境

  • 在 WildFly 8.1 上运行启动项目

  • 创建 GWT 项目

  • 创建一个模块

  • 创建一个入口点类

  • 创建 HTML 页面

  • 使用 Maven 部署 GWT 项目

  • 运行 GWT 项目

Setting up the environment


我们需要安装以下软件:

GWT 版本 必须是 2.6。原因是 Eclipse 的 Google 插件支持 2.6 版本而不是 2.7。将 GWT ZIP 文件解压缩到 C: 驱动器。设置环境变量JAVA_HOMEJBOSS_HOMEMAVEN_HOME。添加%JAVA_HOME%/bin%MAVEN_HOME%/bin%JBOSS_HOME%/ binPATH 环境变量。创建 WildFly 8.1 运行时,如 章节中所述。 1EJB 3.x 入门。在 Eclipse IDE 中安装 JDK 7 并将 JDK 合规级别设置为 1.7。要设置 JDK 合规级别,请选择 Windows | 首选项。在 Preferences 中,选择 Java | 编译器。选择Compiler compliance level1.7,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

我们还需要通过执行以下步骤安装 Google Plugin for Eclipse:

  1. 在 Eclipse 中,选择 帮助 | 安装新软件。在安装(可用软件)向导中,点击添加添加 GWT 存储库。在 Add Repository 中,指定 NameGoogle Plugin for Eclipse 4.4) 并将 Location 指定为 https://dl.google.com/eclipse/plugin/4.4 ,如下图所示。之后,点击 OK

    读书笔记《advanced-java-ee-development-with-wildfly》使用GWT
  2. Work With 中,选择 Google Plugin for Eclipse 4.4 存储库。从列出的项目中,选择 Google Plugin for Eclipse(必需)GWT Designer for GPE< /strong>SDK | Google Web Toolkit SDK 2.6.0,如下图所示。然后,点击下一步

    读书笔记《advanced-java-ee-development-with-wildfly》使用GWT
  3. Install Details中,列出了要安装的不同的项目,包括Google Plugin for Eclipse 4.4Google Web Toolkit SDK 2.6.0 ,如以下屏幕截图所示。现在,点击下一步

    读书笔记《advanced-java-ee-development-with-wildfly》使用GWT
  4. 查看许可中,选择我接受许可协议的条款 并点击 完成。安装了 Google Eclipse 插件。

Running the starter project on WildFly 8.1


GWT SDK 入门部分(https://developers.google.com/web-toolkit/gettingstarted),创建第一个网站< /a> 讨论应用程序。在本节中,我们将创建启动应用程序并在 WildFly 8.1 上运行应用程序。使用 webAppCreator 创建应用程序。将目录(使用 cd 命令)更改为 GWT 安装目录并运行以下命令来创建启动器 Web 应用程序。

>cd gwt-2.6.0
>webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp

应用程序 被创建,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

GWT 2.6 应用程序的目录结构如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Creating a GWT project in Eclipse


在本节中,我们 将在 WildFly 上运行启动应用程序。我们将在 Eclipse 中使用 Maven 编译和打包应用程序。首先,我们需要将 GWT 应用程序导入 Eclipse。

在 Eclipse 中,选择 File | | 其他。在 New 中,选择 JBoss Central | Java EE Web 项目,如以下屏幕截图所示。然后,点击下一步

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

测试获取 运行 的要求,其中包括 m2em2eclipse-wtp 插件、JBoss Maven 工具插件和 GWT 插件,如下图所示。点击创建一个空白项目复选框并选择WildFly 8.x Runtime< /span> 作为 目标运行时。现在,点击下一步

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

新建项目示例向导 要创建 Java EE Web 项目,请指定 项目名称 (jboss- gwt) 和 Package (com.mycompany.mywebapp),如图如下截图,然后点击下一步

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

指定 组 ID (com. mycompany.mywebapp), 工件 ID (jboss-gwt), 版本1.0.0)和包< /strong> (com.mycompnay.mywebapp),如以下屏幕截图中的 .之后,点击 Finish

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

jboss-gwt 项目 被创建。但是,生成的 GWT 项目 不是我们要运行的项目。删除 jboss-gwt 项目的 \\jboss-gwt\src\main\java 文件夹和 \\jboss-gwt\src\main\webapp 文件夹。将命令行中为starter GWT web应用程序生成的C:\gwt-2.6.0\MyWebApp\src文件夹文件添加到jboss -gwt 项目的 \\jboss-gwt\src\main\java 文件夹。然后,将C:\GWT\gwt-2.6.0\MyWebApp\war目录下的文件复制到\\jboss-gwt\ src\main\webapp 目录。选择文件 | Refresh 刷新应用程序文件夹。入门 GWT Web 应用程序显示在 Project Explorer 中,如下所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Deploying the starter project to WildFly 8.1


在本节中,我们 将编译、打包和部署 GWT 入门网站应用到 WildFly 8.1。 jboss-gwt 项目的 JDK 合规级别应设置为 1.7。全局 Java 编译器 JDK 合规性较早设置为 1.7 — 适用于每个项目的全局设置。如果需要设置项目级别的JDK合规性,右键单击jboss-gwt项目和 选择属性。在 Properties 中,选择 Java Compiler 节点。选择 Compiler compliance level1.7 并点击 好的。如果全局 JDK 合规性设置为 1.7,则项目级别JDK合规性不需要单独设置。

pom.xml 中的 Maven WAR 插件配置中,将输出目录指定为 WildFly 8.1 的 deployments 目录,如下所示:

<plugin>
  <artifactId>maven-war-plugin</artifactId>
  <version>2.1.1</version>
  <configuration>
    <outputDirectory>C:\wildfly-8.1.0.Final\standalone\deployments</outputDirectory>
  </configuration>
</plugin>

完整的 pom.xml 文件可在可下载的代码 zip 中找到。将项目依赖项添加到 pom.xml 后,GWT 应用程序文件中的错误将被删除,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

启动 WildFly 8.1 服务器。在 Project Explorer中,右击pom.xml 并选择 Run As | Maven 安装,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

jboss-gwt 应用程序 被编译、打包并部署到 WildFly 8.1。 Maven pom.xml 构建和配置脚本 输出消息 < strong>BUILD SUCCESS,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

jboss-gwt.war 应用程序 获取 部署到 WildFly 8.1。现在,使用 URL http://localhost:8080Administration Console >,然后点击 管理部署jboss-gwt.war 文件应列为已部署,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Running the starter project on WildFly 8.1


在本节中,我们将运行在命令上生成的starter GWT web应用程序行并添加到 Eclipse 中的 Java EE Web 项目中。使用 URL http://localhost:8080/jboss-gwt/MyWebApp.html 调用 GWT HTML 页面。 Web Application Starter Project 用户界面显示在浏览器中。指定名称并点击发送,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

用户 name 被发送到 WildFly 8.1 服务器 和来自服务器的回复被接收并显示在浏览器中,如下图所示。然后,点击关闭

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Creating a new GWT project


讨论了启动GWT web 项目之后,我们将创建一个新的GWT web 应用程序。选择文件 | | Eclipse 中的其他。在 New 中,选择 Google | Web Application Project,点击Next,如图以下屏幕截图:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

New Web Application Project 向导开始。指定 项目名称 (gwt-jboss-ajax) 和 org.jboss.gwt)。为 Location 选择默认设置。在 Google SDKs 中,点击 Use Google Web Toolkit 复选框并点击Configure SDKs,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Preferences 的过滤版本仅在 Google 中列出 | 网络工具包。点击Add添加一个新的SDK,如下图截屏:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Add Google Web Toolkit SDK 中,为 GWT 选择 安装目录 2.6 (C:\gwt-2.6) Display namegwt-2.6.0,如下图所示。然后,点击确定

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

将 GWT SDK 添加到 Preferences,如下面的屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

New Web Application Project向导中,点击 ="strong">创建 Web 应用程序项目 窗口。点击完成

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

一个 Google Web Application 项目,本质上是一个 GWT 项目,使用以下屏幕截图所示的目录结构创建:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

一个典型的 GWT Web 项目由以下文件、模块和页面组成:

  • 要编译成 JavaScript 的客户端 Java 源文件。来自 GWT SDK Java API 的 GWT 小部件可以添加到客户端 Java 源文件中。

  • 服务器Java源文件,可以实现一些服务逻辑。

  • GWT 模块,用于指定 GWT 项目的配置。 GWT 库称为模块。

  • 运行 GWT 模块的 HTML 主机页面。

我们将创建一个 GWT Web 应用程序来创建一个带有输入表单的目录条目。输入表单的输入小部件将在客户端 Java 源文件中指定。 GWT 模块将指定配置。 HTML 主机页面将在浏览器中运行该模块。由于 GWT 小部件支持 Ajax,我们将使用 Ajax 动态验证新的目录条目。在我们创建新的 GWT 项目之前,删除默认的 Google Web Application 项目中创建的文件,除了 gwt-jboss-ajax 项目根文件夹,src 文件夹和 war 目录,包括 web.xml 部署描述符在//gwt-jboss-ajax/war/WEB-INF 文件夹。添加 pom.xml 文件(选择 XML | < 新建向导中的strong>XML文件)将Maven项目的根文件夹/gwt-jboss-ajax. gwt-jboss-ajax 项目的目录结构如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Creating a GWT module


GWT 项目的 配置在 GWT 模块中指定。 GWT 模块是一个扩展名为 .gwt.xml 的 XML 文件,并且可以指定以下 GWT 配置:

  • 入口点应用类名:一个入口点类名是模块的入口点,必须是 com.google.gwt.core.client.EntryPoint 类型。当一个模块被加载时,所有的入口点类都被实例化并且它们的 onModuleLoad 方法被调用。

  • GWT项目的源路径的客户端Java源文件由 GWT 编译器编译成 JavaScript 的 GWT 项目必须在源路径中。服务器 Java 源文件也必须位于源路径中。默认源路径是客户端。

  • CSS、图片等公共资源的公共路径

  • 继承的模块

在本节中,我们将创建一个 GWT 模块。选择文件 | | 其他。在 New 中,选择 Google Web Toolkit | 模块,如下图所示。在此之后,单击下一步

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

New GWT Module 中,选择 源文件夹gwt-jboss-ajax/src 并指定 Package 作为 org.jboss.gwt模块名称 作为 CatalogForm,如下图所示。在 Inherited modules 中,添加 com.google.gwt.user.User 模块,该模块提供核心 GWT 功能,例如 EntryPoint 类和 GWT 小部件和面板。现在,点击完成

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

CatalogForm.gwt.xml 文件 gwt- 中创建jboss-ajax\src\org\jboss\gwt目录,这是GWT项目的根包。继承的 com.google.gwt.user.User 模块配置有 <inherits/> 元素。源路径使用 <source/> 元素的 path 属性配置,并设置为 client,相对于包含模块的目录。我们将在本章后面部分的客户端子目录中创建一个客户端 Java 源文件,即入口点类。将 元素的 class 属性中的入口点类指定为 org.jboss.gwt.client.CatalogFormCatalogForm.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>
  <inherits name="com.google.gwt.user.User" />
  <source path="client"/>
  <!-- Specify the app entry point class. -->
  <entry-point class='org.jboss.gwt.client.CatalogForm' />
</module>

在以下 屏幕截图中,该模块显示在 Project Explorergwt-jboss-ajax 项目:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Creating an entry-point class


模块被编译成 JavaScript 时,可以从 HTML 中使用 模块主机页面。入口点类是模块的入口点,并在模块加载到网页或 HTML 主机页面时被实例化。入口点类必须实现 com.google.gwt.core.client.EntryPoint 接口。在本节中,我们将创建入口点类 org.jboss.gwt.client.CatalogForm 来为目录条目创建输入表单。我们将使用 com.google.gwt.user.client.ui 包中的 GWT 小部件和面板,以及 中的 GWT 事件和事件处理程序com.google.gwt.event.dom.client 包。选择文件 | | Other 并在 New 中选择 Google 网络工具包 | Entry Point Class,如下图所示。然后,点击下一步

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Entry Point Class 向导中,选择 源文件夹 as gwt-jboss-ajax | src,以及 指定模块< /span> 作为 org.jboss.gwt.client.CatalogFormPackage 作为 org.jboss.gwt.client, Name as CatalogForm,以及 Interfacescom.google.gwt.core.client.EntryPoint,如图所示在下面的屏幕截图中。现在,点击完成

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

org.jboss.gwt.client.CatalogForm 入口点类 被创建。 入口点类显示在 gwt-jboss-ajax Web 应用程序中"strong">Project Explorer 在以下屏幕截图中:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

入口点类 由以下 GWT 小部件、面板、事件、和事件处理程序:

GWT 组件

描述

示例 GWT 项目中的功能

com.google.gwt.user.client.ui.RootPanel

这是一个添加了所有小部件的面板。创建了一个默认的根面板。

这用于添加 GWT 小部件,其中包括文本框、标签和按钮。

com.google.gwt.user.client.ui.TextBox

这将创建一个单行文本框。

这用于为商品添加输入字段。

com.google.gwt.user.client.ui.Label

这是 <div/> 元素中的文本标签。

这用于为商品的输入字段添加标签。

com.google.gwt.user.client.ui.Button

这是一个按钮小部件。

这用于生成单击事件以提交商品。

com.google.gwt.event.dom.client.KeyUpEvent

这是一个关键事件。

这用于发送 Ajax 请求。

com.google.gwt.event.dom.client.KeyUpHandler

这是一个按键事件的事件处理程序。

这用于验证目录 ID 值。

com.google.gwt.event.dom.client.ClickEvent

这是一个点击事件。

这用于提交目录条目表单。

com.google.gwt.event.dom.client.ClickHandler

这是单击事件的事件处理程序。

这用于创建新的目录条目。

在入口点类中,导入 所需的小部件、面板、事件和事件处理程序类。加载模块时,将调用 onModuleLoad 方法,该方法是入口点类的入口点方法。在CatalogForm onModuleLoad()方法中入口点类,为目录条目的输入文本字段创建六个 TextBox 小部件。将标签的相应 Label 小部件添加到输入字段。例如,一个 Label 小部件和一个 TextBox 小部件创建如下:

final Label label1 = new Label("Catalog ID");
final TextBox textBox1 = new TextBox();

Label 添加到 显示验证消息。为 Submit 按钮添加 Button 小部件。以下代码行实现了这一点:

final Button button = new Button("Submit");

目录存储在HashMap<String, ArrayList<String>>中,其中每个目录条目是一个ArrayList<String> 阵列。目录条目的目录 ID 也是 HashMap 键。

创建一个目录并添加两个目录条目。例如,创建一个目录条目并将其添加到 HashMap,如下所示:

ArrayList<String> arrayList = new ArrayList<String>();
arrayList.add(0, "catalog1");
arrayList.add(1, "Oracle Magazine");
arrayList.add(2, "Oracle Publishing");
arrayList.add(3, "May-June 2006");
arrayList.add(4, "Tuning Your View Objects");
arrayList.add(5, "Steve Muench");

HashMap<String, ArrayList<String>> catalogHashMap = new HashMap<String, ArrayList<String>>();
catalogHashMap.put("catalog1", arrayList);

将小部件添加到根面板,该面板可能是默认根面板或特定于小部件的根面板。默认根面板不是直接创建的,而是使用 get() 方法访问的。使用 get(String divId) 方法访问小部件的根面板,其中 divId

HTML 主机页面中小部件的 ID。将小部件添加到特定于小部件的根面板。例如,将标签添加到特定于标签的根面板,如下所示。为此目的使用以下代码行:

RootPanel.get("label1").add(label1);

我们将在后面的部分中创建一个HTML 主机页面来指定排序使用具有关联 ID 的 <div/> 元素的小部件。 TextBox 小部件支持 Ajax。我们将使用业务逻辑验证目录 ID,即目录 ID 值不得已存在于目录的 HashMap 中,并且目录 ID 不得为空字符串。

要动态测试目录 ID 的有效性,请将 KeyUpHandler 添加到目录 ID 的 TextBox 中,使用 addKeyUpHandler 方法。使用内部类创建 KeyUpHandler 对象。 KeyUpHandler 必须实现 onKeyUp(KeyUpEvent event) 方法。以下代码封装了本段中的讨论:

textBox1.addKeyUpHandler(new KeyUpHandler() {
  public void onKeyUp(KeyUpEvent event) {}
}

onKeyUp 方法中,使用 TextBox 的 getText() 方法检索目录 ID 值

String catalogId = textBox1.getText();

如果 HashMap 包含目录 ID 值,则获取对应目录条目的 ArrayList。设置 Label 小部件以显示验证消息,因为 Catalog Id is not Valid。将 TextBox 值设置为商品参数并禁用 Submit 按钮。这一切都是通过以下代码完成的:

if (catalogHashMap.containsKey(catalogId)) {
  ArrayList<String> arraylist = (ArrayList<String>) catalogHashMap.get(catalogId);
  label7.setText("Catalog Id is not Valid");
  textBox2.setText((String) arraylist.get(1));
...
  button.setEnabled(false);
}

如果 HashMap 不包含 Catalog ID 值且不是空 String,则设置 Label 用于验证消息到 Catalog Id is Valid,将所有输入字段设置为空 String,并启用Submit 按钮,以便可以创建新的目录条目。

要创建新目录条目,请使用 ClickHandler 事件处理程序添加到 Button 小部件addClickHandler() 方法。创建一个新的 ClickHandler 作为内部类并实现 onClick(ClickEvent event) 方法。在 onClick(ClickEvent event) 方法中,使用 TextBox 小部件中指定的值>getText() 方法 并创建 ArrayList<String>。使用 put 方法将 ArrayList<String> 添加到 HashMap 目录中。

入口点类org.jboss.gwt.client.CatalogForm 列在以下代码中:

package org.jboss.gwt.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;

import java.util.*;

import java.lang.Exception;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class CatalogForm implements EntryPoint {
  
  /**
  * This is the entry point method.
  */
  
  ArrayList<String> arrayList;
  HashMap<String, ArrayList<String>> catalogHashMap;
  
  public void onModuleLoad() {
    
    final Button button = new Button("Submit");
    final Label label1 = new Label("Catalog ID");
    final Label label2 = new Label("Journal");
    final Label label3 = new Label("Publisher");
    final Label label4 = new Label("Edition");
    final Label label5 = new Label("Title");
    final Label label6 = new Label("Author");
    final Label label7 = new Label();
    
    final TextBox textBox1 = new TextBox();
    final TextBox textBox2 = new TextBox();
    final TextBox textBox3 = new TextBox();
    final TextBox textBox4 = new TextBox();
    final TextBox textBox5 = new TextBox();
    final TextBox textBox6 = new TextBox();
    
    arrayList = new ArrayList<String>();
    
    arrayList.add(0, "catalog1");
    arrayList.add(1, "Oracle Magazine");
    arrayList.add(2, "Oracle Publishing");
    arrayList.add(3, "May-June 2006");
    arrayList.add(4, "Tuning Your View Objects");
    arrayList.add(5, "Steve Muench");
    
    catalogHashMap = new HashMap<String, ArrayList<String>>();
    catalogHashMap.put("catalog1", arrayList);
    
    arrayList = new ArrayList<String>();
    
    arrayList.add(0, "catalog2");
    arrayList.add(1, "Oracle Magazine");
    arrayList.add(2, "Oracle Publishing");
    arrayList.add(3, "July-August 2006");
    arrayList.add(4, "Evolving Grid Management");
    arrayList.add(5, "David Baum");
    
    catalogHashMap.put("catalog2", arrayList);
    
    textBox1.addKeyUpHandler(new KeyUpHandler() {
      public void onKeyUp(KeyUpEvent event) {
        
        try {
          
          String catalogId = textBox1.getText();
          if (catalogHashMap.containsKey(catalogId)) {
            ArrayList<String> arraylist = (ArrayList<String>) catalogHashMap
            .get(catalogId);
            label7.setText("Catalog Id is not Valid");
            textBox2.setText((String) arraylist.get(1));
            textBox3.setText((String) arraylist.get(2));
            textBox4.setText((String) arraylist.get(3));
            textBox5.setText((String) arraylist.get(4));
            textBox6.setText((String) arraylist.get(5));
            button.setEnabled(false);
            
          }
          
          else {
            if (catalogId != "") {
              label7.setText("Catalog Id is Valid");
              textBox2.setText("");
              textBox3.setText("");
              textBox4.setText("");
              textBox5.setText("");
              textBox6.setText("");
              button.setEnabled(true);
            }
            
          }
          
        } catch (Exception e) {
        }
        
      }
    });
    
    button.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
        
        String catalogId = textBox1.getText();
        arrayList = new ArrayList<String>();
        
        arrayList.add(0, catalogId);
        arrayList.add(1, textBox2.getText());
        arrayList.add(2, textBox3.getText());
        arrayList.add(3, textBox4.getText());
        arrayList.add(4, textBox5.getText());
        arrayList.add(5, textBox6.getText());
        catalogHashMap.put(catalogId, arrayList);
        
      }
    });
    
    RootPanel.get("label1").add(label1);
    RootPanel.get("label2").add(label2);
    RootPanel.get("label3").add(label3);
    RootPanel.get("label4").add(label4);
    RootPanel.get("label5").add(label5);
    RootPanel.get("label6").add(label6);
    RootPanel.get("textBox1").add(textBox1);
    RootPanel.get("textBox2").add(textBox2);
    RootPanel.get("textBox3").add(textBox3);
    RootPanel.get("textBox4").add(textBox4);
    RootPanel.get("textBox5").add(textBox5);
    RootPanel.get("textBox6").add(textBox6);
    RootPanel.get("button").add(button);
    RootPanel.get("label7").add(label7);
  }
}

Creating an HTML host page


我们创建了一个 GWT 模块和一个入口点类,与之相关联模块。要加载模块并运行入口点类,我们需要一个 HTML 主机页面。 GWT 编译器将模块编译成 JavaScript 文件 nocache.js,也称为选择脚本,当我们在后面的部分中使用 Maven 安装 GWT 项目时。模块的 JavaScript 文件需要包含在 HTML 主机页面的 <script/> 标记中。首先,创建一个 HTML 页面。选择文件 | | Other,并在 New 中选择 Google 网络工具包 | HTML Page并点击下一步,如下图截屏:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

选择 gwt-jboss-ajax 项目和路径作为 war 并指定 < strong>文件名CatalogForm.html。选择CatalogForm模块,点击Finish,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

CatalogForm.html HTML 页面 war 中创建代码>目录。默认生成的<script/>标签有src=".nocache.js",其中 不是 CatalogForm 模块生成的 JavaScript。为此,请使用以下代码:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>CatalogForm</title>
    <script type="text/javascript" language="javascript" src=".nocache.js"></script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
  </body>
</html>

以下是创建 HTML 主机页面的步骤:

  1. 设置 script 标签如下:

    <script type="text/javascript" language="javascript" src="org.jboss.gwt.CatalogForm/org.jboss.gwt.CatalogForm.nocache.js">
  2. 在目录条目的 <iframe/> 元素下方添加 <table/> 元素。 <table/> 元素具有 <div/> 在入口点类中创建的 GWT 小部件的元素。 <div/> 元素具有关联的 ID,用于在入口点类 CatalogForm.java 中添加小部件到特定于小部件的根面板。在同一行中添加 Label 小部件和相应的 TextBox 小部件。 Label 小部件的 <div/> ID label7 是小部件以显示验证消息。 CatalogForm.html HTML 主机页面在以下代码中列出:

    <!doctype html>
    <html>
    <head>
        <meta name="generator" content="HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
        <meta http-equiv="content-type" content="text/html; charset=us-ascii" />
        <title>
          CatalogForm
        </title>
        <script type="text/javascript" language="javascript" src="org.jboss.gwt.CatalogForm/org.jboss.gwt.CatalogForm.nocache.js"> </script>
      </head>
      <body>
        <iframe src="javascript:''" id="__gwt_historyFrame" tabindex='-1' style="position: absolute; width: 0; height: 0; border: 0"></iframe>
        <h1>
          Catalog Form
        </h1>
        <table align="left">
          <tr>
            <td id="label1"></td>
            <td id="textBox1"></td>
          </tr>
          <tr>
            <td id="label2"></td>
            <td id="textBox2"></td>
          </tr>
          <tr>
            <td id="label3"></td>
            <td id="textBox3"></td>
          </tr>
          <tr>
            <td id="label4"></td>
            <td id="textBox4"></td>
          </tr>
          <tr>
            <td id="label5"></td>
            <td id="textBox5"></td>
          </tr>
          <tr>
            <td id="label6"></td>
            <td id="textBox6"></td>
          </tr>
          <tr>
            <td id="button"></td>
            <td id="label7"></td>
          </tr>
        </table>
      </body>
    </html>
  3. HTML 主机页面 显示在 gwt-jboss-ajax Project Explorer 中的 GWT web 项目,如下图所示:

    读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Deploying the GWT project with Maven


在本节中,我们 将使用 Maven 构建工具编译、打包和部署 GWT Web 项目到 WildFly 8.1。 pom.xml 文件与命令行生成的项目使用的类似,并导入到 日食。 Errai(基于 GWT 的框架)依赖项也包括在内。 gwt-jboss-ajax artifactId 的包装是 war。 GWT 版本应该是 2.6.0。请参考以下代码来完成此操作:

<properties>
  <version.com.google.gwt>2.6.0</version.com.google.gwt>
</properties>

将 Maven WAR 插件配置的输出目录指定为 WildFly 8.1 deployments 目录,如下所示:

<outputDirectory>C:\wildfly-8.1.0.Final\standalone\deployments</outputDirectory>

GWT 小部件和面板的 GWT 用户库以及对 Ajax 的支持是 scope 作为 compile 的必需依赖项。请参考以下代码:

<dependency>
  <groupId>com.google.gwt</groupId>
  <artifactId>gwt-user</artifactId>
  <scope>compile</scope>
</dependency>

GWT development 依赖项是必需的,因为它支持 Java-to-JavaScript 编译器scope 作为 提供。此依赖项参考以下代码:

<dependency>
  <groupId>com.google.gwt</groupId>
  <artifactId>gwt-dev</artifactId>
  <scope>provided</scope>
</dependency>

GWT 验证需要 Hibernate Validator 和 Validation API。除了 Maven 编译器插件和 Maven WAR 插件之外,还需要 GWT 插件来将客户端 Java 编译为 JavaScript。

并非所有包含在 pom.xml 中的依赖项都在本章的示例应用程序中使用。在运行 pom.xml 之前,我们需要将 GWT 项目的目录结构修改为具有 的 Maven 项目的标准目录布局src/main/java 目录用于应用程序 Java 源代码,而 src/main/webapp 目录用于 Web 应用程序源代码,如以下屏幕截图所示。创建src/main/javasrc/main/webapp目录,将Java源码复制到src/main/java 目录和 web 应用程序源代码到 src/main/webapp 目录。

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

接下来,运行 Maven 构建工具。右键单击 pom.xml 并选择 Run As | Maven 安装,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

GWT 项目 被编译并打包到 gwt-jboss-ajax.war ,如下图所示。编译后的 JavaScript 文件 org.jboss.gwt.CatalogForm.nocache.js 被添加到 org.jboss.gwt.CatalogForm目录,它包含在 CatalogForm.html 托管页面中 script 标记的相对路径中:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

启动 WildFly 8.1 服务器。 gwt-jboss-ajax.war 被部署到服务器。 gwt-jboss-ajax.war 显示在 WildFly 的 Administration Console 中以下屏幕截图:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Running the GWT project


在本节中,我们将运行 GWT Web 项目。使用 URL http://localhost:8080/gwt-jboss-ajax/CatalogForm 在浏览器中运行 GWT HTML 托管页面 CatalogForm.html .html 。将显示 GWT 小部件生成的输入表单,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

开始指定一个 目录 ID 值。由于 TextBox 小部件支持 Ajax,因此会显示如下屏幕截图所示的验证消息,指示 目录 ID 值根据该值不是空字符串并且不在目录的 HashMap 中的逻辑是有效的。

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

当目录 ID TextBox 小部件注册到com.google.gwt.event.dom.client.KeyUpHandler 事件处理程序。 目录 IDcatalog 值仍然有效,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

指定一个已经在 HashMap 中的值,例如 目录1。将显示一条验证消息,Catalog ID is not Valid,如以下屏幕截图所示。输入字段被填满,Submit 按钮被禁用:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

目录 ID catalog2< /code> 也不是有效值,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

目录 IDcatalog3< /code> 是创建新商品的有效值。指定输入字段值并单击提交按钮以创建新目录条目,如以下屏幕截图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

一个新的目录 条目被添加到 HashMap。将创建具有 Catalog ID catalog3 的目录条目。用户点击提交后,用户不会收到任何数据已存储的通知。要验证数据是否已存储,用户必须先清除 Catalog ID 并重新添加 目录 ID。如果将 catalog3 重新指定为 Catalog IDcatalog3 被认为是无效的,如下图所示:

读书笔记《advanced-java-ee-development-with-wildfly》使用GWT

Summary


GWT 将客户端 Java 编译成优化的 JavaScript,可以在浏览器中运行。在本章中,我们在 WildFly 8.1 上测试了一个 GWT 入门项目。我们还开发了一个新的 GWT Web 项目。我们在 GWT 项目中添加了一个模块来配置入口点类并添加 GWT 用户库。我们创建了一个入口点类,一个实现 com.google.gwt.core.client.EntryPoint 接口的类。我们创建了一个 HTML 托管页面,将编译后的模块指定为 JavaScript 文件。我们在浏览器中运行托管页面以验证和创建新目录条目。

在下一章中,我们将讨论在 Eclipse 中创建 JAX-WS 2.2 Web 服务,使用 Maven 构建和部署应用程序到 WildFly 8.1,以及在 WildFly 8.1 中运行 Web 服务。