GUI mit JavaFX.

Bis jetzt liefen deine Programme auf der Konsole. Eine GUI (grafische Oberfläche) hat Fenster, Buttons und Eingabefelder, auf die der Nutzer klickt. JavaFX ist Javas moderner GUI-Werkzeugkasten. Das Denkmodell ist anders als bei Konsolen-Programmen: dein Code baut einen Baum aus Komponenten auf und sagt, was bei einem Ereignis passieren soll (event-getrieben), statt eine feste Abfolge von Anweisungen abzuarbeiten.

Was du können musst:

• den Scene-Graph verstehen: Stage → Scene → root-Knoten → Kinder
• den richtigen Layout-Container wählen (VBox, HBox, GridPane, BorderPane)
• Controls einsetzen (Button, Label, TextField) und einem Container hinzufügen
• Event-Handling mit setOnAction und einem Lambda

Abgrenzung: hier nur die Grundlagen (Container, Komponenten, Events). FXML, CSS-Styling, Property-Bindings und Animationen sind nicht Teil dieses Topics.

Die Idee in einem Satz

Eine JavaFX-Oberfläche ist ein Baum von Knoten (der Scene-Graph): die Stage ist das Fenster, die Scene ihr Inhalt, darin ein root-Knoten (meist ein Layout-Container) mit beliebig vielen Kind-Komponenten.

Der Scene-Graph

Label label = new Label("Hallo");
VBox root = new VBox(label);            // root-Knoten mit einem Kind
Scene scene = new Scene(root, 300, 200);
stage.setScene(scene);
stage.show();

Stage (Fenster)
  └── Scene (Inhalt, 300 x 200)
        └── VBox (root, Layout-Container)
              └── Label "Hallo"

Merke die Hierarchie: Stage enthält Scene enthält root enthält Kinder. Eine Komponente, die du mit new erzeugst, aber keinem Container hinzufügst, erscheint nie.

Layout-Container: die Anordnung bestimmt der Container

Nicht die Komponente entscheidet, wo sie sitzt, sondern der Container, in dem sie liegt. Dieselben vier Komponenten ergeben in VBox, HBox und GridPane völlig verschiedene Oberflächen. Probier es aus:

Die wichtigsten Container:

Controls und Events

Controls sind die Bedien-Elemente: Button, Label, TextField, CheckBox. Sie werden dem Container hinzugefügt (getChildren().add(...) bzw. grid.add(c, col, row)).

Eine GUI reagiert auf Ereignisse. Mit setOnAction sagst du einem Button, was beim Klick passieren soll, in Form eines Lambdas (EventHandler):

Button btn = new Button("Klick mich");
btn.setOnAction(e -> label.setText("Geklickt!"));

Der Code im Lambda läuft nicht sofort, sondern erst, wenn der Nutzer klickt.

Klausur-Faustregeln

1. Hierarchie: Stage → Scene → root → Kinder. Die Stage ist das Fenster, die Scene ihr Inhalt, der root meist ein Layout-Container, darunter die Komponenten. Das ist der Scene-Graph.

2. Der Container bestimmt die Anordnung. VBox = Spalte, HBox = Reihe, GridPane = Raster, BorderPane = 5 Regionen. Die Komponente selbst weiß nicht, wo sie sitzt.

3. Komponenten müssen hinzugefügt werden. new Button(...) allein zeigt nichts. Erst container.getChildren().add(btn) (bzw. grid.add(btn, col, row)) macht sie sichtbar.

4. setOnAction(e -> ...) ist event-getrieben. Es registriert einen Handler; der Code läuft erst beim Klick, nicht sofort.

5. GUI-Code läuft auf dem JavaFX Application Thread. Lange Berechnungen dort lassen die Oberfläche einfrieren; solche Arbeit gehört in einen anderen Thread.

6. Einstieg über Application. Man erweitert Application, überschreibt start(Stage stage) und startet mit launch(args).

Häufige Stolpersteine

1. Falscher Container fürs Ziel. Eine HBox für ein Formular legt alle Felder nebeneinander statt untereinander. Erst überlegen: Spalte (VBox), Reihe (HBox) oder Raster (GridPane)?

2. Komponente vergessen hinzuzufügen. Mit new erzeugt, aber nie getChildren().add(...) aufgerufen, dann bleibt sie unsichtbar. Häufigster "warum sehe ich nichts"-Fehler.

3. Erwarten, dass das Event-Lambda sofort läuft. setOnAction(e -> ...) registriert nur. Der Code läuft beim Klick, nicht beim Aufruf von setOnAction.

4. Lange Arbeit im Event-Handler. Eine Schleife oder ein Download direkt im Handler blockiert den Application Thread, die UI friert ein. Auslagern auf einen Hintergrund-Thread.

5. GridPane-Koordinaten vertauschen. grid.add(node, col, row) nimmt zuerst die Spalte, dann die Zeile. Wer (row, col) denkt, platziert falsch.

6. Stage und Scene verwechseln. Die Stage ist das Fenster, die Scene der Inhalt. Eine Stage bekommt über setScene genau eine Scene.

Den Scene-Graph aufbauen

Eine GUI entsteht von innen nach außen: erst die Komponente, dann der Container (root), dann die Scene, zuletzt die Stage. Verfolge im Stepper, wie der Baum Knoten für Knoten zusammengesetzt wird und erst show() das Fenster sichtbar macht.

Klausur-Tipp: Bei "Welcher Container für ein Login-Formular mit Feldern untereinander und einem Button darunter?" ist die Antwort meist VBox (oder GridPane für Label-Feld-Paare). Und: zeichne im Zweifel den Scene-Graph als Baum, das deckt fehlende add-Aufrufe sofort auf.