JavaFX Introduction

📘 JavaFX Tutorial: First FXML Application

🎯 Goal

In this tutorial, you will learn how to build a simple JavaFX application using:

• Application class
• FXML for UI design
• Controller for logic

📁 Project Structure

org.example.testingtoturials
│
├── Launcher.java
├── HelloApplication.java
├── HelloController.java
└── hello-view.fxml

🚀 1. Launcher Class

This class is the entry point of the application.

package org.example.testingtoturials;

import javafx.application.Application;

public class Launcher {
    public static void main(String[] args) {
        Application.launch(HelloApplication.class, args);
    }
}

💡 Explanation

• We use Application.launch() to start the JavaFX application.
• It calls the start() method inside HelloApplication.

🖥️ 2. Main Application Class

This class loads the UI and displays the window.

package org.example.testingtoturials;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(
            HelloApplication.class.getResource("hello-view.fxml")
        );

        Scene scene = new Scene(fxmlLoader.load(), 320, 240);

        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }
}

💡 Explanation

• FXMLLoader loads the UI from the .fxml file.
• Scene represents the content inside the window.
• Stage is the main window.
• stage.show() displays the application.

🎮 3. Controller Class

Handles user interactions (logic).

package org.example.testingtoturials;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class HelloController {

    @FXML
    private Label welcomeText;

    @FXML
    protected void onHelloButtonClick() {
        welcomeText.setText("Welcome to JavaFX Application!");
    }
}

💡 Explanation

• @FXML connects Java code with FXML elements.
• welcomeText is linked to a Label in the UI.
• When the button is clicked, the label text changes.

🎨 4. FXML UI File

Defines the user interface.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" spacing="20.0"
      xmlns:fx="http://javafx.com/fxml"
      fx:controller="org.example.testingtoturials.HelloController">

    <padding>
        <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
    </padding>

    <Label fx:id="welcomeText"/>
    <Button text="Hello!" onAction="#onHelloButtonClick"/>

</VBox>

💡 Explanation

• VBox arranges elements vertically.
• fx:controller links this file to HelloController.
• fx:id="welcomeText" connects the Label to Java code.
• onAction="#onHelloButtonClick" calls the method in the controller.

🔗 How Everything Works Together

1. Launcher.main() starts the app
2. HelloApplication.start() loads the FXML
3. FXML creates UI and links to HelloController
4. Button click → calls onHelloButtonClick()
5. Label text updates 🎉

🧪 Final Result

When you run the app:

• A window appears with a button
• Clicking the button updates the text

⚠️ Common Mistakes

• ❌ Wrong FXML path → getResource("hello-view.fxml")
• ❌ Missing @FXML annotation
• ❌ fx:id not matching variable name
• ❌ Method name mismatch in onAction