Java Chromium Embedded Framework
Start with the page JCEF - Java Chromium Embedded Framework ⧉ of the IntelliJ platform plugin SDK.
JCEF should work with MPS 2021.1.4 and higher. Although introduced in IntelliJ IDEA 2020.1, it might not work in older MPS versions because of classloading issues. You can embed The browser (JBCefBrowser
) in the MPS editor with a Java Swing component cell.
For simple use cases, it is enough to call browser.loadHTML
to load some HTML code. The content can be created by Java or by
calling the MPS generator or TextGen ⧉.
Existing Java documentation and examples on the web:
- Java JCEF example ⧉ that showcases all kinds of handlers and dialogs
- IntelliJ Markdown preview ⧉
- How do I use JCEF with Intellij? ⧉
- CEF documentation (non Java version) ⧉
The third link contains an answer on how to do bidirectional communication between the embedded browser and Java (MPS): You have
to create a browser pipe between Java (implementation) and JS (implementation ⧉). The communication uses JS. You then have a subscribe
method that you can use to
listen to events posted through a specific tag or create an event using the post
method. These methods are available in Java and JS.
Warning: MPS and the IntelliJ IDEA use Swing to create all the UI components. They are considered lightweight because Java itself draws them. JCEF uses native code, and it is a heavyweight component. Especially with MPS' reloading capabilities, t is important to dispose of the browser when it isn't needed. The following code registers a listener for the editor component dispose event and also closes the browser:
When the browser is not correctly disposed of, it might be drawn in different components or on top of MPS editors. Some issues are known where JCEF makes the IDE crash (JBR-4667 + linked related issues, JBR-2206 ⧉ + linked related issues).
Demo + WebSockets¶
A demo for the JCEF integration can be found in the repository mps_jcef_minimal. Read the readme for more information. The demo contains two branches, one shows the internal communication via JS, and the other branch uses WebSocket for the communication. The WebSocket server is modeled after this tutorial and uses the existing IntelliJ libraries of Netty. The handling of web socket frames is described in more detail in Chapter 12. WebSocket - Netty in Action ⧉.