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)