Basics of JavaFX in Java

Introduction

JavaFX is a framework used for building rich graphical user interfaces (GUIs) in Java. It provides a wide range of UI components such as buttons, labels, text fields, and more, along with the ability to create advanced graphical features like animations, 2D shapes, and 3D effects.

JavaFX allows developers to create cross-platform applications that run on Windows, macOS, and Linux. It uses a scene graph to organize the user interface elements and provides an easy way to handle user input, display content, and manage the UI lifecycle.

Setting Up JavaFX

Before you start using JavaFX, you need to ensure that you have JavaFX configured in your development environment. If you are using JDK 11 or later, JavaFX is no longer bundled with the JDK, and you need to install it separately.

To set up JavaFX, follow these steps:

• Download and install JavaFX from the official website: https://openjfx.io/
• Add the JavaFX library to your project's classpath.
• If you are using an IDE like IntelliJ IDEA or Eclipse, configure the JavaFX SDK in the project settings.

Creating a Simple JavaFX Application

Let's create a simple JavaFX application that displays a window with a label and a button.

Step 1: Creating the Main Class

The main class of a JavaFX application must extend the Application class and override the start() method, which is the entry point for the JavaFX application.

  import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.control.Button;
  import javafx.scene.layout.StackPane;
  import javafx.stage.Stage;
      
  public class HelloWorldApp 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("Hello JavaFX");
          primaryStage.setScene(scene);
           primaryStage.show(); // Show the window
      }
  }
        

In this example:

• The HelloWorldApp class extends the Application class and overrides the start() method.
• A Button is created with the label "Click Me!".
• A StackPane layout is used to hold the button, and a Scene is created to display the layout.
• The primaryStage.setTitle() method sets the title of the window, and primaryStage.setScene() attaches the scene to the window.
• Finally, primaryStage.show() displays the window to the user.

Event Handling in JavaFX

JavaFX provides a simple way to handle user input through event handling. You can attach event handlers to UI components like buttons, text fields, and more. In the previous example, we attached an event handler to the button using the setOnAction() method.

Here's an example of handling a button click to change the text of a label:

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

In this example:

• A Label is created to display some text.
• A Button is created, and an event handler is attached using the setOnAction() method.
• When the button is clicked, the text of the label is updated using label.setText().

JavaFX Layouts

JavaFX provides several layout classes to arrange UI components in the window. Some commonly used layouts are:

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

Step 1: Using HBox Layout

In this example, we will use a HBox layout to arrange two buttons horizontally.

    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(); // Show the window
        }
    }
        

In this example:

• An HBox layout is used to arrange the two buttons horizontally with 10px spacing.
• The getChildren().addAll() method is used to add both buttons to the layout.

Conclusion

In this tutorial, we covered the basics of JavaFX in Java:

• We created a simple JavaFX application with a button and a label.
• We learned how to handle events such as button clicks.
• We explored JavaFX layouts like HBox to organize UI components.