This is a JavaFX tutorial. We want to see how to work with JavaFX TextFields, Buttons and Dialogs.

We will set items to our TextField when one button is clicked. Then retrieve the TextFiels values and show in a JavaFX dialog when another button is clicked.

What is JavaFX?

JavaFX is an open source framework based on Java that allows us develop rich client side applications.

It is the ultimate successor to Swing in the Java GUI arena. JavaFX is available as a public Java Application Programming Interface(API) and is open source.

JavaFX is written in Java Programming language thus allows us take advantage of all Java features like lambda expressions, generics, collections and multi-threading.

Furthermore this fact allows us use any IDE or editor to create JavaFX applications. Some of these include Netbeans, Intellij IDEA, Visual Studio Code and Atom.

JavaFX applications can be written in any language capable of running on the JVM(Java Virtual Machine).

Simplest JavaFX application

Here’s the simplest JavaFX applications that will display for us a window with a title:

 import javafx.application.Application;
import javafx.stage.Stage;

public class Starter extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("Mr JavaFX");
        primaryStage.setHeight(500);
        primaryStage.setWidth(500);
        primaryStage.setResizable(false);
        primaryStage.setAlwaysOnTop(true);
        primaryStage.show();
    }
}

Working with Buttons and TextFields in JavaFX

Let’s now see how to work with both Button and TextField controls. We will have a simple applications that can act as a simple form.

It will have two TextFields and two buttons. The user can set the values to the textfields either by typing or clicking the set button.

He can retrieve the values by clicking the get button with which the values will be shown in a JavaFX alert dialog.

Add Imports

First we will specify our package and add the imports. Most of our imports reside in the javafx.scene package.

 package textfieldvalues;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.control.TextField;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.Dialog;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

Create a Class that Extends Application

All JavaFX applications must extend the javafx.application.Application base class.

 public class TextFieldValues extends Application {..}

Overide the OnStart() Method

The Application class we looked at above is an abstract class and has an abstract method called start() that we have to override.

That method will take in a Stage object as a parameter.

 @Override
    public void start(Stage stage) {..}

Create Scene and Set Stage Tilte

Then we will create our scene by instantiating the javafx.scene.Scene class and passing in three parameters:

  1. A javafx.scene.Group object.
  2. Width of the scene.
  3. Height of the scene.

We then set the stage title:

         Scene scene = new Scene(new Group(), 500, 250);
        stage.setTitle("JavaFX Buttons and TextFields - Get/Set Values");

Create Two TextFields

We then create two TextFields by instantiating javafx.scene.control.TextFields as below:

         TextField nameTxt = new TextField ();
        TextField poetTxt = new TextField ();

These TextFields will be used to enter our values.

Create Two Buttons

Then we will instantiate two buttons. Buttons also belong to the javafx.scene.control package like TextFields.

Normally you perform an action when a button is clicked.

         Button getBtn=new Button("Get");
        Button setBtn=new Button("Set");

Organize TextFields and Buttons in GridPane

We can create a form-like interface by organizing our buttons and textfields in a grid manner using a gridpane:

         GridPane grid = new GridPane();
        grid.setVgap(5);
        grid.setHgap(10);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("Name: "), 0, 0);
        grid.add(nameTxt, 1, 0);
        grid.add(new Label("Occupation: "), 0, 1);
        grid.add(poetTxt, 1, 1);
        grid.add(setBtn, 2, 0);
        grid.add(getBtn, 2, 1);

Set Values To TextFields

When a set Button is clicked we will set values to our TextFields:

         setBtn.setOnMouseClicked((MouseEvent event) -> {
            //set textfield values
            nameTxt.setText("Rumi");
            poetTxt.setText("Poet");
        });

Get Values From TextFields

When the get button is clicked we will get the values in our TextFields and show them in a JavaFX Alert Dialog.

         getBtn.setOnMouseClicked((MouseEvent event) -> {
            //get textfield values and show in dialog
            Dialog d=new Alert(Alert.AlertType.INFORMATION,nameTxt.getText()+" was a "+poetTxt.getText());
            d.show();
        });

TextFieldValues.java

Here’s the Complete Source code

 package textfieldvalues;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.control.TextField;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.Dialog;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class TextFieldValues extends Application {
    /*
    Entry point for javaFX application
     */
    @Override
    public void start(Stage stage) {

        //set scene and title
        Scene scene = new Scene(new Group(), 500, 250);
        stage.setTitle("JavaFX Buttons and TextFields - Get/Set Values");

        //instantiate TextFields
        TextField nameTxt = new TextField ();
        TextField poetTxt = new TextField ();

        //instantiate buttons
        Button getBtn=new Button("Get");
        Button setBtn=new Button("Set");

        //instantiate gridpane, setVgap,Hgap,padding and add children
        GridPane grid = new GridPane();
        grid.setVgap(5);
        grid.setHgap(10);
        grid.setPadding(new Insets(5, 5, 5, 5));
        grid.add(new Label("Name: "), 0, 0);
        grid.add(nameTxt, 1, 0);
        grid.add(new Label("Occupation: "), 0, 1);
        grid.add(poetTxt, 1, 1);
        grid.add(setBtn, 2, 0);
        grid.add(getBtn, 2, 1);

        //listen to mouse click events our our buttons
        setBtn.setOnMouseClicked((MouseEvent event) -> {
            //set textfield values
            nameTxt.setText("Rumi");
            poetTxt.setText("Poet");
        });
        getBtn.setOnMouseClicked((MouseEvent event) -> {
            //get textfield values and show in dialog
            Dialog d=new Alert(Alert.AlertType.INFORMATION,nameTxt.getText()+" was a "+poetTxt.getText());
            d.show();
        });
        //add gridpane to group
        Group root = (Group) scene.getRoot();
        root.getChildren().add(grid);
        //set scene and show stage
        stage.setScene(scene);
        stage.show();
    }
    /*
    Main method
     */
    public static void main(String[] args) {
        Application.launch(args);
    }
}

Set Values to TextField when button is clicked.

Retrieve set values and show in a dialog when another button is clicked.

Best regards.

Categorized in:

TextField