A Humble Review of Josh Smith's MVVM Article Part#4

This is a summary of what we have seen so far and I will try to tie basic MVVM design principles along with the approach followed in this article.

As we can see on the class diagram above, the entire MVVM design is built around Functionalities of the system. Let's remember the very basic MVVM Design and represent it in a simple diagram. 

 

The simple diagram shows the essentials for a MVVM Design and the basic principle of Loose Coupling which provides separation of View (i.e.User Interface) from the Model.

In a complex design, we usually have many Views and also many Functionalities. So, how do we handle those many Views and Functionalities. First we need to make a clear distinction, namely clearly define the Views and the Functionalities. Our example just does this. In terms of Views (i.e.Visual User Interfaces), we have distinct visual functionalities. Lets see those.

Views:

1-A MainWindow View: A window which is divided into a "Control Panel" and  a "Workspaces" zones

2-An AllCustomersView (subwindow#1): A window, where we have a list of all customers

3-A CustomerView (subwindow#2): A window to enter and save a "new" customer.

So the windows that we use in our design shall establish all our Views. As (by the definition of MVVM) A View needs a ViewModel, we shall also have 3 corresponding ViewModels, one for each View. So far so good.

However, we also have some distinct functionalities. How are we going to tie those into our design? So, what are those "distinct" functionalities, that exist in our design. The first one is the fuctionlaity to Open up workspaces (either all customer view or new customer view) and the second functionality is to be able to close those opened workspaces. There is another functionality defined in the design, which is to save a "new" customer. So, all in all we have 3 functionalities. The easiest way to define a distinct functionality in a design is to define the user action on the user interface (on views). What are the user actions in the design? Click on hypertextes to open up workspaces (AllCustomerView or new CustomerView), click on close button on top of those workspaces to close them and click on the "Save" button on the new CustomerView to save the new customer (and show it on the AllCustomersView). Now, does that mean that we need to have 3 "Operational" Functionalities, thus 3 additional ViewModels? Not really. In order to be able to add a new ViewModel, we shall look whether the distinct functionality is used by more than one View in our design. Action to open up a workspace relates to both "AllCustomersView" and "CustomerView". This fullfills the requirement to have a ViewModel (which is called WorkSpaceViewModel). Action to close the workspaces again apply to both "AllCustomersView" and "CustomerView", so we can assign another ViewModel (CommandViewModel). Action to save a new Customer applies only to the new CustomerView. Therefore we can leave this functionality to be handled by the CustomerViewModel, without the need of adding a new ViewModel. We have defined all our ViewModels. The diagram below provides a visual representation of what we have explained so far.