JAPF

I just updated my MVVM frameworks explorer Silverlight application. You can find the updated application here.

Here is the top 5 of MVVM frameworks supporting WPF, Silverlight and Windows Phone 7:

1. MVVM Light (61k downloads)
2. nRoute (19k downloads)
3. Caliburn Micro (18k downloads)
4. Simple MVVM toolkit (5k downloads)
5. Catel (5k downloads)

In the last few years, we’ve seen the WPF and Silverlight community embracing the MVVM methodology. As one of the early adopters of MVVM (one of my first post about the subject was late 2008), I’ve seen the pattern evolving both in the web community and with developers I’ve met in my daily life.

Today, I’d like to share with you a simple concept I try to stick to when I’m doing WPF, Silverlight or Windows Phone 7 development. It can be summarized as “Enough ViewModel is enough”.

The simple idea behind this slogan is that there ARE stuff which are view-related and SHOULD NOT be embedded in the ViewModel layer. I’ve seen too many developers going the “100% viewmodel way” which means for them absolutely no code-behind without any dispensation.

For example, I came across this code. It’s the ViewModel layer associated to a simple view where the user fills various input and has immediate feedback about the progress (like “75% of the fields are completed”). If by the way you’re interested in implementing this behavior you can check out this article I wrote on CodeProject)

The following code is simplified to the sake of the article:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

public class ViewModel
{
    // data field acts as the model object behind the VM layer
    private Data data;
 
    // missing code...
    // public properties used by the view using databinding
 
    public ViewModel()
    {
        // very simplified for this article...
        this.data = new Data();
        this.data.SelectedValuesChanged += new EventHandler(data_SelectedValuesChanged);
    }
 
    public void UpdateProgress()
    {
        // some code...
    }
 
    void data_SelectedValuesChanged(object sender, EventArgs e)
    {
        this.UpdateProgress();
        this.Initialize();
    }
 
    public void Initialize()
    {
        var item = this.data.GetItem("id1");
        if (item != null)
        {
            item.PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
            item.SelectedValuesChanged += new EventHandler(item_SelectedValuesChanged);
            foreach (var value in item.Values)
                value.PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
        }
 
        item = this.data.GetItem("id2");
        if (item != null)
        {
            item.PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
            item.SelectedValuesChanged += new EventHandler(item_SelectedValuesChanged);
            foreach (var value in item.Values)
                value.PropertyChanged += new PropertyChangedEventHandler(item_PropertyChanged);
        }
    }
 
    void item_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        this.UpdateProgress();
    }
 
    void item_SelectedValuesChanged(object sender, EventArgs e)
    {
        this.UpdateProgress();
    }
}

The idea is simple, as soon as the user changes a value in the View, we must compute the current progress. Because the ViewModel have several levels, we end-up having to register to every single PropertyChanged event which leads to cumbersome code. By the way, this code can also creates memory leaks since we register a lot of event handlers without removing them, but that’s another discussion…

Here is my way to solve this problem:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

public partial class View : UserControl
{
    private readonly ViewModel viewmodel;
 
    public View()
    {
        InitializeComponent();
 
        this.viewmodel = new ViewModel();
 
        this.AddHandler(
            FocusManager.LostFocusEvent,
            new RoutedEventHandler(this.OnLostFocus),
            true);
    }
 
    private void OnLostFocus(object sender, RoutedEventArgs e)
    {
        this.viewmodel.UpdateProgress();
    }      
}

What is wrong with this way ? The View has code-behind ? That’s not a big deal: the code is more readable, maintainable. It makes also more sense: when a view-related operation occurs (in this case, focus has changed), update the progress.

The simple message I’d like to spread is the fact that there is nothing wrong with the fact to have sometime, a little bit of code-behind in your view if that facilitates your architecture. There is no need to create a complicated infrastructure with behaviors, commands or bindings just to keep the view empty if that does not make sense.

Another great example in a real application is available in the Advanced MVVM book by Josh Smith.

A couple of days ago I received an email from Geert van Horrik, a developer working on a new MVVM Framework called Catel. Geert asked me to update my MVVM Framework Explorer app in order to include his new framework. Here is the resulting updated app (click to launch):

Besides adding this new framework, I updated the download count for each framework, which allowed me to do some statistics. Here are the download progression for the most popular MVVM frameworks between July 2010 and January 2011:

Top progression during the last 6 months:

1. MVVM Light (by Laurent Bugnion): +160%
2. MVVM Helpers (by Mark Smith): +133%
3. MEFedMVVM (by Marlon Grech): +129%
4. WAF (by Jurgen Berchtel): +150%

Top downloaded frameworks:

1. Caliburn (by Rob Eisenberg): +36 000 downloads
2. MVVM Light (by Laurent Bugnion): +30 000 downloads
3. WAF (by Jurgen Berchtel): +30 000 downloads

Congratulations to their respective authors.

Today, I’m proud to share with you my very first article available on CodeProject. This article presents a technique which can be used in order to add validation in a WPF MVVM application based on attribute. Basically, it means that you can write validation logic like that (notice the attribute associated to this property):

1
2
3
4
5
6
7
8
9
10
11
12
13

