入门

从 GWT SDK 2.11.0 开始，webAppCreator 已被弃用。我们将改为使用 Thomas Broyer 的 gwt-maven-archetypes 来创建一个新的 GWT 项目。使用 **artifactId: modular-webapp** 插件，将生成一个具有以下独立模块的 Maven 项目：

• 客户端
• 服务器
• 共享。

代码分离是现代 Web 开发的趋势。

目录

• 先决条件
• 创建你的第一个 Web 应用程序
• 在超级开发模式下本地运行
• 进行一些更改
• 调试浏览器
• 在生产模式下编译和运行
• 设置 IDE

先决条件

1. GWT 2.12.0 运行在 Java 11+ 上。如果需要，请下载并安装 Java SE 开发工具包 (JDK) 来自 Eclipse Temurin，适用于您的平台。请按照安装说明进行安装。
2. Apache Maven 也是运行 gwt-maven-archetype 所必需的。在本示例中，使用了 Maven CLI。如果您还没有安装，请安装 Apache Maven.

如果您在命令行中运行 gwt-maven-archetype 时遇到问题，请尝试设置 $JDK_HOME 环境变量，使用 export JDK_HOME=“[pathToJDK]” 和 $MAVEN_HOME 环境变量，使用 export MAVEN_HOME=“[pathToMaven]”，并将两者都添加到路径中。

创建你的第一个 Web 应用程序

打开终端，并选择您想要将项目生成到的目录。使用以下命令生成一个新项目

mvn archetype:generate \
   -DarchetypeGroupId=net.ltgt.gwt.archetypes \
   -DarchetypeVersion=LATEST \
   -DarchetypeArtifactId=modular-webapp

该原型将请求以下值的输入：

• groupId: com.mycompany.mywebapp
• artifactId: mywebapp
• version: HEAD-SNAPSHOT
• package: com.mycompany.mywebapp
• module-short-name: mywebap

输入以上参数后，终端将显示如下内容

[INFO] Using property: module = App
Define value for property 'groupId': com.mycompany.mywebapp
Define value for property 'artifactId': mywebapp
Define value for property 'version' 1.0-SNAPSHOT: : HEAD-SNAPSHOT     
Define value for property 'package' com.mycompany.mywebapp: : com.mycompany.mywebapp
Define value for property 'module-short-name' app: : MyWebApp
Confirm properties configuration:
module: App
groupId: com.mycompany.mywebapp
artifactId: mywebapp
version: HEAD-SNAPSHOT
package: com.mycompany.mywebapp
module-short-name: mywebapp
 Y: :         

输入 **Y** 继续。

现在，将生成新的项目，您将看到以下消息

