Use MVVM in WPF

on

Introduction

Life is all about evolution we start as kid’s, learn along the way to become mature adults. The same holds true for software architecture, you start with a base structure and then evolve as per requirements and situations.
If you ask any .NET developer what is the minimum basearchitecture,the first thing which flashes is “3 LAYER ARCHITECTURE”. In this architecture we divide the project in to 3 logical pieces UI , business layer and data access layer. Each of these layers handles and owns certain responsibility.
UI handles the presentation responsibility, business layer handles validations and data access layer handles SQL. The advantages of 3 layer architecture are as follows:-
  • Contained changes: -Changes in one layer do not replicate across other layers.
  • Reusability: -Increased reusability because each layers are separate, self-contained and individual entities.
MVVM is an evolution of 3 layer architecture. I know I do not have a history to prove this but that’s how I have personally evolved and viewed MVVM. So we will start first with a basic 3 layer architecture, understand the problem of 3 layer architecture and see how MVVM solves the problem and then graduate to create a professional MVVM code . Below is the road map for the rest of the article.

Simple 3 layer example and GLUE code problem

So the first step is to understand 3 layer architecture, problem and then see how MVVM solves the problem.
Now Perception and reality are two different things. When you look at three layer architecture block diagram you get a perception that the responsibilities are properly distributed with each layer. But when you actually start writing code you see that some layers are forced to perform EXTRA WORK which probably they should not be doing (violatingS of SOLID principles). In case you are new to SOLID start from this SOLID principle video.
This extra work isthe code which sits between UI - Model and Model - data access. Let’s term this code as “GLUE” code. There are primary two kinds of logics which will go in the “GLUE” code:-
I can be short sighted so if you have more scenarios please put in the comments below.
  • Mapping logic( Binding logic): -Every layer is connected with other layers via properties, methods collections. For example a textbox called as “txtCustomerName” on the UI layer will be mapped to “CustomerName” property of the customer class.
txtCustomerName.text = custobj.CustomerName; // mapping code
Now who ownsthe above bindingcode logic,UI or the model?, developers normally push this code to the UI layer.
  • Transformationlogic: -The data formats in each of these layers are different. For example a model “Person” class can have a property called as “Gender”which has value “F” ( Female) and “M” ( Male) but in the UI layer we would like to see this value as a check box which shows “checked” (true) for male and “unchecked” for female. Below is a sample of transformation code.
if (obj.Gender == “M”) // transformation code
{chkMale.IsChecked = true;}
else
{chkMale.IsChecked = false;}
Most of the developers end up writingthe “GLUE” code in to UI layer. To be very specific this code normally is foundin the behind code i.e. in the .CS file. So if it’s “XAML” and then “XAML.CS” will have the glue code, if its “ASPX” then “ASPX.CS” will have the glue code and so on.
The question is: - Is the GLUE code the responsibility of UI?. Let’s see a simple 3 layer example of WPF application and the GLUE code in more detail.
Below is a simple “Customer” model class which has three properties “CustomerName”, “Amount” and “Married” field.
But when this model is displayed on the UI it looks something as shown below.So you can see it has all the fields of the model plus it has some extra things as well, look at the color label and the married check box.

Comments

Post a Comment