Scribd
Upload
32 views

Model View View-Model (MVVM)

The document discusses GUI patterns and introduces the Model-View-ViewModel (MVVM) pattern. MVVM separates an application into three main components: the model, the view, and the view model. The model represents application data, the view displays data and user interface, and the view model acts as a mediator between the two, exposing properties and commands to be bound to the view. This allows for separation of concerns and more testable, maintainable code.

Uploaded by

santiago_pérez_51
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Model View View-Model (MVVM)

The document discusses GUI patterns and introduces the Model-View-ViewModel (MVVM) pattern. MVVM separates an application into three main components: the model, the view, and the view model. The model represents application data, the view displays data and user interface, and the view model acts as a mediator between the two, exposing properties and commands to be bound to the view. This allows for separation of concerns and more testable, maintainable code.

Uploaded by

santiago_pérez_51
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Model View View-Model (MVVM)

Agenda

• GUI Patterns

• Model View Controller - MVC

• Model View View-Model - MVVM


Graphical User Interfaces

• User Interface development -


can be notoriously complex.

• Inherent complexity: the GUI


component set is at varying
levels of abstraction with
sophisticated event
mechanisms:

‣ Controls

‣ Containers/Dials/Widgets

‣ Panels/Windows

‣ Menus/Buttons/Dropdowns

• Accidental complexity: domain


logic can easily become
hopelessly intermingled with the
GUI specific logic. 3
GUI Events

• A significant source of complexity

• Fine-grained events
‣ Mouse entered, exited
‣ Mouse pressed
‣ Radio button pressed, armed, rollover

• Coarse-grained events:
‣ Radio button selected
‣ Action performed
‣ Domain property changed

‣ Managing the flow of these events requires careful consideration if design


coherence is to be preserved.

4
GUI Patterns
• Reusable designs that can be realised with different toolkits:

‣ Model View Controller (MVC)

‣ Model View View Model (MVVM)

• Other patterns (http://martinfowler.com/eaaDev/)

‣ Notification

‣ Supervising Controller

‣ Model View Presenter (MVP)

‣ Passive View

‣ Presentation Model

‣ Event Aggregator

‣ Window Driver

‣ Flow Synchronization

‣ Observer Synchronization
In particular, read
‣ Presentation Chooser
http://martinfowler.com/eaaDev/uiArchs.html
for background to these patterns
‣ Autonomous View

5
Key Principle: Separation of Concerns

“In computer science, separation of concerns (SoC) is a


design principle for separating a computer program into
distinct sections, such that each section addresses a
separate concern. A concern is a set of information that
affects the code of a computer program. A concern can
be as general as the details of the hardware the code is
being optimized for, or as specific as the name of a class
to instantiate. A program that embodies SoC well is
called a modular program.”

https://en.wikipedia.org/wiki/Separation_of_concerns

6
Model View Controller

• The Model/View/Controller (MVC) triad of classes is used to build user


interfaces in Smalltalk-80.

• MVC consists of three kinds of objects:

• Model is the application object

• View is its screen presentation

• Controller defines the way the user interface reacts to user input

• Before MVC, user interface designs tended to lump these objects together.
MVC decouples them to increase flexibility and reuse

7
Synchronization

• MVC synchronizes views and models via Observer Synchronization.

• A view must ensure that its appearance reflects the state of the model.

• Whenever the model's data changes, the model notifies views that depend
on it.

• In response, each view gets an opportunity to update itself.

• This approach allows multiple views to be attached views to a model to


provide different presentations.

8
View / Model

9
Controller

• MVC encapsulates response and


model update mechanisms in a
Controller object.

• The Controller is the “glue”


between the Model and the View.

• The View renders model updates


on the screen, but is not permitted
to modify the model.

• The View forwards events to the


controller

• The Controller does not have


access to the screen but can
modify the model.

10
MVC Sequence Diagrams

11
Potential Advantages

• Since MVC handles the multiple views using the same enterprise model it
is easier to maintain, test and upgrade the multiple system.

• It will be easier to add new clients just by adding their views and
controllers.

• Since the Model is completely decoupled from view it allows lot of


flexibilities to design and implement the model considering reusability and
modularity.

• This makes the application extensible and scalable

12
Model View View-Model
• Model: refers either to a domain
model, which represents real
state content

• View: As in the MVC, the view is


the structure, layout, and
appearance of what a user sees
on the screen.

• View model : an abstraction of


the view exposing public
properties and commands.
Instead of the controller of the
MVC pattern, MVVM has ‘bound’
properties - automatically
synchronised with the view
13
MVVM Sequence Diagram

14

You might also like