mvvm and prism
DESCRIPTION
This presentation deals with basic understanding of MVVM and Prism.TRANSCRIPT
![Page 1: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/1.jpg)
0
![Page 2: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/2.jpg)
Agenda• MVVM• PRISM
![Page 3: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/3.jpg)
MVVMModel-View-ViewModel
![Page 4: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/4.jpg)
What is MVVM
• MVVM is a design pattern
• MVVM stands for Model-View-ViewModel
• Design patterns are a set of guidelines
• Design patterns are Not a set of rules
![Page 5: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/5.jpg)
MVC vs MVVM• MVC – The view sits at the top of the architecture, the
controller sits below the view. The model sits below the controller. So the view knows about the controller, the controller knows the model. The view is notified when the model changes.
• MVVM – The controller is replaced with a view model. the view model sits below the UI layer. The view model exposes the data and command objects that the view needs. You could think of this as a container object that view goes to to get its data and actions from. The view model pulls its data from the model below.
![Page 6: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/6.jpg)
What is MVVM• MVVM is a three-layer architectural pattern• Mostly used in Windows 8, WPF and Silverlight applications.• Used to separate presentation logic from business logic.
• MVVM makes it easier• For the developer and the front-ender to work on the same
project.• Change the presentation layer at any point.• Extend the project with less difficulties.• Testing components.
![Page 7: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/7.jpg)
MVVM Architecture• MVVM consists of three layers• View is the Presentation Layer
• Contains only GUI elements, but no functionality• Model refers to
• An object model that represents the real state content• A data access layer that represents that content
• ViewModel is a "Model of the View"• Abstraction of the View• Serves in data binding between the View and the Model• Acts as a data binder/converter• Changes Model information into View information• Passes commands from the View into the Model• Exposes public properties, commands, and abstractions
![Page 8: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/8.jpg)
![Page 9: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/9.jpg)
MVVM Layers Connections
• The main idea of MVVM is that each pair of layers is coupled as loosely as possible• The View only knows about the ViewModel
• The View has no idea of the Model• The ViewModel only knows about the Model
• The ViewModel has no idea of the View• The Model knows nothing about the other layers
View ViewModel
Model
![Page 10: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/10.jpg)
Loosely Coupled
• The View knows the ViewModel but the ViewModel does not know the View.• You can very easily replace the View without affecting
the ViewModel. • This is very useful in Developer/Designer teams where
the Developer improves the ViewModel and the Designer enhances the View.
![Page 11: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/11.jpg)
MVVM Execution• What happens when an user clicks a Button?
1. The View fires event that a button was clicked2. The View calls a Method in the ViewModel3. The ViewModel gets/sets some data from/in the Model
View ViewModel
Model
User Fires an Event
The ViewModel requests data
The ViewModel receives data
The View Shows the new
data
![Page 12: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/12.jpg)
ViewModel Implementation• A question pops out• How does the View know about changes in the ViewModel?• How the ViewModel knows about changes in the Model?• There is no reversed connection, right?
• The answer is simple• The INotifyPropertyChanged interface
• Gives an event to notify about changes
![Page 13: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/13.jpg)
INotifyProperyChanged
• The INotifyPropertyChanged interface contains only one event
• The point of this event is to be called when the data is changed
• Both Model and ViewModel should implement this interface
• In small project only the ViewModel can implement it
PropertyChanged(object sender, PropertyChangedEventArgs e)
![Page 14: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/14.jpg)
Prism-RT• WPF• Microsoft Patterns & Practices Guidelines• Prism 1,2,3,4• Prism for Windows-RT• Inversion of Control• Delegate Commands• Model Validation• Navigation• …And more
![Page 15: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/15.jpg)
Inversion of Control• How does normal control flow look like?• Inverted Flow?• Common in Framework Extensions• Inevitable if you want to build loosely coupled modules• But How to decide which module gets the call?
![Page 16: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/16.jpg)
Dependency Injection• Caller doesn’t have to know the callee• Dependency resolution not caller’s headache anymore• Interaction is now based on defined interfaces• Types of DI• Constructor Injection*• Setter Injection• Interface Injection
![Page 17: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/17.jpg)
IOC Frameworks• StructureMap• Unity• Managed Extensibility Framework (MEF)
![Page 18: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/18.jpg)
Infrastructure Services• IOC Container• NavigationService• EventAggregator• SessionStateService• FlyoutService• Service Proxies• Other objects that are needed application wide
![Page 19: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/19.jpg)
ViewModel Auto Wire-up• Resolve( )• ViewModelLocator.
SetDefaultViewTypeToViewModelTypeResolver• Persistence• If you can’t use Auto Wire-up• Declarative wire-up• Programmatic wire-up
![Page 20: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/20.jpg)
Commands• Delegate Commands• Synchronous Command Execution• Asynchronous Command Execution• Command Parameters• Conditional Command Execution
![Page 21: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/21.jpg)
Model Validation• ValidatableBindableBase• BindableValidator• Annotation Attributes• When to Validate• When property value is set?• When a command is fired?
• Error Message Binding• Restoring Error State
![Page 22: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/22.jpg)
Model Validation (Contd.)
![Page 23: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/23.jpg)
Useful Links• http://
msdn.microsoft.com/en-us/library/windows/apps/hh465099.aspx
• http://msdn.microsoft.com/en-us/library/windows/apps/br229566.aspx
![Page 24: MVVM and Prism](https://reader035.vdocuments.site/reader035/viewer/2022062319/554f4b0ab4c905524c8b4960/html5/thumbnails/24.jpg)
Good Luck