16.5. JavaFX

• Modern UI toolkit introduced in Java 8. • Supports 2D/3D graphics, CSS, FXML (markup), and multimedia. • Replaces Swing for complex UIs.

JavaFX is a modern user interface framework that was introduced in Java 8. It allows developers to create rich graphical user interfaces, supporting advanced features such as 2D and 3D graphics, CSS for styling the UI, FXML for defining layouts in an XML-like syntax, and multimedia capabilities. It serves as a replacement for older UI frameworks like Swing, particularly when building complex user interfaces.

Think of JavaFX like the latest mobile phones that come with improved features and capabilities compared to older models. Just as modern phones support rich graphics, multimedia, and new ways of interacting (like touch), JavaFX brings similar advancements to desktop applications, making them more engaging and visually appealing.

• Stage: Main window. • Scene: Content inside the window. • Nodes: UI components (buttons, labels, etc.).

JavaFX has a clear architectural structure: The Stage represents the main window of the application. Each Stage can contain one or more Scenes, which hold the actual content displayed to the user. Within a Scene, you find Nodes representing various UI components such as buttons, labels, and text fields. This hierarchical structure allows for organizing and managing the elements of the user interface efficiently.

Imagine you are going to the theater. The Stage is the physical space where the performance occurs, and the Scene is the actual play being acted out on that stage. The actors and props are like the Nodes, each playing a specific role to create a cohesive performance for the audience.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFXApp extends Application {
    public void start(Stage primaryStage) {
        Button btn = new Button("Say Hello");
        btn.setOnAction(e -> System.out.println("Hello from JavaFX"));
        StackPane root = new StackPane(btn);
        Scene scene = new Scene(root, 300, 200);
        primaryStage.setTitle("JavaFX App");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

The provided code shows how to create a basic JavaFX application. It starts by importing necessary classes from the JavaFX library. The JavaFXApp class extends the Application class, which is required for any JavaFX application. Inside the start method, a Button is created that prints a message when clicked. A StackPane is used as the layout container, which allows stacking UI components. Lastly, a Scene is created with the StackPane as its root, and the main Stage is set with this Scene to be displayed.

Creating a JavaFX application is similar to setting up a simple food stand. You start with a table (Stage), decide what food items to display (Nodes like Buttons), and arrange them nicely on the table (Scene). When someone comes to the stand and asks for food (interacts with the UI), you provide it according to how you've set it up. Just like you need to make sure everything is organized at your stand, the code ensures all components are properly set in the application.

• Declarative way to define UI in XML. • Scene Builder: Drag-and-drop GUI tool.

FXML is a markup language used in JavaFX to define user interfaces in a declarative way, similar to HTML. This allows developers to separate the UI structure from the application logic. Scene Builder is a visual tool that enables developers to design FXML files through a drag-and-drop interface, making it easier to create and visualize user interfaces without writing extensive code. In the example line, a Button is defined in FXML with a text label and an action that triggers when the button is clicked.

Think of FXML like a blueprint for building a house. Instead of physically constructing a house piece by piece, you create a detailed plan that shows where each room and window goes. Scene Builder serves as your architect's office, where you can arrange your blueprint pieces visually before getting into construction (coding). This makes it easier to see how everything fits together before putting in the effort.

.button { -fx-background-color: #00ff00; -fx-font-size: 14pt; }

JavaFX allows you to use CSS (Cascading Style Sheets) to style your application. The example code demonstrates how to style a button by modifying its background color to green and setting its font size. CSS provides a powerful way to separate the style from the structure, letting developers create visually appealing interfaces without embedding style directly in the code.

Think of CSS styling as clothing for your application. Just as you choose colors, fabrics, and styles to express your personality through your clothes, CSS allows you to dress up your application to match its purpose or the emotions you wish to convey. A well-styled app is more attractive and engaging, much like a well-dressed person can make a great first impression.

--