JavaFX Registration Form Design Example

In this JavaFX source code example, we will learn how to design a Registration/Signup form in JavaFX.

Creating a Registration/Signup form is a common activity when developing an application.

If you want to know how to validate the Registration/Signup form then check out JavaFX Registration Form Validation Example.

JavaFX Registration Form Design Example

Let's create a Main class and add the following content to it:
import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.HPos; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.stage.Stage; import javafx.stage.Window; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception { primaryStage.setTitle("Registration Form JavaFX Application"); // Create the registration form grid pane GridPane gridPane = createRegistrationFormPane(); // Add UI controls to the registration form grid pane addUIControls(gridPane); // Create a scene with registration form grid pane as the root node Scene scene = new Scene(gridPane, 800, 500); // Set the scene in primary stage primaryStage.setScene(scene); primaryStage.show(); } private GridPane createRegistrationFormPane() { // Instantiate a new Grid Pane GridPane gridPane = new GridPane(); // Position the pane at the center of the screen, both vertically and horizontally gridPane.setAlignment(Pos.CENTER); // Set a padding of 20px on each side gridPane.setPadding(new Insets(40, 40, 40, 40)); // Set the horizontal gap between columns gridPane.setHgap(10); // Set the vertical gap between rows gridPane.setVgap(10); // Add Column Constraints // columnOneConstraints will be applied to all the nodes placed in column one. ColumnConstraints columnOneConstraints = new ColumnConstraints(100, 100, Double.MAX_VALUE); columnOneConstraints.setHalignment(HPos.RIGHT); // columnTwoConstraints will be applied to all the nodes placed in column two. ColumnConstraints columnTwoConstrains = new ColumnConstraints(200,200, Double.MAX_VALUE); columnTwoConstrains.setHgrow(Priority.ALWAYS); gridPane.getColumnConstraints().addAll(columnOneConstraints, columnTwoConstrains); return gridPane; } private void addUIControls(GridPane gridPane) { // Add Header Label headerLabel = new Label("Registration Form"); headerLabel.setFont(Font.font("Arial", FontWeight.BOLD, 24)); gridPane.add(headerLabel, 0,0,2,1); GridPane.setHalignment(headerLabel, HPos.CENTER); GridPane.setMargin(headerLabel, new Insets(20, 0,20,0)); // Add Name Label Label nameLabel = new Label("Full Name : "); gridPane.add(nameLabel, 0,1); // Add Name Text Field TextField nameField = new TextField(); nameField.setPrefHeight(40); gridPane.add(nameField, 1,1); // Add Email Label Label emailLabel = new Label("Email ID : "); gridPane.add(emailLabel, 0, 2); // Add Email Text Field TextField emailField = new TextField(); emailField.setPrefHeight(40); gridPane.add(emailField, 1, 2); // Add Password Label Label passwordLabel = new Label("Password : "); gridPane.add(passwordLabel, 0, 3); // Add Password Field PasswordField passwordField = new PasswordField(); passwordField.setPrefHeight(40); gridPane.add(passwordField, 1, 3); // Add Submit Button Button submitButton = new Button("Submit"); submitButton.setPrefHeight(40); submitButton.setDefaultButton(true); submitButton.setPrefWidth(100); gridPane.add(submitButton, 0, 4, 2, 1); GridPane.setHalignment(submitButton, HPos.CENTER); GridPane.setMargin(submitButton, new Insets(20, 0,20,0)); submitButton.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { String username = nameField.getText().toString(); String email = emailField.getText().toString(); String password = passwordField.getText().toString(); System.out.println("username -> " + username); System.out.println("email address -> " + email); System.out.println(" Password -> " + password); } }); } }
Let's understand the above source code step by step.

Create a GridPane Layout

 private GridPane createRegistrationFormPane() { // Instantiate a new Grid Pane GridPane gridPane = new GridPane(); // Position the pane at the center of the screen, both vertically and horizontally gridPane.setAlignment(Pos.CENTER); // Set a padding of 20px on each side gridPane.setPadding(new Insets(40, 40, 40, 40)); // Set the horizontal gap between columns gridPane.setHgap(10); // Set the vertical gap between rows gridPane.setVgap(10); // Add Column Constraints // columnOneConstraints will be applied to all the nodes placed in column one. ColumnConstraints columnOneConstraints = new ColumnConstraints(100, 100, Double.MAX_VALUE); columnOneConstraints.setHalignment(HPos.RIGHT); // columnTwoConstraints will be applied to all the nodes placed in column two. ColumnConstraints columnTwoConstrains = new ColumnConstraints(200,200, Double.MAX_VALUE); columnTwoConstrains.setHgrow(Priority.ALWAYS); gridPane.getColumnConstraints().addAll(columnOneConstraints, columnTwoConstrains); return gridPane; }

Create Label and Text Field for Username

 // Add Name Label Label nameLabel = new Label("Full Name : "); gridPane.add(nameLabel, 0,1); // Add Name Text Field TextField nameField = new TextField(); nameField.setPrefHeight(40); gridPane.add(nameField, 1,1);

Create Label and Text Field for Email

 // Add Email Label Label emailLabel = new Label("Email ID : "); gridPane.add(emailLabel, 0, 2); // Add Email Text Field TextField emailField = new TextField(); emailField.setPrefHeight(40); gridPane.add(emailField, 1, 2);

Create Label and Text Field for Password

 // Add Password Label Label passwordLabel = new Label("Password : "); gridPane.add(passwordLabel, 0, 3); // Add Password Field PasswordField passwordField = new PasswordField(); passwordField.setPrefHeight(40); gridPane.add(passwordField, 1, 3);

Create Submit Button

 // Add Submit Button Button submitButton = new Button("Submit"); submitButton.setPrefHeight(40); submitButton.setDefaultButton(true); submitButton.setPrefWidth(100); gridPane.add(submitButton, 0, 4, 2, 1); GridPane.setHalignment(submitButton, HPos.CENTER); GridPane.setMargin(submitButton, new Insets(20, 0,20,0));

Submit Button Event Handling

 submitButton.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { String username = nameField.getText().toString(); String email = emailField.getText().toString(); String password = passwordField.getText().toString(); System.out.println("username -> " + username); System.out.println("email address -> " + email); System.out.println(" Password -> " + password); } });

Output:

What's Next?

If you want to know how to validate the Registration/Signup form then check out JavaFX Registration Form Validation Example.

Comments