Scribd
Upload
38 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 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
We take content rights seriously. If you suspect this is your content, claim it here.
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