Menu
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.
870
The recommended way to embed a JavaFX application into a web page or launch it from inside a web browser is to use the Deployment Toolkit library. The Deployment Toolkit provides a JavaScript API to simplify web deployment of JavaFX applications and improve the end user experience with getting the application to start.
It supports Cascading Style Sheets (CSS), JavaScript, Document Object Model (DOM), and HTML5. The embedded browser enables you to perform the following tasks in your JavaFX applications: Render HTML content from local and remote URLs.
A JavaFX application can communicate with the web page in which it is embedded by using a JavaScript engine. The host web page can also communicate to embedded JavaFX applications using JavaScript.
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.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
