Model-View-Model-View-ViewModelViewModel

Core Idea of Silverlight and WPFCore Idea of Silverlight and WPF

Doncho MinkovDoncho Minkov

Telerik School Telerik School AcademyAcademyschoolacademy.telerik.com

Technical TrainerTechnical Trainerhttp://www.minkov.it

Table of ContentsTable of Contents Introduction in MVVMIntroduction in MVVM MVVM ArchitectureMVVM Architecture

The ViewThe View

The ModelThe Model

The ViewModelThe ViewModel Simple ImplementationSimple Implementation BenefitsBenefits

Introduction in Introduction in MVVMMVVM

What is Really MVVM?What is Really MVVM?

Introduction in MVVMIntroduction in MVVM MVVM is a three-layer architectural MVVM is a three-layer architectural

patternpattern Mostly used in WPF and SilverlightMostly used in WPF and Silverlight Used to separate presentation logic from Used to separate presentation logic from

business logicbusiness logic MVVM makes it easierMVVM makes it easier

For the developer and the front-ender to For the developer and the front-ender to work on the same projectwork on the same project

Change the presentation layer at any Change the presentation layer at any pointpoint

Extend the project with less difficultiesExtend the project with less difficulties Testing componentsTesting components

MVVM ArchitectureMVVM ArchitectureThe View, the Model, the ViewModelThe View, the Model, the ViewModel

MVVM ArchitectureMVVM Architecture

MVVM consists of three layersMVVM consists of three layers View is the Presentation LayerView is the Presentation Layer

Contains only GUI elements, but no Contains only GUI elements, but no functionalityfunctionality

Model refers toModel refers to An object model that represents the An object model that represents the

real state contentreal state content

A data access layer that represents A data access layer that represents that contentthat content

MVVM Architecture (2)MVVM Architecture (2) ViewModel is a "ViewModel is a "Model of the ViewModel of the View""

Abstraction of the ViewAbstraction of the View Serves in data binding between the Serves in data binding between the

View and the ModelView and the Model Acts as a data binder/converterActs as a data binder/converter Changes Model information into View Changes Model information into View

informationinformation Passes commands from the View into Passes commands from the View into

the Modelthe Model Exposes public properties, Exposes public properties,

commands, and abstractionscommands, and abstractions

MVVM Layers MVVM Layers ConnectionsConnections

The main idea of MVVM is that each pair The main idea of MVVM is that each pair of layers is coupled as loosely as possibleof layers is coupled as loosely as possible The View only knows about the ViewModelThe View only knows about the ViewModel

The View has no idea of the ModelThe View has no idea of the Model

The ViewModel only knows about the ModelThe ViewModel only knows about the Model

The ViewModel has no idea of the ViewThe ViewModel has no idea of the View

The Model knows nothing about the other The Model knows nothing about the other layerslayers

ViewView ViewModeViewModell

ModelModel

MVVM ExecutionMVVM Execution What happens when an user clicks What happens when an user clicks

a a ButtonButton??

1.1. The View fires event that a button The View fires event that a button was clickedwas clicked

2.2. The View calls a Method in the The View calls a Method in the ViewModelViewModel

3.3. The ViewModel gets/sets some The ViewModel gets/sets some data from/in the Modeldata from/in the ModelViewView ViewModeViewMode

llModelModel

User Fires User Fires an Eventan Event

The ViewModel The ViewModel requests datarequests data

The ViewModel The ViewModel receives datareceives data

The View The View Shows the new Shows the new

datadata

Simple MVVM Simple MVVM ImplementationImplementation

Simple MVVM Simple MVVM ImplementationImplementation

An application that keeps a set of An application that keeps a set of namesnames The user can add or delete a name at The user can add or delete a name at

any timeany time The user can see all the namesThe user can see all the names

Application architectureApplication architecture ModelModel

Keeps the namesKeeps the names

ViewModel ViewModel Gets/deletes/adds the namesGets/deletes/adds the names

ViewView Gives a UI for these operationsGives a UI for these operations

Live DemoLive Demo

Simple MVVM Simple MVVM ImplementationImplementation

Implementing the Implementing the ViewModelViewModel

INotifyProperyChangedINotifyProperyChanged

ViewModel ViewModel ImplementationImplementation

A question pops outA question pops out How does the View know about How does the View know about

changes in the ViewModel?changes in the ViewModel? How the ViewModel knows about How the ViewModel knows about

changes in the Model?changes in the Model? There is no reversed connection, right?There is no reversed connection, right?

The answer is simpleThe answer is simple The The INotifyPropertyChangedINotifyPropertyChanged interfaceinterface

Gives an event to notify about changesGives an event to notify about changes

INotifyProperyChangedINotifyProperyChanged

The The INotifyPropertyChangedINotifyPropertyChanged interface contains only one eventinterface contains only one event

PropertyChanged(object sender, PropertyChanged(object sender, PropertyChangedEventArgs e)PropertyChangedEventArgs e) The point of this event is to be The point of this event is to be

called when the data is changedcalled when the data is changed Both Model and ViewModel should Both Model and ViewModel should

implement this interfaceimplement this interface In small project only the In small project only the

ViewModel can implement itViewModel can implement it

Implementing Implementing INotifyPropertyChangedINotifyPropertyChanged

CLR automatically notifies the View CLR automatically notifies the View about the change when about the change when PropertyChangedPropertyChanged is calledis called

public class ViewModel:INotifyPropertyChangedpublic class ViewModel:INotifyPropertyChanged{{ PropertyChanged(object PropertyChanged(object sender,PropertyChangedEventArgs e)sender,PropertyChangedEventArgs e)

OnPropertyChanged(string propertyName)OnPropertyChanged(string propertyName) { { if(this.PropertyChanged!=null)if(this.PropertyChanged!=null) { { var args=new var args=new PropertyChangedEventArgs(propertyName);PropertyChangedEventArgs(propertyName); PropertyChanged(this,args);PropertyChanged(this,args); }} } }}}

MVVM Real Life MVVM Real Life ImplementationImplementation

Lets Get PracticalLets Get Practical

Implementing Implementing ImageViewerImageViewer

We will implement an Image Viewer We will implement an Image Viewer application using WPF and MVVMapplication using WPF and MVVM The user should be able to see all The user should be able to see all

the images in a given folderthe images in a given folder

The user should be able to The user should be able to add/delete imagesadd/delete images

The user should be able to select an The user should be able to select an image to enlarge itimage to enlarge it

Next and Previous buttons should Next and Previous buttons should be available be available

MVVM Real Life MVVM Real Life ImplementationImplementation

Live DemoLive Demo

QuestionsQuestions??

Model-View-ViewModelModel-View-ViewModel

ExercisesExercises1.1. Implement a WPF/Silverlight application Implement a WPF/Silverlight application

Calculator. The Calculator should support the Calculator. The Calculator should support the operation supported by the Windows operation supported by the Windows Standard Calculator:Standard Calculator:

Addition, Subtraction, Division, MultiplicationAddition, Subtraction, Division, Multiplication

Saving a value to be used laterSaving a value to be used later

Square root, Power, LogarithmSquare root, Power, Logarithm

2.2. Implement a Clock application. The Clock Implement a Clock application. The Clock should show the current date and time. The should show the current date and time. The user is able to set a list of alarms. When the user is able to set a list of alarms. When the time for the alarm comes, a message box time for the alarm comes, a message box should be shown to the user. The clock should be shown to the user. The clock should have both analog and digital UI, should have both analog and digital UI, configurable by a property.configurable by a property.

Exercises (2)Exercises (2)