MVVM design pattern implementation using Silverlight

Introduction:
This article is mainly as per my understanding about the MVVM pattern, and may be I am not correct at every point, So your input are greatly appreciated. After reading few articles on the net I just try to explain this pattern with a simple example in silver light 4 (using visual studio 2010).

Description:
MVVM stands for Model-View-VewModel. It is based on the  MVC design pattern and targeted at modern User Interface development platforms like WPF and Silverlight and helps us building a true application that is more readable, easily testable, re-usable and maintainable. 
One of the main goal of the MVVM pattern is to create an application that is loosely coupled. MVVM pattern mainly built of using three components View, ViewModel and Model.

MVVM Pattern (in this diagram i have included service that is used to communicate with web service/database to fetch data.)

View:
These are the Silverlight/WPF screens and does not contains any code behind. Views in MVVM pattern communicate in the application based on the bindings and commands that are contained in the ViewModel.


Model:
This part holds the data entities, business logic and it is completely independent of the View.


ViewModel:
 This component is responsible for exposing the data objects from the model in such a way that these objects are easily managed and consumes by the view. It acts like a value converter, which converts the raw data from the the Model and make it View friendly and vice-versa. Along with providing data for the Views it also  contains the commands the View can use for interaction in the application.


Note: The key thing of ViewModel is that you have one and only one ViewModel per View.


How it works?:
The ViewModel is typically contains the properties/Collections for the data that is going to be shown by the View. These properties/Collections raises notifications when the data changes. So when the data changes the View can receive the notification to update itself. The View Uses the powerful data binding features provided by the Silverlight/WPF to bind these properties exposed by the ViewModel with the controls that the view is composed of. User events that are captured by the view are sent to the ViewModel by the commands properties, and these commands executes a method in the ViewModel, which in result either sent a request to the Model to process some business logic  or update its own properties so that the View can update automatically.


Why to use MVVM Pattern?:

• It allows a developer to create an application with no user interface.
• A designer able to create User Interface without writing a single line of code.
• As the UI is loosely coupled, It can be changed without changing any code.

Implementation MVVM Pattern using Silverlight:

    Here i am showing a simple example in Silverlight that implements the MVVM pattern. In this example I provide the searching on the employee based on name. So in my screen there are three controls one text box that is used to enter the search text and a button that will do the search operation and a grid to show the result employee list. But in this example i am not using the text box data for searching and just showing some hard coded data, because my purpose here to show the MVVM Pattern implementation.

Silverlight Application

Model Implementation:

    In this example I have used the model as a data entity. Here i have created a base class for model that implements the INotifyPropertyChanged and IDisposable interface. INotifyPropertyChanged Interface is used to notify the view that the property is changed and it have to update itself and the IDisposable interface to provide the dispose functionality to my class.

Model base class code:

public class BaseModel: INotifyPropertyChanged, IDisposable
    {
        #region IDisposable Members
        public void Dispose()
        {
            this.OnDispose();
        }
        public virtual void OnDispose()
        {

        }
        #endregion

        #region INotifyPropertyChanged Members
        /// <summary>
        /// This event is used to notify differnet silverlight binding that the data in changed for one
        /// or more properties so that control can be updated automatically.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// This method is used to raise the PropertyChanged event.
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnNotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }

Model Code:

public class EmployeeModel : BaseModel
    {
        #region [Properties]
        private string firstName;
        public string FirstName
        {
            get
            {
                return firstName;
            }
            set
            {
                firstName = value;
                OnNotifyPropertyChanged("FirstName");
            }
        }

        private string lastName;
        public string LastName
        {
            get
            {
                return lastName;
            }
            set
            {
                lastName = value;
                OnNotifyPropertyChanged("LastName");
            }
        }

        private Int32 age;
        public Int32 Age
        {
            get
            {
                return age;
            }
            set
            {
                age = value;
                OnNotifyPropertyChanged("Age");
            }
        }
        #endregion
       
        #region [Constructors]
        public EmployeeModel(string fName, string lName, Int32 age)
        {
            FirstName = fName;
            LastName = lName;
            Age = age;
        }
        #endregion
    }

Service Implementation:
Service class is used here for communication with the data source or the web service/REST service to retrieve data and set/update the model. In this example i am not using any code for data access or calling any web service. For display purpose i have fixed some data that i can show in this example. You can change this code and try your own.

