Alle Tabs der Lerneinheit (Erklärung · Interaktiv verstehen · Praxis-Übung · Klausur-Quiz) als durchgehender Text. Ideal zum Wiederholen vor der Klausur, und für Suchmaschinen wie Google, Bing und KI-Suche (ChatGPT, Perplexity).
Teil 1·Erklärung
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:
setOnAction und einem LambdaAbgrenzung: hier nur die Grundlagen (Container, Komponenten, Events). FXML, CSS-Styling, Property-Bindings und Animationen sind nicht Teil dieses Topics.
Die wichtigsten Container:
| Container | Anordnung | Typischer Einsatz |
|---|---|---|
| VBox | vertikale Spalte | Formulare (Felder untereinander) |
| HBox | horizontale Reihe | Button-Leisten, Toolbars |
| GridPane | Raster (Spalte, Zeile) | Formulare mit Label + Feld nebeneinander |
| BorderPane | 5 Regionen (top/bottom/left/right/center) | App-Grundgerüst (Menü oben, Inhalt mitte) |
| StackPane | Komponenten übereinander | Overlays, zentrierter Inhalt |
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.
Anmelden, um den Fortschritt zu speichern.
Nächster Schritt
Aktives Abrufen festigt Wissen schneller als nochmal lesen.
Diese Lerneinheit wurde für typische Bachelor-Klausuren konzipiert. So prüfen wir · Fehler entdeckt? Melde ihn uns oder markiere die fragliche Stelle direkt im Text oben.
Alle Tabs der Lerneinheit (Erklärung · Interaktiv verstehen · Praxis-Übung · Klausur-Quiz) als durchgehender Text. Ideal zum Wiederholen vor der Klausur, und für Suchmaschinen wie Google, Bing und KI-Suche (ChatGPT, Perplexity).
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:
setOnAction und einem LambdaAbgrenzung: hier nur die Grundlagen (Container, Komponenten, Events). FXML, CSS-Styling, Property-Bindings und Animationen sind nicht Teil dieses Topics.
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.
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
newerzeugst, aber keinem Container hinzufügst, erscheint nie.
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:
Interaktive Visualisierung
Interaktive Komponente: probiere sie im Topic-Player oben aus.
Die wichtigsten Container:
| Container | Anordnung | Typischer Einsatz |
|---|---|---|
| VBox | vertikale Spalte | Formulare (Felder untereinander) |
| HBox | horizontale Reihe | Button-Leisten, Toolbars |
| GridPane | Raster (Spalte, Zeile) | Formulare mit Label + Feld nebeneinander |
| BorderPane | 5 Regionen (top/bottom/left/right/center) | App-Grundgerüst (Menü oben, Inhalt mitte) |
| StackPane | Komponenten übereinander | Overlays, zentrierter Inhalt |
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.
Interaktive Visualisierung
Interaktive Komponente: probiere sie im Topic-Player oben aus.
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).
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.
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.
Interaktive Visualisierung
Interaktive Komponente: probiere sie im Topic-Player oben aus.
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.
Klausurfragen mit Lösungen (6)
Antwort: VBox
Erklärung: VBox = vertical box, Kinder untereinander (klassisch fuer Formulare). HBox ordnet nebeneinander an, StackPane stapelt uebereinander.
Antwort: Falsch
Erklärung: Falsch. new erzeugt nur das Objekt. Sichtbar wird der Button erst, wenn er einem Container hinzugefuegt wird (z.B. vbox.getChildren().add(btn)) und dieser Teil des Scene-Graphs ist.
Typ: Wahr/Falsch
Antwort: Stage enthält Scene enthält root-Knoten enthält Kinder
Erklärung: Stage (Fenster) -> Scene (Inhalt) -> root-Knoten (meist Layout-Container) -> Kinder (Controls). Das ist der Scene-Graph, ein Baum von aussen (Fenster) nach innen (Komponenten).
Antwort: Erst wenn der Button geklickt wird
Erklärung: setOnAction registriert den Handler nur. Der Code laeuft erst, wenn das Ereignis (Klick) eintritt. Das ist event-getriebene Programmierung: man definiert WAS passieren soll, JavaFX entscheidet WANN.
Zuordnungen:
Erklärung: VBox (Spalte), HBox (Reihe), GridPane (Raster), BorderPane (5 Regionen). Der Container bestimmt die Anordnung der Komponenten.
Typ: Zuordnung
Antwort: Die Berechnung läuft im JavaFX Application Thread und blockiert die UI
Erklärung: Event-Handler laufen auf dem JavaFX Application Thread, demselben Thread, der die UI zeichnet. Eine lange Berechnung dort blockiert das Neuzeichnen, die Oberflaeche friert ein. Loesung: die Arbeit in einen Hintergrund-Thread auslagern (z.B. Task).
Klausurfragen mit Lösungen (6)
Antwort: Das Fenster selbst
Erklärung: Die Stage ist das Fenster. Ihr Inhalt ist die Scene, darin ein root-Knoten mit Komponenten. Stage -> Scene -> root -> Kinder.
Antwort: GridPane
Erklärung: GridPane (Raster aus Spalten und Zeilen) ist ideal: Spalte 0 die Labels, Spalte 1 die Felder, je Zeile ein Paar. VBox koennte nur eine Spalte, HBox nur eine Reihe.
Antwort: Wahr
Erklärung: Richtig. GridPane.add(node, columnIndex, rowIndex) nimmt ZUERST die Spalte, dann die Zeile. Eine haeufige Falle ist, (Zeile, Spalte) zu denken.
Typ: Wahr/Falsch
Lösungen pro Lücke:
Erklärung: Stage (Fenster), Scene (Inhalt), setOnAction (registriert den Klick-Handler). Kern-Vokabular der JavaFX-Grundlagen.
Typ: Lückentext
Antwort: box.getChildren().add(btn)
Erklärung: Bei VBox/HBox fuegt man Kinder ueber getChildren().add(...) bzw. addAll(...) hinzu. (GridPane nutzt stattdessen grid.add(node, col, row).) box.add gibt es bei VBox nicht.
Label label = new Label("Hallo");
VBox root = new VBox();
Scene scene = new Scene(root, 300, 200);
stage.setScene(scene);
stage.show();Antwort: Das Label wurde nie der VBox hinzugefügt (getChildren().add fehlt)
Erklärung: Das Label wird erzeugt, aber nie in den Scene-Graph eingehaengt: root.getChildren().add(label) fehlt. Nur was im Baum unter der Scene haengt, wird gezeichnet. Erzeugen allein reicht nicht.