[Required(ErrorMessage = "Field 'FirstName' is required.")]
public string FirstName
{
    get
    {
        return this.firstName;
    }
    set
    {
        this.firstName = value;
        this.OnPropertyChanged("FirstName");
    }
}

Of course the article comes with a nice demo application:

You can read the full article here: Attributes-based validation in a WPF MVVM application

Today I’m releasing a new version of my MVVM Frameworks Explorer application. You can find the updated version here: http://www.japf.fr/silverlight/mvvm/index.html

Here is a list of the changes in this new version:

• application updated to Silverlight 4
• support is now detailed for WPF, Silverlight and Windows Phone
• new frameworks added (MEFedMVVM…)
• framework’s logo added
• download count added (based on the information I found on CodePlex website)
• about window

As always, feel free to give feedback

Introduction: In this article, I’m describing a technique which leverage the expression trees of C# 3.0 in order to facilitate the unit testing of ViewModel’s properties. My final goal is to be able to unit test a ViewModel property in 1 line.

Without any doubt MVVM is now the most used framework to leverage WPF and Silverlight functionalities in the best way ! During the last Mix, 3 sessions were dedicated to this methodology (you can watch the videos online here).

As you already know one of the key advantage of the MVVM methodology is to improve the testability of the overall application by reducing the amount of code in the code-behind and producing ViewModel classes which are testable. We use to say that ViewModel classes are testable because:

• they are not coupled to UI concepts (controls, focus, keyboard input…)
• they can wrap model objects using interfaces (for instance a PersonViewModel wraps a IPerson object)
• they are not subclassing a UI control (such as Button or Window)

Today I’d like to share a technique I’m using to facilitate the unit tests of some properties of my ViewModel classes.

Let’s use a very simple ViewModel class as example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

public class PersonViewModel : ViewModelBase
{
  private IPerson person;
  private bool isSelected;
 
  public string Name 
  {
     get
     {
        return this.person.Name;
     }
     set
     {
        this.person.Name = value;
        this.OnPropertyChanged("Name");
     }
  }
 
  public bool IsSelected
  {
    get
    {
      return this.isSelected;
    }
    set
    {
      this.isSelected = value;
      this.OnPropertyChanged("IsSelected");
    }
  }
 
  // rest of the code omitted for simplicity
}

The Name property, as usually with the MVVM pattern gets its value from the wrapped model object. The easiest way to unit test this property is to use a mocking library. Here is a example using MOQ (my favourite mocking library):

1
2
3
4
5
6
7
8
9
10
11
12

[Test]
public void TestName()
{
  var mockPerson = new Mock<IPerson>();
 
  var vm = new PersonViewModel(mockPerson.Object);
 
  vm.Name = "Jeremy";
 
  // verify that the Name property of the IPerson interface has been set
  mockPerson.VerifySet(p => p.Name = "Jeremy");
}

The Selected property is different because it doesn’t wrap a model property. It’s an information that is added to the ViewModel layer in order to control a UI-related property (for example the IsSelected property of a ListBoxItem). This technique is heavily used to have ViewModel classes interact with the WPF or Silverlight TreeView or ListBox control (you can check out this excellent article of Josh Smith for more detail).

In order to unit test this property, we must:
1/ ensure the PropertyChanged event of the INotifyPropertyChanged is raised properly
2/ ensure we can write a value and read back the correct value

Here is a sample code which does this unit test:

1
2
3
4
5
6
7
8
9
10
11
12

[Test]
public void TestName()
{
var vm = new  PersonViewModel();
bool propertyChanged = false;
 
vm.PropertyChanged += (s, e) => propertyChanged = e.PropertyName ==  "Name";
vm.Name = "newName";
 
Assert.IsTrue(propertyChanged);
Assert.AreEqual("newName", vm.Name);
}

It quickly become cumbersome to copy/paste this unit test for all the ViewModel properties we have. That’s the reason I started thinking about another way to do it…

Here is the feature I’m proposing:

1
2
3
4
5
6

[Test]
public void TestName()
{
var vm = new PersonViewModel();
TestHelper.TestProperty(vm, v => v.IsSelected);
}

In this sample, I’m telling I want to test the IsSelected property of the PersonViewModel type. The advantages are:
1/ less code involved : 1 line to test 1 property
2/ intellisense support in order to prevent typing error and no more “magic” string to give the name of the property
3/ refactoring the name of the property will refactor this sample code too
4/ automatic generation of default test values behind the scene

How does it works ?

• TestProperty treats the second parameter as an Expression<Func> and not as a Func directly
• Using expression tree (the “v => v.IsSelected” part),  I’m able to retrieve the name of the property and its type
• Using reflection, I’m able to get and set the value
• Depending on the type of the property (string, bool, int, double), I have default values write and read back (with a test to ensure that the PropertyChanged event has been raised properly).

Here is the code of the TestPropertyMethod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

