本文介绍了一种使用Java构建Web应用程序的方式，其中GWT或者J2CL是必不可少的，另外还有多个UI框架可以配套使用，比如Domino UI、VueGWT、GWT Material Design (GMD)，React4J、WebFX，还有一些活跃低的框架GWTBootstrap3、RedHat PatternFly for Java

开始之前先看下LOVE（Learn Once Vse Everywhere）架构。

LOVE架构

1、Spring Boot Server：提供服务端
2、Shared：提供公共的API、接口、验证类或实体类等
3、Client： GWT Boot 是GWT的等效框架，就如同Spring Boot 和 Spring Framework

创建Spring Boot后端服务

使用Spring Initializr 创建Spring Boot项目。建立如下文件：
PersonController、PersonService、PersonRepository、Person实体

后端服务

源码地址：
https://github.com/gwtboot/intro-gwtboot-springboot/tree/main/intro-gwtboot-springboot-server

创建共享模块

共享服务，用于客户端和后端服务之间共享API、验证、异常类等，这里可以自己决定哪些类要共享。

共享的类、枚举和接口

由于GWT Boot 客户端需要使用源码编译成JavaScript，共享模块要使用Maven Source plugin导出共享模块源码包。

打包处理的共享模块

分离出共享模块后，将它作为依赖项添加到后端服务中。

另外我们创建一个“Module”.gwt.xml文件，用来转换共享模块的源代码，该文件声明了要转换的包目录，在该例中是shared包下的所有Java文件。

Person.gwt.xml

GWT Boot 客户端

这一部分是最有趣的部分，这里我们将使用DominoUI作为前端创建客户端。
使用GWT Boot Maven Archetype创建：

mvn archetype:generate -DarchetypeGroupId=com.github.gwtboot \-DarchetypeArtifactId=gwt-boot-ui-domino-dagger2-archetype \-DarchetypeVersion=1.0.0 \-DgroupId=com.company.crm \-DartifactId=intro-gwtboot-springboot-client \-Dversion=1.0.0-SNAPSHOT

生成的是一个Todo List 的应用程序，可以直接运行。

运行DominoUI

现在将上面创建的共享模块依赖和源码添加到该客户端模块中。

jar包和源码

随后在客户端模块module.gwt.xml中添加Person.gwt.xml文件

GWT Maven plugin 根据module.gwt.xml 创建真正的GMT 模块 App.gwt.xml

后面，我们开始对页面进行布局，将创建如下样式页面：

Web 布局

默认的DominoUI布局有：导航栏-1、2、3，左侧面板-4，中间面板-5，隐藏页脚-6和隐藏右侧面板。

DominoUI标准布局

可以使用removeLeftPanel方法删除左侧面板。

Layout layout = Layout.create(CONSTANTS.appTitle()).removeLeftPanel().show(Theme.BLUE);

现在考虑一下我们应该怎么用DominoUI来实现如下布局

为了创建这个UI视图，我们使用三个类：HomeClientBundle、HomeView和HomeComposite，它们是用MVP（Model View Presenter）模式设计的。

PersonDto, HomeView 和 HomeComposite
HomeClientBundle：一个GWT客户端捆绑包，它将图像、CSS和JavaScript等多种资源组合到一个文件中，以便浏览器高效加载。

HomeView：此类负责创建整体布局和所有其他UI元素，这些元素将在presenter/composite中使用。

HomeComposite：此类处理表示逻辑，并根据PersonListGroup中的人数创建不同类型的对话框，如警告或错误对话框。

void handleCheckOkClick(PersonDto person) {personListGroup.removeItem(person);int size = personListGroup.getItems().size();if (size == 2) {createWarningDialog();} else if (size == 0) {createErrorDialog("Error on personListGroup is empty!");}donePersonListGroup.addItem(person);}

运行Web

1、模拟运行
首先转到客户端模块目录

mvn gwt:generate-module gwt:devmode -Pdevelopment-mock

mock 运行

可以修改代码后，立即在浏览器上看到转换后的JavaScript效果

2、使用server运行

-- 首先转到客户端模块目录
mvn gwt:generate-module gwt:devmode -- 客户端-- 首先转到服务端模块目录
mvn spring-boot:run -- 服务端

服务端

部署Web

可以将客户端静态资源打包到Spring Boot static目录中，作为单体应用部署。

1、Client:使用 Maven Assembly plugin插件和distribution.xml文件，这会创建一个intro-gwtboot-springboot-client-1.0.0-SNAPSHOT-javascript.jar
2、Server：将打包出来的文件解压到static目录下，由于路径发生了变化，需要再server中创建一个index.html，内容如下

  <!-- All files in directory app, see screenshot below --><link type="text/css" rel="stylesheet" href="app/css/domino-ui.css"><link type="text/css" rel="stylesheet" href="app/css/themes/all-themes.css"><title>Demo GWT Webapp with DominoUI and Dagger2</title><script type="text/javascript" src="app/app.nocache.js" async=""></script>

解压缩后的JS文件和静态目录

使用如下命令运行：

-- 转到服务端模块目录
java -jar target/intro-gwtboot-springboot-server-1.0.0-SNAPSHOT.jar-- 使用该地址访问web应用
http://localhost:9090/intro/

单体应用部署

Server端包含client文件的流转机制

参考资料
[1] Domino UI: https://demo.dominokit.org/home
[2] VueGWT: https://vuegwt.github.io/vue-gwt/guide/#features
[3] GWT Material Design (GMD): https://gwtmaterialdesign.github.io/gmd-core-demo/
[4] React4J: https://react4j.github.io/
[5] WebFX: https://webfx.dev/
[6] GWTBootstrap3: https://github.com/treblereel/gwtbootstrap3
[7] RedHat PatternFly for Java: https://patternfly-java.github.io/showcase/#documentation:alert
[8] GWT Boot https://github.com/gwtboot

作者其他文章：
《Prometheus+Grafana 实践派》专栏火热更新中

Grafana 的介绍和安装
Grafana监控大屏配置参数介绍（一）
Grafana监控大屏配置参数介绍（二）
Grafana监控大屏可视化图表
Grafana 查询数据和转换数据
Grafana 告警模块介绍
Grafana 告警接入飞书通知