java丝滑开发桌面端应用:jcef

7,565 阅读2分钟

前有Electron,后有Tauri,而javaFx的webview的能力又有所不足,怎么才能打通java+前端桌面应用的任督二脉,jcef是一个不错的选择。

快速创建创建一个jecf应用

image.png

MainFrame.java

// MainFrame.java
package com.zzc;

import java.awt.Dimension;
import java.awt.Toolkit;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;

import javax.swing.JFrame;

import org.cef.CefApp;
import org.cef.CefClient;
import org.cef.browser.CefBrowser;
import org.cef.browser.CefRendering;

import com.jetbrains.cef.JCefAppConfig;
import java.awt.BorderLayout;

public class MainFrame extends JFrame {

    private static final long serialVersionUID = 2541887783679247552L;

    private static volatile MainFrame instance;

//    private String url = "https://map.baidu.com/";
    private String url = System.getProperty("user.dir") + "/dist/index.html";
    private CefApp app = null;
    private CefClient client = null;
    private CefBrowser browser = null;

    public MainFrame() {

        var args = JCefAppConfig.getInstance().getAppArgs();

        String[] args1= new String[] {
                "--disable-web-security"//关闭同源策略,允许跨域
                ,"--disable-site-isolation-trials" //关闭站点隔离策略,允许跨域
        };
        var settings = JCefAppConfig.getInstance().getCefSettings();
        settings.cache_path = System.getProperty("user.dir") + "/context";
        // 获取CefApp实例
        CefApp.startup(args1);
        app = CefApp.getInstance(args1, settings);
        // 创建客户端实例
        client = app.createClient();
        // 创建浏览器实例
        browser = client.createBrowser(url, CefRendering.DEFAULT, true);

        this.getContentPane().setLayout(new BorderLayout(0, 0));
        this.getContentPane().add(browser.getUIComponent(), BorderLayout.CENTER);

        this.setTitle("JetBrains Runtime - JCEF");
        this.setSize(new Dimension(1280, 720));
        this.setMinimumSize(new Dimension(1150, 650));
        this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        this.setLocation((Toolkit.getDefaultToolkit().getScreenSize().width - this.getWidth()) / 2,
                (Toolkit.getDefaultToolkit().getScreenSize().height - this.getHeight()) / 2);
        this.setVisible(true);
        this.setResizable(true);
        this.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                app.dispose();
                System.exit(0);
            }
        });

    }

    public static MainFrame getIstance() {
        if (instance == null) {
            synchronized (MainFrame.class) {
                if (instance == null) {
                    instance = new MainFrame();
                }
            }
        }
        return instance;
    }

}

Main.java

package com.zzc;

import java.net.URL;

// 按两次 Shift 打开“随处搜索”对话框并输入 `show whitespaces`,
// 然后按 Enter 键。现在,您可以在代码中看到空格字符。
public class Main {
    public static void main(String[] args) {
        MainFrame.getIstance();
        // 当文本光标位于高亮显示的文本处时按 Alt+Enter,
        // 可查看 IntelliJ IDEA 对于如何修正该问题的建议。

        String url = System.getProperty("user.dir") + "";
        System.out.println(url);

    }
}

pox.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.zzc</groupId>
    <artifactId>jcef01</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>17.0.7</java.version>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.11.0</version>
                <configuration>
                    <source>${java.version}</source>
                    <target>${java.version}</target>
                </configuration>
            </plugin>

        </plugins>
        <resources>
            <resource>
                <directory>src/main/resources</directory>
                <filtering>true</filtering>
            </resource>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.json</include>
                    <include>**/*.ftl</include>
                </includes>
            </resource>
        </resources>
    </build>

</project>

效果预览

image.png

问题点总结

jdk选择:jbrsdk_jcef-17(目前最新版是jbrsdk_jcef-18)

image.png

image.png

java 语言级别

image.png

pom.xml配置修改

见pox.xml代码

加载本地网页

java代码见MainFrame

前端项目配置修改

  • vite 项目 配置 base: './'
  • vue-cli 项目配置 配置 publicPath: './'

跨域修改见MainFrame

参考文章