Teile der JavaFX Serie (aktualisiert)

• JavaFX 01: Übersicht / Planung (YouTube)
• JavaFX 02: Installation (YouTube)
• JavaFX 03: Maven & Gradle (YouTube)
• JavaFX 04: IntelliJ (YouTube)

Teile der JavaFX Serie (alt / geplant)

• JavaFX 05: Scene Builder
• JavaFX –: Erläuterung der Applikation
• JavaFX 06: Model / View / Controller
• JavaFX 07: MVVM
• JavaFX: Komplette MVVM Applikation (geplant)
• JavaFX: Layouts (geplant)
• JavaFX: Formulare einfach erstellen (geplant)
• JavaFX: Multi Plattform (geplant)

Code der JavaFX Serie

Der Source Code sowie alle Dokumente finden sich auf GitHub: https://github.com/kneitzel/blog-javafx-series

Überblick

In dieser Serie zu JavaFX möchte ich einige Punkte der JavaFX Entwicklung aufgreifen und behandeln.

Nachdem ich einen ersten Ansatz gestartet hatte, war ich mit dem Ergebnis unzufrieden und ich habe mir Alternativen überlegt. Es gibt einige Veränderungen an der Serie, denn ich werde zukünftig dreigleisig fahren:

1. Blog Beiträge. Diese sind sowohl im Web als auch als Word Dokument auf Github zu finden.
2. Word / PDF Dokument mit gesammeltem Wissen – gibt in etwa die Blog Inhalte wieder, aber ggf. umstrukturiert. Die Inhalte sind auch nicht identisch.
3. YouTube Videos – Ich erstelle zu einzelnen Blogs YouTube Videos, in denen ich versuche, die Punkte etwas zu zeigen und zu erläutern.

Vorhandene Inhalte

Übersicht / Planung

In diesem Abschnitt gebe ich einen Überblick über die Serie und das Format.

Installation

Hier wird nur ein kleiner Überblick gegeben und Hinweis zu einer Java Installation gegeben.

Die ursprünglich enthaltene Einführung in Gradle hat einen eigenständigen Eintrag erhalten.

Maven & Gradle

Übersicht über die Nutzung von JavaFX mit Maven und Gradle. Erläuterung des Beispiel-Projekts.

Scene Builder

Der Scene Builder ist ein GUI Editor, mit dem man auf einfache Art und Weise eine Oberfläche zusammen klicken kann. Diese ist ein separates Tool und ist damit das Mittel meiner Wahl, da es die Aufwände klein hält und eigentlich (fast) keine Stolpersteine bereithält.

Erläuterung der Applikation

Ich habe in den ersten Teilen einfach Code präsentiert, ohne dies näher zu erläutern (um die Beiträge fokussiert auf das eigentliche Thema zu halten). Das hole ich hier nach.
(Wird bei der Nachbearbeitung entfallen und in Scene Builder mit aufgehen!)

Model / View / Controller

JavaFX verfolgt ein MVC Konzept. Dies findet sich leider in den meisten Applikationen nicht wieder. Dies soll ein einfacher kleiner Einstieg in die MVC Entwicklung darstellen und ich zeige auf, was für Probleme ich sehe und mit welchen Mitteln diese ggf. gelöst werden könnten. Leider mit dem Resümee, dass ich MVC mit JavaFX eher ablehne.

MVVM

Da ich das MVC Patten eher ablehne präsentiere ich hier eine Lösung, die ich für mich als gut empfinde und ich die weiterempfehlen würde.

Komplette MVVM Applikation

Beschreibung eine kompletten MVVM Applikation, um einige Punkte zu demonstrieren. Die Applikation wird eine kleine Adressverwaltung sein, so dass man das Öffnen und Schließen eines Fensters sowie das saubere Binden an Properties sehen kann.

Layouts

JavaFX bietet viele Möglichkeiten, Layouts zu gestalten. Diese möchte ich etwas erläutern, um zu verdeutlichen, dass man kein Scene Builder braucht, um Oberflächen zu gestallten. Dazu stelle ich die einzelnen Container vor (HBox, VBox und diverse Panes)

Formulare einfach erstellen

Es gibt zu JavaFX interessante Erweiterungen. Eine Erweiterung dient der einfachen Erstellung von Formularen und diese Erweiterung möchte ich vorstellen.

Multi Platform

