Pedro's digital thoughts

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

Woke up this morning with the sense of my bed being unusually cozy.. Leaving it did not seem quite the thing to do.

I got me one of those cheap inside/outside termometers, a few years ago, so I tippy-toed downstairs to have  a quick glance at it, and sure, it said 16 negative degrees (That’s 3.2F for the yanks) outside, but worse, inside we had no more than Just over 17C (62.6F). Who unplugged the global heater??

17 Degrees inside, man, ,that’s no cool at all, it’s enough to make you shiver unless you pack a double set of everything; double socks, double sweaters, speak twice as fast to have the friction warm you up a little.

And look at my car (you can click on the images btw)!!

The poor thing, we’re going to IKEA today to get another shelf for the living room, and this  is what greets us!

So I had to go outside, in my jammies, hook up the car with the engine heater, run back in again and defrost my family jewels. And while I wait for the thing to thaw, I snapped a few photos for you to see with my brand new Nikon D700 and 24/70mm

Happy holidays, all!