Introduction to the MVVM Pattern MVVM and Silverlight Reddy Kadasani Project Manager Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

Stands for Model-View-ViewModel It is a Software Design Pattern What is MVVM? Stands for Model-View-ViewModel It is a Software Design Pattern Silverlight and WPF are Built on MVVM Guis consist of widgets that contain the state of the UI screen. Leaving the state of the UI in the widgets makes it harder to get to this state and manipulate it. . Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

Model –View-Controller Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

Presentation Model Pattern (MVVM) State and Behavior of the “Presentation” Moving the State outside the Widgets or Controls a.k.a Application Model Model View Presentation (ViewModel) The Presentation Model pulls the state and behavior of the view out into the model class that is part of the presentation. The PM coordinates with the domain layer and provides an interface to the view. This minimizes the decisions that the view needs to make. The view either stores all of its state in the Presentation Model or synchronizes its state with the Presentation Model frequently. The PM may interact with several domain objects, but the PM is not a GUI friendly façade to a specific domain object. The PM is actually an abstract of the view that is not dependent on a specific GUI framework. Data Binding State and Behavior Commands Events Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

Presentation Model Pattern (MVVM) A View should require only one Presentation Model Several Views can utilize the same Presentation Model View View Presentation (ViewModel) State and Behavior Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

Synchronization Between the Presentation Model and View Key Points to Consider Synchronization Between the Presentation Model and View Repetitive Code Where to put the Synch Code? Should the View Reference the PM? Should the PM Reference the View? Testability Maintainability Frameworks PRISM MVVM Light Toolkit A Presentation Model that references a view generally maintains the syncronization code in the Presentation Model. The resulting view is very dumb. The view contains setters for any state that is dynamic and raises events in response to user actions. The views implement interfaces allowing for easy stubbing when testing the Presentation Model. The Presentation Model will observe the view and respond to events by changing any appropriate state and reloading the entire view. As a result the syncronization code can be easily tested without needing the actual UI class. A Presentation Model that is referenced by a view generally maintains the syncronication code in the view. Because the syncronization code is generally easy to write and easy to spot errors it is recommended that the testing occur on the Presentation Model and not the View. If you are compelled to write tests for the view this should be a clue that the view contains code that should belong in the Presentation Model. If you prefer to test the syncronization, a Presentation Model that references a view implementation is recommended. Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

How does it work in Silverlight? Dependency Properties INotifyPropertyChanged UI Element (Dependency Property) (CLR Object) (Property) Binding Object Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

How does it work in Silverlight? Data Template Data Binding Notifying of Change Relay Command Messages (Events) Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

DEMO DEMO Create a Simple Silverlight Application that uses MVVM to display a list of Movies Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018

References Presentation Model – Martin Fowler (http://martinfowler.com/eaaDev/PresentationMod el.html) Passive View – Martin Fowler (http://martinfowler.com/eaaDev/PassiveScreen.ht ml) Silverlight and MVVM Silverlight.net WPF Apps with MVVM (http://msdn.microsoft.com/en- us/magazine/dd419663.aspx) MVVM Toolkit (http://www.galasoft.ch/mvvm/getstarted/) Tallan, Inc. Proprietary and Confidential. Copyright 2010. 11/15/2018