Pedro's digital thoughts

I am an avid adopter of the Model-View-ViewModel pattern for designing applications. It is a sleek, very testable way to write software, but it has one major  problem:

Because the ViewModel is unaware of its view, it follows that it is difficult to command a window to close itself.

I googled long and hard for solutions, but what I found was so complex and intricate that it would scare off any developer wanting to do some actual work.

What I give you here, is my own compromise between the want for simple, yet testable software vs the want to have a clean separation between a view and it’s viewmodel.

The BaseViewModel

Because every ViewModel implements INotifyPropertyChanged it is generally a good idea to write a base class that encapsulates this behaviour in most software projects.

In my opinion, every viewModel should also be able to request that a view should disappear for some reason.

Thus, my implementation of a baseclass for ViewModels looks like this:

By providing both an ICommand and a Method that both invoke the RequestCloseEvent, I can choose whether a View should close by binding to a button, or as a consequence of some logic in the viewmodel.

The CloseCommand property simply calls the RequestCloseEvent nothing more.

DataContext Binding

The practical approach to binding a View to its ViewModel should not require more than a one-liner:

The ( Application.Current as App ).ServiceLocator  is my IoC Container; it has a public property for every ViewModel that I write. I add the container as a public property in app.xaml.cs. This way, it can be reached from all views. 

The line above uses a simple extension method to do two things:

• Register the ViewModel provided by the ServiceLocator as the DataContext for that view
• Attach the RequestCloseEvent to the Views Close() method

Here’s the code:

The idea is that the event always closes the dialog.

You can then either bind a close button to the CloseCommand property of the BaseViewModel, or you can have your ViewModel fire the event through calling RequestClose( ) – or both.

Figure: Binding directly to the base class

Figure: Calling Close from a ViewModel method

So…how testable is this?

For all intents and purposes, I now have a loose enough coupling between my ViewModel and View to verify that the ViewModel is requesting a dialog to close:

Conclusion

The method I’ve given you gives a loose enough coupling to be testable, and keeps things simple. There is one single line of code to attach the View to it’s ViewModel, something I find to be an acceptable tradeoff from a pure separation.

The ViewModel also remains 100% compatible with the concept of test driven design, and is simple enough for teams of developers working on large software projects to use

PS: Who else does M.C.Escher inspired photography?

Winter Dove, originally uploaded by Pedro G. Dias (digitaldias).

A good, warm, sunny winter day – there is a promise of warmer times soon – and they are oh so welcome!

Figured I need to share with you how I normally go about designing UI, and how I make that design as testable as possible.

To make things easy, I will use a login screen as an example, since it has few controls, and is relatively simple to follow.

Sample VS2008 solution can be downloaded here

The criteria

• Create a login  dialog with a username, password, OK and Cancel button
• OK Button is only enabled when both a username and password are set
• Should be fully unit-testable

Implementation

I start by creating an empty solution with my typical folder structure.

The numbering is just something I add to the folders because I like to have the top-down view. Note that I have a clear separation between UserInterfaces and Presentation:

User Interface: Dumb dialog, form, or page containing bindable controls that the user interacts with

Presentation: Smart, data-bindable classes that represent a user interface’s logic and state.

Create a login  dialog with a username, password, OK and Cancel button

Next, I’ll add the windows forms project to the User Interfaces folder that contains my login dialog, and design our choice login box:

I am only interested in the design at this stage. Aside from setting the property UseSystemPasswordChar on the textbox for the password, and naturally giving the controls some meaningful names, I do not bother looking at code here.

Preparing to code

The next bit is half the magic. I am going to create a class to represent my login dialog. By implementing the INotifyPropertyChanged interface (found in System.ComponentModel), I am telling this clas that it can be databound to windows forms, WPF and silverlight controls.

I begin by adding a Presentation class library to contain the login class, as well as a test project where I can put all the facts related to it:

The Solution Items folder that you see at the bottom contains the test list and testrunconfig files, it is autogenerated by visual studio the first time you add a test project to your solution.

• Presentation is a regular class library
• Presentation.UnitTests is a test project

Must be fully unit-testable

In visual studio, it’s hard to write tests for objects that do not exist, this is due to intellisense trying to help you as you go actually turns into something you have to fight. Creating a skeleton Login class makes this process a lot easier.

Initally, it looks like this:

The PropertyChanged event is the mechanism used for databinding. More on that later.

Initially, I am interested in the following behavior from my login class:

Implementing these tests is fairly straight forward. When done, I can proceed to getting them to pas.

SIDENOTE: Unsure on how to verify events in a test? here is a smart way to do it:

Back to our Login class, we want the Properties to “announce” that they have been changed,

this can be done like so:

Basically: If I can set the value, I announce it with my event handler. There is no point announcing a value that was never set.

Finally, the OkButtonEnabled property simply checks the username and password:

I’m a sucker for readability, can you tell?

After a very brief syntax check, I’m done with the Login class for now:

Binding it to the form

At this stage, I now have a Login form with absolutely no code behind it. Additionally, I’ve created a Login class that announces every property that changes, it is time to bind the two together. The process is simply:

• Declare the login class as a data source
• Bind properties from the login class to our form
• Initialize the binding in the form’s constructor (in the code behind)

Declare the login class as a data source

In design mode, bring up the properties of the username textbox, find the databinding section. Since this is the first time we’re doing a data source, I can pre-select the Text property that I want to bind to, and then click Add project data source link

This brings up the following sequence (I’ll just run through the images, no comments should be necessary):

Having completed this process, you can now simply bind the TextBox.Text property to your bound class object with a simple drop-down:

The OK Button requires a special binding, because we want to bind it’s true/false value to the Enabled property, so we open up the Advanced data binding dialog:

Find the Enabled property, then simply choose to bind that to the OkButtonEnabled in our Login class:

Press OK to save your changes.

Initialize the binding in the form’s constructor

The final step in the binding process is to perform some initalization on the login form, so that we have an actual object to store the values for username and password in. This can be passed to the form as a constructor argument, a property, or method, or be a built-in object. For the sake of this blog entry, I’ll simply use it as a publicly available property. Choose your login-form, switch to code view, and set the following lines of code:

That’s it.

When you run your application, you will see that the OK button does not enable itself before username and password have values. What you may find odd, is that you have to change focus from one textbox to another in order to see this. This is because the value from the textbox is only passed to the object when it loses focus. If you want a quicker, more live update, you can, for example, choose to update the object on the KeyUp event, as an example.

Summary

Databinding forms to class objects is simply a matter of implementing the INotifyPropertyChanged interface. You can only databind properties, but with a little fantasy, the possibilities are many.

You also have the added benefit of being able to unit-test ALL of the behavior that goes on in your dialog without requiring manual intervenion.

As a result, you can take presentation behavior classes with you from a windows forms project to a WPF or SilverLight project with very little effort, both tests and behavior are already coded, all you have to do is to bind that class to a different GUI. Rumor has it that Microsoft may do something to bring INotifyPropertyChanged funcionality to the asp.net platform aswell, but at the time of writing this blog entry, this is not supported.

Sample project can be downloaded here