ImaginationOverflow

The knowings and experiences of a group of developers.

My Vandalized View of Mvvm

As I said before, me and guys are developing stuff to windows phone and what is the architectural pattern for wp7 applications? Model View ViewModel.

So MVVM came after MVC other very popular architectural pattern and I should try to explain one on the concepts of the other. The MVC uses three distinct layers to separate logic:

  • Model – The business layer.
  • View – The presentation layer.
  • Controller – The one responsible to talk and control the other two layers.

Probably the worst error that I’ve made when studying MVVM is to try to connect or treat MVVM as a sub-pattern or a specification of MVC. So try to avoid compare the both until you totally understand MVVM.

MVVM also uses three layers:

  • Model – Same as MVC, your business logic.
  • View – The presentation Layer
  • View Model – The bridge between Model and View, can also be described as the binder.

So what are the differences? The interaction between view and view model is similar to MVC the views notifies the view model that something happened, like a button click, some text inserted etc,etc. The difference is how the view model talks to the view, the view model never (should) call anything related to the view. As an example in MVC is common to you call the view, controller code like view.showData(data) is normal and acceptable since is the way MVC works. In MVVM the view model updates the view changing its own public properties.

 

With the above image, you probably figure out what is happening. The view binds its the graphic elements to properties of the view model, by doing so, it will receive notifications when those properties changed, updating the view. Consider the follow example:

class ViewModel
{
 public string SomeText{get;set;}
 public ICommand SomeOperationThatChangesSomeText {get;set;}

}
class View
{
 Label label;

 public View(ViewModel viewModel)
 {
   label.Text = Bind(viewModel.SomeText);
   viewModel.SomeOperationThaChangesSomeText.Execute();
 }
}

The value of the property Text in the View is binded to the value of the property SomeText in the view model, now imagine that the command SomeOperationThatChangesSomeText changes the value of SomeText, when that happens the labels property Text will “automatically” change to the new value setted by the command.

As you saw there is no direct interaction between view model and the view, that is nice because it completely separates the user interface logic from the business logic.

Note that this post talks only about the practical terms of mvvm there is much more to it, for more details check out the roots of mvvm in the Presentation Model pattern by Martin Fowler

In the next post I’ll show this concepts using the windows phone platform.

Advertisements

One response to “My Vandalized View of Mvvm

  1. Pingback: My Vandalized View of Mvvm – Lets code « Imagination Overflow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: