How do I use JCEF with Intellij?

Question

I've been trying to figure out if there is a way to use Chromium browser as the UI for a Java application. I found this IntelliJ page: https://jetbrains.org/intellij/sdk/docs/reference_guide/jcef.html The thing I can't figure out is how I actually use this in my project. My IntelliJ version is 2020.3 and it says that in 2020.2 JCEF was enabled by default. I however cannot figure out how I use JCEF in my project. I can't seem to find any clear documentation. When I try to import, for example, com.intellij it can't find the package.

Are there any tutorials or guides to integrate JCEF in my IntelliJ project?

Answer 1

1. You can run jetty server or use resource provider. Example of resource provider: https://medium.com/virtuslab/creating-intellij-plugin-with-webview-3b27c3f87aea

2. Also this example of abstract WebDialog explain how to pass data to fe: https://github.com/sergeysenja1992/xm-online-idea-plugin/blob/master/src/main/kotlin/com/icthh/xm/actions/WebDialog.kt

All magic in class BrowserPipe (WebDialog.kt file) on backend side, and same class in frontend class https://github.com/sergeysenja1992/xm-online-idea-plugin/blob/master/src/main/webapp/src/index.html

Next js file it's one more part of magic

 <script src="http://registercallback/events.js"></script>

This js file does not exists, but be listen this request and return generated js code.

CefApp.getInstance().registerSchemeHandlerFactory("http", "registercallback", InjectJsHandlerFactory(inject()))

For more details pls look to this line of code in (WebDialog.kt file)

After all manipulation as result i have ability to write components in simple way: FE: https://github.com/sergeysenja1992/xm-online-idea-plugin/blob/master/src/main/webapp/src/app/settings/settings.component.ts

  constructor(private zone: NgZone) {
    let w: any = window;
    w.messagePipe.subscribe('initData', (res) => {
      console.info('initData', res);
      zone.run(() => {
        this.updateData(res);
      });
    });
    w.messagePipe.post('componentReady', 'SettingsComponent ready')
  }

BE: https://github.com/sergeysenja1992/xm-online-idea-plugin/blob/master/src/main/kotlin/com/icthh/xm/actions/settings/SettingsDialog.kt

override fun callbacks(): List<BrowserCallback> {
    val data = ArrayList(project.getSettings().envs.map { it.copy() })
    this.data = data;
    return listOf(
        BrowserCallback("componentReady") {body, pipe ->
            logger.info("Update ${body}")
            pipe.post("initData", mapper.writeValueAsString(mapOf(
                "updateModes" to updateModes,
                "branches" to project.getRepository().getLocalBranches(),
                "envs" to data,
            )))
        },
        BrowserCallback("envsUpdated") {body, pipe ->
            logger.info("envsUpdated ${body}")
            val envs = mapper.readValue<List<EnvironmentSettings>>(body)
            this.data = ArrayList(envs);
        }
    )
}