textAreaで１行ずつテキストを表示させたいです。

Question

前提・実現したいこと

練習としてjavafxを使用してコマンドプロンプトの模擬アプリを作ろうと思っています。
その中で本来のコマンドプロンプトでpingコマンドを使った時同様、
10.55.55.33 からの応答: バイト数 =32 時間 <1ms TTL=128
10.55.55.33 からの応答: バイト数 =32 時間 <1ms TTL=128
10.55.55.33 からの応答: バイト数 =32 時間 <1ms TTL=128
10.55.55.33 からの応答: バイト数 =32 時間 <1ms TTL=128
の部分のところを例えば１行１秒ずつでtextAreaに表示させたいのです。

ソースを載せるのでどこを直した方がいいか教えてください。

ド初心者なので多少のことは目をつぶって頂けるとありがたいです。

発生している問題・エラーメッセージ

コンパイルしてもエラーは出てないのですが、
実際に実行すると、4秒経った後に全部の本来表示させたい文が出てくるのです。

該当のソースコード

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import java.awt.Dimension;
import javafx.scene.control.TextArea;
import java.util.*;

public class sample extends Application {
Label l1, l2; // ラベル
TextField tx1, tx2; // テキストフィールド
Button start, buttonSub, buttonMul, buttonDiv, buttonMod, bC; // ボタン
TextArea textArea,ta2; // テキストエリア
ChoiceBox<String> cb;//チョイスボックス
RadioButton rb1,rb2,rb3;//ラジオボタン
ToggleGroup ping;
int num1, num2;

public void start(Stage stage) {
stage.setWidth(1200);
stage.setHeight(700);


l1 = new Label("pingコマンドデモ");
l1.setFont(new Font(40));

l2 = new Label("コマンド選択してください");

rb1=new RadioButton("ping 10.55.55.33");
ping=new ToggleGroup();
rb1.setToggleGroup(ping);
rb1.setSelected(true);


bC = new Button("Clear");
bC.setOnAction(event -> buttonClearPressed());
start = new Button("実行");
start.setOnAction(event -> buttonStartPressed());

textArea = new TextArea("実行結果が表示されます。\nC:￥Users￥f17K6○○○>");
textArea.setStyle("-fx-text-fill: white;-fx-font-size: 16;");

HBox hbox = new HBox(5);
hbox.getChildren().addAll(start,bC);

VBox vbox = new VBox(5);
vbox.setPadding(new Insets(20, 25, 25, 25));
vbox.getChildren().addAll(l1,l2,rb1,hbox);

BorderPane root = new BorderPane();
root.setLeft(vbox);
root.setCenter(textArea);
stage.setScene(new Scene(root));
stage.show();
textArea.lookup(".content").setStyle("-fx-background-color: black;");//色の変更
}

void buttonClearPressed() {
textArea.clear();
textArea.setText("実行結果が表示されます。\nC:￥Users￥f17K6○○○>");
}

void buttonStartPressed(){
  int ransu,a=0,b=0,c=0;
  if ("ping 10.55.55.33"==((RadioButton)ping.getSelectedToggle()).getText()){
    textArea.appendText("ping 10.40.83.33\n10.40.83.33 に ping を送信しています 32 バイトのデータ:");

    for(int i=0;i<4;i++){
      try{
        Thread.sleep(1000);
      }catch(InterruptedException e){
        System.out.println(e);
      }
      textArea.appendText("\n10.55.55.33 からの応答: バイト数 =32 時間 <1ms TTL=128");
  }
  
    textArea.appendText("\n10.55.55.33 の ping 統計:\n  パケット数: 送信 = 4、受信 = 4、損失 = 0 (0% の損失)\n  ラウンド トリップの概算時間 (ミリ秒):\n  最小 = 0ms、最大 = 0ms、平均 = 0ms");
  textArea.appendText("\n\nC:￥Users￥f17K6○○○>");

}
}

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

Answer 1

4秒後に一度に変更内容が反映された原因

「単一のイベントハンドラーの処理の中でsleepしながらノードの状態を更新しようとしているから」といえます。

画面を構成する要素(Node)インスタンスの状態(プロパティー)を変更するとそれがディスプレイ上に反映されるのですが、その反映はプロパティーを変更すると同時に行われるわけではありません。ではいつ反映されるかというと、イベントハンドラーからイベントループへ戻った時点と考えれば概ねよいと思います。

要するにご質問のコードの動きは以下のようになったと考えられます。

(A1) JavaFXランタイム内: マウスイベント検出
(B2) JavaFXランタイム内: マウスイベントに対するハンドラー(buttonStartPressed)起動
(C3) ハンドラー内:
        TextAreaへテキストを追記
        1秒sleep
        TextAreaへテキストを追記
        1秒sleep
        ...
        TextAreaへテキストを追記
        <=イベントループへ復帰(return)
(A2) Nodeの状態が変化していたとき、変更内容をレンダリングスレッドへ転送する。
     つまりこの時点でようやく(C3)での変更の内容が画面上へ描画される

対処

イベントハンドラーは「ごく短い時間だけ必要な処理を行い、直ちにイベントループへ復帰」するのが原則です。ご質問のコードのようにハンドラーの中でsleepしてしまうと「このハンドラーが終了するまでイベントループが停止し、アプリケーションがイベントに適切に反応しなくなります。それは本質問の主題以上に悪影響を及ぼします。

対処の方法は以下の2通りが考えられます。

(A) 一定時間が経過したら別のイベントを発生させそのハンドラーの中で必要な動作をする
具体的にはTimelineクラスなどが使いやすいです。
(B) 別のスレッドでsleepなどによる処理シーケンスを実装し、そのなかで画面の更新をPlatform.runLaterで要求する

アニメーションのようにあらかじめ決まった時間で画面を更新したいなら(A)の方式が適切と思います。一方「イベントループでは検出できないタイミング(例えば別プロセスで実行中のプログラムが標準出力へ何かを出力した契機)で画面を更新したい場合、(B)の方法がやりやすいと思います。

以下に(B)を用いた簡単な例を挙げます。

void buttonStartPressed() {
  if (rb1.isSelected()) {
    Thread thread = new Thread() {
      @Override
      public void run() {
        Platform.runLater(() -> textArea.appendText("first\n"));
        // for文をforEachに変更しています。Platform.runLaterで用いるlambda式から
        // ループの制御変数iを参照するにはiがfinalでなくてはならず、forループが使いにくいからです
        IntStream.range(0, 4).forEach(i -> {
          try {
            sleep(1000);
          } catch (InterruptedException e) {
            e.printStackTrace(); // デバッグ用
          }
          Platform.runLater(() -> textArea.appendText("line" + i + "\n"));
        });
        Platform.runLater(() -> textArea.appendText("last\n"));
        Platform.runLater(() -> {
          try {
            join();
          } catch (InterruptedException e) {
            e.printStackTrace(); // デバッグ用
          }
        });
      }
    };
    thread.start();
  }
}

Comments

[YM_anoahiro]

無事動きました！ありがとうございました！！！

[KSwordOfHaste]

しまった。コード間違えてました。上記ではコンパイルエラーに・・・
そのあたりはくみ取っていただき解決済みのようですが、一応コードを直しておきます。
---
元のコードはnew Thread(() -> {...});のようにlambda式としてスレッド処理を書いたため本体の中でThreadに対するメソッド(sleep/join)を呼び出せないものになってました。回答のコードを匿名クラスに書き直しました。失礼しました。

Answer 2

https://stackoverflow.com/questions/16868445/appending-text-to-a-textarea-over-time-with-delay

JavaFX does have a timer built in - it's called a Timeline. It's simple, straightforward, and provides extra functionality like Swing's Timer class, and, most importantly, executes code on the UI thread.

https://stackoverflow.com/questions/9966136/javafx-periodic-background-task/9966213#9966213

You can use Timeline for what matter:

省略

for background processes (which don't do anything to UI) you can use old good java.util.Timer:

こちらに書かれていますが、java.util.Timerを使用するのが良いのではないでしょうか。