Employee service interface code:

  public interface IEmpService
    {
        ObservableCollection<EmployeeModel> GetEmployees(string name);
    }

Employee Service Code:

public class EmpService : IEmpService
    {
        #region IEmpService Members
        public System.Collections.ObjectModel.ObservableCollection<Model.EmployeeModel> GetEmployees(string name)
        {
            ObservableCollection<EmployeeModel> empList = new ObservableCollection<EmployeeModel>();

            empList.Add(new EmployeeModel("Prasant", "Swain", 99));
            empList.Add(new EmployeeModel("Prakash", "Samal", 99));

            return empList;
        }
        #endregion
    }

ViewModel Implementation:
Like the implementation of Model here also we have created a base class for all the ViewModel class. It implements the INotifyPropertyChanged interface to provide the functionality to notify the bindings of the View to update itself when any property changes along with this we have defined another class called ProcessCommand that implements the ICommand interface. This class is basically used to bind the events in the View with the ViewModel.


BaseModel Class Code:

public abstract class BaseViewModel:INotifyPropertyChanged
    {
        /// <summary>
        /// This event is used to notify differnet silverlight binding that the data in changed for one
        /// or more properties so that control can be updated automatically.
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>
        /// This method is used to raise the PropertyChanged event.
        /// </summary>
        /// <param name="propertyName"></param>
        protected void OnNotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public bool IsDesignTime
        {
            get
            {
                return DesignerProperties.IsInDesignTool;
                //return (Application.Current == null) || (Application.Current.GetType() == typeof(Application));
            }
        }
    }

ProcessCommand Class Code:

    public class ProcessCommand : ICommand
    {
        #region ICommand Members
        Func<object, bool> canExecute;
        Action<object> execute;
        bool canExecuteFlag;

        public ProcessCommand(Action<object> executeAction)
        {
            this.execute = executeAction;
            this.canExecute = (p) => { return true; };
        }

        public ProcessCommand(Action<object> executeAction, Func<object, bool> canExecute)
        {
            this.canExecute = canExecute;
            this.execute = executeAction;
        }
       
        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            bool tempCanExecute = canExecute(parameter);
            if (this.canExecuteFlag != tempCanExecute)
            {
                this.canExecuteFlag = tempCanExecute;
                if (CanExecuteChanged != null)
                {
                    CanExecuteChanged(this, new EventArgs());
                }
            }
            return tempCanExecute;
        }

        public void Execute(object parameter)
        {
            execute(parameter);
        }
        #endregion
    }

EmployeeViewModel Code:

  public class EmployeeViewModel:BaseViewModel
    {
        #region [Properties]
        private ObservableCollection<EmployeeModel> employees;
        public ObservableCollection<EmployeeModel> Employees
        {
            get
            {
                return employees;
            }
            set
            {
                employees = value;
                OnNotifyPropertyChanged("Employees");
            }
        }

        private EmployeeModel currentEmployee;
        public EmployeeModel CurrentEmployee
        {
            get { return currentEmployee; }
            set
            {
                    currentEmployee = value;
                    OnNotifyPropertyChanged("CurrentEmployee");
            }
        }

        private string searchName;
        public string SearchName
        {
            get
            {
                return searchName;
            }
            set
            {
                if (searchName != value)
                {
                    searchName = value;
                    OnNotifyPropertyChanged("SearchName");
                }
            }
        }

        public ICommand SearchCmd
        {
            get {return new ProcessCommand(SearchCommand, (e) => { return true; });}
        }
        #endregion

        #region [Methods]
        public void SearchCommand(object objParam)
        {
            IEmpService empService = new EmpService();
            Employees = (ObservableCollection<EmployeeModel>)empService.GetEmployees(SearchName);

            CurrentEmployee = employees[0];
        }
        #endregion
    }

View Implementation:

As described above in my view i have used three controls for this example a text box (not using it in this example), a button and a data grid. button is bind with the SearchCmd property and the data grid is bind with the employee list (Employees) which is implemented as a Observable collection.
View Code:

