Graphical User Interfaces (GUIs) are a vital part of modern desktop and enterprise applications. While Swing was Java’s original toolkit for GUI development, JavaFX has emerged as the modern alternative, offering a rich set of controls, CSS styling, FXML support, and hardware-accelerated graphics. This chapter introduces JavaFX, explains how to design user-friendly interfaces, and covers core components like layouts, controls, events, media integration, FXML, and CSS styling. You’ll learn how to build and deploy GUI-based applications with a responsive design and a clean separation of concerns using MVC (Model-View-Controller) patterns.

JavaFX is a platform for creating and delivering desktop applications, as well as rich internet applications (RIAs). It replaces Swing and AWT with a modern, feature-rich GUI toolkit. Features of JavaFX include:
- Hardware-accelerated graphics
- Scene graph-based rendering
- Built-in controls (buttons, sliders, etc.)
- CSS-like styling support
- FXML for declarative UI design
- Media and Web integration
- MVC support

JavaFX is based on a Scene Graph architecture.

Key Components:
- Stage: The top-level container (a window).
- Scene: Holds all UI elements.
- Nodes: Elements in the scene graph (buttons, panes, etc.).

Node Types:
- Controls (e.g., Button, TextField)
- Layouts (e.g., VBox, HBox, GridPane)
- Shapes (e.g., Circle, Rectangle)
- Containers (e.g., AnchorPane, BorderPane)

To start using JavaFX:

Installation:
- Use JDK 11+ with OpenJFX SDK
- Set environment variables
- Use IDE support (e.g., IntelliJ, Eclipse with e(fx)clipse plugin)

Hello World Example:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class HelloFX extends Application {
    @Override
    public void start(Stage primaryStage) {
        Label label = new Label('Hello, JavaFX!');
        Scene scene = new Scene(label, 300, 200);
        primaryStage.setScene(scene);
        primaryStage.setTitle('JavaFX Demo');
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

JavaFX provides a wide range of UI components:

Layouts help organize components within the scene.

Common Layout Managers:
| Layout | Description |
|------------|-------------------------------------------------------|
| HBox | Horizontal row |
| VBox | Vertical column |
| BorderPane | Top, bottom, center, left, right layout |
| GridPane | Grid-style layout |
| StackPane | Stacks components on top of each other |
| AnchorPane | Absolute positioning |

VBox Example:

VBox root = new VBox(10); // 10 px spacing
root.getChildren().addAll(new Label('Name'), new TextField());

JavaFX uses event-driven programming. Events are generated by UI interactions.

Event Types:
- ActionEvent (e.g., button clicks)
- KeyEvent (keyboard input)
- MouseEvent (mouse actions)

Example:

btn.setOnAction(event -> {
    System.out.println('Handled in lambda!');
});

JavaFX allows UI styling using CSS, similar to web development.

Example CSS:

.button {
    -fx-font-size: 16px;
    -fx-background-color: #3498db;
}

Applying CSS:

scene.getStylesheets().add('style.css');

FXML is an XML-based language for designing UI separate from logic.

Sample FXML:

Controller:

public class MyController {
    @FXML private TextField nameField;
    @FXML
    private void handleSubmit() {
        System.out.println('Hello, ' + nameField.getText());
    }
}

JavaFX supports audio and video playback.

Playing Audio:

Media sound = new Media('file:///path/to/audio.mp3');
MediaPlayer mediaPlayer = new MediaPlayer(sound);
mediaPlayer.play();

Playing Video:

Media media = new Media('file:///path/to/video.mp4');
MediaPlayer player = new MediaPlayer(media);
MediaView mediaView = new MediaView(player);

Charts:
- LineChart
- BarChart
- PieChart

Effects:
- DropShadow
- Glow
- Reflection

Animation:
Use Timeline or TranslateTransition for animation.

TranslateTransition transition = new TranslateTransition(Duration.seconds(2), button);
transition.setToX(100);
transition.play();

JavaFX encourages Model-View-Controller (MVC) architecture:
- Model – Data layer
- View – FXML/CSS UI
- Controller – Handles logic/events
This separation makes applications modular and testable.

JavaFX apps can be deployed as:
- Executable JARs
- Native installers (.exe, .dmg)
- Java modules (JMODs)
Use jlink and jpackage tools for packaging in JDK 14+.