← Back to chapters

JAVA — CHAPTER 15

JavaFX Graphical User Interfaces: Part 1 · Cheat Sheet
Stage / Scene Scene Builder Layout Panes Event Handling
1 APPLICATION WINDOW STRUCTURE
Stage (the window)
Scene (the content area)
Root node (e.g. VBox)
→ Label, Button, ImageView…

The hierarchy

  • Stage — the top-level window itself
  • Scene — everything displayed inside that window
  • Node — every visible element (buttons, labels, images) forming a tree, starting from a root layout pane
2 JavaFX Scene Builder

What it is

A visual, drag-and-drop design tool for laying out JavaFX UIs. It produces an FXML file (an XML description of the UI) that your Java code loads at runtime.

Why use it

  • Separates UI layout (FXML) from application logic (Java "controller" class)
  • Faster visual iteration than hand-writing layout code
3 WELCOME APP: TEXT & IMAGE
public class Welcome extends Application { public void start(Stage stage) { Label label = new Label("Welcome to JavaFX!"); ImageView image = new ImageView( new Image("logo.png")); VBox root = new VBox(10, label, image); // 10 = spacing stage.setScene(new Scene(root, 300, 200)); stage.setTitle("Welcome"); stage.show(); } public static void main(String[] args) { launch(args); } }
4 TIP CALCULATOR: INTRO TO EVENT HANDLING
Button calcButton = new Button("Calculate"); calcButton.setOnAction(event -> { double bill = Double.parseDouble(billField.getText()); double tip = bill * 0.15; tipLabel.setText("Tip: " + tip); });

Event-driven programming

  • The app sits idle until the user acts (click, type, etc.)
  • setOnAction(event -> ...) registers a lambda as the handler
  • Handler code runs on the JavaFX Application Thread whenever the event fires
5 LAYOUT PANES YOU'LL MEET NEXT

VBox / HBox

Stack children vertically / horizontally.

BorderPane

Top, bottom, left, right, and center regions.

GridPane

Arrange children in rows and columns.

6 METHOD REFERENCE TABLE

class Stage

MethodPurpose
setScene(scene)attaches the content to display
setTitle(text)sets the window's title bar text
show()makes the window visible
setResizable(bool)allows/blocks window resizing

Common Node / Control methods

MethodPurpose
setText(str) / getText()set/read a Label/Button/TextField's text
setOnAction(handler)registers a click/action event handler
setVisible(bool)show/hide the node
setDisable(bool)enable/disable user interaction
setStyle(css)applies inline CSS styling