JavaFX: MVVM

• 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
• JavaFX: Layouts (geplant)
• JavaFX: Formulare einfach erstellen (geplant)
• JavaFX: Multi Plattform (geplant)

Wir haben uns im letzten Beitrag etwas mit der Aufteilung in Model / View / Controller beschäftigt und mussten in der View für das Binding teilweise auf Code ausweichen. Dies haben wir in Form von kleinen JavaScript Elementen eingefügt, was natürlich nicht unbedingt optimal ist.

Besonders schwerwiegend war, dass wir uns vom SceneBuilder verabschiedet haben, der hier mit gewissen Teilen Probleme bekommen hat.

Um diese Problematik aufzulösen, kommen wir automatisch zu einem neuen Pattern: Aus dem Model View Controller (MVC) Pattern wird ein Model – View – View Model (MVVM) Pattern.

Die erste wichtige Veränderung: Unsere View wird aus zwei Bestandteilen bestehen: Wie gewohnt das fxml aber es kommt auch eine Java Datei hinzu. Dies macht Sinn, denn wir haben bereits festgestellt, dass wir Code in der View benötigen und daher können wir dies in eine separate java Datei packen.

Desweiteren bekommen wir ein View Model. Für unser Binding brauchten wir in den vorhergehenden Beiträgen ein Model, welches mit JavaFX spezifischen Properties arbeitete. Wenn wir aber Software Entwickeln, dann hatten unsere Models (hoffentlich) statt z.B. (Simple)StringProperties immer Strings. Wir hatten hier also immer einen massiven Mehraufwand und den können wir jetzt gezielt abbilden: Wir haben ein dediziertes View Model. In diesem verwenden wir dann unser Model, das im Rahmen der „normalen Java Entwicklung“ entstanden ist.

Rund um MVVM gibt es sehr viel Dokumentation. Microsoft hat sehr stark auf MVVM zugegriffen z.B. in seinem Windows Presentation Framework (WPF). Ein Projekt hat dies auf JavaFX adaptiert: mvvmFX. Im Wiki finden sich zu MVVM auch gute Links, die das Thema sehr ausführlich beschreiben und ich kann nur raten, dies im Detail zu lesen um ein tiefes Verständnis zu bekommen.

Solltest Du der Serie nicht gefolgt sein: Der Code der ganzen JavaFX Serie findet sich unter https://github.com/kneitzel/blog-javafx-series. Der MVC Code in „04 helloworld-mvc“ und die mvvm Version in „05 helloworld-mvvm“

Wir wollen die mvvmFX Library nutzen, daher tragen wir diese als Abhängigkeit in unsere build.gradle Datei ein, indem wir in dem dependency Block einfügen:

compile group: 'de.saxsys', name: 'mvvmfx', version: '1.8.0'

Im Namespace helloworld legen wir eine neue Klasse an: entity.Greeting, in der wir unsere Business Logik / Daten für eine Begrüßung hinterlegen:

package helloworld.entity;<br></br><br></br>public class Greeting {<br></br>    private String greeting;<br></br><br></br>    public Greeting() {<br></br>        greeting = "Hallo Welt!";<br></br>    }<br></br><br></br>    public Greeting(final String name) {<br></br>        greetName(name);<br></br>    }<br></br><br></br>    public String getGreeting() { return greeting; }<br></br><br></br>    public void greetName(final String name) {<br></br>        if (name == null || name.isEmpty()) {<br></br>            greeting = "Hallo Welt!";<br></br>        } else {<br></br>            greeting = "Hallo " + name + "!";<br></br>        }<br></br>    }<br></br>}

Dies ist eine einfache Klasse mit Daten und Business Logik, ganz ohne irgend welche JavaFX Spezialitäten wie StringProperties und Co. Die Klasse wirkt von Design etwas gekünstelt, aber wir nehmen dies an dieser Stelle einfach so hin.

Nun wollen wir einige Dateien umbenennen:

a) View

Zu der View gehören ab jetzt das fxml File und das bisherige Controller File. Daher benennen wir diese um in HelloWorldView(.java|.fxml)

b) ViewModel

Das bisherige Model wird zum ViewModel, daher benennen wir die Datei um in HelloWorldViewModel.java

Das Umbenennen machen wir mit dem Refactoring der IDE, damit es immer gleich an allen Stellen geändert ist.

Als erstes passen wir die HelloWorldView.fxml an:

• Wir löschen die Referenz auf JavaScript <?language javascript?>
• Das Label mit dem Greeting bekommt ein fx:id=“greetingLabel“ und das Binding für text wird gelöscht (text=“${controller.model.greeting}“)
• Das fx:script wird komplett entfernt.

Dann passen wir die HelloWorldView.java an:

