Showing a JavaFX Popup in Java

In this article, we will see how we can use one of the components of the JavaFX toolkit called popup. As the name suggests, the popup component shows a simple popup when executed using the GUI features of JavaFX. Following are two examples of using the popup component.

Popup With a Text in Java

Before proceeding to the actual program, we should check out the methods and classes with the JavaFX GUI kit.

• Stage: The top-level class in JavaFX extends the window and creates a window where we can place a scene.
• Scene: A JavaFX scene is another class that renders the given components of the JavaFX toolkit.
• JavaFX Application Class: Used to launch the JavaFX application, and the class we use should extend the application class.

Now we come to the program; in the below example, we create a class Main and extend the Application class of the JavaFX package. We then call the abstract method start() of the application class, which is essential because it is executed when the application is started.

The start() method takes a single argument of the Stage type, automatically created by the JavaFX runtime. As the stage is the main window, we set its title using stage.setTitle(), and to open the JavaFX popup, we create a Button component’s object.

To layout the components inside the popup, we use a layout component called TilePane that shows its children nodes as a grid. Next, we create an object of the Label component to show in the popup.

We create a Popup object and add the Label object to it using popup.getContent.add() method. To set the background of the Label we use the setStyle() method and pass in the style.

Then, we set the size of label using setHeight() and setWidth() methods. Now, we create an event handler’s anonymous class to open and close the popup when the button is clicked.

In the anonymous class of EventHandler<ActionEvent> type, we call popup.isShowing() and check if the popup is visible on screen, and if it is not, then show it using the popup.show() method in which the stage object is passed as an argument. To hide the popup, we use the hide() function.

Now we set the event handler as an action of the button and add the button to the tilePane layout object using tilePane.getChildren().add(). To show all the components we created, we create a Scene object and pass tilePane and the gaps between each grid.

Finally, we set the scene object to the stage object and call the show() method of the stage class. At last, we call the launch() method of the Application class with the command lines arguments.

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.TilePane;
import javafx.stage.Popup;
import javafx.stage.Stage;

public class Main extends Application {
    public void start(Stage stage) {
        stage.setTitle("A Popup Example");
        Button button = new Button("Click to open a Popup");

        TilePane tilePane = new TilePane();
        Label label = new Label("This is a popup");

        Popup popup = new Popup();

        label.setStyle("-fx-background-color: grey;");
        popup.getContent().add(label);

        label.setMinWidth(100);
        label.setMinHeight(80);

        EventHandler<ActionEvent> actionEventHandler =
                et -> {
                    if (!popup.isShowing()) {
                        popup.show(stage);
                        button.setText("Click to Hide a Popup");
                    } else {
                        popup.hide();
                        button.setText("Click to open a Popup");

                    }
                };

        button.setOnAction(actionEventHandler);
        tilePane.getChildren().add(button);

        Scene scene = new Scene(tilePane, 450, 360);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {

        launch(args);

    }
}

Output (before opening the popup):

Output (after opening the popup):