Es gibt die Möglichkeit, JavaFX Applikationen auf vielen Plattformen auszuführen. Diese Möglichkeiten werden in diesem Blog Beitrag erläutert und es wird eine Übersicht über die Möglichkeiten gegeben.

Es fehlt Dir ein Punkt, der Dich bezüglich JavaFX interessiert? Schreib mir einen Kommentar hier im Blog oder schreib mir im Java-Forum: Dort bin ich als kneitzel unterwegs. Natürlich kannst Du mich auch per Email erreichen unter: konrad@kneitzel.de

Links

• Java-Forum: https://www.java-forum.org/
• Repository mit Code für diese JavaFX Blog Serie: https://github.com/kneitzel/blog-javafx-series

Edit

• 2020-11-08 Einbettung des YouTube Videos
• 2020-11-02 Diverse Korrekturen und Verbesserungen
• 2020-10-29 Komplette Überarbeitung
• 2020-07-03 Wechsel zu einem Repository für die ganze Serie.
• 2020-06-29 MVVM veröffentlicht und komplette MVVM Applikation als weiteren Punkt eingeschoben.

JavaFX Serie

• JavaFX: Übersicht / Planung
• JavaFX: Installation / erste Applikation
• JavaFX: Scene Builder
• JavaFX: Erläuterung der Applikation
• JavaFX: Model / View / Controller
• JavaFX: MVVM
• JavaFX: Komplette MVVM Applikation (geplant)
• JavaFX: Layouts (geplant)
• JavaFX: Formulare einfach erstellen (geplant)
• JavaFX: Multi Plattform (geplant)

Die Applikation der letzten Blog-Einträge möchte ich jetzt hier einmal im Detail erläutern, da es mir in den ersten Teilen erst einmal um die Erstellung der Oberfläche in fxml gegangen ist.

Das ganze Projekt findet sich auf GitHub unter:
https://github.com/kneitzel/blog-javafx-serieshttps://github.com/kneitzel/blog-java-helloworld-fxml im Verzeichnis „02 helloworld-fxml“.

Die Klasse HelloWorld

Die Klasse HelloWorld enthält unsere JavaFX Applikation.

