SlideShare a Scribd company logo
1 of 24
0
Agenda
• MVVM
• PRISM
MVVM
Model-View-ViewModel
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
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.
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.
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
MVVM Layers Connections
View

ViewModel

Model

• 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
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.
MVVM Execution
• What happens when an user clicks a Button?
1.
2.
3.

The View fires event that a button was clicked
The View calls a Method in the ViewModel
The ViewModel gets/sets some data from/in the Model

User Fires
an Event

View

The ViewModel
requests data

ViewModel
The View Shows
the new data

The ViewModel
receives data

Model
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
INotifyProperyChanged
• The INotifyPropertyChanged interface contains
only one event
PropertyChanged(object sender, PropertyChangedEventArgs e)

• 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
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
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?
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
IOC Frameworks
• StructureMap
• Unity
• Managed Extensibility Framework (MEF)
Infrastructure Services
•
•
•
•
•
•
•

IOC Container
NavigationService
EventAggregator
SessionStateService
FlyoutService
Service Proxies
Other objects that are needed application wide
ViewModel Auto Wire-up
• Resolve( )
• ViewModelLocator.
SetDefaultViewTypeToViewModelTypeResolver
• Persistence
• If you can’t use Auto Wire-up
• Declarative wire-up
• Programmatic wire-up
Commands
•
•
•
•
•

Delegate Commands
Synchronous Command Execution
Asynchronous Command Execution
Command Parameters
Conditional Command Execution
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
Model Validation (Contd.)
Useful Links
• http://msdn.microsoft.com/enus/library/windows/apps/hh465099.aspx
• http://msdn.microsoft.com/enus/library/windows/apps/br229566.aspx
MVVM and Prism

More Related Content

What's hot

MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)Yaroslav Voloshyn
 
Asp.net Overview and Controllers
Asp.net Overview and ControllersAsp.net Overview and Controllers
Asp.net Overview and ControllersMustafa Saeed
 
Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMMudasir Qazi
 
Ui design patterns
Ui design patternsUi design patterns
Ui design patternsJorge Ortiz
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architectureravindraquicsolv
 
Acrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVMAcrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVMDong-Ho Lee
 
MVC Seminar Presantation
MVC Seminar PresantationMVC Seminar Presantation
MVC Seminar PresantationAbhishek Yadav
 
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009Jonas Follesø
 
MVVM with WPF
MVVM with WPFMVVM with WPF
MVVM with WPFS V
 
MVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperMVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperNyros Technologies
 
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC StructureDipika Wadhvani
 
Model View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In AspnetModel View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In Aspnetrainynovember12
 
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGi
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGiOSGi Community Event 2010 - VMware and SpringSource Projects on OSGi
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGimfrancis
 
MVVM in iOS presentation
MVVM in iOS presentationMVVM in iOS presentation
MVVM in iOS presentationG ABHISEK
 

What's hot (20)

MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)MVx patterns in iOS (MVC, MVP, MVVM)
MVx patterns in iOS (MVC, MVP, MVVM)
 
Asp.net Overview and Controllers
Asp.net Overview and ControllersAsp.net Overview and Controllers
Asp.net Overview and Controllers
 
Design Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVMDesign Pattern - MVC, MVP and MVVM
Design Pattern - MVC, MVP and MVVM
 
Ui design patterns
Ui design patternsUi design patterns
Ui design patterns
 
MVC
MVCMVC
MVC
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
 
What is MVC?
What is MVC?What is MVC?
What is MVC?
 
MVC Architecture
MVC ArchitectureMVC Architecture
MVC Architecture
 
Acrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVMAcrhitecture deisign pattern_MVC_MVP_MVVM
Acrhitecture deisign pattern_MVC_MVP_MVVM
 
MVC Seminar Presantation
MVC Seminar PresantationMVC Seminar Presantation
MVC Seminar Presantation
 
MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009
 
ASP.NET MVC for Begineers
ASP.NET MVC for BegineersASP.NET MVC for Begineers
ASP.NET MVC for Begineers
 
Mvc fundamental
Mvc fundamentalMvc fundamental
Mvc fundamental
 
MVVM with WPF
MVVM with WPFMVVM with WPF
MVVM with WPF
 
MVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros DeveloperMVC Architecture in ASP.Net By Nyros Developer
MVC Architecture in ASP.Net By Nyros Developer
 
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC Structure
 
Model View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In AspnetModel View Presenter (MVP) In Aspnet
Model View Presenter (MVP) In Aspnet
 
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGi
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGiOSGi Community Event 2010 - VMware and SpringSource Projects on OSGi
OSGi Community Event 2010 - VMware and SpringSource Projects on OSGi
 
MVVM in iOS presentation
MVVM in iOS presentationMVVM in iOS presentation
MVVM in iOS presentation
 
No brainer
No brainerNo brainer
No brainer
 

Similar to MVVM and Prism

Web engineering - MVC
Web engineering - MVCWeb engineering - MVC
Web engineering - MVCNosheen Qamar
 
