creating applications using the model-view-viewmodel (mvvm) pattern
DESCRIPTION
Need a new acronym for your resume? The Model-View-ViewModel (MVVM) pattern is a variation of Model-View-Presenter (MVP) that is tailored for modern UI development platforms where the View is the responsibility of a designer rather than the developer. This has lead to the pattern becoming very popular with WPF and Silverlight application developers lately. This presentation will walk you through creating a business application from scratch in both WPF and Silverlight using the MVVM pattern.TRANSCRIPT
![Page 1: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/1.jpg)
Creating Applications using the Model-View-ViewModel Pattern
Matt Castohttp://google.com/profiles/mattcasto
![Page 2: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/2.jpg)
Developing Software is HARD
![Page 3: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/3.jpg)
Developing Software is HARD
![Page 4: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/4.jpg)
Patterns Help … but its still HARD!
![Page 5: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/5.jpg)
Model – View – ViewModel
![Page 6: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/6.jpg)
Model – View – Controller
![Page 7: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/7.jpg)
Model – View – Controller•Regarded as the first pattern to
seperate UI, Data & Logic concerns•Controller handles all logic,
including Mouse & Keyboard events
![Page 8: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/8.jpg)
Model – View – Presenter
![Page 9: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/9.jpg)
Model – View – Presenter•Variation of MVC• Tailored for modern UI that handles
Mouse & Keyboard events better•Presenter depends on View
![Page 10: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/10.jpg)
Presentation Model
![Page 11: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/11.jpg)
Presentation Model•Published by Martin Fowler in 2004•View is a rendering of the
Presentation Model
![Page 12: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/12.jpg)
Presentation Model“Probably the most annoying part of Presentation Model is the synchronization between Presentation Model and view. It’s simple code to write, but I always like to minimize this kind of boring repetitive code. Ideally some kind of framework could handle this, which I’m hoping will happen someday with technologies like .NET’s data binding.”
– Martin Fowler
![Page 13: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/13.jpg)
Model
![Page 14: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/14.jpg)
Model – Your Data
![Page 15: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/15.jpg)
Model – Your Data• Entities• Service Proxy•POCO
![Page 16: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/16.jpg)
Model – Your DataView
![Page 17: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/17.jpg)
Model – Your DataView – User Interface
![Page 18: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/18.jpg)
Model – Your DataView – User Interface
•XAML (WPF)•XAML w/ Code Behind (Silverlight)
![Page 19: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/19.jpg)
Model – Your DataView – User InterfaceViewModel
![Page 20: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/20.jpg)
Model – Your DataView – User InterfaceViewModel – The View’s Model
![Page 21: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/21.jpg)
Model – Your DataView – User InterfaceViewModel – The View’s Model
• State•Operations•Not Dependent on the View
![Page 22: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/22.jpg)
You’re probably already doing something very close to this
![Page 23: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/23.jpg)
You probably could be doing something very close to this
![Page 24: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/24.jpg)
Why do I care about MVVM?
![Page 25: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/25.jpg)
Why should you care about MVVM?
![Page 26: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/26.jpg)
Patterns are a set of guidelinesPatterns are not a set of rules
![Page 27: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/27.jpg)
Benefits of MVVM
![Page 28: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/28.jpg)
Benefits of MVVM
• Loose Coupling• Testable Code• Maintainable Code
![Page 29: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/29.jpg)
Developers and Designers
![Page 30: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/30.jpg)
DEMO
WPF vs Silverlight
![Page 31: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/31.jpg)
DEMO
Adding Validation
![Page 32: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/32.jpg)
DEMO
Unit Testing
![Page 33: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/33.jpg)
DEMO
Commands
![Page 34: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/34.jpg)
MVVM Solutions
• Component Application Guidance• MVVM Light Toolkit• Caliburn• Roll Your Own
![Page 35: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/35.jpg)
Sources• WPF Apps With The Model-View-ViewModel Design Pattern – Josh Smith
http://msdn.microsoft.com/en-us/magazine/dd419663.aspx
• Model-View-ViewModel In Silverlight 2 Apps – Shawn Wildermuthhttp://msdn.microsoft.com/en-us/magazine/dd458800.aspx
• ViewModel Pattern in Silverlight using Behaviors – Nikhil Kotharihttp://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx
• Using RoutedCommands with a ViewModel in WPF – Josh Smithhttp://www.codeproject.com/KB/WPF/VMCommanding.aspx
• Presentation Model – Martin Fowlerhttp://martinfowler.com/eaaDev/PresentationModel.html
![Page 36: Creating Applications Using The Model-View-ViewModel (MVVM) Pattern](https://reader035.vdocuments.us/reader035/viewer/2022062404/554a54f8b4c905522f8b4b46/html5/thumbnails/36.jpg)
THANKS!!
Matt Castohttp://google.com/profiles/mattcasto