How to use HTML and CSS as a Java application GUI?

Question

I want to design new Git client with a clean GUI.

Is it possible to use the power of HTML, CSS and JavaScript in a java application?

I would like to use Java + JGit for models, Java for controllers and HTML + CSS + JavaScript for views.

I don't want a client-server model. I would like to integrate Java and HTML nicely. A DOM event would fire events directly to a Java controller. This way it would be possible to create rich offline application.

Answer 1

You can embed web browser component into your Java Swing/JavaFX Desktop application that displays GUI built with HTML5+CSS+JavaScript. You can see an article that describes how to do this at https://jxbrowser-support.teamdev.com/docs/tutorials/cross-desktop-apps.html

One of the Java Swing/JavaFX libraries that allows embedding Chromium into Java applications is JxBrowser. Using JxBrowser API you can load any web page and work with its DOM and JavaScript. You can even call Java methods from JavaScript code and vice versa. For example:

import com.teamdev.jxbrowser.chromium.Browser; import com.teamdev.jxbrowser.chromium.JSFunctionCallback; import com.teamdev.jxbrowser.chromium.JSObject; import com.teamdev.jxbrowser.chromium.JSValue; import com.teamdev.jxbrowser.chromium.events.FinishLoadingEvent; import com.teamdev.jxbrowser.chromium.events.LoadAdapter;  public class JavaScriptJavaSample {     public static void main(String[] args) {         Browser browser = new Browser();         browser.addLoadListener(new LoadAdapter() {             @Override             public void onFinishLoadingFrame(FinishLoadingEvent event) {                 if (event.isMainFrame()) {                     Browser browser = event.getBrowser();                     JSObject window = (JSObject)                             browser.executeJavaScriptAndReturnValue("window");                     window.setProperty("MyFunction", new JSFunctionCallback() {                         @Override                         public Object invoke(Object... args) {                             for (Object arg : args) {                                 System.out.println("arg = " + arg);                             }                             return "Hello!";                         }                     });                     JSValue returnValue = browser.executeJavaScriptAndReturnValue(                             "MyFunction('Hello JxBrowser!', 1, 2, 3, true);");                     System.out.println("return value = " + returnValue);                 }             }         });         browser.loadURL("about:blank");     } }