package helloworld;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloWorld extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("HelloWorld.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Unsere Klasse erbt von Application, welches die Funktionalität einer JavaFX Applikation bereit stellt und u.a. die Parameter, die mitgegeben werden, für uns auswertet.

public static void main(String[] args) {
    launch(args);
}

In der Main Methode wird lediglich die in Application bereits vorhandene Methode launch aufgerufen, welche dann u.a. die Parameter auswertet und eine Instanz unserer Klasse erzeugt.

@Override
public void start(Stage primaryStage) throws IOException {

In unserer Klasse überschreiben wir die start Methode, welche uns als Parameter eine Stage mitgibt. Dies ist der oberste Container unserer JavaFX Struktur und entspricht dem Fenster.

Parent root = FXMLLoader.load(getClass().getResource("HelloWorld.fxml"));

In start lesen wir als erstes unser fxml File ein. Die Datei laden wir über die Methode getResource der Klasse, welche den ClassLoader nutzt um die Resource innerhalb des ClassPath zu finden. Dabei wird relativ zum Verzeichnis des Package gesucht. Da das Package unserer Klasse „helloworld“ ist, wird die Resource in einem Verzeichnis helloworld gesucht.

Der FXMLLoader lädt nicht nur die Datei sondern erzeugt auch eine Instanz des Controllers und initialisiert auch alle durch das @FXML Attribut versehende Elemente.

Scene scene = new Scene(root);

Über den geladen Inhalt erzeugen wir eine Scene. Dies entspricht sozusagen dem Inhalt eines Fensters.

primaryStage.setScene(scene);

Wir setzen die erzeugte Scene zum Inhalt des Hauptfensters.

primaryStage.show();

Und zuletzt machen wir das Fenster sichtbar.

Die Klasse HelloWorldController

Der Controller ist für alle Aktionen in der View verantwortlich und wird von der View angesprochen. In dem Beispiel habe ich auch die Möglichkeit gezeigt, wie der Controller auf die View zugreifen kann, aber diese Abhängigkeit sollten wir nicht nutzen!
Wichtig: Die Instanzen dieser Klasse werden vom FXMLLoader erzeugt. Wir erzeugen keine eigenen Instanzen!

package helloworld;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;

public class HelloWorldController {

    @FXML private Button greetMeButton;

    public void closeApplicationAction(ActionEvent e) {
        System.exit(0);
    }

    public void handleGreetMeButton(ActionEvent e) {
        Alert alert = new Alert(Alert.AlertType.INFORMATION, "Hallo Anwender!", ButtonType.OK);
        alert.showAndWait();
    }

    @FXML
    public void initialize() {
        greetMeButton.setOnAction(this::handleGreetMeButton);
    }
}

Die Klasse unseres Controllers muss von keiner anderen Klasse abgeleitet werden.

@FXML private Button greetMeButton;

In dem Controller können wir uns die Elemente, welche im fxml definiert wurden, vom FXMLLoader geben lassen. Damit der FXMLLoader dies macht, muss die Annotation @FXML gesetzt sein.
Desweiteren muss der Typ stimmen (hier Button) und der Name der Variablen muss mit der fx:id überein stimmen (hier fx:id=“greetMeButton“).

Wichtig: Dies erzeugt eine Abhängigkeit vom Controller zu der View. Diese Abhängigkeit sollte vermieden werden so dass nur eine Abhängigkeit von der View zum Controller (und später auch zum Model) existiert. Dies findet sich nur in diesem Beispiel, da dies etwas ist, das sehr viele Entwickler so machen.

public void closeApplicationAction(ActionEvent e) {

public void handleGreetMeButton(ActionEvent e) {

Wir definieren Methoden, die ein ActionEvent als Parameter nehmen. Diese Methoden können Actions behandeln und werden in der fxml Datei referenziert.

Natürlich können wir diese Methoden auch aus unserem Code heraus nutzen.

@FXML
public void initialize() {

Es gibt für einen Controller gewisse Events, die wir nutzen können. Ein Event ist das initialize Event. Das @FXML Annotation sorgt dafür, dass der FXMLLoader diese Methode auch ansteuert.

Dies ist wichtig, denn die Variablen, die vom FXMLLoader gesetzt werden (mit @FXML Annotation) werden erst nach dem Konstruktor gesetzt. Somit stehen diese noch nicht im Konstruktor zur Verfügung. Initialisierungsarbeiten, die auch die Controls benötigen, müssen somit innerhalb der initialize() Methode gemacht werden.

greetMeButton.setOnAction(this::handleGreetMeButton);

Hier setzen wir im Code, was für eine Action bei dem Button ausgeführt werden soll. Dies hätte auch über das fxml gesetzt werden können (so wie beim anderen Button).

Die HelloWorld.fxml Ressource

In der fxml Datei haben wir unsere Oberfläche beschrieben.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>

<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="145.0" prefWidth="237.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="helloworld.HelloWorldController">
   <children>
      <Label alignment="CENTER" contentDisplay="CENTER" layoutX="-1.0" layoutY="14.0" prefHeight="53.0" prefWidth="237.0" text="Hallo Welt" textOverrun="CLIP" underline="true">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <Button fx:id="greetMeButton" layoutX="30.0" layoutY="78.0" mnemonicParsing="false" text="Grüße Mich" />
      <Button layoutX="137.0" layoutY="78.0" mnemonicParsing="false" onAction="#closeApplicationAction" text="Beenden" />
   </children>
</Pane>

Wichtige Elemente sind dabei:

<Pane ... fx:controller="helloworld.HelloWorldController">

Wir definieren in der Pane, welche Klasse als Controller dienen soll. Eine Instanz dieser Klasse wird vom FXMLLoader erzeugt.

<Button fx:id="greetMeButton" ... />

Wir geben dem Button eine feste Id, um dann über den FXMLLoader eine Referenz zu dem Control bekommen zu können.

Wichtig: Wie schon mehrfach gesagt: Dieses Vorgehen ist suboptimal und von mir nicht empfohlen.

<Button ... onAction="#closeApplicationAction" ... />

Wir definieren in der fxml Datei, welche Methode im Controller bei der Action ausgeführt werden soll.

Links

• Application class: https://openjfx.io/javadoc/12/javafx.graphics/javafx/application/Application.html
• FXMLLoader class: https://openjfx.io/javadoc/12/javafx.fxml/javafx/fxml/FXMLLoader.html
• Stage class: https://openjfx.io/javadoc/12/javafx.graphics/javafx/stage/Stage.html
• Scene class: https://openjfx.io/javadoc/12/javafx.graphics/javafx/scene/Scene.html
• Repository mit Code für diese JavaFX Blog Serie: https://github.com/kneitzel/blog-javafx-series

Edit

• 2020-07-03 Wechsel zu einem Repository für die ganze Serie.

JavaFX Serie

• JavaFX: Übersicht / Planung
• JavaFX: Installation / erste Applikation
• JavaFX: Scene Builder
• JavaFX: Erläuterung der Applikation
• JavaFX: Model / View / Controller
• JavaFX: MVVM
• JavaFX: Komplette MVVM Applikation (geplant)
• JavaFX: Layouts (geplant)
• JavaFX: Formulare einfach erstellen (geplant)
• JavaFX: Multi Plattform (geplant)

Als einen wichtigen Unterschied zu Swing habe ich angegeben, dass die Oberflächen deklarativ erstellt werden können. In dem HelloWorld fand sich aber dann davon aber nichts und das einfache Fenster habe ich im Programmcode erstellt.

Dies ändert sich nun und dazu besorgen wir uns noch ein zusätzliches Tool: Den Scene Builder von Gluon. Nach der Installation können wir den Scene Builder auch in IntelliJ integrieren, indem wir in den Settings unter Language & FRameworks -> JavaFX den Pfad zum Scene Builder eintragen.

Eine erste Oberfläche erstellen

Wir erstellen unsere erste Oberfläche, in dem wir einfach in Screen Builder ein neues, leeres Dokument erstellen.

Als erstes ziehen wir aus den Containers ein Pane in unser Dokument. Dieses Element wird alle weiteren Elemente beherbergen.

Als nächstes Ziehen wir einen Label aus den Controls auf unser Pane. Damit können wir jetzt etwas spielen:

• Wir klicken abwechselnd auf Label oder das Pane: Das angeklickte Element wird markiert und es werden die Properties angezeigt.
• Wir verschieben die Elemente, ändern am Rand die Größe….
• Wir ändern Properties. Beim Label können wir den Text ändern und wie der Text dargestellt wird.

Das Label platzieren wir oben im Pane, und verbreitern es, dass es über die ganze Breite geht. Der Text soll „Hallo Welt“ sein, mit 24px Größe und unterstrichen. Und der „Node“ des Label soll ein Alignment CENTER haben.

Unterhalb des Label können wir nun noch zwei Buttons hin ziehen. Diese bekommen den Text „Grüße Mich“ und „Beenden“.

Wir können die alles nun mit der Maus etwas verschieben und die Größe ändern, bis es uns gefällt.

Mein Ergebnis:

Unsere erstellte Oberfläche speichern wir nun als HelloWorld.fxml im Verzeichnis src/main/resources/helloworld/ unseres Testprojekts. Das helloworld Verzeichnis bitte so anlegen.

Hinweis: Hier wird die Trennung deutlich: Unser Java-Code liegt unter src/main/java, aber alle Resourcen wie Bilder oder so eine Scene von JavaFX landen in src/main/resources.

Inhalt der Datei

Die erstellte Datei können wir uns mit einem Texteditor ansehen. Es handelt sich um eine XML Datei und wir können die Struktur, die wir aufgebaut haben sowie die Einstellungen wieder finden.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>


<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="145.0" prefWidth="237.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Label alignment="CENTER" contentDisplay="CENTER" layoutX="-1.0" layoutY="14.0" prefHeight="53.0" prefWidth="237.0" text="Hallo Welt" textOverrun="CLIP" underline="true">
         <font>
            <Font size="24.0" />
         </font>
      </Label>
      <Button layoutX="30.0" layoutY="78.0" mnemonicParsing="false" text="Grüße Mich" />
      <Button layoutX="137.0" layoutY="78.0" mnemonicParsing="false" text="Beenden" />
   </children>
</Pane>

Damit aber diese Scene von unserem Programm verwendet werden kann, müssen wir natürlich noch unser Programm anpassen:

package helloworld;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloWorld extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("HelloWorld.fxml"));
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();

    }
}

Damit haben wir ein erstes kleines Programm. Die Befehle werde ich später im Detail erläutern. Jetzt nur als groben Überblick: Es wird die fxml Datei geladen und dann daraus ein Applikationsfenster angepasst. Wenn wir es starten, sollte ein Fenster mit dem erstellten Inhalt angezeigt werden, aber noch passiert da nichts, wenn wir einen Button drücken.

Aktionen in SceneBuilder definieren

Eine Möglichkeit ist, dass wir Aktionen in der fxml Datei hinterlegen.

Dazu erstellen wir im ersten Schritt eine neue Klasse HelloWorldController mit einer Methode, die das Programm beenden soll, wenn eine „Action“ statt findet:

package helloworld;

import javafx.event.ActionEvent;

public class HelloWorldController {

    public void closeApplicationAction(ActionEvent e) {
        System.exit(0);
    }
}

IntelliJ zeigt den Klassen- und Methodennamen grau an, um uns zu zeigen: Dies wird bisher nicht benutzt.

Als nächstes müssen wir im SceneBuilder die Aktion hinterlegen. Dazu sind zwei Schritte notwendig:

a) Wir hinterlegen in der Scene, welcher Controller zuständig ist. Dazu müssen wir im linken Bereich unten auf Controller klicken um dann die Controller class auszuwählen. Dort geben wir helloworld.HelloWorldController ein.

b) Im nächsten Schritt wählen wir den Knopf und klicken im rechten Bereich auf Code : Button. Dort finden wir unter Main ein Feld On Action. Dort geben wir closeApplicationAction ein.

