Output characters like conversation with JavaFX

Overview

When I created a game with JavaFX, there was a scene where I wanted to display a conversation event on Label, so I will write about that.

environment

• java 13.0.2
• JavaFX 13.0.2
• zsh 5.7.1 (x86_64-apple-darwin19.0.0)
• MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)

Execution example

Implementation

Way of thinking

I thought that what I was trying to do this time could be implemented by expanding the scope of disclosure of conversational sentences character by character and outputting them each time.

procedure

1. Create an fxml file (this time using SceneBuilder)
2. Create a file to start
3. Create a file to control the screen (add output processing here)
4. Execute

Creating an fxml file

Create a screen with SceneBuilder. This time, I installed one Label and oneButton, which are spaces for outputting characters. Since there is a place to set the controller, I chose TestController this time. When you're done, choose the Show Sample Controller Skelton from the Show or View. When the controller skeleton code is displayed, check FULL at the bottom right to copy the whole. Save this fxml this time with the name Test.fxml.

Test.fxml

<?xml version="1.0" encoding="UTF-8"?>    
    
<?import javafx.scene.control.Button?>    
<?import javafx.scene.control.Label?>    
<?import javafx.scene.layout.Pane?>    
   
    
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="TestController">        
   <children>    
      <Label fx:id="textLabel" layoutX="148.0" layoutY="102.0" prefHeight="120.0" prefWidth="305.0" />    
      <Button fx:id="button" layoutX="260.0" layoutY="292.0" mnemonicParsing="false" onAction="#buttonOnAction" prefHeight="48.0" prefWidth="82.0" />        
   </children>    
</Pane>   

Creating a startup file

Create a file to start JavaFX. Let's say Start.java.

Start.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.*;
import javafx.scene.Scene;
import javafx.scene.Parent;

public class Start extends Application {
    private Scene startScene;

    @Override
    public void start(Stage primaryStage) throws Exception {
	    primaryStage.setTitle("test");
	    startScene = new Scene(FXMLLoader.load(getClass().getResource("Test.fxml")));
	    primaryStage.setScene(startScene);
	    primaryStage.setResizable(false);
	    primaryStage.show();
    }

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

Create a file to control the screen

Finally, create a file to control the screen. Realize the above idea using Timeline.

TestController.java

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.util.Duration;

public class TestController {
    private int i;

    @FXML
    private ResourceBundle resources;

    @FXML
    private URL location;

    @FXML
    private Label textLabel;

    @FXML
    private Button button;

    @FXML
    void buttonOnAction(ActionEvent event) {
        showText("The button was pressed");
    }

    void showPerText(String showText, int i){
        textLabel.setText(showText.substring(0, i));
    }

    void showText(String showText){
        i = 0;
        Timeline timeline = new Timeline(
                new KeyFrame(
                        new Duration(100),
		    /*
		       new EventHandler<ActionEvent>(){
		       @Override
		       public void handle(ActionEvent event){
		       i+=1;
		       showPerText(showText, i);
		       }
		       }
		       */
                        (event) -> {
                            i+=1;
                            showPerText(showText, i);
                        }
                )
        );
        timeline.setCycleCount(showText.length());
        timeline.play();
    }

    @FXML
    void initialize() {
        assert textLabel != null : "fx:id=\"textLabel\" was not injected: check your FXML file 'Test.fxml'.";
        assert button != null : "fx:id=\"button\" was not injected: check your FXML file 'Test.fxml'.";
        textLabel.setText("Push the button");

    }
}

You can also see the source file from here.

Execute

When compiling, it is easier to specify all java files in the directory with * .java. Once compiled, you can run it with java Start.