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)

// 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;

    @FXML
    public void initialize() {
        User user = new User("Max Mustermann", "max@example.com");
        viewModel = new UserViewModel(user);

        usernameField.textProperty().bindBidirectional(viewModel.usernameProperty());
        emailField.textProperty().bindBidirectional(viewModel.emailProperty());
    }

    @FXML
    public void saveUser() {
        viewModel.save();
        System.out.println("Gespeichert: " + viewModel.usernameProperty().get() +
                           ", " + viewModel.emailProperty().get());
    }
}

Erklärung der Verbindung:

Model enthält reine Daten und Logik ohne direkte Verbindung zur UI.
ViewModel enthält JavaFX-Properties und bildet die Brücke zwischen Model und View.
View (FXML) definiert die Benutzeroberfläche und bindet UI-Elemente an das ViewModel.
Controller gehört mit zur View und initialisiert das ViewModel, bindet dessen Properties bidirektional an die UI-Elemente und verwaltet Aktionen wie das Speichern der Daten.

Diese Implementierung verdeutlicht, wie MVVM eine klare Trennung der Komponenten und eine einfache Bindung zwischen UI und Geschäftslogik ermöglicht.