public static void TestProperty<T, U>(T viewmodel, Expression<Func<T, U>> expression)
    where T : INotifyPropertyChanged
{
    if(expression.Body is MemberExpression)
    {
        MemberExpression memberExpression = (MemberExpression) expression.Body;
 
        if (expression.Body.Type == typeof(bool))
        {
            TestViewModelProperty(viewmodel, memberExpression.Member.Name, true, false);
        }
        else if (expression.Body.Type == typeof(string))
        {
            TestViewModelProperty(viewmodel, memberExpression.Member.Name, "value1", "value2");
        } 
        else if (expression.Body.Type == typeof(int))
        {
            TestViewModelProperty(viewmodel, memberExpression.Member.Name, 1, 99);
        }
        else if (expression.Body.Type == typeof(double))
        {
            TestViewModelProperty(viewmodel, memberExpression.Member.Name, 1.0, 99.0);
        }
        else
        {
            throw new NotSupportedException("Type is not supported");
        }
   }
}

And the TestViewModelProperty:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

private static void TestViewModelProperty<T, U>(T viewModel, string propertyName, U value1, U value2)
    where T : INotifyPropertyChanged
{
    bool propertyChanged;
    viewModel.PropertyChanged += (s, e) => propertyChanged = e.PropertyName == propertyName;
 
    propertyChanged = false;
    viewModel.SetValue(propertyName, value1);
    Assert.IsTrue(propertyChanged);
    Assert.IsTrue(viewModel.GetValue<U>(propertyName).Equals(value1));
 
    propertyChanged = false;
    viewModel.SetValue(propertyName, value2);
    Assert.IsTrue(propertyChanged);
    Assert.IsTrue(viewModel.GetValue<U>(propertyName).Equals(value2));
}

I’m using 2 extensions methods in order to get and set value from the ViewModel object using reflection. Here they are:

1
2
3
4
5
6
7
8
9
10
11

private static T GetValue<T>(this object obj, string propertyName)
{
    var propertyInfo = obj.GetType().GetProperty(propertyName);
    return (T)propertyInfo.GetValue(obj, null);
}
 
private static void SetValue<T>(this object obj, string propertyName, T value)
{
    var propertyInfo = obj.GetType().GetProperty(propertyName);
    propertyInfo.SetValue(obj, value, null);
}

Please feel free to download the source code of the ViewModelTestHelper class.

Thanks to the readers who gave me feedback on my Silverlight MVVM frameworks explorer I updated the application this morning in order to fix some problems.

Here is the change set:

• fix incorrect URLs
• fix incorrect “Silverlight Support” options. As Laurent Bugnion said in the comments, his MVVM Light framework was the only one supporting Silverlight which was strange…
• links now open in a new window

Click on the following image to launch the Silverlight application.

About adding new frameworks, I’m not sure to add those which targets a much larger domain than MVVM itself. CompositeApplication guidance for example is a lot more than MVVM…

In the past year, I’ve posted more than 30 articles on my blog. Here is a summary of those posts (link in bold are those which got the most traffic during the year). Obviously, MVVM was a very hot topic during 2009

January

• XAML guidelines: interviews of WPF masters
• photoSuru: a WPF application with spectacular user experience
• Model-View-ViewModel, Commands and InputBindings
• Filtering with or without ICollectionView ?
• Why do I love Extension Methods in System.Linq ?
• Using extension methods to raise an event

February

• Very simple MVVM demo application
• VS2010 UI

March

• French article about MVVM posted !
• Thinking with MVVM: Data Templates + ContentControl
• MIX09 starts today !
• First look at Expression Blend 3 !
• The future of WPF at Mix09

April

• Adding transitions to a MVVM based dialog

May

• Browse your codebase like a pro with ReSharper
• Visual Studio 2010: Beta1 available with .Net4 and WPF4 included
• .Net4, WPF4 and VS2010 interesting links

July

• BezierSegment demo application

August

• Learn how .Net manages memory in 15min
• WPF possible memory leak with EventManager.RegisterClassHandler

September

• How to close a View from a ViewModel ?

October

• A quick tour of existing MVVM frameworks
• The cost of building Visual Trees
• Announcing the “WPF internals” series
• Analyzing events usage using a R# plugin
• WPF internals part 1 : what are the core WPF classes ?
• VS2010 Beta 2 coming today !
• How to measure rendering time in a WPF application ?

November

• Using Snoop to take a look at VS2010 !
• PDC09: some announcements
• PDC09: some WPF sessions are available !
• PDC09: Advanced WPF Application Performance Tuning
• PDC09 : How VS2010 was built with WPF ?
• Discover and compare existing MVVM frameworks !

A couple of weeks ago, I wrote a blog post where I compared the existing MVVM frameworks. This post became a bit famous in the WPF/Silverlight blog world and I received a lot of feedback to update the list, fix information, etc. I also got a request from Erik suggesting me to put all the datas in a matrix.

Today I’m proud to announce the MVVM frameworks Silverlight application (click the image to open the Silverlight3 page).

A couple of observation:

• please contact me via this blog or twitter if you find incorrect information
• I’m not judging anybody’s work by giving rating, it’s just my personal feeling to have an easiest way to sort the data

Hope you’ll like it

[Article updated november, 26th: see my latest blog post for a better experience browsing the frameworks]

Read the rest of this entry »