Webinar follow-up: Getting started with MVVM

First of all I want to thank everyone who attended my webinar on Getting started with MVVM in WPF and Silverlight yesterday. I had an awesome time delivering this session and answering some of your questions.  As most of you asked me about sharing the demo and slides so here’s a quick recap of the session followed by the link to samples and slide deck.

 

Simple Sales Dashboard using MVVM, that I demoed!

 

Model – View – ViewModel is a pattern that is not limited to WPF and Silverlight applications anymore. You can implement this pattern in the web(KnockoutJS), Windows Phone, Windows 8 applications and few other frameworks which support event-driven programming. If you are interested to implement this pattern on the web, go check out IGNITE UI (Infragistics jQuery controls) that has support for MVVM using KnockoutJS.

Patterns are guidelines, not rules!

Patterns are absolutely necessary when you are building large enterprise applications, with many business modules and have many developers working on it. It’s important that the app is loosely coupled; code is maintainable, testable and it separates the concerns. Patterns just make things easier, however if you overdo it, it can equally put your project into trouble. So ask “Why?” before you go implement any pattern.

MVVM is a pattern, not a framework!

MVVM is sometimes confused to be the framework because of the large number of them having the word “MVVM” appended in the name. All these frameworks support MVVM just like they support few other features likes Messaging, Service Locators, Dependency Injection, IOC containers etc. Answer to the question “Which framework do I choose?” – Totally depends on your project!. MVVM is one of the features of the framework so you may have to check out few other features that you need for your project and choose one. Or Roll your own!

MVVM is inspired by various other UI patterns that you may already know.

• Model – View – Controller
• Model – View – Presenter
• Presentation Model

In all these M and V are common:

Model – refers to application data and business rules. (a.k.a domain model, entities)

View – what user sees! (HTML page on the web browser, A Window or a UserControl in XAML)

Controller in MVC – manipulates the model based on the user interaction. It handles all the logic.

Presenter in MVP – presenter is similar to a controller in MVC. Acts as a two-way communication with the view.

Presentation Model – Very similar to MVP. In this case View is a rendering of the Presentation Model. Presentation Model frequently updates the view so that the two stay in sync with each other.

Explanation of MVC, MVP and Presentation Model is out of scope of this post. Please refer to the links provided to understand them in detail.

Model – View  – ViewModel

MVVM is identical to Presentation Model however it was tailor made for WPF and Silverlight since it leverages the advantages of data bindings provided by the framework. As I mentioned earlier now this pattern has gained popularity across various other platforms as well. The main concept to understand here is the ViewModel(“Model of the View”). This is the class where the majority of your UI logic goes in. ViewModel clearly separates those pieces of code that otherwise would get tightly coupled inside the code behind. ViewModel can eliminate code-behind completely(almost). In order to write your first ViewModel, let’s look at few WPF concepts below.

WPF Concepts, building blocks!

Few aspects of WPF makes the MVVM a great pattern, one of them being data binding infrastructure that it provides.

INotifyPropertyChanged/INotifyCollectionChanged

This is not a WPF only concept. INotifyPropertyChanged is part of an implementation of the GOF Observer pattern in .net. The purpose is to inform the subscribers that the value of the property on the publisher has changed. WPF relies on change notification mechanism in order to enable two way binding. So it can be simply understood that your ViewModels should implement INotifyPropertyChanged interface so that it can participate in data binding and property change notifications.

INotifyCollectionChanged is similar to INotifyPropertyChanged, however it applies to collection of objects. You can use ObservableCollection<T> instead of manually implementing this interface.

Implementing INotifyPropertyChanged :

 

RaisePropertyChanged() is a helper method used to notify property changes. Call this method in the setter to notify property change.

DataBinding and DataContext:

Data binding in WPF provides a simple and consistent way for apps to present and interact with the data. Data resides in the properties of the ViewModel and hence we need to bind them to the View. ViewModel needs to be set to the View’s Data Context so that it can participate in the Data Binding. If you are new to Data Binding, then check out MSDN library for more info.

You can set the ViewModel to the View’s DataContext in multiple ways, but here is the simplest way:

And then bind the properties to the element in the View:

Commands:

The main purpose of commands is to separate the semantics and the object that invokes a command from the logic that executes the command.  With the help of command you can overcome the limitations of events because we can fire a command in the view and receive it in the ViewModel. Commands also avoid tight coupling and repetitive code in the application. Another interesting facility that the command provides is – to check if the command can be executed or not. This is done with the help of CanExecute() method. You can read more about commands in the article Understanding Routed Events and Commands in WPF.

Commands in WPF are implemented using the ICommand interface:

 

Demo, slides and links to download samples!

Here are the download links for the two of the demos I showed you:

• Writing your First View Model – Calculating age based on the Selected Date of the DatePicker(without codebehind)
• Simple Sales Dashboard – Consists of Infragistics xamRibbon, xamDataGrid, xamDockManager and xamDataChart.

Pre-requisites to run Sample Sales Dashboard demo:

• Download and install NetAdvantage for WPF . You can download the trial version and run for 30 days.
• Entity Framework
• Download and Attach Northwind Database to your SQL Server
• Change your connection string in the App.Config

I introduced you to some helper classes like RelayCommand and ObservableObject(both are included in the Sales Dashboard samples). You can download the full library at http://mvvmfoundation.codeplex.com/. 

Some of you asked me about Attached Behaviors, here’s my blog post on it.

And finally here’s the link to Download my slides.

More webinars?

I have got requests to do some advanced MVVM sessions and a session on PRISM. I want to know how many will be really interested in these.  So open up discussions on our facebook page and we will do it soon!

If you have any questions email me nanil@infragistics.com or find me on twitter @nishanil.

-Nish-