WPF: If Heineken did MVVM Frameworks Part 6 of n

• What It Looks Like
• How It Is Made

The Demo App

In some ways this article will be a bit of 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 5 other Cinch articles, and believe it or not there has not been one screen shot of the demo app, which is largely down to the fact that I have been explaining the framework and how to test with it, where as this article talks about the look and structure of the demo app, so without further ado we need to see some screen shots. So let's have a look at some screen shots shall we:

Start Page

Click to view bigger image

Add/Edit Customer (Add new mode shown below)

Click to view bigger image

Add/Edit Customer (edit mode shown below 1/2 way through Editing Customer Order)

Click to view bigger image

Search Customers

Click to view bigger image

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 MenuItem. In both cases a new tab should be opened, unless an Add/Edit Customer tab is already opened, 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 MenuItem. In both cases a new tab should be opened, unless an Search Customers tab is already opened, 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 opened
5. It should be possible to delete an existing Customer from the search results, unless the selected Customer is already open in a  Add/Edit Customer tab already opened
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 Customers Order (from Customers 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 do 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 it list the function points above and then I will simply point you at where these things were discussed in previous Cinch articles.

Demo App Function Points

Item1

This is achieved using a TabControl whos items are bound to a ObservableCollection<ViewModelBase> as discussed within this previous Cinch article section:

CinchIII.aspx#CloseVM

Item2

As Item 1, but the checking to see whether there already an open Add/Edit Customer tab is done via the Mediator, as discussed within this previous Cinch article section:

CinchII.aspx#MediatorMessaging

Item3

As Item 2

Item4

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

Item5

As Item 2

Item6

This is done by the use of the IDataErrorInfo interface, as discussed within this previous Cinch article section:

CinchII.aspx#validationRules

Item7

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

CinchII.aspx#IEditableObject

Item8

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 this previous Cinch article section:

CinchIII.aspx#PopServ

CinchIV.aspx#PopServ

CinchV.aspx#UIVisualizer

Item9

The editing of the Customers Order object is achieved using the IEditableObject interface, as discussed within this previous Cinch article section:

CinchII.aspx#IEditableObject

Item10

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 2nd 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 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.