<UserControl x:Class="MVVMPoC.App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModel="clr-namespace:MVVMPoC.ViewModel;assembly=MVVMPoC.ViewModel"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:my="clr-namespace:MVVMPoC.App.Controls" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.Resources>
        <ViewModel:EmployeeViewModel x:Key="empVM"/>
    </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource empVM}}" Height="247" Width="400">
        <TextBox Height="23" HorizontalAlignment="Left" Margin="42,25,0,0" Name="textBox1" VerticalAlignment="Top" Width="129" DataContext="{Binding Path=SearchCmd, Mode=TwoWay}" />
        <Button Content="Search" Height="23" HorizontalAlignment="Left" Margin="177,25,0,0" Name="button1" VerticalAlignment="Top" Width="75" Command="{Binding Path=SearchCmd}" />
        <sdk:DataGrid AutoGenerateColumns="True" Height="140" HorizontalAlignment="Left" Margin="42,54,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="338" ItemsSource="{Binding Path=Employees, Mode=TwoWay}" />
    </Grid>
</UserControl> 

IDisposable Interface (Disposable Pattern)

Introduction:
    IDisposable Interface is primarily designed to provide a standard way to manage the unmanged resources in the .net applications.
  
Description:
    We know that Garbage Collector(GC) is designed to manage memory allocation in .net applications. So developer have no headache to manage the managed resources as GC manage it implicitly. But when it comes about the unmanaged resources GC have no control over it, because GC is not designed to deal with unmanaged resources, so it is the developers responsibility to manage this unmanaged resources.
   A developer can achieve this by overriding the Finalize method, but the problem with finalize method is that as Garbage Collector does not run in deterministically and in result the object may be wait for finalization for a longer period of time. And this situation becomes more complected if our object is using expensive resources like database connection or file handles, then waiting a long period of time to free these resource is not acceptable. To avoid this waiting of Garbage Collection for an indeterminate amount of time to free resource Disposable Pattern (IDisposable pattern) is used.
      
This Disposable Pattern/IDisposable Interface is basically designed to ensure predictable and reliable cleanup of resource to prevent resource leak and to provide a standard pattern for disposable classes. IDisposable interface defines a single method called Dispose() that need to be implemented by the implemented class. And the developers have to ensure that they implements clean up code using this method.

Example:

   public class MyDisposableClass : IDisposable
    {
        private bool isDisposted = false;

        ~MyDisposableClass()
        {
            Dispose(false);
        }

        public void Dispose()
        {
            Dispose(true);
        }

        private void Dispose(bool disposing)
        {
            if (!isDisposted)
            {
                if (disposing)
                {
                    //TODO: Wtire your clean up code here
                   
                    //This will remove the object from the finalization queue as the clean up
                    //is already done and finaliztion is not required.
                    GC.SuppressFinalize(this);

                }
                // flag set to ture as dispose is done
                isDisposted = true;
            }
        }
    }

MVP Design Pattern Implementation using ASP.NET/Win Form

Introduction:
    We have given a task to implement our next project in two different interfaces, One using traditional ASP.NET web pages and another one using the new rich silver-light user interface . And we have to follow the MVP design pattern to implement this. During this process I have gone through the MVP design pattern documents and implementation processes and writing this blog to provide a little bit introductory idea about what is MVP pattern and a simple example to implement this using a web and windows application.


    I have not used the silver-light in this example, because CLR for web application and silver-light CLR are completely different. To implement this you have to develop separate set of view, presenter and model component for web application and for silver-light. There is a trick to solve this by developing the different components for Web application  first and later adding parallel components for silver-light by just adding the link of all the classes and interfaces developed for respective web application components. But my main purpose is to focus on the MVP pattern, so i have taken a example of windows application in place of silver-light.

Description:
MVP pattern stand for Model-View-Presenter design pattern. It is basically built of using three components View, Model and Presenter. It is a derivative of the MVC (Model-View-Control) pattern. 

Model-View-Presenter Pattern

View: It represents the applications presentation layer and responsible for displaying and receiving the user inputs  and handling the user events (i.e. mouse clicks, key down, click etc.) on the controls only. Views does not call directly to the  Models, Instead it invokes the Presenter methods which in-turn calls the Model to get the data and in return updates the view. All concrete view components must implement an interface which defines all the methods and properties which required to be implemented.



