← Back to chapters

JAVA — CHAPTER 16

JavaFX GUI: Part 2 · Concept Cheat Sheet
Layout Panes Mouse Events Property Binding ListView FileChooser
1 LAYING OUT NODES IN A SCENE GRAPH

VBox / HBox

Vertical / horizontal stacking with configurable spacing

GridPane

Rows & columns — use add(node, col, row)

BorderPane

Top / bottom / left / right / center regions

StackPane

Layers children on top of each other, centered

2 RADIOBUTTONS, MOUSE EVENTS & SHAPES
ToggleGroup colors = new ToggleGroup(); RadioButton red = new RadioButton("Red"); red.setToggleGroup(colors); canvas.setOnMouseClicked(event -> { double x = event.getX(), y = event.getY(); Circle dot = new Circle(x, y, 5, Color.RED); root.getChildren().add(dot); });

Key ideas

  • A ToggleGroup makes RadioButtons mutually exclusive
  • MouseEvent gives click coordinates, button pressed, etc.
  • Shapes (Circle, Rectangle, Line) are Nodes — can be added to any layout pane
3 PROPERTY BINDINGS & LISTENERS
Rectangle swatch = new Rectangle(100, 50); swatch.fillProperty().bind(colorPicker.valueProperty()); // swatch auto-updates whenever colorPicker changes! slider.valueProperty().addListener((obs, oldV, newV) -> { label.setText("Value: " + newV); });

Why bindings matter

A binding keeps two properties automatically in sync — no manual event-handler wiring needed. A listener instead runs custom code whenever a property changes.

4 DATA-DRIVEN GUIS: JavaFX COLLECTIONS & ListView
ObservableList<String> items = FXCollections.observableArrayList("A","B","C"); ListView<String> list = new ListView<>(items); items.add("D"); // ListView auto-refreshes!

ObservableList

A list that notifies any bound UI control automatically when its contents change — the foundation of data-driven JavaFX apps like a "cover viewer" gallery.

5 CUSTOM CELLS, FileChooser & DirectoryChooser

Custom ListView cells

Override setCellFactory() to control how each row looks (e.g. show an image + text instead of plain text).

FileChooser

FileChooser fc = new FileChooser(); File f = fc.showOpenDialog(stage);

DirectoryChooser

Same pattern as FileChooser, but lets the user pick a folder instead of a file.

6 METHOD REFERENCE TABLE

Property & Binding methods

MethodPurpose
bind(otherProperty)keeps this property in sync with another
unbind()stops the automatic sync
addListener(change -> ...)runs code whenever the value changes
get()/set(v)read/write the property's current value

ObservableList / ListView

MethodPurpose
FXCollections.observableArrayList()creates an observable list
setCellFactory(factory)customizes how each row renders
getSelectionModel().getSelectedItem()currently selected row's value