JavaFX中嵌入谷歌Chromium内核,JS调用Java代码

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第8天,点击查看活动详情

近日,笔者接到一个需求。开发一个客户端程序,内嵌浏览器,能够访问Vue.js项目。

接到这个需求吧,就很别扭。Java并不擅长开发客户端程序。笔者在学习Java开发时会Swing开发过客户端程序,整体感觉用Java开发客户端程序很麻烦,开发出来的东西也很丑。丑爆了。

没办法,领导安排的事情就要做,硬着头皮做。

经过一番考查,技术选型最终定为JavaFX + JxBrowser。

确认技术是否可行,先写Demo示例程序。

简单说一下JxBrowser是什么。

JxBrowser是一个Java类库,用于将谷歌Chromium浏览器组件集成到Java应用中,可以在JavaFX、Swing、SWT应用中展示Web页面和PDF文件。

开发环境:

  • Windows 10(64位)
  • JDK1.8

开发工具:IntelliJ IDEA 2021.3.3

(1)创建一个Maven项目。

<groupId>com.jasmine</groupId>
<artifactId>brower</artifactId>
<version>1.0-SNAPSHOT</version>

(2)在项目根目录下创建文件夹lib用于存放JxBrowser的Jar包。

(3)将JxBrowser的Jar包(jxbrowser-6.21.jar、jxbrowser-win64-6.21.jar、license.jar)复制到lib文件夹下。

(4)在IDEA中引用lib文件夹下的所有Jar包。

File --> Project Structure --> Project Settings --> Libraries --> + --> Java --> 选择lib文件夹的所有Jar包。

(5)创建项目启动类 —— App.java

public class App extends Application {

    static {
        try {
            Field e = ba.class.getDeclaredField("e");
            e.setAccessible(true);
            Field f = ba.class.getDeclaredField("f");
            f.setAccessible(true);
            Field modifersField = Field.class.getDeclaredField("modifiers");
            modifersField.setAccessible(true);
            modifersField.setInt(e, e.getModifiers() & ~Modifier.FINAL);
            modifersField.setInt(f, f.getModifiers() & ~Modifier.FINAL);
            e.set(null, new BigInteger("1"));
            f.set(null, new BigInteger("1"));
            modifersField.setAccessible(false);
        } catch (Exception e1) {
            e1.printStackTrace();
        }

    }

    @Override
    public void start(final Stage primaryStage) {
        Browser browser = new Browser();
        BrowserView view = new BrowserView(browser);

        Scene scene = new Scene(new BorderPane(view));
        primaryStage.setScene(scene);
        // 设置窗口最大化
        primaryStage.setMaximized(true);
        // 设置全屏展示
//        primaryStage.setFullScreen(true);
        // 设置标题
        primaryStage.setTitle("Hello JavaFX Application");
        primaryStage.show();

        // 添加了一个属性,供在JS文件中Java代码
        browser.addLoadListener(new LoadAdapter() {
            @Override
            public void onStartLoadingFrame(StartLoadingEvent event) {
                JSValue window = browser.executeJavaScriptAndReturnValue("window");
                MyBridge myBridge = new MyBridge();
                window.asObject().setProperty("myBridge", myBridge);
            }
        });

        browser.loadURL("http://localhost:8080/");
    }

    public static void main(String[] args) {
        launch(args);
    }
}

MyBridge.java

public class MyBridge {
    public void print(String msg) {
        System.out.println("msg: " + msg);
    }
}

在.vue文件中调用Java代码的方式:

print() {
  myBridge.print("vue page print button click");
}

(6)运行App.java

项目启动成功后,我们就能看到一个最大化的JavaFX窗体,内嵌了Vue页面。点击Vue页面的按钮,可以在JavaFX项目控制台中看到对应的输出信息。这样通过JS调用Java代码就走通了。


如果觉得文章写得还凑合,还麻烦您动动小手帮忙点个赞呗。您的支持是我更文的动力。目前在写的系列有下面几个系统:

  • MyBatis源码解读
  • 设计模式
  • 一起学Three.js
  • Spring Boot
  • Spring Cloud

都是一些平时工作中用到的知识点的个人总结和学习笔记。