MVVM Architecture

Overview

The Model-View-ViewModel pattern

In our app, we follow the MVVM pattern, which decouples the retrieval of data, view logic, and presentation into three distinct areas.

uwp mvvm

Model

The model provides and stores the internal data. In our travel app, for simplicity, we use standard data types of Dictionary and Array to represent the data. In a real application, one would use a custom object to represent the model.

The app implements the following models - Booking which represents a flight reservation - Flight which represents airline details - Airport which represents airport name - Hotel which represents hotel details

In addition, the CouchbaseSession class is used to keep state through multiple pages.

View

In the Travel app, the ContentPage class represents the "view" in MVVM. It handles user input and forwards requests to the VIew Model. It updates the UI based on response from the View Model.

The app implements the following Views - LoginPage which represents the login UI - BookmarkedHotelsPage which represents the UI that lists bookmarked hotels - FlightBookingsPage which represents the flight reservations UI - HotelsListPage which represents the UI that lists hotels - HotelDetailsPage which represents the UI that lists hotel details

View Model

The View Model acts as the intermediary between the View and the Model. It is responsible for interacting with the model and updating it’s state to indicate how the view should present itself. There is one view model per view and is named according to the view

  • LoginViewModel

  • BookmarkedHotelsViewModel

  • FlightBookingsViewModel

  • HotelsListViewModel

  • HotelDetailsViewModel