WPF: If Carlsberg did MVVM Frameworks: Part 6 of n

• Download Cinch demo application which includes everything (from CodePlex)

Contents

• Introduction
• Prerequisites
• Special Thanks
• The Demo App
• What It Looks Like
• How Is It Made
• What is Coming Up?

Cinch Article Series Links

• Cinch primer article
• A walkthrough of Cinch and its internals I
• A walkthrough of Cinch and its internals II
• How to develop ViewModels using Cinch
• How to Unit test ViewModels using Cinch, including how to test background worker threads which may run within Cinch ViewModels
• A demo app using Cinch

Introduction

Last time we started looking at Unit testing using Cinch. In this article, I will be looking at the following:

• The Demo App
• What It Looks Like
• How It Is Made

Prerequisites

The demo app makes use of:

• VS2008 SP1
• .NET 3.5 SP1
• SQL Server (see README.txt in the MVVM.DataAccess project to learn what you have to setup for the demo app database)

Special Thanks

I guess the only way to do this is to just start, so let's get going, shall we? But before we do that, I just need to repeat the special thanks section, with one addition, Paul Stovell, who I forgot to include last time.

Before I start, I would specifically like to say a massive thanks to the following people, without whom this article and the subsequent series of articles would never have been possible. Basically, what I have done with Cinch is studied most of these guys, seen what's hot, what's not, and come up with Cinch. Which I hope addresses some new ground not covered in other frameworks.

• Mark Smith (Julmar Technology), for his excellent MVVM Helper Library, which has helped me enormously. Mark I know I asked your permission to use some of your code, which you most kindly gave, but I just wanted to say a massive thanks for your cool ideas, some of which I genuinely had not thought of. I take my hat off to you mate.
• Josh Smith / Marlon Grech (as an atomic pair) for their excellent Mediator implementation. You boys rock, always a pleasure.
• Karl Shifflett / Jaime Rodriguez (Microsoft boys) for their excellent MVVM Lob tour, which I attended, well done lads.
• Bill Kempf, for just being Bill and being a crazy wizard like programmer, who also has a great MVVM framework called Onyx, which I wrote an article about some time ago. Bill always has the answers to tough questions, cheers Bill.
• Paul Stovell for his excellent delegate validation idea, which Cinch uses for validation of business objects.
• All of the WPF Disciples, for being the best online group to belong to, IMHO.

Thanks guys/girl, you know who you are.

The Demo App

In some ways, this article will be a bit of a strange one, as I have already covered everything you need to know about how to construct the demo app or any other MVVM based app (of course, using the Cinch framework), so I will not be covering any code in this article as I think that has been pretty much covered by all the previous articles.

What this article shall concentrate on is what the demo app looks like and how it is made up; of course while doing that, I will explain how and why certain Cinch classes/objects are used and why certain design ideas were followed, but if you are expecting a full run through of the code, this article is not the place for that, you should refer to the previous articles for that.

I am hoping that by now you are armed with enough Cinch know-how to dismantle the demo app by yourselves and see what is going on in it. Remember, you have all the Cinch articles prior to this one to help you out.

What It Looks Like

So far I have written five other Cinch articles, and believe it or not, there has not been one screenshot of the demo app, which is largely down to the fact that I have been explaining the framework and how to test with it, whereas this article talks about the look and structure of the demo app, so without further ado, we need to see some screenshots. Let's have a look at some screenshots, shall we:

Start Page

Add/Edit Customer (Add New Mode Shown Below)

Add/Edit Customer (Edit Mode Shown Below 1/2 way Through Editing Customer Order)

Search Customers

How It Is Made

The general idea behind the demo app is quite a simple one. The following function points explain how it should all work:

1. The UI will be a tabbed interface that shall start out with a start page pre-loaded.
2. The UI shall support creating a new Customer from both the start page and a menu item. In both cases, a new tab should be opened, unless an Add/Edit Customer tab is already open, which is a stupid limit that I artificially imposed just to show off how to work with Mediator and Workspaces.
3. The UI shall support searching of Customers from both the start page and a menu item. In both cases, a new tab should be opened, unless a Search Customers tab is already open, which is a stupid limit that I artificially imposed just to show off how to work with Mediator and Workspaces.
4. It should be possible to edit an existing Customer from the search results, unless there is a Add/Edit Customer tab already open.
5. It should be possible to delete an existing Customer from the search results, unless the selected Customer is already open in an Add/Edit Customer tab.
6. It should be possible to add a new Customer from the Add/Edit Customer tab, and view any errors using the error styled textboxes on the Add/Edit Customer tab.
7. It should be possible to open an existing Customer (from search results) and start editing the Customer, and then cancel the edit, which should not only cancel the edit to the Customer, but close the Add/Edit Customer tab.
8. It should be possible to add an Order to an existing Customer via a popup window, and view any errors using the error styled textboxes on the Add/Edit Order popup window.
9. It should be possible to edit an Order for an existing Customer via a popup window.
10. It should be possible to open an existing Customer's Order (from the Customer Orders list) and start editing the Order, and then cancel the edit, which should not only cancel the edit to the Order, but close the Add/Edit Order popup window.

So that's what the UI should do, and guess what, it actually does all of this. So how do we go about covering this little lot?

Well, we have covered it all before, so I think the best thing to do is list the function points above and then I will simply point you to where these things were discussed in previous Cinch articles.

Demo App Function Points

Item 1

This is achieved using a TabControl whose items are bound to a ObservableCollection<ViewModelBase> as discussed within this previous Cinch article section: CinchIII.aspx#CloseVM.

Item 2

Same as item 1, but the checking to see whether there is already an open Add/Edit Customer tab is done via the Mediator, as discussed within this previous Cinch article section: CinchII.aspx#MediatorMessaging.

Item 3

As item 2.

Item 4

As item 2, but the editing of the Customer object is achieved using the IEditableObject interface, as discussed within this previous Cinch article section: CinchII.aspx#IEditableObject.

Item 5

As item 2.

Item 6

This is done by the use of the IDataErrorInfo interface, as discussed within this previous Cinch article section: CinchII.aspx#validationRules.

Item 7

The editing of the Customer object is achieved using the IEditableObject interface, as discussed within this previous Cinch article section: CinchII.aspx#IEditableObject.

Item 8

The errors are displayed as stated in item 6 using the IDataErrorInfo interface. Handling the opening of the popup is done using the IUIVizualiserService, as discussed within thes previous Cinch article sections: CinchIII.aspx#PopServ, CinchIV.aspx#PopServ, CinchV.aspx#UIVisualizer.

Item 9

The editing of the Customer's Order object is achieved using the IEditableObject interface, as discussed within this previous Cinch article section: CinchII.aspx#IEditableObject.

Item 10

As item 7.

What's Coming Up?

In the subsequent articles, I will be showcasing it roughly like this:

1. A code generator for developing quick Cinch ViewModels/Models, and maybe more if I find some more time. The code generator will be written in Cinch so the code generator will also serve as a second example of how to use Cinch in your own projects.

That's It Hope You Liked It

That is actually all I wanted to say right now, but I hope that from this article you can see how Cinch made the development of the demo app, er well, a "Cinch".

Thanks

As always votes / comments are welcome.