[JavaFX] Custom ListView – Tutorial

Dieses Tutorial zeigt, wie man in JavaFX in einer Custom ListView komplexere Datenstrukturen anzeigen kann, die nicht einfach nur Text enthalten.

Als Beispiel verwende ich hier einmal einen Dialog Editor, den ich vor kurzem geschrieben habe:

Leeks & Dragons - Dialog Tool mit JavaFX Custom ListView

Leeks & Dragons – Dialog Tool mit JavaFX Custom ListView

 

Voraussetzungen für dieses Tutorial

Noch kurz eine kleine Anmerkung zu den Voraussetzungen für dieses Tutorial. Ihr solltet Java bereits beherrschen und euch schon etwas mit JavaFX vertraut gemacht haben.

Außerdem solltet ihr wissen, was eine Liste ist. Sollte aber eig. logisch sein. 😀 JavaFX ist seit Java 8 im Oracle JDK / JRE und ab Java 9 auch im OpenJDK enthalten, ihr müsst also keine Maven dependencies / Libraries für JavaFX einbinden.

 

Der erste Schritt: Die Custom ListView im Scene Builder einfügen

Für dieses Tutorial erstelle ich eine kleine JavaFX Applikation, die lediglich eine ListView enthält. Das Layout erstellen wir hierbei mit dem JavaFX Scene Builder, einem UI Layout Tool. Dieses wurde ursprünglich von Oracle geschrieben, mittlerweile aber an die Open Source Community übergeben und besitzt eine Art WYSIWYG-Editor, der FXML Dateien erzeugt. Diese FXML Dateien kann JavaFX sehr einfach importieren. Leider bietet Oracle selbst keinen Support mehr für dieses Tool an, weshalb ihr es hier herunterladen könnt.

 

Nun platzieren wir die ListView irgendwo im Fenster (innerhalb der AnchorPane):

JavaFX Custom ListView im Scene Builder

JavaFX Custom ListView im Scene Builder

Zuletzt noch speichern (ich habe es z.B. im Ordner “data/fxml” gespeichert, aber ihr könnt ja jeden beliebigen Speicherort wählen.

Wichtig ist allerdings, dass ihr bei fx:id dem ListView einen Namen gebt, denn diesen brauchen wir wieder in unserem Code!

 

Schritt 2: Das Fenster & der Controller

Als nächstes erstellen wir die Main Klasse, erstellen ein Fenster und den Controller. Wer dies schon mal gemacht hat, kann diesen Schritt überspringen.

 

 

 

Wichtig! Der Controller muss das Interface Initializable implementieren, da die Code Injection von JavaFX mit der @FXML Annotation sonst möglicherweise nicht funktioniert!

Wenn alles passt, solltet ihr beim Ausführen ein solches Fenster erhalten:

JavaFX Window mit Custom ListView

JavaFX Window mit Custom ListView

 

 

 

Schritt 3: Das Zeilen-Layout

Als nächstes müssen wir noch das Layout designen, wie die Zeilen aussehen sollen. Für dieses Beispiel lassen wir einfach mal nur ein Bild mit einem Titel anzeigen, wobei das Bild jede gerade Zeile rechts und jede ungerade Zeile links angezeigt werden soll. Dafür legen wir wieder mit dem JavaFX Scene Builder 2 FXML Dateien für jede Option an.

Jede Option bekommt ein (Anchor-) Pane mit einer Breite von 300 Pixels (so breit ist meine ListView) und einer Höhe von 50 Pixeln. Außerdem benötigt jede Zeile ein ImageView mit der fx:id “imageView” und ein Label mit der fx:id “titleLabel”, welches später den Titel anzeigen soll. Die beiden FXML Dateien speichere ich als “row1.fxml” und “row2.fxml” im Ordner “data/fxml” ab.

 

Row 1 (rechts):
JavaFX Row 1

 

Row 2 (links):
JavaFX Row 2

Für dieses Tutorial habe ich das Layout so einfach wie möglich gehalten, ihr könnt es natürlich nach beliebem anpassen!

 

Schritt 4: Das Model

Jetzt noch eine Model Klasse, die einen Listeneintrag modelliert:

 

Schritt 5: Der Controller für die Zeilen

Natürlich brauchen die Zeilen auch noch eine Controller Klasse:

 

Schritt 6: Alles zusammenfügen

Nun müssen wir nur noch alles zusammenfügen. Dazu erstellen wir in der Klasse JavaFXApplication erstmal die ListEntrys in der start() Methode.

 

 

Zuletzt müssen wir nur noch etwas Code in der WindowController Klasse abändern:

 

Wenn ihr alles richtig gemacht habt, erhaltet ihr beim Ausführen das folgende Fenster:

JavaFX Custom ListView Fenster

JavaFX Custom ListView Fenster

 

Github Link

Falls ihr Probleme hattet, könnt ihr auch hier den kompletten Code einsehen, dieser ist auf Github verfügbar.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.