Wir können die Scene nun speichern und zum IntelliJ zurück wechseln. IntelliJ sollte diese Änderung mitbekommen haben und nun die Klasse und Methode nicht mehr grau darstellen.

Nun einfach einmal die Applikation starten und prüfen, ob wir über unseren Beenden Knopf die Applikation beenden können.

Wir haben hier etwas aufgebaut, was eine sehr schöne Trennung aufzeigt:

• Under Controller bietet eine Action an. Ob und wie diese aufgerufen wird, ist erst einmal egal. Das kein Button sein aber auch irgend ein anderes Control, dass ein ActionEvent auslösen kann.
• Die UI lässt sich jederzeit anpassen. Egal, was da benutzt wird: Die Methoden des Controllers stehen zur Verfügung

Wir haben hier also eine sehr gute Trennung zwischen Controller und View.

Eine so strickte Trennung sollte wenn möglich immer eingehalten werden. Bei dem „Güße Mich“ Button möchte ich aber auch einmal kurz aufzeigen, was man oft bei anderen Entwicklern an Code sieht.

In dem SceneBuilder gehen wir auf den „Grüße Mich“ Knopf und tragen unter Code : Button eine fx:id ein: greetMeButton. Damit vergeben wir eine klare ID an diesen Button, so dass wir einfach auf diesen zugreifen können.

