5.3. MVVM Pattern

Was ist das MVVM Pattern?

Das Model-View-ViewModel (MVVM) Pattern ist ein strukturelles Entwurfsmuster zur klaren Trennung der Benutzeroberfläche (UI) von der Geschäftslogik und den Datenmodellen einer Anwendung. MVVM wird häufig in Frameworks wie JavaFX, Android oder modernen Web-Frameworks verwendet.

Bestandteile des MVVM Patterns

Model

// Model
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
@AllArgsConstructor
public class User {
    private String username;
    private String email;
}

ViewModel

// ViewModel
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;

public class UserViewModel {
    private final StringProperty username = new SimpleStringProperty();
    private final StringProperty email = new SimpleStringProperty();
    private final User user;

    public UserViewModel(User user) {
        this.user = user;
        username.set(user.getUsername());
        email.set(user.getEmail());
    }

    public StringProperty usernameProperty() {
        return username;
    }

    public StringProperty emailProperty() {
        return email;
    }

    public void save() {
        user.setUsername(username.get());
        user.setEmail(email.get());
    }
}

View (FXML)

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane xmlns:fx="http://javafx.com/fxml" fx:controller="de.example.UserViewController">
    <Label text="Benutzername:" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
    <TextField fx:id="usernameField" GridPane.rowIndex="0" GridPane.columnIndex="1"/>

    <Label text="E-Mail:" GridPane.rowIndex="1" GridPane.columnIndex="0"/>
    <TextField fx:id="emailField" GridPane.rowIndex="1" GridPane.columnIndex="1"/>

    <Button text="Speichern" onAction="#saveUser" GridPane.rowIndex="2" GridPane.columnIndex="1"/>
</GridPane>

Controller (als Teil der View)

import javafx.fxml.FXML;
import javafx.scene.control.TextField;

public class UserViewController {
    @FXML private TextField usernameField;
    @FXML private TextField emailField;

    private UserViewModel viewModel;
    
    public void setViewModel(UserViewModel viewModel) {
        this.viewModel = viewModel;
        usernameField.textProperty().bindBidirectional(viewModel.usernameProperty());
        emailField.textProperty().bindBidirectional(viewModel.emailProperty());
    }

    @FXML
    public void saveUser() {
        if (viewModel != null) {
            viewModel.save();
        }
    }
}

Erklärung der Verbindung

Model enthält Daten ohne Bindung an die UI.
ViewModel hält JavaFX-Properties und ist die Brücke zwischen Model und View.
View (FXML) beschreibt die Oberfläche. Die Bindung selbst steht hier nicht in der FXML, sondern im Controller.
Controller gehört zur View: Er verdrahtet die Textfelder bidirektional mit dem ViewModel und löst Aktionen wie Speichern aus.

Gegenüber MVC hält das ViewModel den UI-Zustand (Properties) und entkoppelt die View vom Model. Änderungen fließen über Bindings, nicht über manuelles updateView(). Speichern schreibt im Beispiel bewusst zurück ins Model; Validierung wäre eine Aufgabe des ViewModels.