studyklar
GdI 2 · Übungsblatt 10 · Aufgabe 1

Fenster „Geld Aufladen“ und sein Scene-Graph

Ein kleines Fenster zum Geldaufladen: oben eine Frage, darunter Buttons mit Beträgen und ein Textfeld, getrennt durch Linien. Wir bauen es mit JavaFX und zeichnen danach seinen Scene-Graph, den Baum aller Teile. Rechts steht das Programm, später der Baum; die Zeilen zum aktuellen Schritt sind hervorgehoben. Mit Weiter geht es Schritt für Schritt voran.

Die Aufgabe

Sie können Ihre JavaFX-Anwendungen in dem Projekt GdI2-Uebungen12 in einem der vorhandenen Packages de.gdi2.gdi2fx.panes oder de.gdi2.gdi2fx.button anlegen (im Ordner src/main/java). Falls Sie ein eigenes Package verwenden, müssen Sie es in der Datei „module-info.java“ eintragen („opens de.gdi2.gdi2fx.meinpackage;“).

Aufgabe 1

a) Programmieren Sie eine JavaFX-Anwendung, die folgendes Fenster anzeigt:

Geld Aufladen

das Fenster als Skizze
Wählen Sie den Aufladebetrag:
———— Trennlinie (Separator) ————
[ 10 Cent ][ 50 Cent ]
———— Trennlinie (Separator) ————
[ 1 Euro ][ 2 Euro ]
———— Trennlinie (Separator) ————
Anderer Betrag:[ Textfeld ]

Beim Drücken der Buttons soll nichts passieren.

Die Abstände von den äußeren Rändern und zwischen den Controls betragen jeweils 15.

Bei den waagrechten Trennlinien handelt es sich um Objekte vom Typ „Separator“. Beachten Sie, dass Sie ein Separator-Objekt nicht mehrfach verwenden können. Sie müssen also mehrere Separator-Objekte anlegen.

Die Buttons haben eine bevorzugte Breite („PrefWidth“) von 70.

b) Zeichnen Sie den Scene-Graph der Anwendung. Aus Platzgründen kann es sinnvoll sein, den Scene-Graph von links nach rechts anstatt von oben nach unten zu zeichnen.

Gesucht ist ein Programm, das genau dieses Fenster zeigt. Die Buttons müssen nichts tun. Wichtig sind die Abstände (überall 15), die Breite der Buttons (70) und drei getrennte Trennlinien-Objekte. Danach soll der Scene-Graph gezeichnet werden.

Das Bild im Aufgabenblatt ist ein Bildschirmfoto. Hier steht es als Skizze: eine Zeile der Tabelle ist eine Zeile im Fenster, eckige Klammern stehen für Buttons und das Textfeld.

Merke: Ein Fenster in JavaFX ist ein Baum. Container (etwa VBox, HBox) enthalten andere Container oder Steuerelemente (etwa Label, Button). Wer das Fenster in Zeilen und Spalten zerlegt, hat den Baum schon fast.
  1. a) Das Fenster in Container zerlegen und Zeile für Zeile aufbauen.
  2. b) Den Scene-Graph von links nach rechts zeichnen.

Das Grundgerüst einer JavaFX-Anwendung

public class GeldAufladen extends Application {     @Override    public void start(Stage primaryStage) {
    public static void main(String[] args) {        launch(args);    }

Eine JavaFX-Anwendung ist eine Unterklasse von Application. Die main-Methode ruft nur launch(args) auf. Das legt ein Objekt der Anwendung an und ruft dessen Methode start auf.

In start steht die eigentliche Arbeit. Sie bekommt eine Stage (Bühne), das ist das Hauptfenster. @Override sagt: Diese Methode überschreibt die Methode start aus Application. Die Zeilen 1 bis 10 importieren die benutzten Klassen.

Aus Vorlesung 12, Folie 6 („Grundlegender Aufbau einer JavaFX-Application“): main ruft launch(args); die Oberfläche entsteht in der überschriebenen Methode start(Stage primaryStage).

Das Fenster in Container zerlegen

Zeile im FensterInhaltwird in Java
1Wählen Sie den Aufladebetrag:Label label1
2TrennlinieSeparator separator1
310 Cent, 50 CentHBox hbox1 mit zwei Buttons
4TrennlinieSeparator separator2
51 Euro, 2 EuroHBox hbox2 mit zwei Buttons
6TrennlinieSeparator separator3
7Anderer Betrag:, TextfeldHBox hbox3 mit Label und TextField

Bevor wir Code schreiben, zerlegen wir das Fenster. Es hat sieben Zeilen untereinander. Für „untereinander“ gibt es die VBox (vertikale Box). Sie wird der äußerste Container, in JavaFX heißt er Root (Wurzel).

Drei Zeilen haben zwei Teile nebeneinander. Für „nebeneinander“ gibt es die HBox (horizontale Box). Jede dieser Zeilen wird eine eigene HBox. Die anderen vier Zeilen sind ein einzelnes Element und kommen direkt in die VBox.

Aus Vorlesung 12, Folie 21 („Verschiedene Arten von Containern (1)“): HBox ordnet Knoten nebeneinander an, VBox übereinander.
Noch 11 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

GeldAufladen.java

das ganze Programm

Abbildung 1GeldAufladen.java

das ganze Programm

import javafx.application.Application;import javafx.geometry.Insets;import javafx.scene.Scene;import javafx.scene.control.Button;import javafx.scene.control.Label;import javafx.scene.control.Separator;import javafx.scene.control.TextField;import javafx.scene.layout.HBox;import javafx.scene.layout.VBox;import javafx.stage.Stage; public class GeldAufladen extends Application {     @Override    public void start(Stage primaryStage) {         VBox root = new VBox();        root.setPadding(new Insets(15));        root.setSpacing(15);         Label label1 = new Label("Wählen Sie den Aufladebetrag:");        Separator separator1 = new Separator();         HBox hbox1 = new HBox();        hbox1.setSpacing(15);        Button button1 = new Button("10 Cent");        button1.setPrefWidth(70);        Button button2 = new Button("50 Cent");        button2.setPrefWidth(70);        hbox1.getChildren().addAll(button1, button2);         Separator separator2 = new Separator();         HBox hbox2 = new HBox();        hbox2.setSpacing(15);        Button button3 = new Button("1 Euro");        button3.setPrefWidth(70);        Button button4 = new Button("2 Euro");        button4.setPrefWidth(70);        hbox2.getChildren().addAll(button3, button4);         Separator separator3 = new Separator();         HBox hbox3 = new HBox();        hbox3.setSpacing(15);        Label label2 = new Label("Anderer Betrag:");        TextField textfeld = new TextField();        hbox3.getChildren().addAll(label2, textfeld);         root.getChildren().addAll(label1, separator1, hbox1,                separator2, hbox2, separator3, hbox3);         Scene scene = new Scene(root);         primaryStage.setTitle("Geld Aufladen");        primaryStage.setScene(scene);        primaryStage.show();    }     public static void main(String[] args) {        launch(args);    }}
LegendeDas ganze Programm GeldAufladen.