I have an application in which the UI is strongly bound to the data models. I tried to make some modifications to the NHibernate mappings to better model the database and enable better querying. Since the UI was directly bound to the data models this meant that it have to follow navigation properties from one data model to another to get all the information it needed. Since the UI is no longer connected to the database, the app started generating data access exceptions all over the place. This is the reason that binding data models to the UI is not a good idea, and that data models should not properly be considered to be “domain” objects.
Consider the following simple WindowsForms application:
1: public partial class frmOwnerVisits : Form
2: {
3: public frmOwnerVisits()
4: {
5: InitializeComponent();
6:
7: this.Repository = new NHibernateRepository();
8: }
9:
10: private NHibernateRepository Repository { get; set; }
11:
12: private void btnLoadOwners_Click(object sender, EventArgs e)
13: {
14: // data is bound directly to the UI
15: var owners = this.Repository.All<Owner>();
16: this.cmbOwners.DataSource = owners;
17: }
18:
19: private void btnSavePets_Click(object sender, EventArgs e)
20: {
21: var owner = this.cmbOwners.SelectedItem as Owner;
22: foreach(var pet in owner.Pets)
23: {
24: this.Repository.Save(pet);
25: }
26: }
27:
28: private void cmbOwners_SelectedIndexChanged(object sender, EventArgs e)
29: {
30: var owner = this.cmbOwners.SelectedItem as Owner;
31:
32: // Problem area: we're disconnected from the database at this point
33: // and we may not have pulled back all the visits for each pet.
34: var numberOfVisits = owner.Pets.SelectMany(p => p.Visits).Count();
35: this.lblNumberOfVisits.Text = numberOfVisits.ToString("D");
36: }
37:
38: }
The problem area for us at this point is in cmbOwners_SelectedIndexChanged. We want “Pet.Visits” on the data model because it enables easier querying, but having the properties there implies that they are navigable. We won’t know that we have a problem accessing the information at compile-time which results in harder-to-find and diagnose run-time exceptions.
1: private IEnumerable<Owner> GetOwnersWhoHaveNotBeenHereInAYear()
2: {
3: // Without fully expressed relationships, queries such as this would be much harder.
4: var results = this.Repository.All<Owner>()
5: .Where(row => row.Pets.Any(pet => pet.Visits
6: .All(visit => visit.Date < DateTime.Now.AddYears(1))))
7: .ToList()
8: ;
9:
10: return results;
11: }
This is a simplified example. An ideal solution would be to create a complete ViewModel that represents the entire form. Let’s pretend that the example if much more complex and involves multiple cooperation user controls and tons of nasty event-driven mess. Let’s further pretend that we’ve decided that replacing Owner with OwnerViewModel would be a manageable chunk of work. How would we be sure we got everything that the UI depends on?
Steps
- Extract all methods that retrieve or persist data into an external helper class.
- Write Tests against those methods if you haven’t already.
- Create Empty ViewModels for each input and output to your Data Operations
- Create and test converter classes to translate between DataModels and ViewModels
- Replace inputs and outputs of your external helper class with ViewModels.
- If you’re working in a statically typed language, use the compiler errors to help you identify which properties and relationships are actually being used by the View.
- Fill in the properties and relationships used by the View on your ViewModels.
- Regression test the UI to try to find side-effects not covered by existing tests.
- Review and Refactor
1. Extract methods that retrieve or persist data into an external helper class.
If possible, write integration tests against the UI before making any changes at all.
The data access operations associated with Owner are “Get Owners”, “Save Pets”, and “Determine the number of visits for the owner.”
I extracted those methods into an OwnerController class that encapsulates the data operations.
1: public class OwnerController
2: {
3: public IEnumerable<Owner> GetOwners()
4: {
5: using (var repository = new NHibernateRepository())
6: {
7: var owners = repository.All<Owner>().ToList();
8: return owners;
9: }
10: }
11:
12: public int GetNumberOfVisits(Owner owner)
13: {
14: using (var repository = new NHibernateRepository())
15: {
16: var numberOfVisits = repository
17: .All<Visit>()
18: .Count(visit => visit.Pet.Owner.OwnerId == owner.OwnerId)
19: ;
20:
21: return numberOfVisits;
22: }
23: }
24:
25: public void SavePets(IEnumerable<Pet> pets)
26: {
27: using (var repository = new NHibernateRepository())
28: {
29: foreach (var pet in pets)
30: {
31: repository.SaveOrUpdate(pet);
32: }
33: }
34: }
35:
36: }
Then I replaced the direct data access calls in my Form with calls into the OwnerController.
1: public partial class frmOwnerVisits : Form
2: {
3: public frmOwnerVisits()
4: {
5: InitializeComponent();
6:
7: this.Controller = new OwnerController();
8: }
9:
10: protected OwnerController Controller { get; set; }
11:
12: private void btnLoadOwners_Click(object sender, EventArgs e)
13: {
14: // data is bound directly to the UI
15: var owners = this.Controller.GetOwners();
16: this.cmbOwners.DataSource = owners;
17: }
18:
19: private void btnSavePets_Click(object sender, EventArgs e)
20: {
21: var owner = this.cmbOwners.SelectedItem as Owner;
22: this.Controller.SavePets(owner.Pets);
23: }
24:
25: private void cmbOwners_SelectedIndexChanged(object sender, EventArgs e)
26: {
27: var owner = this.cmbOwners.SelectedItem as Owner;
28:
29: // Problem area: we're disconnected from the database at this point
30: // and we may not have pulled back all the visits for each pet.
31: var numberOfVisits = this.Controller.GetNumberOfVisits(owner);
32: this.lblNumberOfVisits.Text = numberOfVisits.ToString("D");
33: }
34:
35: }
2. Write tests against the OwnerController if you haven’t already.
I suggest you always write your tests before creating the new class. As written above, the OwnerController doesn’t really allow for Unit Testing since NHibernate requires a connection to a database. NHibernate supports Sqlite for in-memory database testing and Entity Framework supports Sql Server CE. At some point I’d like to be able to stub in an In-Memory repository to the OwnerController so that I have no external dependencies for my tests, but that may be out of scope for the current operation.
3. Create Empty ViewModels for each input and output to your Data Operations
At this point, there are only 3 data models used by the OwnerController: Owner, Pet, and Visit. I have an idea about Visit so I’m not going to model it yet. I will create empty ViewModels for Owner and Pet though.
1: public class OwnerViewModel
2: {
3:
4: }
5:
6: public class PetViewModel
7: {
8:
9: }
4. Create and test converter classes to translate between DataModels and ViewModels
The OwnerController is going to be altered to return ViewModels instead of DataModels. However, the details of converting DataModels to ViewModels and back should really be dealt with separately. Whether you use a tool like AutoMapper or some custom mapper or converter interface for your transforms, you’ll need tests. These tests will be anemic at first since we don’t have any properties on our ViewModels yet. We’ll fill them in more as we go.
5. Replace inputs and outputs of your external helper class with ViewModels.
Depending on DataModels makes the UI brittle. This coupling needs to be completely broken. Nothing but parameter objects or view models should be exposed outside of your helper class. Data models should not leak into the UI for any reason.
In our case, the OwnerController will use the converters to create and expose viewmodels through it’s interface. The OwnerController now looks like this:
1: public class OwnerController
2: {
3: private readonly IBuilder _builder;
4:
5: public OwnerController(IBuilder builder)
6: {
7: _builder = builder;
8: }
9:
10: public IEnumerable<OwnerViewModel> GetOwners()
11: {
12: using (var repository = new NHibernateRepository())
13: {
14: var owners = repository.All<Owner>().ToList();
15: var viewModels = _builder
16: .CreateEnumerable<OwnerViewModel>()
17: .FromEnumerable(owners)
18: ;
19: return viewModels;
20: }
21: }
22:
23: public int GetNumberOfVisits(OwnerViewModel owner)
24: {
25: using (var repository = new NHibernateRepository())
26: {
27: var numberOfVisits = repository
28: .All<Visit>()
29: .Count(visit => visit.Pet.Owner.OwnerId == owner.OwnerId)
30: ;
31:
32: return numberOfVisits;
33: }
34: }
35:
36: public void SavePets(IEnumerable<PetViewModel> petViewModels)
37: {
38: using (var repository = new NHibernateRepository())
39: {
40: var petIds = petViewModels.Select(vm => vm.PetId).ToList();
41:
42: var pets = repository.All<Pet>()
43: .Where(pet => petIds.Contains(pet.PetId))
44: .ToDictionary(pet => pet.PetId.Value)
45: ;
46:
47: var existingPets = petViewModels.Where(vm => vm.PetId.HasValue);
48: var newPets = petViewModels.Where(vm => !vm.PetId.HasValue);
49:
50: foreach(var petViewModel in newPets)
51: {
52: InsertPet(petViewModel, repository);
53: }
54:
55: foreach (var petViewModel in existingPets)
56: {
57: var pet = pets[petViewModel.PetId.Value];
58: UpdatePet(pet, petViewModel, repository);
59: }
60: }
61: }
62:
63: private static void UpdatePet(Pet pet, PetViewModel petViewModel, NHibernateRepository repository)
64: {
65: pet.Name = petViewModel.Name;
66: pet.Type = petViewModel.Type;
67: pet.Breed = petViewModel.Breed;
68: pet.BirthDate = petViewModel.BirthDate;
69:
70: repository.SaveOrUpdate(pet);
71: }
72:
73: private void InsertPet(PetViewModel petViewModel, NHibernateRepository repository)
74: {
75: var pet = _builder.Create<Pet>().From(petViewModel);
76: repository.SaveOrUpdate(pet);
77: }
78: }
Note that the implementation of line 23 drove us to add OwnerId to the OwnerViewModel.
The implementation of Update drove us to add Name, Type, Breed, and BirthDate to PetViewModel.
6. If you’re working in a statically typed language, use the compiler errors to help you identify which properties and relationships are actually being used by the View.
At this point, the OwnerController is starting to look okay. The OwnerVisits form doesn’t compile anymore mainly because it’s still using Owner, Pets, and Visits to display and edit its data. If we modify the form so that it interacts with OwnerViewModel and PetViewModel instead of Owner and Pet, we’ll get even more compiler errors. OwnerViewModel needs a reference to a Pets collection of type PetViewModel.
The compiler may not find everything. You’ll have to do a bit of manual regression to make sure you found everything. When you do find problems, be sure to document the problems in unit tests. This last is especially important in dynamic languages where you don’t get compiler hints.
7. Fill in the properties and relationships used by the View on your ViewModels.
The OwnerViewModel and PetViewModel now look like this:
1: public class OwnerViewModel
2: {
3: public int? OwnerId { get; set; }
4:
5: // snipped for brevity
6:
7: public IList<PetViewModel> Pets { get; set; }
8: }
9:
10: public class PetViewModel
11: {
12: public int? PetId { get; set; }
13:
14: public string Name { get; set; }
15:
16: public string Type { get; set; }
17:
18: public string Breed { get; set; }
19:
20: public DateTime? BirthDate { get; set; }
21: }
8. Regression test the UI to try to find side-effects not covered by existing tests.
In DataBinding scenarios—in both web and desktop applications—data binding is often done via magic strings. This can result in run-time errors not visible at compile time that are hard to test in an automated fashion. In manually regressing the UI behavior you should be able to detect run-time binding errors and add any properties necessary to make the UI work correctly again.
9. Review and Refactor
One thing I noticed while refactoring this code is that numberOfVisits is being calculated against the database every time the selected owner is changed in the combo box. This is inefficient. I’d like to add NumberOfVisits to the PetViewModel and write a function on the OwnerViewModel to aggregate visits per pet for display purposes. This will allow us to calculate the value in-memory and remove a function from the OwnerController. The calculation to determine the number of visits can be done as part of the conversion from DataModel to ViewModel.
Now the ViewModels look like this:
1: public class OwnerViewModel
2: {
3: public int? OwnerId { get; set; }
4:
5: // snipped for brevity
6:
7: public IList<PetViewModel> Pets { get; set; }
8:
9: public int GetNumberOfVisits()
10: {
11: if (Pets == null)
12: return 0;
13:
14: var result =Pets.Sum(pet => pet.NumberOfVisits);
15: return result;
16: }
17: }
18:
19: public class PetViewModel
20: {
21: public int? PetId { get; set; }
22:
23: public string Name { get; set; }
24:
25: public string Type { get; set; }
26:
27: public string Breed { get; set; }
28:
29: public DateTime? BirthDate { get; set; }
30:
31: public int NumberOfVisits { get; set; }
32: }
The SelectedIndexChanged event is modified as follows:
1: private void cmbOwners_SelectedIndexChanged(object sender, EventArgs e)
2: {
3: var owner = this.cmbOwners.SelectedItem as OwnerViewModel;
4: var numberOfVisits = owner.GetNumberOfVisits();
5: this.lblNumberOfVisits.Text = numberOfVisits.ToString("D");
6: }
We now have a UI that is bound to ViewModels instead of DataModels. This decouples the UI from the database which prevents errors from occurring when attempting to access properties from related tables that haven’t been loaded. The UI can now change independently of the database. We can change the shape of the ViewModels without changing the shape of the underlying data, and vice versa. The steps to accomplish this decoupling were not particularly hard and have dramatically improved the reliability and flexibility of the code. We are one step closer to sitting our Form on top of a master ViewModel specifically designed for this UI.
I wrote this binding handler to work correctly against a formal Command object, a dynamic object with static properties and functions, and a static object with ko.observable() properties.
I still need to figure out how to pass the viewModel to the canExecute() function when it is a ko.computed() function.
Thanks to rniemeyer. I found “Another Look at Custom Bindings for KnockoutJS” to be very useful in getting this working.
I’m trying to catalog View-ViewModel Binding Patterns so that I can compare their strengths and weaknesses. So far I can think of 2 basic ones. The names I gave them are made up. What are the others?
Name: View-Instantiation.
Description: The View directly instantiates the ViewModel and assigns it to the data context.
Sample:
<
Window.DataContext
>
<
ViewModels:MyViewModel
/>
</
Window.DataContext
>
Pros: Easy to set up and get going. Easy to add design-time data.
Cons: Requires default constructor on ViewModel. This makes Dependency Injection scenarios difficult.
Name: View Templates
Description: The View is chosen by a data template associated with the ViewModel type.
Pros: ViewModels fit easily into Dependency Injection scenarios.
Cons: Design-time data is more difficult to accommodate. Tooling cannot tell the type of the ViewModel associated to the View during View development.
Yodelay has been updated. I’ve modified the Regular Expression tester so that it supports n-number of test contexts with a single expression. In addition, you can search regexlib.com for a useful expression.
This screen is fully implemented using MVVM. The search window serves as an example of using MVVM with dialogs.
I’ve also pulled in the themes from WpfThemes and integrated the ThemeManager.
Check it out!