Aufbau eines ersten “Hello World” (Scenegraph)
https://bildung.social/@oerinformatik/
https://oer-informatik.de/jfx_03_aufbau_des_scenegraphs
tl/dr; (ca. 4 min Lesezeit): Eine JavaFX-App ist als Scenegraph aufgebaut, der sich in die Komponenten Stage, Scene und (Root/Branch/Leaf)-Nodes gliedert. Diese Bestandteile und deren Aufbau über das Composite-Pattern werden erläutert. Der Artikel ist Teil eines JavaFX-Tutorials. (Zuletzt geändert am 19.11.2023)
Bühne frei: die Komponenten einer JavaFX-GUI
JavaFX gliedert den Aufbau einer GUI in begrifflicher Anlehnung an ein Theater. Wir gehen die Komponenten anhand folgender Zeichnung durch:
Der Ort, an dem die GUI präsentiert wird, ist die Stage, die Bühne des Theaters. Gemeint ist damit das Fenster (bei Desktop-Programmen), dass sich öffnet, wenn ich das Programm starte (oder der gesamte Programmbildschirm bei Tablet/Smartphone-Anwendungen). Die Erzeugung der Stage wird vom Framework übernommen (siehe Sequenzdiagramm: LauncherImpl erzeugt sie). Wir erhalten die Stage als Parameter unserer start()-Methode:
@Override
public void start(Stage primaryStage){
//...
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}Auf dieser Bühne (Stage) wird eine Szene (Scene) abgespielt. Eine Szene hat eine bestimmte Größe und enthält den eigentlichen Aufbau. Es können bei Bedarf auch mehrere Szenen vorbereitet werden, die nacheinander auf die Bühne geholt werden.
Der Aufbau einer Szene besteht aus mehreren verschachtelten Elementen. Das erste Element, dass alle weiteren enthält, nennt man root node, den Wurzelknoten. Ein Wurzelknoten kann aus weiteren strukturierenden Verzweigungsknoten (branch node) bestehen (z.B. Listen, Tabellen, Stapeln), die ihrerseits weitere Knoten enthalten.
Die eigentlichen Inhalte (z.B. Texte, Bilder, Knöpfe, Grafiken) stellen Blätter dar (leaf node), die selbst keine weiteren Knoten enthalten können.
Text textLeaf = new Text("Hallo");
StackPane rootNode = new StackPane(textLeaf);
Scene scene = new Scene(rootNode, 300, 250);Die Baumstruktur der GUI-Komponenten
Neben dem Bild der Bühne wird für den verschachtelten Aufbau einer GUI oft ein zweites Bild bemüht: das eines Baums mit Wurzel/Stamm, Verzweigungen und Blättern. Das obige Beispiel lässt sich als Baum wie folgt darstellen:
Diese Baumstruktur wird Scenegraph genannt - ein vorwärtsgerichteter Graph mit Knoten (node) und Kanten, bei dem jeder Knoten genau einen Vorgänger hat.
Die Einzelkomponenten hatten wir uns bereits angeschaut. In unserem JavaFX-Beispiel-Quelltext werden Sie vom Blatt (Leaf) zur Bühne (Stage) erzeugt und zugewiesen.
@Override
public void start(Stage primaryStage){
Text textLeaf = new Text("Hallo");
StackPane rootNode = new StackPane(textLeaf);
Scene scene = new Scene(rootNode, 300, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}Ausführen des JavaFX-Projekts
Diesmal haben wir am Code selbst keine Änderungen vorgenommen. Wer das Programm trotzdem ausführen will, kann es wie immer direkt aus der IDE aufrufen, oder, indem wir die pom.xml mit Maven adressieren:
Nächste Schritte
Dieser Artikel ist ein Teil der Artikelserie zu einer Energiemonitors mit JavaFX.
Als Nächstes schauen wir uns die zugrunde liegenden Inhaltselemente branch nodes und leaf nodes mal etwas genauer an: Was sind Widgets, wie baue ich sie ein und wie hinterlege ich Aktionen?
Links und weitere Informationen
Hinweis zur Nachnutzung als Open Educational Resource (OER)
Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Aufbau eines ersten "Hello World" (Scenegraph)” von Hannes Stein, Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/jfx_03_aufbau_des_scenegraphs veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/javafx/javafx-einstieg. Stand: 19.11.2023.
[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]
