6.3. Model-View-ViewModel (MVVM)

The Model-View-ViewModel (MVVM) pattern is an architectural pattern that focuses on data binding and separation of concerns between the view and the model. Its components are:

• Model: Represents the data and business logic.
• View: Represents the user interface and displays the data from the ViewModel.
• ViewModel: Exposes the model’s data and commands to the view through data binding.

Here’s a simple example of the MVVM pattern in Java using JavaFX:

// Model
class Person {
    private final SimpleStringProperty name = new SimpleStringProperty("");

    public String getName() {
        return name.get();
    }

    public void setName(String name) {
        this.name.set(name);
    }

    public StringProperty nameProperty() {
        return name;
    }
}

// ViewModel
class PersonViewModel {
    private Person model;

    public PersonViewModel(Person model) {
        this.model = model;
    }

    public StringProperty nameProperty() {
        return model.nameProperty();
    }
}

// View (JavaFX application)
public class MVVMPatternDemo extends Application {
    private PersonViewModel viewModel;

    @Override
    public void start(Stage primaryStage) {
        Person model = new Person();
        viewModel = new PersonViewModel(model);

        TextField nameTextField = new TextField();
        nameTextField.textProperty().bindBidirectional(viewModel.nameProperty());

        Button displayButton = new Button("Display");
        displayButton.setOnAction(event -> System.out.println("Person: " + viewModel.nameProperty().get()));

        VBox root = new VBox(nameTextField, displayButton);
        Scene scene = new Scene(root, 300, 100);

        primaryStage.setTitle("MVVM Pattern Demo");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

In this example, the Person class represents the model, which stores the person's name using a SimpleStringProperty. The PersonViewModel class is the ViewModel that exposes the model's data through data binding. The MVVMPatternDemo class is a JavaFX application that represents the view.

The view creates instances of the model and ViewModel, binds the ViewModel’s data to the view using JavaFX properties, and updates the view to display the person’s details. When the “Display” button is clicked, it prints the person’s name to the console.

To run this example, you will need to have JavaFX installed and configured in your project.

Use Case: Bookstore Inventory Management Application

MVVM pattern for Bookstore Inventory Management Application

In this use case, we will create a simple Java-based Bookstore Inventory Management Application using the Model-View-ViewModel (MVVM) design pattern. The application will allow users to add, update, and delete books from the inventory, as well as view the list of books in the inventory.

1. Model: Create a simple Book model class to represent a book in the inventory.

public class Book {
    private String title;
    private String author;
    private String isbn;
    private double price;

    public Book(String title, String author, String isbn, double price) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
        this.price = price;
    }

    // Getters and setters for each property
}

2. ViewModel: Create a BookViewModel class that will interact with the Book model and expose properties and commands for the View to bind to.

import javafx.beans.property.*;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class BookViewModel {
    private Book selectedBook;
    private final ObservableList<Book> books;

    // Properties for data binding with the View
    private final StringProperty titleProperty = new SimpleStringProperty();
    private final StringProperty authorProperty = new SimpleStringProperty();
    private final StringProperty isbnProperty = new SimpleStringProperty();
    private final DoubleProperty priceProperty = new SimpleDoubleProperty();

    public BookViewModel() {
        books = FXCollections.observableArrayList();
    }

    // Getters and setters for properties

    // Commands for adding, updating, and deleting books
}

3. View: Create the BookView class that will display the UI and bind to the ViewModel's properties and commands.

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class BookView extends Application {
    private BookViewModel viewModel = new BookViewModel();

    @Override
    public void start(Stage primaryStage) {
        // Initialize UI components and set up data binding

        primaryStage.setTitle("Bookstore Inventory Management");
        primaryStage.setScene(new Scene(createMainPane()));
        primaryStage.show();
    }

    private Pane createMainPane() {
        // Create the main pane and add UI components
    }

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

In this use case, the Book class represents the Model, the BookViewModel class represents the ViewModel, and the BookView class represents the View. The View and ViewModel are connected through data binding, allowing the user to interact with the application while maintaining a clear separation of concerns.

Note: For complete list of design patterns click here