Presenter: This component basically communicates with the view to accept user inputs for processing, connect to the model to retrieve the required data or process the requested  business logic and return the view the desired data to show. Presenter have access to the interface of the view. It has no idea about the implementation.


Model: It contains all the business logic of the application. It processes the request from the presenter and do the processing to return it's result to the presenter.


Implementation:
    To describe MVP implementation using asp.net i have created a small application (for giving a general idea of implementation) that search employee by employee code and display employee information on the page. At this moment i have not implemented any logic at model level and just returning a hard coded value for testing purpose. Later we have used the model, view and presenter to implement the same functionality on a windows application without making any change on the core components (Model, View and Presenter).

Implementation Using ASP.NET (Web Page)

Implementation using Windows Application (Win Form)

Creating & Implementing View in Web and Windows application:
   View is basically defines an interface which need to be implemented by the UI layer. This interface is later used by the presenter. This provides the way to lose coupling between view and presenter. Here I have created an interface called IEmpView. This is the interface that is going to be implemented by both the web application and windows application.

Code (IEmpView):

  public interface IEmpView
    {
        string Code { get; }
        string EmpName { set;  }
        string Address { set; }
    }

  
Code (Aspx page code behind): 
  In the code behind of the web application we have implemented the IEmpView interface and implemented the properties exposed by it. And in the Click event of the search button it instantiate the presenter class and call the required method for processing.

  public partial class EmployeeInfo : System.Web.UI.Page, IEmpView
    {
        public string Code
        {
            get  { return txtCode.Text ; }
        }

        public string EmpName
        {
            set { lblName.Text = value; }
        }

        public string Address
        {
            set { lblAddress.Text = value; }
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            mvpPresenter.EmpPresenter empPresenter = new mvpPresenter.EmpPresenter(this);
            empPresenter.BindData();
        }
    }

Code (Windows application):
    In this section i have used the same interface to develop the application using Windows Form. Similar like the above implementation in web form the windows form implements the IEmpView and implements the properties.

     public partial class EmployeeForm : Form, IEmpView
    {
        public string Code
        {
            get { return txtCode.Text; }
        }

        public string EmpName
        {
            set { lblName.Text = value;}
        }

        public string Address
        {
            set { lblAddress.Text = value; }
        }        

        private void btnSearch_Click(object sender, EventArgs e)
        {
            mvpPresenter.EmpPresenter empPresenter = new mvpPresenter.EmpPresenter(this);
            empPresenter.BindData();
        }

    }

Creating the Presenter:
    Presenter have no idea about the UI. It does not know the view interface it is interacting is implemented by a windows or web application.Its constructor takes the IEmpView (interface) as parameter.

Code (Presenter):

    public class EmpPresenter
    {
        private readonly IEmpView empView;

        public EmpPresenter(IEmpView view)
        {
            empView = view;
        }

        public void BindData()
        {
            EmpModel model = new EmpModel();
            EmpDTO employee = model.GetEmployee(empView.Code);
            empView.EmpName = employee.Name;
            empView.Address = employee.Address;
        }
    }

This is the DTO class I have used to transfer data between the Model and Presenter.

Code (Employee DTO): 

    public class EmpDTO
    {
        public string Code { set; get; }
        public string Name { set; get; }
        public string Address { set; get; }
        public EmpDTO(string code, string name, string address)
        {
            Code = code;
            Name = name;
            Address = address;
        }
    }

Creating Model: 
    Model class basically holds the business logic of the application. In this example i have hard coded the process logic of GetEmployee() method and it will be replaced by the code to fetch data from database or some external source by communicating with the respective layer.

Code (Interface of Model):

 public interface IEmpModel
    {
        EmpDTO GetEmployee(string empCode);
    }

Code (Concrete Model Class):

    public class EmpModel:IEmpModel
    {
        public EmpModel()
        {
        }

        public EmpDTO GetEmployee(string empCode)
        {
            return new EmpDTO(empCode, "Prasant Swain", "Kolkata");
        }
    }

So you have noticed that we have implemented our application using different UI without modifying our core components (Model, View and Presenter).



Advantages:
1. Provide the ability to test all the code in the application except the visual appearance and the interaction.
2. Ability to interchange view without modification on the code (Example. it can be easily changed the presentation layer from the web page to a windows form without modification in the core components ( Presenter and Model Component.).
3. It simplifies the testing process.