Graphical User Interface (GUI) mit dem Gluon Scene Builder
Im Bildungsplan ist verankert, dass die Schüler GUIs erstellen sollen. Dabei ist nicht daran gedacht, jedes Detail der GUI-Programmierung zu behandeln. Dies würde den Rahmen komplett sprengen. Ziel ist es, den Schülerinnen und Schülern zu vermitteln, welche Schritte notwendig sind, um ein Projekt mit einer ansprechenden GUI zu ergänzen.
Für die Erstellung einer GUI ist ein GUI-Builder hilfreich und sollte auch im Unterricht zum Einsatz kommen:
Der JavaEditor von G. Röhner hat einen eingebauten GUI-Builder, der die in der GUI vorgenommenen Einstellungen ständig 1:1 in Quelltext umsetzt. Änderungen im Quelltext werden aber nicht in den GUI-Builder übernommen.
Seit Java 8 gibt es die Möglichkeit in JavaFX die Definition des GUI in einer XML-Datei (fxml-Dateiendung) vorzunehmen. Der Gluon Scene Builder1 bietet ein professionelles Tool, um GUIs zu erstellen und als fxml-Datei zu speichern. Diese XML-Dateien können dann mit einem einfachen JavaFX-Programm geladen werden. Dieses Programm kann den Schülern vorgegeben werden, da es immer gleich aussieht. Zusätzlich wird eine Controller-Klasse definiert, die alle Methoden beinhaltet, die bei Auswahl eines Menüpunktes oder eines Buttons ausgeführt werden sollen. Die verwendete Programmierumgebung ist dabei unabhängig von der Erstellung der GUI. Der hier vorliegende Unterrichtsgang nutzt diesen Gluon Scene Builder in Kombination mit BlueJ als Programmierumgebung.
Der Scene Builder speichert das Design als FXML-Datei - also ein XML-Format für die Definition der Oberfläche. Diese Datei kann recht leicht in einem Java-Programm eingelesen und in eine Oberfläche umgewandelt werden.
...
Der Scene Builder enthält eine Vielzahl von Einstellungsmöglichkeiten, die in der Schule nicht alle benötigt werden. Grundsätzlich besteht ein Oberflächen-Design aus einer Reihe verschachtelter Layout-Komponenten. Die wichtigsten sind VBox (ordnet die untergeordneten Elemente vertikal an) und die HBox (ordnet die untergeordneten Elemente horizontal an). Bei den untergeordneten Elementen kann man im Layout festlegen, ob das Element so groß sein soll, wie es notwendig ist, ob es so groß sein soll wie das übergeordnete Element (oranger Pfeil) oder den zur Verfügung stehenden Platz füllen soll (gelbe Pfeile). Dadurch wird nur die Gliederung der Seite beschrieben und kann sich daher gut anpassen, wenn die Größe des Fensters sich ändert. Alternativ kann man mit einer AnchorPane die untergeordneten Elemente an bestimmten Positionen verankern.
Die untergeordneten Elemente können verschiedene Kontroll-Elemente sein: die wichtigsten sind Label, TextField, Button, Slider, Menus, MenuItems. Ergänzt werden die Standard-Kontrollelemente durch zwei von der ZPG IMP bereitgestellte Elemente2: PictureViewer (kann ein Bild anzeigen, scrollen, zoomen und den Verlauf speichern) und NumberField (man kann nur Zahlen eingeben und diese als Int oder Double abfragen).
Die Verknüpfung der Kontroll-Elemente mit dem Java-Programm erfolgt über die Festlegung der Controller-Klasse (Reiter "Controller"), der fx:id (Reiter: "Code") und der ActionListener-Methoden.
Controller: Ganz wichtig! Der Name der Controller-Klasse muss hier eingetragen werden, damit die GUI korrekt mit einer Instanz der Controller-Klasse assoziiert wird. Dieses Controller-Objekt wird normalerweise automatisch erstellt, wenn die FXML-Datei interpretiert wird.
Die fx:id (Name des Elements) ist notwendig, wenn man die Attribute dieses Elements aus dem Java-Programm heraus auslesen oder ändern möchte. Der Name ist dann der Name der Referenzvariable in der Controller-Klasse. Über die Compilerdirektive @FXML wird gekennzeichnet, dass dieses Attribut mit einem GUI-Element verknüpft werden soll.
Listener-Methoden: Bei onAction muss der Namen der Methode eingetragen werden, die aufgerufen werden soll, wenn der Button gedrückt oder der Menüpunkt ausgewählt wurde.
1 Scene Builder ist ein frei verfügbares Open Source Projekt der Firma Gluon. Download des Scene Builders: https://gluonhq.com/products/scene-builder/
2 Die JAR-Datei wurde mit Java 11 erstellt. Falls man mit einer älteren Version arbeitet, muss man die JAR-Datei erneut erstellen. Dazu muss man in BlueJ in den Unterordner imp wechseln und Menü Project -> Create Jar-File wählen. Eine Main-Class muss nicht festgelegt werden.
Hintergrund GUI-Programmierung: Herunterladen [odt][289 KB]
Hintergrund GUI-Programmierung: Herunterladen [pdf][517 KB]
Weiter zu Lambda-Ausdrücke