Architectural Design & Patterns
Architectural Design&PatternsArchitectural Design&Patterns
Architectural Design & PatternsInocentshuja Ahmad
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesQamar Abbas
 
MVVM - Model View ViewModel
MVVM - Model View ViewModelMVVM - Model View ViewModel
MVVM - Model View ViewModelDareen Alhiyari
 
Models used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVMModels used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVMAndrei Popa
 
MVC architecture in software programming for interactive apps
MVC architecture in software programming for interactive appsMVC architecture in software programming for interactive apps
MVC architecture in software programming for interactive appsKotiTenali
 
Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fairTech_MX
 
WPF For Beginners - Learn in 3 days
WPF For Beginners  - Learn in 3 daysWPF For Beginners  - Learn in 3 days
WPF For Beginners - Learn in 3 daysUdaya Kumar
 
iOS architecture patterns
iOS architecture patternsiOS architecture patterns
iOS architecture patternsallanh0526
 
MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017Innovation Studio
 
Android architectural components
Android architectural componentsAndroid architectural components
Android architectural componentsMuhammad Ali
 

Similar to MVVM and Prism (20)

Web engineering - MVC
Web engineering - MVCWeb engineering - MVC
Web engineering - MVC
 
Architectural Design & Patterns
Architectural Design&PatternsArchitectural Design&Patterns
Architectural Design & Patterns
 
Adopting MVVM
Adopting MVVMAdopting MVVM
Adopting MVVM
 
MVVM
MVVMMVVM
MVVM
 
Mobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelinesMobile App Architectures & Coding guidelines
Mobile App Architectures & Coding guidelines
 
MVVM - Model View ViewModel
MVVM - Model View ViewModelMVVM - Model View ViewModel
MVVM - Model View ViewModel
 
MVP Clean Architecture
MVP Clean  Architecture MVP Clean  Architecture
MVP Clean Architecture
 
Models used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVMModels used in iOS programming, with a focus on MVVM
Models used in iOS programming, with a focus on MVVM
 
MVC architecture
MVC architectureMVC architecture
MVC architecture
 
MVC architecture in software programming for interactive apps
MVC architecture in software programming for interactive appsMVC architecture in software programming for interactive apps
MVC architecture in software programming for interactive apps
 
Mvc pattern and implementation in java fair
Mvc   pattern   and implementation   in   java fairMvc   pattern   and implementation   in   java fair
Mvc pattern and implementation in java fair
 
WPF For Beginners - Learn in 3 days
WPF For Beginners  - Learn in 3 daysWPF For Beginners  - Learn in 3 days
WPF For Beginners - Learn in 3 days
 
Knockout js
Knockout jsKnockout js
Knockout js
 
iOS architecture patterns
iOS architecture patternsiOS architecture patterns
iOS architecture patterns
 
MVC.pptx
MVC.pptxMVC.pptx
MVC.pptx
 
MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017MVC architecture by Mohd.Awais on 18th Aug, 2017
MVC architecture by Mohd.Awais on 18th Aug, 2017
 
Mvc architecture
Mvc architectureMvc architecture
Mvc architecture
 
Viper architecture
Viper architectureViper architecture
Viper architecture
 
Mvc part 1
Mvc part 1Mvc part 1
Mvc part 1
 
Android architectural components
Android architectural componentsAndroid architectural components
Android architectural components
 

Recently uploaded

How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...shyamraj55
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 

Recently uploaded (20)

How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 

MVVM and Prism

  • 1. 0
  • 4. 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
  • 5. 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.
  • 6. 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.
  • 7. 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
  • 8.
  • 9. MVVM Layers Connections View ViewModel Model • 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
  • 10. 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.
  • 11. MVVM Execution • What happens when an user clicks a Button? 1. 2. 3. The View fires event that a button was clicked The View calls a Method in the ViewModel The ViewModel gets/sets some data from/in the Model User Fires an Event View The ViewModel requests data ViewModel The View Shows the new data The ViewModel receives data Model
  • 12. 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
  • 13. INotifyProperyChanged • The INotifyPropertyChanged interface contains only one event PropertyChanged(object sender, PropertyChangedEventArgs e) • 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
  • 14. 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
  • 15. 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?
  • 16. 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
  • 17. IOC Frameworks • StructureMap • Unity • Managed Extensibility Framework (MEF)
  • 19. ViewModel Auto Wire-up • Resolve( ) • ViewModelLocator. SetDefaultViewTypeToViewModelTypeResolver • Persistence • If you can’t use Auto Wire-up • Declarative wire-up • Programmatic wire-up
  • 20. Commands • • • • • Delegate Commands Synchronous Command Execution Asynchronous Command Execution Command Parameters Conditional Command Execution
  • 21. 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
  • 23. Useful Links • http://msdn.microsoft.com/enus/library/windows/apps/hh465099.aspx • http://msdn.microsoft.com/enus/library/windows/apps/br229566.aspx