Lesson 43 • Advanced
JavaFX – Desktop GUIs
Build modern desktop applications with JavaFX — the standard toolkit for creating rich, cross-platform graphical interfaces. Learn layouts, controls, CSS styling, FXML, property binding, and event handling to create professional desktop apps.
Before You Start
You should know OOP (JavaFX uses classes extensively), Lambda Expressions (for event handlers), and Maven/Gradle (for adding JavaFX dependencies). CSS knowledge helps for styling.
What You'll Learn
- ✅ JavaFX architecture: Stage, Scene, Nodes
- ✅ Layout panes: VBox, HBox, GridPane, BorderPane
- ✅ Controls: Button, TextField, TableView, ListView
- ✅ Event handling and property binding
- ✅ CSS styling for JavaFX applications
- ✅ FXML for declarative UI design
1️⃣ JavaFX Architecture
Analogy: A JavaFX app is like a theater production. The Stage is the window (the building), the Scene is the set design (what's displayed), and Nodes are the actors and props (buttons, text, images). You can swap scenes on the same stage, like changing acts.
| Component | Role | Example |
|---|---|---|
| Stage | Top-level window | primaryStage |
| Scene | Content container | new Scene(root, 800, 600) |
| Layout | Arranges children | VBox, GridPane, BorderPane |
| Controls | Interactive elements | Button, TextField, TableView |
Try It: JavaFX Layout System
// 💡 Try modifying this code and see what happens!
// JavaFX Layout System — building UI hierarchies
console.log("=== JavaFX Layout System ===\n");
// Simulated layout system
class Node {
constructor(type, text) { this.type = type; this.text = text; this.children = []; this.style = {}; }
add(...children) { this.children.push(...children); return this; }
setStyle(s) { this.style = s; return this; }
render(indent = 0) {
let pad = " ".repeat(indent);
let label = this.text ? this
...2️⃣ Property Binding — Reactive UIs
Analogy: Property binding is like a linked spreadsheet cell. When cell A1 changes, B1 (which references A1) updates automatically. Bind a Label's text to a Slider's value, and the label updates in real-time as the user drags. This is reactive UI programming.
Try It: Property Binding & Events
// 💡 Try modifying this code and see what happens!
// Property binding and event handling
console.log("=== Property Binding & Events ===\n");
// Simulated Observable Properties
class SimpleProperty {
constructor(value) { this._value = value; this.listeners = []; }
get() { return this._value; }
set(v) {
let old = this._value;
this._value = v;
this.listeners.forEach(fn => fn(v, old));
}
addListener(fn) { this.listeners.push(fn); }
bind(other) {
this._value = other.g
...Common Mistakes
- ⚠️ Updating UI from background thread — Use
Platform.runLater()for non-FX thread updates - ⚠️ Heavy work on FX thread — blocks the UI. Use
TaskorServicefor background ops - ⚠️ Hardcoding sizes — breaks on different screens. Let layout panes manage sizing
- ⚠️ Regular List instead of ObservableList — TableView/ListView won't auto-update
Pro Tips
- 💡 Scene Builder — visual drag-and-drop FXML editor (free from Gluon)
- 💡 MVC pattern — FXML = View, Controller = Controller, Model = data classes
- 💡 CSS pseudo-classes —
.button:hover,.text-field:focusedwork like web CSS - 💡 JavaFX + GraalVM — compile to native with
gluonfx:nativepackage
Try It: FXML & CSS Styling
// 💡 Try modifying this code and see what happens!
// FXML declarative UI and CSS styling
console.log("=== FXML & CSS Styling ===\n");
// 1. FXML structure
console.log("1. FXML — DECLARATIVE UI:");
console.log(` <!-- login.fxml -->
<VBox xmlns:fx="http://javafx.com/fxml"
fx:controller="com.app.LoginController"
spacing="10" alignment="CENTER" styleClass="root">
<Label text="Welcome" id="title"/>
<TextField fx:id="emailField" promptText="Email"/>
<PasswordFie
...📋 Quick Reference
| Concept | API | Notes |
|---|---|---|
| Create window | stage.setScene(scene) | stage.show() |
| Event handler | btn.setOnAction(e -> ...) | Lambda preferred |
| Binding | prop.bind(otherProp) | Auto-sync values |
| Load FXML | FXMLLoader.load(url) | Declarative UI |
| Background | new Task<Void>() | Safe background work |
| UI from thread | Platform.runLater() | FX thread required |
| Add CSS | scene.getStylesheets().add() | -fx- prefix for props |
🎉 Lesson Complete!
You can now build desktop apps with JavaFX! You understand Stage/Scene/Node, layout panes, property binding, CSS styling, and FXML. Next: Networking — sockets, HTTP clients, and web communication.
Sign up for free to track which lessons you've completed and get learning reminders.