package helloworld;<br></br><br></br>import de.saxsys.mvvmfx.FxmlView;<br></br>import de.saxsys.mvvmfx.InjectViewModel;<br></br>import javafx.event.ActionEvent;<br></br>import javafx.fxml.FXML;<br></br>import javafx.fxml.Initializable;<br></br>import javafx.scene.control.Label;<br></br>import javafx.scene.control.TextField;<br></br><br></br>import java.net.URL;<br></br>import java.util.ResourceBundle;<br></br><br></br>public class HelloWorldView implements FxmlView<HelloWorldViewModel>, Initializable {<br></br><br></br>    /**<br></br>     * Model with our data.<br></br>     */<br></br>    @InjectViewModel<br></br>    private HelloWorldViewModel model;<br></br><br></br><br></br>    /**<br></br>     * TextField for name.<br></br>     */<br></br>    @FXML private TextField nameTextField;<br></br><br></br>    /**<br></br>     * Label for greeting<br></br>     */<br></br>    @FXML private Label greetingLabel;<br></br><br></br>    /**<br></br>     * Close application.<br></br>     * @param e ActionEvent (unused).<br></br>     */<br></br>    public void closeApplicationAction(final ActionEvent e) {<br></br>        model.closeApplication();<br></br>    }<br></br><br></br>    /**<br></br>     * Updates Greeting in model.<br></br>     * @param e ActionEvent (unused).<br></br>     */<br></br>    public void updateGreeting(final ActionEvent e) { model.updateGreeting();}<br></br><br></br>    @Override<br></br>    public void initialize(URL url, ResourceBundle resourceBundle) {<br></br>        nameTextField.textProperty().bindBidirectional(model.nameProperty);<br></br>        greetingLabel.textProperty().bind(model.greetingProperty);<br></br>    }<br></br>}

Die folgenden wichtigen Änderungen sind sichtbar:

• Es wird nun FxmlView<HelloWorldViewModel>, Initializable implementiert.
• Das Model wird nicht mehr selbst erzeugt sondern kommt per Injection.
• Die Controls sind nun in der View bekannt (greetingLabel und nameTextField).
• Die Business-Logik (Beenden der Applikation) ist in das ViewModel gewandert.
• Das Binding ist nun in der initialize Methode.

Die ViewModel Klasse wird auch angepasst:

package helloworld;<br></br><br></br>import de.saxsys.mvvmfx.ViewModel;<br></br>import helloworld.entity.Greeting;<br></br>import javafx.beans.property.SimpleStringProperty;<br></br>import javafx.beans.property.StringProperty;<br></br><br></br>/**<br></br> * Our Model for Hello World.<br></br> */<br></br>public class HelloWorldViewModel  implements ViewModel {<br></br><br></br>    /**<br></br>     * Our Model to use.<br></br>     */<br></br>    private Greeting greeting;<br></br><br></br>    /**<br></br>     * Greeting to show.<br></br>     */<br></br>    public StringProperty greetingProperty = new SimpleStringProperty();<br></br>    public StringProperty nameProperty = new SimpleStringProperty("Bitte Namen eingeben");<br></br><br></br>    public HelloWorldViewModel() {<br></br>        greeting = new Greeting("Welt");<br></br>        updateViewModel();<br></br>    }<br></br><br></br>    /**<br></br>     * Updates the greeting to use the name given.<br></br>     */<br></br>    public void updateGreeting() {<br></br>        if (nameProperty.get().length() > 0) {<br></br>            greeting.greetName(nameProperty.get());<br></br>            nameProperty.setValue("Bitte Namen eingeben");<br></br>        } else {<br></br>            greeting.greetName("Welt");<br></br>        }<br></br><br></br>        updateViewModel();<br></br>    }<br></br><br></br>    /**<br></br>     * Updates the ViewModel when Model was changed.<br></br>     */<br></br>    protected void updateViewModel() {<br></br>        greetingProperty.setValue(greeting.getGreeting());<br></br>    }<br></br><br></br>    /**<br></br>     * Close application.<br></br>     */<br></br>    public void closeApplication() {<br></br>        System.exit(0);<br></br>    }<br></br>}

Die wichtigen Änderungen sind nun:

• die Klasse implementiert ViewModel
• closeApplication als Business Logik ist dazu gekommen.
• Die Greeting Entity wird verwendet. Wir haben jedoch unseren eigenen Code geschrieben, um Änderungen an den Properties auszulesen / zu setzen.

Unsere Applikation muss auch geändert werden:

package helloworld;<br></br><br></br>import de.saxsys.mvvmfx.FluentViewLoader;<br></br>import de.saxsys.mvvmfx.ViewTuple;<br></br>import javafx.application.Application;<br></br>import javafx.fxml.FXMLLoader;<br></br>import javafx.scene.Parent;<br></br>import javafx.scene.Scene;<br></br>import javafx.stage.Stage;<br></br><br></br>import java.io.IOException;<br></br><br></br>public class HelloWorld extends Application {<br></br><br></br>    public static void main(final String[] args) {<br></br>        launch(args);<br></br>    }<br></br><br></br>    @Override<br></br>    public void start(final Stage primaryStage) throws IOException {<br></br>        primaryStage.setTitle("Hello World Application");<br></br>        ViewTuple<HelloWorldView, HelloWorldViewModel> viewTuple = FluentViewLoader.fxmlView(HelloWorldView.class).load();<br></br>        Parent root = viewTuple.getView();<br></br>        primaryStage.setScene(new Scene(root));<br></br>        primaryStage.show();<br></br>    }<br></br><br></br>}

Der Aufruf einer MVVM Applikation sieht nun leicht verändert aus. So müssen wir ein ViewTupel erzeugen und nutzen dazu einen neuen, speziellen FluentViewLoader.

Damit wäre die Applikation erst einmal umgestellt auf das MVVM Pattern mit Hilfe der mvvmFX Library.

• mvvmFX Projekt: https://github.com/sialcasa/mvvmFX
• mvvmFX Wiki: https://github.com/sialcasa/mvvmFX/wiki
• Repository mit Code für diese JavaFX Blog Serie: https://github.com/kneitzel/blog-javafx-series

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