JavaFX Fundamentals: Stages, Scenes & UI Building Blocks

Master JavaFX architecture, UI controls, and layout panes. Learn how to build your first Java window with stages, scenes, and nodes in this guide.

#javafx#java-programming#ui-design#software-development#layout-panes#coding-tutorial#desktop-apps

Watch
Pitch

01

JavaFX Architecture

Understanding the building blocks of a JavaFX application

🏟️

STAGE

The top-level container — represents the application window (like a theater stage)

🖼️

SCENE

Holds all visual content — only one scene is shown on stage at a time

🧩

NODES

Individual UI elements — buttons, labels, text fields, images, shapes

STAGE

Application Window

contains

SCENE

Visual Content Holder

made of

NODE

(Button)

NODE

(Label)

NODE

(TextField)

JAVAFX → REAL WORLD

STAGE

Theater Stage

SCENE

Stage Setup

NODES

Props & Actors

Made by

02

Stage & Scene in Detail

How JavaFX windows and content containers work together

📐 What is Stage?

Top-level window container
Created automatically by JavaFX runtime
Can be PRIMARY or SECONDARY
Controls: title, size, close/minimize

🖼️ What is Scene?

Holds the Scene Graph (all UI nodes)
Requires a root Node (like VBox, StackPane)
Set width & height in pixels
Attached to Stage via stage.setScene()

🔗 How They Work Together

1 Stage is created

2 Scene is built

3 Scene added to Stage

4 Stage is shown

JavaFX Code

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

public class MyApp extends Application {
    @Override
    public void start(Stage primaryStage) {
        Label label = new Label("Hello, JavaFX!");
        StackPane root = new StackPane(label);
        Scene scene = new Scene(root, 400, 300);

        primaryStage.setTitle("My First App");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

LINE-BY-LINE BREAKDOWN

Line 7: start() is the entry point

Line 9: Label = text node

Line 10: StackPane = layout container

Line 11: Scene created with 400x300

Line 12: Window title set

Line 13: Scene attached to Stage

Line 14: Window displayed

STAGE = Entire Window

My First App

SCENE = Inner Content

Label Node = Text Element

Hello, JavaFX!

✅ OUTPUT: Running on Desktop

Made by

03

Nodes & UI Controls in JavaFX

The fundamental building blocks of every JavaFX user interface

🧩

A Node is any visual element in the scene graph. JavaFX provides many built-in UI control nodes:

BUTTON

🔹 Triggers an action on click

Button btn = new Button("Click Me");

LABEL

🔹 Displays non-editable text

Label lbl = new Label("Hello!");

Hello!

TEXTFIELD

🔹 Single-line text input

TextField tf = new TextField();

PASSWORDFIELD

🔹 Masked password input

PasswordField pf = new PasswordField();

••••••

TEXTAREA

🔹 Multi-line text input

TextArea ta = new TextArea();

CHECKBOX

🔹 Toggle on/off selection

CheckBox cb = new CheckBox("Agree");

Agree

RADIOBUTTON

🔹 Single selection from group

RadioButton rb = new RadioButton("Yes");

Yes

Made by

04

Layout Panes in JavaFX

Organize your UI elements with the right container

💡 Layout Panes automatically manage the size and position of child nodes inside them.

VBox

Structure Stacks children VERTICALLY top to bottom

Usage Forms, menus, sidebars

Advantage Simple vertical stacking

HBox

Structure Arranges children HORIZONTALLY left to right

Usage Toolbars, button rows, nav bars

Advantage Simple horizontal arrangement

BorderPane

Structure 5 regions — Top, Bottom, Left, Right, Center

Usage App main layout (header/sidebar/content/footer)

Advantage Most common full-app layout

T

L

C

R

B

GridPane

Structure Rows and columns like a table/spreadsheet

Usage Forms, calculators, data grids

Advantage Precise control over position

FlowPane

Structure Wraps children like text — fills row then wraps

Usage Tag clouds, image galleries, button groups

Advantage Responsive wrapping behavior

JAVAFX
→ REAL WORLD

VBox

Form Layout

HBox

Toolbar

BorderPane

App Window

GridPane

Calculator

FlowPane

Tag Cloud

Made by

05

Creating Your First JavaFX Application

Step-by-step guide to building and running your first JavaFX window

1

Import Statements

Import JavaFX packages needed

2

Extend Application

Your class extends Application

3

Override start()

Main UI method called by runtime

4

Create Stage & Scene

Build the window and content

5

Add Controls

Add buttons, labels, text fields

6

Call launch()

Run the application from main()

FirstApp.java

// Step 1: Import statements
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

// Step 2: Extend Application
public class FirstApp extends Application {

    // Step 3: Override start() method
    @Override
    public void start(Stage primaryStage) {

        // Step 5: Add controls
        Label lbl = new Label("Welcome to JavaFX!");
        Button btn = new Button("Click Me");

        // Step 4: Create layout and scene
        VBox root = new VBox(10, lbl, btn);
        Scene scene = new Scene(root, 350, 200);

        // Step 4: Configure Stage
        primaryStage.setTitle("First JavaFX App");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    // Step 6: Main method
    public static void main(String[] args) {
        launch(args);
    }
}

✅ Output Window

First JavaFX App

Welcome to JavaFX!

Click Me

Application Flow

💻

main()

➔

🚀

launch()

➔

🎬

start()

🏟️

Stage
Created

➔

🖼️

Scene
Added

➔

✨

show()

Made by

DESIGNER-MADE
PRESENTATION,
GENERATED FROM
YOUR PROMPT

Create your own professional slide deck with real images, data charts, and unique design in under a minute.

Generate For Free

JavaFX Fundamentals: Stages, Scenes & UI Building Blocks

Master JavaFX architecture, UI controls, and layout panes. Learn how to build your first Java window with stages, scenes, and nodes in this guide.

JavaFX Architecture

Understanding the building blocks of a JavaFX application

STAGE

The top-level container — represents the application window (like a theater stage)

SCENE

Holds all visual content — only one scene is shown on stage at a time

NODES

Individual UI elements — buttons, labels, text fields, images, shapes

Stage & Scene in Detail

How JavaFX windows and content containers work together

📐 What is Stage?

🖼️ What is Scene?

🔗 How They Work Together

Nodes & UI Controls in JavaFX

The fundamental building blocks of every JavaFX user interface

A Node is any visual element in the scene graph. JavaFX provides many built-in UI control nodes:

BUTTON

Triggers an action on click

Button btn = new Button("Click Me");

LABEL

Displays non-editable text

Label lbl = new Label("Hello!");

TEXTFIELD

Single-line text input

TextField tf = new TextField();

PASSWORDFIELD

Masked password input

PasswordField pf = new PasswordField();

TEXTAREA

Multi-line text input

TextArea ta = new TextArea();

CHECKBOX

Toggle on/off selection

CheckBox cb = new CheckBox("Agree");

RADIOBUTTON

Single selection from group

RadioButton rb = new RadioButton("Yes");

Layout Panes in JavaFX

Organize your UI elements with the right container

Layout Panes automatically manage the size and position of child nodes inside them.

VBox

Stacks children VERTICALLY top to bottom

Forms, menus, sidebars

Simple vertical stacking

HBox

Arranges children HORIZONTALLY left to right

Toolbars, button rows, nav bars

Simple horizontal arrangement

BorderPane

5 regions — Top, Bottom, Left, Right, Center

App main layout (header/sidebar/content/footer)

Most common full-app layout

GridPane

Rows and columns like a table/spreadsheet

Forms, calculators, data grids

Precise control over position

FlowPane

Wraps children like text — fills row then wraps

Tag clouds, image galleries, button groups

Responsive wrapping behavior

Creating Your First JavaFX Application

Step-by-step guide to building and running your first JavaFX window

Import Statements

Import JavaFX packages needed

Extend Application

Your class extends Application

Override start()

Main UI method called by runtime

Create Stage & Scene

Build the window and content

Add Controls

Add buttons, labels, text fields

Call launch()

Run the application from main()

javafx
java-programming
ui-design
software-development
layout-panes
coding-tutorial
desktop-apps