studyklar
GdI 2 · Probeklausur Teil 2 · Aufgabe 12

JavaFX: das Kontaktformular aus dem Code skizzieren

Hier wird kein Code geschrieben, sondern gelesen: Aus einem fertigen JavaFX-Programm entsteht eine Skizze des Fensters. Wer weiß, wie VBox und GridPane ihre Inhalte anordnen, kann das Fenster zeichnen, ohne es je gesehen zu haben. Rechts wächst die Skizze mit dem Code. Mit Weiter geht es Schritt für Schritt voran.

Die Aufgabe

Aufgabe 12

Gegeben ist der folgende Code einer JavaFX-Anwendung. Die Package- und Importangaben sind aus Gründen der Übersicht nicht mit abgedruckt.

Skizzieren Sie die Benutzungsoberfläche der JavaFX-Anwendung.

Im Code sind aus Gründen der Übersichtlichkeit keine Abstände und Abmessungen definiert. Hierum brauchen auch Sie sich nicht zu kümmern - aus Ihrer Zeichnung sollte lediglich der grundlegende Aufbau der Oberfläche hervorgehen.

Umrahmen Sie die Bereiche der verwendeten Container und schreiben Sie jeweils die im Code verwendete Bezeichnung des Containers daneben. Geben Sie auch für die gezeichneten Controls die im Code verwendeten Bezeichnungen an.

public class Kontaktformular extends Application {    @Override    public void start(Stage primaryStage) {        VBox root = new VBox();        GridPane gridPane = new GridPane();         Label label1 = new Label("Name:");        Label label2 = new Label("E-Mail:");        Label label3 = new Label("Nachricht:");        TextField textfeld1 = new TextField();        TextField textfeld2 = new TextField();        TextArea textArea = new TextArea();         gridPane.add(label1, 0, 0);        gridPane.add(textfeld1, 1, 0);        gridPane.add(label2, 0, 1);        gridPane.add(textfeld2, 1, 1);        gridPane.add(label3, 0, 2);        gridPane.add(textArea, 1, 2);         Button sendenButton = new Button("Senden");         root.getChildren().addAll(gridPane, sendenButton);         Scene scene = new Scene(root);        primaryStage.setScene(scene);        primaryStage.setTitle("Kontaktformular");        primaryStage.show();    }     public static void main(String[] args) {        launch();    }}

Gegeben ist ein Programm für ein Kontaktformular. Gesucht ist eine Zeichnung des Fensters, ohne genaue Maße. Jeder Container bekommt einen Rahmen und seinen Namen aus dem Code daneben, jedes Control (Steuerelement wie Label, Textfeld, Button) seinen Namen aus dem Code.

Merke: Ein Container ordnet andere Elemente an, man sieht ihn selbst nicht. Eine VBox stapelt ihre Kinder von oben nach unten, in der Reihenfolge von addAll. Ein GridPane ist ein Gitter; add(element, spalte, zeile) setzt ein Element in eine Zelle. Gezählt wird ab 0, und die Spalte kommt zuerst.
  1. Container und Controls im Code finden.
  2. Klären, wer in wem steckt: root enthält gridPane und den Button.
  3. Das Gitter des GridPane aufbauen: wer steht in welcher Zelle.
  4. Die Skizze zeichnen und beschriften.
  5. Mit dem echten Fenster vergleichen.

Zu dieser Probeklausur gibt es keine Musterlösung. Die Skizze hier ist selbst erarbeitet; zur Kontrolle haben wir das Programm mit JavaFX gestartet und die Lage jedes Elements ausgelesen.

Container und Controls im Code finden

Name im CodeKlasseArtText
rootVBoxContainer–
gridPaneGridPaneContainer–
label1LabelControlName:
label2LabelControlE-Mail:
label3LabelControlNachricht:
textfeld1TextFieldControl(leer)
textfeld2TextFieldControl(leer)
textAreaTextAreaControl(leer)
sendenButtonButtonControlSenden

Zuerst eine Liste: Was wird mit new angelegt? Zwei Container: root (eine VBox) und gridPane (ein GridPane). Sie werden in der Skizze zu Rahmen.

Dazu sieben Controls: drei Labels (Beschriftungen) mit den Texten „Name:“, „E-Mail:“ und „Nachricht:“, zwei TextFields (einzeilige Eingabefelder), eine TextArea (ein großes, mehrzeiliges Eingabefeld) und ein Button „Senden“. Sie werden in der Skizze zu Kästchen mit ihrem Namen.

Aus Blatt 10, Aufgabe 1 („Fenster „Geld Aufladen“ und sein Scene-Graph“): Ein Fenster in JavaFX ist ein Baum: Container wie VBox und HBox enthalten andere Container oder Controls wie Label und Button.

Wer steckt in wem: root enthält gridPane und den Button

        root.getChildren().addAll(gridPane, sendenButton);
        primaryStage.setTitle("Kontaktformular");

Zeile 23 legt fest, was in root steckt: zuerst gridPane, dann sendenButton. Eine VBox stapelt ihre Kinder senkrecht in dieser Reihenfolge. Also steht das ganze Gitter oben und der Button darunter.

root wird mit new Scene(root) zum Inhalt des Fensters (Zeile 25). Der Rahmen von root füllt also das ganze Fenster. Der Titel des Fensters ist „Kontaktformular“ (Zeile 27); er gehört in die Titelleiste der Skizze.

Noch 4 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Die Skizze

Container umrahmt, alles mit Namen

Abbildung 1Die Skizze

Container umrahmt, alles mit Namen

Kontaktformular
VBox root
GridPane gridPane
label1Name:
textfeld1[ Textfeld ]
label2E-Mail:
textfeld2[ Textfeld ]
label3Nachricht:
textArea[ großes Textfeld, mehrere Zeilen ]
sendenButtonSenden
LegendeDas Fenster Kontaktformular: eine VBox, darin ein GridPane und ein Button.

Abbildung 1Die Skizze

Container umrahmt, alles mit Namen

public class Kontaktformular extends Application {    @Override    public void start(Stage primaryStage) {        VBox root = new VBox();        GridPane gridPane = new GridPane();         Label label1 = new Label("Name:");        Label label2 = new Label("E-Mail:");        Label label3 = new Label("Nachricht:");        TextField textfeld1 = new TextField();        TextField textfeld2 = new TextField();        TextArea textArea = new TextArea();         gridPane.add(label1, 0, 0);        gridPane.add(textfeld1, 1, 0);        gridPane.add(label2, 0, 1);        gridPane.add(textfeld2, 1, 1);        gridPane.add(label3, 0, 2);        gridPane.add(textArea, 1, 2);         Button sendenButton = new Button("Senden");         root.getChildren().addAll(gridPane, sendenButton);         Scene scene = new Scene(root);        primaryStage.setScene(scene);        primaryStage.setTitle("Kontaktformular");        primaryStage.show();    }     public static void main(String[] args) {        launch();    }}