使用 Angular 构建 Java 桌面应用

在桌面应用中加载 Angular UI

Angular 部分位于 web-app/ 目录中。启动开发服务器时，会显示构建输出。该应用支持两种模式：开发模式和生产模式。

开发模式

在开发模式下，对 Angular 组件或样式的更改能立即生效。单独启动 Angular 的开发服务器，并将内嵌浏览器指向本地的 localhost。

./gradlew :desktop-angular-dashboard:startDevServer

然后在浏览器中加载 URL：

browser.navigation().loadUrl(AppDetails.appUrl());

生产模式

在生产模式下，桌面应用需要完全离线运行。将 Angular 的构建产物直接打包至 JAR 资源目录。Gradle 构建过程会编译 web-app/ 下的 Angular 源码，并将输出复制到 src/main/resources/web/ 目录中。

应用打包后，这些文件可以从类路径访问，通过 JxBrowser 的自定义协议拦截 API 从类路径中直接加载资源。

var options = EngineOptions.newBuilder(HARDWARE_ACCELERATED)
    .addScheme(Scheme.of("jxbrowser"), new UrlRequestInterceptor())
    .build();
var engine = Engine.newInstance(options);

定义应用配置

public final class AppDetails {
    public static String appUrl() {
        return isDevMode() ? "http://localhost:" + DEV_SERVER_PORT : APP_SCHEME + "://" + APP_HOST;
    }
    public static boolean isDevMode() {
        return "true".equals(System.getProperty("app.dev.mode"));
    }
}

从 JAR 中提供 Angular 文件

本节介绍如何构建一个拦截器，用于从 JAR 中提供 Angular 文件。使用 JxBrowser 的 InterceptUrlRequestCallback。

创建拦截器

import com.teamdev.jxbrowser.net.callback.InterceptUrlRequestCallback;
import java.net.URI;

final class UrlRequestInterceptor implements InterceptUrlRequestCallback {
    @Override
    public Response on(Params params) {
        var uri = URI.create(params.urlRequest().url());
        var path = uri.getPath();
        var fileName = path.equals("/") ? "/index.html" : path;
        return loadResource(params, fileName);
    }

    private Response loadResource(Params params, String fileName) {
        try (var stream = getClass().getResourceAsStream("/web" + fileName)) {
            if (stream == null) {
                var job = createUrlRequestJob(params, HttpStatus.NOT_FOUND);
                job.complete();
                return Response.intercept(job);
            }
            var job = createUrlRequestJob(params, HttpStatus.OK);
            job.write(stream.readAllBytes());
            job.complete();
            return Response.intercept(job);
        } catch (IOException e) {
            var job = createUrlRequestJob(params, HttpStatus.INTERNAL_SERVER_ERROR);
            job.complete();
            return Response.intercept(job);
        }
    }

    private UrlRequestJob createUrlRequestJob(Params params, HttpStatus status) {
        var options = URLRequestJob.Options.newBuilder(status).build();
        return params.newUrlRequestJob(options);
    }
}

添加 MIME 类型支持

引入工具类推断 MIME 类型，并在构建 HTTP 响应时使用它。

设置 JavaScript - Java 桥接器

JxBrowser 内置了 JavaScript 与 Java 的直接通信桥。

创建后端类

import com.teamdev.jxbrowser.js.JsAccessible;

@JsAccessible
public class DashboardBackend {
    public String getAppInfo() {
        return "Angular Dashboard v1.0";
    }
}

注入 Java 后端对象

import com.teamdev.jxbrowser.js.JsObject;
import com.teamdev.jxbrowser.browser.callback.InjectJsCallback;

DashboardBackend backend = new DashboardBackend();
browser.set(InjectJsCallback.class, params -> {
    JsObject window = params.frame().executeJavaScript("window");
    if (window != null) {
        window.putProperty("backend", backend);
    }
    return InjectJsCallback.Response.proceed();
});

从 Angular 调用 Java

declare global {
    interface Window {
        backend?: {
            getTopCards(): string;
            getChartData(timeRange: string): string;
        };
    }
}

@Injectable({ providedIn: 'root' })
export class BackendService {
    getTopCards(): TopCard[] {
        if (window.backend) {
            return JSON.parse(window.backend.getTopCards());
        }
        return [];
    }
    getChartData(timeRange: string): ChartSeries[] {
        if (window.backend) {
            return JSON.parse(window.backend.getChartData(timeRange));
        }
        return [];
    }
}

运行应用程序

开发模式

# 终端 1：启动 Angular 开发服务器
./gradlew :desktop-angular-dashboard:startDevServer
# 终端 2：运行 Java 应用程序
./gradlew :desktop-angular-dashboard:run

生产模式

# 构建 Angular 和 Java
./gradlew :desktop-angular-dashboard:jar
# 运行 JAR 包
java -jar build/dist/JxBrowserAngularApp-1.0.jar

启动后，应用程序显示深色主题仪表板。所有仪表板数据都通过 JxBrowser 的 JavaScript-Java 桥接器从 Java 后端获取。