[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating project from Archetype: modular-webapp:LATEST
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: com.mycompany.mywebapp
[INFO] Parameter: artifactId, Value: mywebapp
[INFO] Parameter: version, Value: HEAD-SNAPSHOT
[INFO] Parameter: package, Value: com.mycompany.mywebapp
[INFO] Parameter: packageInPathFormat, Value: com/mycompany/mywebapp
[INFO] Parameter: package, Value: com.mycompany.mywebapp
[INFO] Parameter: module-short-name, Value: MyWebApp
[INFO] Parameter: module, Value: App
[INFO] Parameter: groupId, Value: com.mycompany.mywebapp
[INFO] Parameter: artifactId, Value: mywebapp
[INFO] Parameter: version, Value: HEAD-SNAPSHOT
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-client/pom.xml
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-shared/pom.xml
[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-server/pom.xml
[INFO] Project created from Archetype in dir: /Users/gwt-user/Desktop/mywebapp
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  01:09 min
[INFO] Finished at: 2023-12-17T17:38:02+01:00
[INFO] ------------------------------------------------------------------------

输入 cd mywebapp 切换到生成的目录。

该目录的列表（**Windows**: dir, **Mac 和 Linux**: ls -la）将显示以下内容

drwxr-xr-x@  6 gwt-user  staff   192 Dec 17 17:38 .
drwx------@ 50 gwt-user  staff  1600 Dec 17 17:38 ..
drwxr-xr-x@  4 gwt-user  staff   128 Dec 17 17:38 mywebapp-client
drwxr-xr-x@  4 gwt-user  staff   128 Dec 17 17:38 mywebapp-server
drwxr-xr-x@  4 gwt-user  staff   128 Dec 17 17:38 mywebapp-shared
-rw-r--r--@  1 gwt-user  staff  7423 Dec 17 17:38 pom.xml

在超级开发模式下本地运行

要启动代码服务器，请运行以下命令

mvn gwt:codeserver -pl *-client -am

并在另一个终端窗口中输入以下命令来启动服务器

mvn jetty:run -pl *-server -am -Denv=dev

现在，切换到您喜欢的浏览器（建议使用：Chrome、FireFox 或 Opera），并输入以下地址

https://127.0.0.1:8080

此时，该应用程序正在超级开发模式下运行。您将在浏览器中看到类似以下内容

进行一些更改

让我们更改按钮的标签。由于这是客户端的内容，因此我们需要在客户端模块中找到源代码。源代码位于 mywebapp-client/src/main/java/com/mycompany/mywebapp 子目录中，源代码位于 App.java 类中。

查看 App.java 的内容。第 42 行构造了“发送”按钮。

final Button sendButton = new Button("Send");

将文本从“发送”更改为“发送到服务器”。

final Button sendButton = new Button("Send to Server");

保存文件，然后在浏览器中点击“刷新”，您将看到更改。现在，该按钮应显示“发送到服务器”，而不是“发送”。

调试浏览器

在超级开发模式下，您可以轻松地调试浏览器中的客户端代码。在运行应用程序时，打开浏览器中的开发人员工具。选择 Sources 选项卡，然后按下 ctrl-P（Windows/Linux）或 cmd-P（macOS）。将弹出一个窗口。输入 App.java，然后按回车键。

App.java 类的源代码将显示在调试器中。点击第 94 行的行号，添加一个断点。按下发送按钮。执行将在第 94 行停止。堆栈跟踪、变量内容等信息将可见。

在生产模式下编译和运行

要将该应用程序作为 JavaScript 运行（GWT 称为“生产模式”），请通过执行以下命令来创建该应用程序

mvn clean package

Maven 的“package”目标将调用 GWT 编译器，该编译器从 mywebapp-client/src/main/java/com/mycompany/mywebapp 中的 MyWebApp Java 源代码生成一些 JavaScript 和 HTML 文件，这些文件位于 target/ 子目录中。您将在其中找到 mywebapp-server-HEAD-SNAPSHOT.war。您可以将此 WAR 文件部署到任何 Servlet 引擎，并运行它。运行后，在您的 Web 浏览器中输入 mywebapp-server-HEAD-SNAPSHOT/index.html。该应用程序的外观应该与超级开发模式下的外观相同。您可以使用 Maven 的 buildname 参数来更改 WAR 的名称。

恭喜！您已经使用 GWT 创建了您的第一个 Web 应用程序。由于您已经编译了该项目，因此您现在正在运行纯 JavaScript 和 HTML，这些代码可以在 Edge、Chrome、Firefox、Safari 和 Opera 中运行。您现在可以通过从 Servlet 引擎提供 HTML 和 JavaScript 文件来将您的应用程序部署到生产环境中。

如果您更喜欢 Spring Boot 服务器，请查看 gwt-maven-springboot-archetype 插件。它将以类似的方式创建项目，但使用 Spring Boot 代替 Jetty 作为服务器端。

设置 IDE

现在，您已经创建了您的第一个应用程序，您可能想要做一些更有意思的事情。但是首先，如果您通常使用 IDE 工作，您将需要设置您的 IDE 来使用 GWT SDK。

设置 Eclipse

设置 IntelliJ

现在，您的示例项目已经设置完毕，请前往 构建示例 GWT 应用。