Layouts and Controls in JavaFX

Introduction

JavaFX is a powerful framework for building graphical user interfaces (GUIs) in Java. It provides a variety of UI controls like buttons, text fields, labels, and others, which can be combined in different layouts to build interactive and responsive applications.

In this tutorial, we will explore how to use JavaFX layouts and controls, including how to work with common controls such as Button, TextField, Label, and more, and how to arrange them using different layout managers like HBox, VBox, and BorderPane.

Setting Up JavaFX

Before starting, ensure that you have JavaFX set up in your development environment. If you are using JDK 11 or later, you need to download and install the JavaFX SDK separately, as it is no longer bundled with the JDK.

To set up JavaFX:

• Download JavaFX SDK from openjfx.io.
• Set the JavaFX library in your IDE’s classpath (e.g., IntelliJ IDEA, Eclipse).

Using JavaFX Controls

1. Button Control

A Button is a common UI control used to trigger actions in a JavaFX application. You can create a button and add an event handler to respond to user clicks.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Button;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;
      
          public class ButtonExample extends Application {
              public static void main(String[] args) {
                  launch(args); // Launch the JavaFX application
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create a button
                  Button button = new Button("Click Me!");
      
                  // Set the action for the button
                  button.setOnAction(e -> System.out.println("Button clicked"));
      
                  // Create a layout and add the button to it
                  StackPane root = new StackPane();
                  root.getChildren().add(button);
      
                  // Create a scene with the layout
                  Scene scene = new Scene(root, 300, 200);
      
                  // Set up the stage (window)
                  primaryStage.setTitle("Button Example");
                  primaryStage.setScene(scene);
                  primaryStage.show(); // Show the window
              }
          }
        

In this example:

• A Button is created with the text "Click Me!".
• The setOnAction() method is used to add an event handler that prints a message when the button is clicked.
• The button is added to a StackPane layout, which is then displayed in the window.

2. TextField Control

A TextField is used to accept text input from the user. You can retrieve the text entered into the TextField and use it in your application.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Button;
          import javafx.scene.control.TextField;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;
      
          public class TextFieldExample extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create a TextField
                  TextField textField = new TextField();
      
                  // Create a button
                  Button button = new Button("Submit");
      
                  // Set the action for the button
                  button.setOnAction(e -> {
                      String inputText = textField.getText();
                      System.out.println("Text entered: " + inputText);
                  });
      
                  // Create a layout and add the TextField and Button to it
                  StackPane root = new StackPane();
                  root.getChildren().addAll(textField, button);
      
                  // Create a scene with the layout
                  Scene scene = new Scene(root, 300, 200);
      
                  // Set up the stage (window)
                  primaryStage.setTitle("TextField Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this example:

• A TextField is created to allow the user to enter text.
• A Button is added to submit the entered text.
• The getText() method is used to retrieve the text from the TextField.

3. Label Control

A Label is used to display text or other content in a JavaFX application. Labels are typically used for displaying static text or for showing results.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Label;
          import javafx.scene.layout.StackPane;
          import javafx.stage.Stage;
      
          public class LabelExample extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create a label
                  Label label = new Label("Hello, JavaFX!");
      
                  // Create a layout and add the label to it
                  StackPane root = new StackPane();
                  root.getChildren().add(label);
      
                  // Create a scene with the layout
                  Scene scene = new Scene(root, 300, 200);
      
                  // Set up the stage (window)
                  primaryStage.setTitle("Label Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this example:

• A Label is created with the text "Hello, JavaFX!".
• The label is added to a StackPane layout and displayed in the window.

Layouts in JavaFX

JavaFX provides several layout containers to arrange UI controls in the application window. Some of the most commonly used layouts are:

• HBox: Arranges components horizontally.
• VBox: Arranges components vertically.
• BorderPane: Divides the window into five regions: top, bottom, left, right, and center.
• GridPane: Arranges components in a grid of rows and columns.

4. HBox Layout

The HBox layout arranges its children in a horizontal row. Here is an example that arranges two buttons side by side.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Button;
          import javafx.scene.layout.HBox;
          import javafx.stage.Stage;
      
          public class HBoxExample extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create two buttons
                  Button button1 = new Button("Button 1");
                  Button button2 = new Button("Button 2");
      
                  // Create an HBox layout and add the buttons
                  HBox hbox = new HBox(10); // 10px spacing between buttons
                  hbox.getChildren().addAll(button1, button2);
      
                  // Create a scene with the layout
                  Scene scene = new Scene(hbox, 300, 200);
      
                  // Set up the stage (window)
                  primaryStage.setTitle("HBox Layout Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this example:

• The HBox layout arranges two buttons horizontally with a 10px gap between them.
• The buttons are added to the HBox layout using getChildren().addAll().

5. VBox Layout

The VBox layout arranges its children in a vertical column. Let's look at an example where buttons are arranged vertically.

          import javafx.application.Application;
          import javafx.scene.Scene;
          import javafx.scene.control.Button;
          import javafx.scene.layout.VBox;
          import javafx.stage.Stage;
      
          public class VBoxExample extends Application {
              public static void main(String[] args) {
                  launch(args);
              }
      
              @Override
              public void start(Stage primaryStage) {
                  // Create two buttons
                  Button button1 = new Button("Button 1");
                  Button button2 = new Button("Button 2");
      
                  // Create a VBox layout and add the buttons
                  VBox vbox = new VBox(10); // 10px spacing between buttons
                  vbox.getChildren().addAll(button1, button2);
      
                  // Create a scene with the layout
                  Scene scene = new Scene(vbox, 300, 200);
      
                  // Set up the stage (window)
                  primaryStage.setTitle("VBox Layout Example");
                  primaryStage.setScene(scene);
                  primaryStage.show();
              }
          }
        

In this example:

• The VBox layout arranges two buttons vertically with a 10px gap between them.
• The buttons are added to the VBox layout using getChildren().addAll().

Conclusion

In this tutorial, we covered:

• How to use JavaFX controls like Button, TextField, and Label.
• How to set up event handlers for user actions, such as button clicks.
• How to use JavaFX layouts like HBox and VBox to arrange UI components.