JavaFX : Embedding a browser other than available webview with JavaFX

Question

I am working on a JavaFX application which contains few html,css,JS files which are rendered by the internal webkit browser. Now, the problem is the CSS animations which we have are not getting rendered smoothly in the webkit browser provided by JavaFX, but same code in Firefox or chrome is quite smoother.

Also, no persistence is available(currently using variables in Java, and communication via JS for persistence).

What I am looking for is there any way to integrate some headless browser, or some settings to make CSS animations smoother. Only thing I came across was JxBrowser, but it's toooooo costly for personal usage.

Code :

public class Main extends Application {

    private Scene scene;
    MyBrowser myBrowser;

    String completeText = "";

    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Frontend");
        java.net.CookieManager manager = new java.net.CookieManager();
        java.net.CookieHandler.setDefault(manager);

        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser, 1080, 1920);

        primaryStage.setScene(scene);
        primaryStage.setFullScreen(true);
        primaryStage.show();

        // @ being the escape character
        scene.setOnKeyTyped(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                String text = event.getCharacter();
                if (text.equals("0")) {
                    String tempText = completeText;
                    completeText = "";
                    processText(tempText);
                }else {
                    completeText = completeText+text;
                }
            }
        });
    }
}

MyBrowser :

public class MyBrowser extends Region {

public MyBrowser() {
        webEngine.getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
            if (newValue == Worker.State.SUCCEEDED) {
                JSObject window = (JSObject) webEngine.executeScript("window");
                window.setMember("app", this);
            }
        });




        URL urlHello = getClass().getResource(hellohtml);

        webEngine.load(urlHello.toExternalForm());
        webView.setPrefSize(1080, 1920);
        webView.setContextMenuEnabled(false);
        getChildren().add(webView);
    }

CSS code which contains animation :

#ball-container.go #ball{
-webkit-animation: rotating-inverse 2s ease-out 0s 1 normal;
animation: rotating-inverse 2s ease-out 0s 1 normal;
}


#ball-container {
height: 102px;
width: 102px;
position: absolute;
top: -95px;
left: 480px;
-webkit-transition: all 0.9s ease-in-out 0s;
transition: all 0.9s ease-in-out 0s;
}



#ball-container.shake .ball-wrapper{
-webkit-animation: yAxis 0.9s ease-in-out;
animation: yAxis 0.9s ease-in-out;
}

Thank you.

Johannejohannes

The code you provided does not compile. Also the HTML is missing. – Holocaine

@OJKrylow : this code is just for reference, one of the animation we have. You can try any CSS animation from net(we did that already), and the performance is poor. – Johannejohannes

I tested the WebView with daneden.github.io/animate.css in 64bit and 32bit mode. There is no noticable jank with the animations. Other than some elements not rendering correctly, the animation seems fine. – Holocaine

@OJKrylow : We didn't had the same experience as you did unfortunately. As we have a moving football, the elements not being rendered correctly might be causing a problem. In any case, we are looking for a better solution. THank you. – Johannejohannes

I see you mentioned jxbrowser, it is a wrapper on the chromium framework - of which there is a simple framework here bitbucket.org/chromiumembedded/java-cef - there isn't an incredible amount of documentation/example code so it wouldn't be a drop and replace job, but it "should" have the same functionality as a webview. – Linus

Answer 1

Try using Java 8u112, based in your code I created a working sample (Tested using Java JDK 8u112 64bit):

import javafx.application.Application;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Example extends Application
{
    public static void main(String[] args)
    {
        launch(args);
    }

    class MyBrowser extends Parent
    {
        private WebEngine   webEngine;
        private WebView webView;

        public MyBrowser()
        {
            webView = new WebView();
            webEngine = webView.getEngine();

            // Ugly (but easy to share) HTML content 
            String pageContents = 
                    "<html>"
                        + "<head>"
                            + "<style>"
                                + "@-webkit-keyframes mymove {"
                                    + "from {top: 0px;}"
                                    + "to {top: 50px;}"
                                + "}"
                                + ".box { "
                                    + "width: 150px; "
                                    + "position: relative; "
                                    + "height: 150px; "
                                    + "background: red; "
                                    + "margin-top: 35px; "
                                    + "margin-left: auto; "
                                    + "margin-right: auto; "
                                    + "-webkit-transition: background-color 2s ease-out;  "
                                    + "-webkit-transition: all 1s ease-in-out; "
                                + "}"
                                +".box:hover {"
                                    +" background-color: green;"
                                    + "width:350px;"
                                    + "-webkit-animation: mymove 1s infinite;"
                                +"}"        
                            + "</style>"
                        + "</head>"
                        + "<body>"
                            + "<div class='box'></div>"
                        + "</body>"
                    + "</html>";

            webEngine.loadContent(pageContents);
            webView.setContextMenuEnabled(false);
            getChildren().add(webView);
        }
    }

    private Scene   scene;
    MyBrowser       myBrowser;

    @Override
    public void start(Stage primaryStage) throws Exception
    {
        primaryStage.setTitle("Frontend");
        myBrowser = new MyBrowser();
        scene = new Scene(myBrowser);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

I suspect this is because they are now using a newer webkit JDK-8156698 but it might have been a bug before (you can take a look at the 8u112 bug fixes list.

Gruber

Will try this out and let you know. Thank you. :-) – Johannejohannes

Answer 2

I had same issue rendering the angular based web application using webview.and fixed it by upgrading the Java version to 1.8.0_121.

Fellini