I've read similar questions but my UI is still freezing when I add many nodes to a VBox. I've provided a fully functional program below which demonstrates the problem clearly.
After 4 seconds, the ProgressIndicator freezes as 5000 nodes are added to the VBox. This is an excessive amount used to demonstrate the JavaFX thread freezing despite using Task (for non-UI work) and then Platform.runLater() for adding the nodes to the scene.
In my actual application, instead of adding blank TitlePanes I'm adding a TitlePane obtained from an FXML file via new FXMLLoader(), and the resulting loader.load() then initializes the associated controller, which in turn initializes some moderately demanding computations - which are being performed on the JavaFX thread! So even though I'm adding closer to 250 nodes, the UI still freezes when the Platform.runLater is eventually used. How do I keep the ProgressIndicator from freezing until the red background is shown?
Full Example:
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Accordion;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.util.Timer;
import java.util.TimerTask;
public class FreezingUI extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage primaryStage) {
VBox mainBox = new VBox();
mainBox.setPrefHeight(800);
mainBox.setStyle("-fx-background-color: #f1f1f1; -fx-alignment: center");
Label label = new Label();
label.setMinHeight(50);
label.setStyle("-fx-font-size: 24px; -fx-text-fill: #515151");
ProgressIndicator progressIndicator = new ProgressIndicator(ProgressIndicator.INDETERMINATE_PROGRESS);
mainBox.getChildren().addAll(progressIndicator, label);
Scene scene = new Scene(mainBox, 500, 800);
primaryStage.setScene(scene);
primaryStage.show();
Timer timer = new Timer();
TimerTask task = new TimerTask(){
private int i = 4;
public void run(){
if (i >= 0) {
Platform.runLater(()->{
label.setText("Freezing in " + i--);
});
}else{
addNodesToUI(mainBox);
timer.cancel();
}
}
};
timer.scheduleAtFixedRate(task, 0, 1000);
}
private void addNodesToUI(VBox mainBox) {
final int[] i = {0};
Platform.runLater(() -> {
Accordion temp = new Accordion();
mainBox.getChildren().add(temp);
while (i[0] < 5000) {
TitledPane tp = new TitledPane();
tp.setPrefWidth(300);
tp.setPrefHeight(12);
tp.setPadding(new Insets(10));
tp.setStyle("-fx-background-color: red;");
temp.getPanes().add(tp);
i[0]++;
}
});
}
}
This is happening because you are asking the UI thread to do a big bunch of things in one big lump. There is no way for the UI thread to exit the while loop until all 5000 nodes are created and added to the scene.
private void addNodesToUI(VBox mainBox) {
final int[] i = {0};
Accordion temp = new Accordion();
Platform.runLater(() -> {
mainBox.getChildren().add(temp);
});
while (i[0] < 5000) {
TitledPane tp = new TitledPane();
tp.setPrefWidth(300);
tp.setPrefHeight(12);
tp.setPadding(new Insets(10));
tp.setStyle("-fx-background-color: red;");
i[0]++;
Platform.runLater(() -> {
temp.getPanes().add(tp);
});
}
}
This will allow your nodes to be created in small batches. This way, the UI thread can attempt to render the UI while the nodes are added progressively.
For your FXML case, you can create and load the FXML in another thread. You only need to be in UI thread when you attach a scene branch into the scene. However, I would suspect that would only mitigate the effects, as you are still going to attach a big chunk at one go.
Related
I created a VBox (root) and added some Button in it. When I click the button with text "Click" (button_to_click), ten other button (an button array with ten elements) will change background color into 'red'. I want per button change its backgr color per second. I used PauseTransition to do this but it didn't work. Here are my code
package sample;
import javafx.animation.PauseTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.scene.control.*;
import javafx.util.Duration;
public class Main extends Application {
#Override
public void start(Stage primaryStage) throws Exception{
VBox root = new VBox();
Button button_to_click = new Button("Click");
Button[] buttons = new Button[10];
root.getChildren().add(button_to_click);
for(int i = 0; i <= 9; i++){
buttons[i] = new Button(""+i);
root.getChildren().add(buttons[i]);
}
button_to_click.setOnAction(e->{
for(int i = 0; i <= 9; i++){
buttons[i].setStyle("-fx-background-color:red");
PauseTransition pause = new PauseTransition(Duration.seconds(1));
pause.play();
}
});
primaryStage.setScene(new Scene(root, 300, 275));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
All button change its background color at the same time, that isn't what I want.
You are treating PauseTransition like it’s a Thread.sleep call. But PauseTransition does not work like that.
And even if it were the same, a sleep call would not do what you want. JavaFX, like most user interface toolkits, is single threaded, so a sleep call would hang the application.
The pause transition occurs in a background thread. What you want is to change a button’s color when the pause finishes:
button_to_click.setOnAction(e -> {
for (int i = 0; i <= 9; i++) {
Button button = buttons[i];
PauseTransition pause = new PauseTransition(Duration.seconds(i));
pause.setOnFinished(
f -> button.setStyle("-fx-background-color:red"));
pause.play();
}
});
Notice that I have changed the PauseTransition’s duration from seconds(1) to seconds(i). This isn’t the most efficient approach, but it requires the fewest changes to your existing code. It will cause each button’s setStyle method to be invoked after i seconds have passed.
I'm trying to remove all the nodes from my pane sequentially 1 by 1 so I can see each line being removed.To do this I have made a new thread and used the task class and wrapped the method delWalls() in a Platform.runLater() . I then used Thread.sleep thinking it would slow the loop slow so I could see the UI updating as each line is removed However what happens is the whole UI freezes up and then after the loop is done all the nodes have disappeared? Is there a way around this ... thanks
*all nodes are lines btw
//loop calls delWalls() 1458 times to delete all 1458 nodes sequentailly
Task task = new Task<Void>() {
#Override
public Void call() {
Platform.runLater(() -> {
try {
for (int i = 0; i <= 1458 - 1; i++) {
Thread.sleep(2);
delWalls();
}
} catch (InterruptedException e) {
e.printStackTrace();
}
});
return null;
}
};
new Thread(task).start();
}
//delWalls method deletes one node each time it is called.
public void delWalls() throws InterruptedException {
pane.getChildren().remove(0);
}
As #MadProgrammer said, you need to work with Timeline to get the desired effect.
Below is a quick sample demo of how it can be done. Click "Add" to add nodes sequentially, and once all 10 nodes are added, click "remove" to remove them one by one.
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
public class RemoveNodes_Demo extends Application {
#Override
public void start(Stage stage) throws Exception {
FlowPane pane = new FlowPane();
pane.setVgap(10);
pane.setHgap(10);
Button button1 = new Button("Add Nodes");
button1.setOnAction(e->{
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(400), x -> {
StackPane sp = new StackPane();
sp.setMinSize(100,100);
sp.setStyle("-fx-background-color:black,red;-fx-background-insets:0,2;");
pane.getChildren().add(sp);
}));
timeline.setCycleCount(10);
timeline.play();
});
Button button2 = new Button("Remove Nodes");
button2.setOnAction(e->{
if(!pane.getChildren().isEmpty()){
int count = pane.getChildren().size();
Timeline timeline = new Timeline(new KeyFrame(Duration.millis(400), x -> {
if(!pane.getChildren().isEmpty()){
pane.getChildren().remove(0);
}
}));
timeline.setCycleCount(count);
timeline.play();
}
});
VBox root = new VBox(button1, button2,pane);
root.setSpacing(10);
Scene sc = new Scene(root, 600, 600);
stage.setScene(sc);
stage.show();
}
public static void main(String... a) {
Application.launch(a);
}
}
I have a Pane in which i add and remove nodes during a computation. Therefor i save a boolean which is set to true if the computation is running. of course i do some handling on starting and terminating a computation.
What i want to do now is: disable all MouseEvents on the children of the Pane if the computation starts and reenable them if the computation is terminated.
My tries until now where limited to completly remove the EventHandlers, but then i can't add them again later.
unfortunately i couldn't find a way to do this, so i hope for help here :)
Thanks in advance
Assuming you have implemented the long-running computation as a Task or Service (and if you haven't, you should probably consider doing so), you can just do something along the following lines:
Pane pane ;
// ...
Task<ResultType> computation = ... ;
pane.disableProperty().bind(computation.runningProperty());
new Thread(computation).start();
Calling setDisable(true) on a node will disable all its child nodes, so this will disable all the children of the pane, and re-enable them when the task is no longer running.
Here's an SSCCE:
import javafx.application.Application;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
public class ComputationSimulation extends Application {
#Override
public void start(Stage primaryStage) {
// text fields for input:
TextField xInput = new TextField();
TextField yInput = new TextField();
// Service for performing the computation.
// (For demo here, the computation just computes the sum of
// the two input values. Obviously this doesn't take long, so
// a random pause is inserted.)
Service<Integer> service = new Service<Integer>() {
#Override
protected Task<Integer> createTask() {
final int x = readTextField(xInput);
final int y = readTextField(yInput);
return new Task<Integer>() {
#Override
public Integer call() throws Exception {
// simulate long-running computation...
Thread.sleep((int)(Math.random() * 2000) + 1000);
// this doesn't really take much time(!):
return x + y ;
}
};
}
};
// Label to show result. Just use binding to bind to value of computation:
Label result = new Label();
result.textProperty().bind(service.valueProperty().asString());
// Button starts computation by restarting service:
Button compute = new Button("Compute");
compute.setOnAction(e -> service.restart());
// Pane to hold controls:
GridPane pane = new GridPane();
// Disable pane (and consequently all its children) when computation is running:
pane.disableProperty().bind(service.runningProperty());
// layout etc:
pane.setHgap(5);
pane.setVgap(10);
pane.addRow(0, new Label("x:"), xInput);
pane.addRow(1, new Label("y:"), yInput);
pane.addRow(2, new Label("Total:"), result);
pane.add(compute, 1, 3);
ColumnConstraints left = new ColumnConstraints();
left.setHalignment(HPos.RIGHT);
left.setHgrow(Priority.NEVER);
pane.getColumnConstraints().addAll(left, new ColumnConstraints());
pane.setPadding(new Insets(10));
Scene scene = new Scene(pane);
primaryStage.setScene(scene);
primaryStage.show();
}
// converts text in text field to an int if possible
// returns 0 if not valid text, and sets text accordingly
private int readTextField(TextField text) {
try {
return Integer.parseInt(text.getText());
} catch (NumberFormatException e) {
text.setText("0");
return 0 ;
}
}
public static void main(String[] args) {
launch(args);
}
}
I have a FlowPane where a lot of elements are added (~1000), each one of these elements contains an ImageView and some other elements and is loaded from an fxml file. With this many entries, it takes a long time until the nodes are rendered, and then they are displayed all at once.
Because of that, I would like to add the nodes one by one, using a thread. I tried the following:
Platform.runLater(new Runnable() {
#Override
public void run() {
for (Object v : collection.getObjects()) {
addEntry(v);
flowPane.requestLayout();
}
}
});
What addEntry() does is basically just loading the Node from the fxml and adding it to the flowPane.
With this code, the flowPane is rendered immediately, but the nodes still appear all at once.
Can someone point me in the right direction? Thanks!
Your runlater is doing everything at once. It's like one call to update the gui with all the nodes. It needs to be called repeatedly in a loop.
import javafx.application.Application;
import javafx.application.Platform;
import javafx.concurrent.Task;
import javafx.scene.Scene;
import javafx.scene.layout.FlowPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class FlowPaneTest extends Application {
#Override
public void start(Stage primaryStage) {
final FlowPane flow = new FlowPane();
flow.getChildren().add(new Text("Starting "));
Task task = new Task() {
#Override protected Void call() throws Exception {
//for (Object v : collection.getObjects()){
for (int i = 0; i < 100; i++) {//use your loop instead
Platform.runLater(()->{
flow.getChildren().add(new Text("adding node "));
});
Thread.sleep(100);
}
return null;
}
};
Scene scene = new Scene(flow, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
Thread th = new Thread(task);
th.setDaemon(true);
th.start();
}
}
I have a JavaFX application, within it are about 20 labels. When a user clicks a label, I need the label to flash red. To make the label flash red, I am using a thread I actually developed for swing but converted to JavaFX. It worked for awhile, but I've recently traced the application lock-ups to the animation of the label. The way I did the animation was simple:
new Thread(new AnimateLabel(tl,idx)).start();
tl points to an ArrayList of labels, and idx to the index of it. Another label has an on click event attached to it, and when you click, it creates the thread that animates the label (makes it flash).
For some reason, this will cause the application to lock up if there's a lot of labels being pressed.
I'm pretty sure it's a thread safety issue with JavaFX. I have another thread that shares the JavaFX application thread as so:
TimerUpdater tu = new TimerUpdater(mDS);
Timeline incHandler = new Timeline(new KeyFrame(Duration.millis(130),tu));
incHandler.setCycleCount(Timeline.INDEFINITE);
incHandler.play();
TimerUpdater will constantly update the text on labels, even the ones that are flashing.
Here's the label animator:
private class AnimateLabel implements Runnable
{
private Label lbl;
public AnimateLabel(Label lbl, int myIndex)
{
// if inAnimation.get(myIndex) changes from myAnim's value, stop,
// another animation is taking over
this.lbl = lbl;
}
#Override
public void run() {
int r, b, g;
r=255;
b=0;
g=0;
int i = 0;
while(b <= 255 && g <= 255)
{
RGB rgb = getBackgroundStyle(lbl.getStyle());
if(rgb != null)
{
if(rgb.g < g-16) { return; }
}
lbl.setStyle("-fx-color: #000; -fx-background-color: rgb("+r+","+g+","+b+");");
try { Thread.sleep(6); }
catch (Exception e){}
b += 4;
g += 4;
++i;
}
lbl.setStyle("-fx-color: #000; -fx-background-color: fff;");
}
}
I would run this as such:
javafx.application.Platform.runLater(new AnimateLabel(tl, idx));
However, Thread.sleep(6) will be ignored. Is there a way to pause in a run later to control the speed of the animation while sharing a thread with javafx.application?
Regards,
Dustin
I think there's a slight misunderstanding of how the JavaFX event queue works.
1) Running your AnimateLabel code on a normal thread will cause the Label#setStyle(...) code to execute on that thread - this is illegal and likely to cause your issues.
2) Running the AnimateLabel code entirely on the JavaFX event queue, as per your second example, means that the event thread would be blocked until the animation is complete. Meanwhile, the application will not update, will not process user events or repaint, for that matter. Basically, you're changing the label style within a loop, but you're not giving the event queue time to actually redraw the label, which is why you won't see anything on screen.
The semi-correct approach is a mixture of both. Run AnimateLabel in a separate thread, but wrap the calls to Label#setStyle(...) in a Platform#runLater(...). This way you'll only bother the event thread with the relevant work, and leave it free to do other work in between (such as updating the UI).
As I said, this is the semi-correct approach since there's a build-in facility to do what you want in an easier fashion. You might want to check out the Transition class. It offers a simple approach for custom animations and even offers a bunch of prebuilt subclasses for animating the most common properties of a Node.
Sarcan has an excellent answer.
This answer just provides sample code (base on zonski's forum post) for a Timeline approach to modifying a css style. The code can be used as an alternative to the code you post in your question.
An advantage of this approach is that the JavaFX libraries handle all of the threading issues, ensuring all of your code is executed on the JavaFX thread and eliminating any thread safety concerns you may have.
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.beans.value.*;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;
import javafx.util.Duration;
public class CssFlash extends Application {
private Label flashOnClick(final Label label) {
label.setStyle(String.format("-fx-padding: 5px; -fx-background-radius: 5px; -fx-background-color: lightblue;"));
DoubleProperty opacity = new SimpleDoubleProperty();
opacity.addListener(new ChangeListener<Number>() {
#Override public void changed(ObservableValue<? extends Number> source, Number oldValue, Number newValue) {
label.setStyle(String.format("-fx-padding: 5px; -fx-background-radius: 5px; -fx-background-color: rgba(255, 0, 0, %f)", newValue.doubleValue()));
}
});
final Timeline flashAnimation = new Timeline(
new KeyFrame(Duration.ZERO, new KeyValue(opacity, 1)),
new KeyFrame(Duration.millis(500), new KeyValue(opacity, 0)));
flashAnimation.setCycleCount(Animation.INDEFINITE);
flashAnimation.setAutoReverse(true);
label.setOnMouseClicked(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent t) {
if (Animation.Status.STOPPED.equals(flashAnimation.getStatus())) {
flashAnimation.play();
} else {
flashAnimation.stop();
label.setStyle(String.format("-fx-padding: 5px; -fx-background-radius: 5px; -fx-background-color: lightblue;"));
}
}
});
return label;
}
#Override public void start(Stage stage) throws Exception {
TilePane layout = new TilePane(5, 5);
layout.setStyle("-fx-background-color: whitesmoke; -fx-padding: 10;");
for (int i = 0; i < NUM_LABELS; i++) {
layout.getChildren().add(flashOnClick(new Label("Click to flash")));
}
Scene scene = new Scene(layout);
stage.setScene(scene);
stage.show();
}
private static final int NUM_LABELS = 20;
public static void main(String[] args) { Application.launch(args); }
}
JavaFX 8 will allow you to set the background of a region using a Java API, so that, if you wanted, you could accomplish the same thing without css.
Sample program output with a few of the labels clicked and in various states of flashing: