First Steps Tutorial

Scope

This tutorial describes the steps to create a set of simple example applications that use the RemotableViewModel. It is not intended to describe the complete functionality of the RVM library, or as architectural guidance. To keep it as simple as possible it omits e.g. error handling, to focus on the minimal steps required to work with the RemotableViewModel.

Prerequisites

  • Download the binary library (or the source code) for the RemotableViewModel from http://rvm.codeplex.com
  • The screenshots in this document were made with VisualStudio 2010, but it is also possible to follow the steps as described with a newer version of VisualStudio.

Overview

In this tutorial we will create a console application, which creates and updates a simple ViewModel but does not directly display that view model to the user. Instead we will create a separate WPF-Application that imports the view model from the console application, and shows it in its user interface, using standard WPF data binding mechanisms.
RVM_Tutorial_FirstSteps_01.png
Note that multiple instances of the console application and of the UI application can run at the same time. All UI instances will display the view models from all currently running console application instances.
RVM_Tutorial_FirstSteps_02.png

Shared ViewModel

Set up project structure
Create a new VisualStudio solution, and a new project of type "Class Library":
RVM_Tutorial_FirstSteps_03.png

Add a reference to the RVM library – either as a reference to the compiled binary, or by adding the RVM source code project to this solution and adding a project reference. You will also need a reference to PresentationCore.
RVM_Tutorial_FirstSteps_04.png
Delete the automatically created file Class1.cs, and add a new class MyViewModel.

ViewModel properties
Make that class public, let it derive from RemotableViewModel, and add a few simple properties:
RVM_Tutorial_FirstSteps_05.png
Note that the property values are kept in the base class, and accessed via the inherited methods GetValue and SetValue, using the property name as key.

ViewModel command
We want to have a simple command, which increases one of the properties.

The command can be created via a method CreateCommand in our base class. All we need to provide are two methods that follow the usual pattern of xxxExecute and xxxCanExecute:
RVM_Tutorial_FirstSteps_06.png
That's all we need to do to create a class that looks just like an ordinary ViewModel from the outside, but can be shared between processes.

Exporter

Next we will create a simple console application, which creates and uses our view model.

Add a new project to our solution:
RVM_Tutorial_FirstSteps_07.png

Add a reference to the RVM library, and a project reference to the SharedViewModel that we just created.
RVM_Tutorial_FirstSteps_08.png

Add code that instantiates our view model and updates some of its properties in a loop:
RVM_Tutorial_FirstSteps_09.png
Note that we have not yet added any code concerning the sharing of the view model.

In order to facilitate the inter-process-communication we just have to add a few lines:
RVM_Tutorial_FirstSteps_10.png

We also have to add a new class SimpleSession, which encapsulates a sharing session, and allows the importer to find and connect to the exporters.

As we will need this both in the Exporter and the UI, we will add it to the SharedViewModel project :
RVM_Tutorial_FirstSteps_11.png
Note that the ProcessName property has to match the process name of our console application. If you named your console application project anything other than "Exporter" you have to adjust the property accordingly.

That's all we needed to do, we now have an application that can share its view model with other processes.

UI

Now we can create a WPF application that provides a user interface for the console application we just created.

Add a new project of type WPF Application to our solution:
RVM_Tutorial_FirstSteps_12.png

Add a reference to the RVM library, and a project reference to our SharedViewModel.
RVM_Tutorial_FirstSteps_13.png

First, let's add a user control that can display our SharedViewModel.
RVM_Tutorial_FirstSteps_14.png

Add a few controls that display the properties of our SharedViewModel, via standard data binding mechanisms. Note that there is nothing in this code that has to be aware that the ViewModel might be shared from a remote process.
RVM_Tutorial_FirstSteps_15.png

In our main window we now just create a simple list view, which binds one of these controls to each instance of our shared view model that we will find:
RVM_Tutorial_FirstSteps_16.png

In the code-behind for the main view we now have to set the DataContext and create the Importers-collection to bind to. This collection will contain the shared view models from all running instances of our exporter. Note that these view models can be accessed using INotifyPropertyChanged, the standard interface for WPF data binding.
RVM_Tutorial_FirstSteps_17.png

The actual code to find and connect to the shared view models is wrapped in the method ConnectAll:
RVM_Tutorial_FirstSteps_18.png

It takes just a few lines of code to find and connect to a shared view model:
  • GetExportingIdentities retrieves a list of all currently available exporters that are sharing any view models (based on the definitions in SimpleSession – which are used by both exporters and importers).
  • Based on these identifiers we can then create an importer for each exporter that we found, and retrieve the view model registered as "EntryPoint" from it.
  • The event ExportingSource is invoked when a new exporter becomes available. In this simple example, we just clear our list and re-connect to all available exporters.
  • The event Faulted is invoked when an active exporter is no longer available (because of an error or exception, or simply because the exporting process exited). In this simple example, we just clear our list and re-connect to all available exporters.

Testing

We now have all the required puzzle-pieces available to test our example:
  • Launch a console window and navigate to the subfolder Exporter\bin\Debug of your VisualStudio solution, then launch the Exporter.
  • Repeat this, so that you can run two or more instances of the Exporter in parallel.
  • Now just start the UI – either also from a console window, or directly from Visual Studio.
RVM_Tutorial_FirstSteps_19.png
You should see an instance of our user control for each currently running Exporter, which is constantly updating its values.

When you press a button, the command to increase the MaximumValue will be executed not in the UI process, but in the exporter; the updated value will then be shown in the UI.

When an exporter finishes its loop and exits, it will also disappear from the UI. If you launch an additional exporter, it should show up in the user interface.

Summary

This tutorial describes the absolute minimum that is required to see the RemotableViewModel library in action.

The source code for the RemotableViewModel that can be downloaded from CodePlex comes with a Demonstrator that has a similar structure to what is described here, but shows additional capabilities.

For example it shows that you don't necessarily have to derive all your view models from RemotableViewModel. If you have legacy code that just implements INotifyPropertyChange, you can still share those view models with other processes. The exporter will internally create a remotable view model proxy for this purpose.

Last edited Dec 6, 2012 at 11:29 AM by pniederh, version 4

Comments

No comments yet.