JavaFX

1Scene Builder draws the tree as FXML

Scene Builder is a desktop tool: you drag a TextField and a Button onto a pane, and it writes an FXML file — XML that names the node tree.

The Java side loads that FXML and hooks event methods. You still need to understand Stage and Scene; the tool does not replace the types.

No diagram — the idea is carried by the prose or the Java listing.

2Stage is the window; Scene is the contents; nodes are the pieces

A Stage is the window the operating system shows — title bar, close box. A Scene is the graph of nodes inside it. A Node is one piece: a label, an image, a button, a pane.

start(Stage stage) receives the primary stage. You build or load a parent node, wrap it in a Scene, call setScene and show.

Figure. One window, one scene graph. Nodes nest; the Stage does not nest inside the Scene.

How it works

1. Stage is the window; Scene is the contents; nodes are the piecesStage is the window. Scene is the contents. Nodes are the pieces inside the scene.

start builds Scene, then show

public void start(Stage stage) {
    Label title = new Label("Cinema desk");
    Scene scene = new Scene(title, 640, 400);
    stage.setTitle("Book a seat");
    stage.setScene(scene);
    stage.show();

3Text is a node you can place

Label and Text show characters. Label is the usual form caption. Text is a shape you can style more freely.

The string you pass is ordinary Java text — a seat label, a price. Changing label.setText updates the window on the JavaFX thread.

Figure. Label("A12") and Text("200") are nodes in the Scene. setText changes what the window shows on the JavaFX thread.

How it works

1. Text is a node you can placeLabel and Text are nodes. setText changes what the window shows.

A caption and a text shape

Label seat = new Label("A12");
Text price = new Text("200");

4ImageView shows a picture

Image loads pixels from a file or URL. ImageView is the node that paints that Image in the scene.

The path is a resource you ship, not a screenshot of Scene Builder. A missing file fails at load, the same way a missing booking file fails in I/O.

Figure. Image loads pixels from /poster.png. ImageView is the node you add to the Scene. A missing resource fails at load, the same way a missing booking file fails in I/O.

How it works

1. ImageView shows a pictureImage holds pixels. ImageView is the node you add to the scene.

Image is the pixels; ImageView is the node

Image poster = new Image(
    getClass().getResourceAsStream("/poster.png"));
ImageView view = new ImageView(poster);

5An event is a click, a key, a change

An event is an object that says something happened to a node. A Button fires an ActionEvent when it is activated.

setOnAction(e -> hall.take(seat)) is the handler. The lambda runs on the JavaFX Application Thread, so it must finish quickly.

Figure. The Book button fires an ActionEvent. setOnAction runs hall.take(chosen) on the JavaFX Application Thread, so the handler must finish quickly.

How it works

1. An event is a click, a key, a changeEvents name what happened. Handlers run on the UI thread; keep them short.

ActionEvent on the Book button

Button book = new Button("Book");
book.setOnAction(e -> hall.take(chosen));

6A layout pane places child nodes

A layout pane is a node that positions its children: VBox stacks, HBox rows, BorderPane has top/center/bottom, GridPane is a table of cells.

You add controls to the pane, and the pane to the Scene. Hard-coded x/y on every resize is what layout exists to avoid.

No diagram — the idea is carried by the prose or the Java listing.

VBox stacks the label and the button

VBox column = new VBox(8);
column.getChildren().addAll(seat, book);
Scene scene = new Scene(column, 640, 400);

7Mouse events carry where and which button

Mouse events are a family: pressed, released, clicked, moved, dragged. setOnMouseClicked is the usual booking gesture on a seat square.

The event object has getX, getY and the button. A double-click is getClickCount() == 2. Consume the event if a parent should not also handle it.

Figure. setOnMouseClicked on the seat square is pressed plus released on that node. getClickCount() == 1 is the usual booking gesture; the event also carries getX, getY and the button.

How it works

1. Mouse events carry where and which buttonMouse events say where and how often. Clicked is pressed-plus-released on that node.

One click on the seat square books it

seatSquare.setOnMouseClicked(e -> {
    if (e.getClickCount() == 1) {
        hall.take(seatId);
    }
});