In unserem Controller fügen wir nun ein:

a) Die Methode, die uns grüßen soll:

public void handleGreetMeButton(ActionEvent e) {
    Alert alert = new Alert(Alert.AlertType.INFORMATION, "Hallo Anwender!", ButtonType.OK);
    alert.showAndWait();
}

b) Eine Instanzvariable hinzu mit Annotation @FXML:

@FXML private Button greetMeButton;

c) Eine Initialisierungs-Methode

@FXML
public void initialize() {
    greetMeButton.setOnAction(this::handleGreetMeButton);
}

Wenn wir dies ausführen, dann sehen wir, dass alles funktioniert. Aber jetzt haben wir eine klare Abhängigkeit von dem Controller hin zur View. Es muss ein Button mit fx:id greetMeButton geben. Wenn jemand anderes es Oberfläche baut oder anpasst, dann hat er hier eine klare Einschränkung.

Und im Controller sind wir nicht mehr auf Funktionen konzentriert sondern auf konkrete Bedienelemente. Der Entwickler sollte sich aber in erster Linie um Funktionen auf Basis des Modells (Dazu kommen wir später in der Serie) kümmern.

Evtl. ein kleiner Vergleich: Ein Motor im Auto hat eine Steuerung „Gas“. Da kann man einen Wert setzen. Woher dieser Wert kommt (Gaspedal, Gashebel, Computer, Joystick, ….) ist egal. 

Daher dieser Abschnitt nur als kurzer Hinweis. Wir lassen dies jetzt auch noch so, denn im nächsten Beitrag werde ich die Applikation im Detail erläutern.

Die Sourcen dieses Projektes finden sich unter https://github.com/kneitzel/blog-javafx-series in „02 helloworld-fxml“

Links

• Scene Builder von Gluon: https://gluonhq.com/products/scene-builder/
• SceneBuilder in IntelliJ einbinden: https://www.jetbrains.com/help/idea/opening-fxml-files-in-javafx-scene-builder.html
• Repository mit Code für diese JavaFX Blog Serie: https://github.com/kneitzel/blog-javafx-series

Edit

• 2020-07-03 Wechsel zu einem Repository für die ganze Serie.