JavaFX - Loop through TextFields in a GridPane and update text with pause

Question

I have a GridPane with 20 empty text fields. I want to loop through each textfield and update the text in each with values from an ArrayList, with ~1 second pause in between each. I can't figure it out.

I create the GridPane like so:

        GridPane grid = new GridPane();
        
        Scene drawing = new Scene(new VBox(grid), 500, 200);
        primaryStage.setScene(drawing);
        
        for (int i = 0; i < 2; ++i) {
            for (int j = 0; j < 10; ++j) {              
                TextField tf = new TextField();
                tf.setPrefHeight(50);
                tf.setPrefWidth(50);
                tf.setAlignment(Pos.CENTER);
                tf.setEditable(false);
                grid.add(tf, j, i);
            }
        }

I now want to go through each textbox and add text with a pause in between. Using Thread.sleep() in a loop is causing the application to crash. I've tried PauseTransition like this:

ArrayList<Integer> numsDrawn= game.draw();
int count = 0;
for (Node node : grid.getChildren()) {
            PauseTransition pause = new PauseTransition(Duration.seconds(1));
            pause.setOnFinished(e -> ((TextField)node).setText(Integer.toString(numsDrawn.get(count))));
            pause.play();
            count++;
        }

But I am getting the error Local variable count defined in an enclosing scope must be final or effectively final.

Count has to be able to change so I can iterate through the numsDrawn list and add different text to each TextField. I've tried creating a separate event handler instead of a lambda, but getting the same error with count.

If someone could offer advice on how to do this seemingly simple task, I'd greatly appreciate it.

score 1 · Accepted Answer · answered Oct 04 '20 at 23:28

I would recommend Timeline in this situation. Set the duration to one second and the cycle count to the number of TextFields in the GridPane.

import java.util.concurrent.atomic.AtomicInteger;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Control;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

public class App extends Application  {

    Timeline timeline;
    AtomicInteger counter = new AtomicInteger();
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        GridPane gridPane = new GridPane();
        gridPane.add(new TextField(), 0, 0);
        gridPane.add(new TextField(), 0, 1);
        gridPane.add(new TextField(), 0, 2);
        gridPane.add(new TextField(), 0, 3);
        gridPane.add(new TextField(), 0, 4);
        gridPane.add(new TextField(), 0, 5);
        gridPane.add(new TextField(), 0, 6);
        gridPane.add(new TextField(), 0, 7);
        gridPane.setMaxSize(Control.USE_PREF_SIZE, Control.USE_PREF_SIZE);
        
        timeline = new Timeline(new KeyFrame(Duration.seconds(1), (ActionEvent t) -> {
            System.out.println(counter.get());
            TextField tempTextField = (TextField)gridPane.getChildren().get(counter.get());
            tempTextField.setText(Integer.toString(counter.getAndIncrement()));           
        }));
        timeline.setCycleCount(gridPane.getChildren().size());
        
        Button btnStartTimeline = new Button("Start Timeline");
        btnStartTimeline.setOnAction((t) -> {
            timeline.play();
        });
        
        VBox root = new VBox(gridPane, btnStartTimeline);
        root.setAlignment(Pos.CENTER);
        Scene scene = new Scene(root, 700, 700);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        Application.launch(args);
    }
    
    
}

Thank you!! What is the benefit of using a Timeline over just starting a new thread? — shrapnel360, Oct 10 '20 at 20:00
You could use `Thread` but if you did, you should make use of `Task` or `Service`. `Task`, `Service`, and `Timeline` are designed for `JavaFX`. `Timeline` is best to use of the three when altering a `Node`. The other two are better for background work that don't alter `Node(s)`. There may be other ideas from the `Animation` API that are good to used when altering `Nodes`. — SedJ601, Oct 10 '20 at 22:28

score 0 · Answer 2 · answered Oct 04 '20 at 21:56

According to the error message you should pass a final variable to the numsDrawn.get method, so I would try this:

ArrayList<Integer> numsDrawn= game.draw();
int count = 0;
for (Node node : grid.getChildren()) {
    PauseTransition pause = new PauseTransition(Duration.seconds(1));
    final int countFinal = count;
    pause.setOnFinished(e -> ((TextField)node).setText(Integer.toString(numsDrawn.get(countFinal))));
    pause.play();
    count++;
}

shrapnel360 · Answer 3 · 2020-10-04T22:05:03.963

So I figured it out on my own. When creating the grid with textfields, I also add each textfield to an ArrayList tfs so that I can access each field individually to add the text later. I then create a new thread to add the text to each field from numsDrawn like so:

new Thread(() -> {
            for (int i = 0; i < 20; ++i) {
                final int j = i;
                Platform.runLater(() -> tfs.get(j).setText(Integer.toString(numsDrawn.get(j))));
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e1) {
                    // TODO Auto-generated catch block
                    e1.printStackTrace();
                }
            }
        }).start();

Starting a new thread is not necessary if you use `Platform.runLater`. Anyway check out if my answer solve you problem. — Couper, Oct 04 '20 at 22:04

JavaFX - Loop through TextFields in a GridPane and update text with pause

3 Answers3