Screencast: Real-World MVVM with WCF RIA Services

Great news! I have just published an online tutorial and screencast for using the Simple MVVM Toolkit to build Real-World MVVM Apps with WCF RIA Services.

Screencast Part 1 Streaming (watch now) or Download (offline for pc or mobile device)
Screencast Part 2 Streaming (watch now) or Download (offline for pc or mobile device)

mvvmria-screencast

You can also download the code for the tutorial and read the tutorial.

This tutorial and screencast will help you quickly get up to speed on using the Simple MVVM Toolkit together with WCF RIA Services to build a real-world MVVM Silverlight application.  Entities are persisted to the Northwind sample database (using SQL Server 2008 Express) through an ADO.NET Entity Data Model.  WCF RIA Services projects entity classes to a Silverlight client app, where they are change-tracked so inserts, updates and deletes can be sent to the service where they are persisted in a single transaction.  Service agents are injected by a ViewModel locator with MEF (Managed Extensibility Framework) using declarative attributes. The tutorial also demonstrates how to build unit tests against a ViewModel and run them asynchronously.  Here are the main steps you perform:

  1. Create a new project in Visual Studio 2010 using the SimpleMvvmRiaServices project template installed by the Simple MVVM Toolkit.
    • The template creates a solution with three projects: a Silverlight project, a Unit Testing project, and a Web Host project.
    • The Silverlight and Test projects reference the Simple MVVM Toolkit and contain all the required classes.  Just press F5 to see a fully functional MVVM application.
    • The Silverlight and Web projects have a WCF RIA Services link.
  2. Add an ADO.NET Entity Data Model to the Web project.
    • The tutorial uses Entity Framework as the Object-Relational Mapper, but you can use any ORM you wish, for example, NHibernate.
  3. Add a Domain Service class to the Web project.
    • When you build the project a Domain Context class is generated on the Silverlight client, which includes entities from your data model that are automatically change-tracked
    • RIA Services also provides end-to-end validation out of the box
  4. Add a service agent interface that is implemented by both mock and real service agents.
    • The real service agent loads a query from the domain context
  5. Using the SimpleMvvmViewModel Visual Studio item template, add a ViewModel to the Silverlight project.
    • Use the mvvmprop code snippet to add properties to the ViewModel
    • Add methods that call service agent methods for retrieving and saving entities
  6. Expose the ViewModel as a property on the ViewModelLocator class (which is already present in the Silverlight project)
    • Use the mvvminjectedlocator code snippet to add the ViewModel property, which injects the service agent (real or mock) into the ViewModel using MEF
  7. Use the SimpleMvvmViewModelTests item template to add a unit test for the ViewModel to the Test project
  8. Add a View to the project using the Silverlight Page item template
    • Using the mvvmcontext XML snippet, set the DataContext of the View to the ViewModel property of the locator
    • Use the mvvmevent XML snippet to add event triggers that call ViewModel methods
    • Bind controls to ViewModel properties
    • Wire up event handlers in the View code-behind to handle notifications from the ViewModel
  9. Use the SimpleMvvmViewModelDetail Visual Studio item template to add a ViewModel for adding or editing individual entities.
  10. Add a View using the Silverlight Child Window item template and bind controls to properties of the Model property on the ViewModel.

When you run the completed project, you will be able both to retrieve and update entities from a database using WCF RIA Services.

If you are unfamiliar with WCF RIA Services you can watch a recording of a webinar I gave on the topic for DevelopMentor. Enjoy!

About Tony Sneed

Married with three children.
This entry was posted in Technical. Bookmark the permalink.

23 Responses to Screencast: Real-World MVVM with WCF RIA Services

  1. Dennis Johansson says:

    First of all I want to thank you for a great toolkit.
    I am having some problems using the dowload links for the screen cast. Can you please check if there is something wrong with the links?

  2. AF says:

    Your screen cast and sample project and toolkit template for RIA Services, are great. As a new comer to the world of RIA Services and MVVM, I was lost as to how to approach this way of writing code and as you can imagine, I was thrilled to come across your CodePlex project (sample code, screen case, templates, read me files). I am sure putting this together must have taken quite a bit of time, and so on behalf of the rest of us poor lost newcomers, a big THANK YOU!!

    • Tony Sneed says:

      @AF: You’re very welcome! In fact, i spent the majority of my time on the supporting pieces that make it easier for newbies to get up to speed on MVVM and using the toolkit fir things like data binding, dialogs, messaging, navigation, testing, etc. Those pieces include templates, snippets, an installers, documentation, tutorials, screencasts and numerous samples. Working through those helped me refine the toolkit helper classes, making those more robust and easy to use. Instead of developing the toolkit primarily for my own use, I set out from the start with the goal of making it simple and approachable to the majority of devs out there. I hope I have contributed something to help the folks out there.

      Cheers,
      Tony

  3. RJ Samp says:

    Was surprised you didn’t use LINQ for the DB stuff…..is LINQ passe?

    • Tony Sneed says:

      @RJ: On the contrary, I am using LINQ to Entities in Get methods I add to the NorthwindDomainService class. Those are translated into queries against the data model and results are returned in the form of entities that are serialized back to the Silverlight client. LINQ is definitely here to stay. 🙂

      Tony

      • RJ Samp says:

        Awesome! Just downloaded the toolkit and will install in the next week.

        Am really excited to see what you’ve put together, this C# .Net stuff is a lot harder than FORTRAN. Thanks in advance for all of your hard efforts!

  4. william simons says:

    Tony,
    DO you know of any examples of using viewmodellocator for authentication/authorization(navigation) I wish you could customize navigation(I like commanding-xaml)
    do you recommend mef or IOC.?? I am very intrigued by prism
    I also saw david poll’s authentication navigation. WHat is the best way to start this and then perhaps move on to prism… Where is silverlight heading in terms of mvvm for silverlight 5?

    • Tony Sneed says:

      @William: There’s a lot packed into your first question. 🙂 The samples installed with the Simple MVVM Toolkit include how to use the ViewModelLocator with MEF for dependency injection and unit testing. In fact, just watch the screencast on Real-World MVVM with WCF RIA Services, which includes these features, as well as ViewModel-driven navigation. RIA Services includes validation, and auth right out of the box, so you can just use it (check this out: http://www.silverlightshow.net/items/WCF-RIA-Services-Part-7-Authentication-and-Authorization.aspx).

      I don’t think most people need the advanced features offered by Prism, which is mainly about breaking up very large applications into separate parts. SL5 continues the evolution of Silverlight for line of business applications probably running on WIndows (there is increased support for elevated trust and Windows interop).

      Cheers,
      Tony

  5. WangHeng(CHN) says:

    Hi,Tony
    I try to use simple mvvm tookit to build my own MVVMRIA project,
    and, I used 3 tables, 2 of them are like the Category in the Sample…
    When I run the project by the Test, It says
    “URI provided in the program “file” is invalid; should be “http”.
    Parameter name: via”
    When I run the project by the Websit,it worked~
    but, When I use the DetailView to modify my data, something goes wrong…
    If I change the property, the datagird in the ListView can not display the property that I used it like the “Category” in your Sample,
    Wot’s the problem? I really confused by this for 2 weeks, Can you give me some advice?
    Thank you!
    Foregive my poor English…

    • Tony Sneed says:

      @WengHeng: Here is what you are doing wrong. You need to set the Web project as the startup project before running your application. Right-click on the Web project and choose “Set as Startup Project” from the context menu. Then pressing F5 will start the web project which hosts your Silverlight app. Hope this helps!

      Tony

      • WangHeng(CHN) says:

        oOo, I try to do this better!~
        When the project do the method “detailModel.EndEdit();”,then one of my domaincontext is going to miss.
        Means that ,if I do some detail changes, both my viewmodels lost the “Categories”,I don’t know why…
        and, my database is buid like the Northwind,I used 3 tables to do this tutorial

  6. John A says:

    Tony,

    As someone who has been “playing” with MVVM Light for the last few months Simple MVVM is just great and I hope Microsoft is watching with keen interest.

    Your online tutorials make a great difference showing how the MVVM plumbing fits together. However like most MVVM examples that’s where it stops, having one view linked to one view model fails to explain the benefits of using MVVM. Perhaps you could include a fully working MVVM project?

    • Tony Sneed says:

      @John: There is an example of a fully functioning MVVM project that can be found in the SimpleMVVM Toolkit directory under Program Files after you install the toolkit. It can be found in the Main folder and has three parts. The first two parts use a WCF service to retrieve entities from a SQL Server database with the Entity Framework. The third part uses WCF RIA Services both to retrieve and persist entities.

      Binding only one View to one ViewModel is a legitimate implementation of MVVM, and this pattern still provides all the benefits of MVVM, which is better maintainability, testability, and design-ability through separation of concerns. There is nothing to stop you from using more than one View against a single ViewModel, but this is not all that common and is not required to reap the benefits of MVVM. A good example of this is the integration of unit testing that the Simple MVVM Toolkit provides by having a ViewModelLocator inject a mock service agent into ViewModels. There are samples of this installed by the toolkit and is also implemented by a Visual Studio project template installed by the toolkit.

      Good luck exploring MVVM — I’m happy to answer any other questions you have about implementing the pattern.

      Cheers,
      Tony

  7. Dave Bennett says:

    Hi Tony,

    Do you have any suggestions on how to fix the “URI ‘file’ is invalid” exception if it’s occurring in the .Test project? That one’s got me stumped….

    Thanks,
    Dave

  8. John A says:

    Tony,

    I am having problems getting the RIA example to display the data in design mode. Design data is displayed fine in the SimpleMvvmSilverlight example, but with the SimpleMvvmRiaServices version the data is only displayed in Run/ debug mode.
    I assume it is because the first version uses ViewModelLocator whilst RIA uses InjectedViewModelLocator.

    To both versions I have just added a simple in the property of the view model.

    public string Welcome
    {
    get
    {
    return “Welcome to Test”;
    }
    }

    On a separate question could you explain the reason behind the agentType in the locator in which you set the value to either Mock or Real. I assume its a means of displayed either the Mock or Real data when in debug mode.

    • Tony Sneed says:

      I have no trouble binding a TextBlock to a property in a ViewModel and having it show up at design time. In fact, the ViewModel base class has a property called “IsInDesignMode” that you can use to return data that will only show up at design time.

      The way the InjectedViewModelLocator works is that it uses MEF to supply a service agent, either Real or Mock, to a ViewModel. MEF does not play nicely when used in design mode, so I have code in the locator that ensures MEF is only called at runtime and not design time.

      You can specify an agent type of Real or Mock in an attribute you place on the service agent. This acts as metadata for MEF so that the locator can decide to create either a real or a mock service agent. For example, if you look at the definition of MockItemListServiceAgent, you’ll see the ServiceAgentExport attribute with the AgentType set to Mock.

      Cheers,
      Tony

      • John A says:

        Thanks Tony, I will looking into why my system is not working as it should.

        However still can’t get my head around the concept of the mock data, is it intended for use only in design mode or has it some other purpose?

  9. Tony Sneed says:

    @John, Good question. Mock data is mainly used for unit testing. In fact, if you create a new project using the SimpleMvvmRiaServices template, you’ll get a Test project that specifies a Mock service agent so that the test can run using mock data. The reason why you want to use Mock data for unit testing is to be able to run regression tests without dependency on a service or database. Imagine, for example, that you are both inserting and deleting data. You should be able to run a unit test for each independently. But what if the insert fails? How can you verify that the delete functioned properly if the data expected to be deleted was never inserted in the first place? Using mock data allows you to guarantee that the data would always be in the same state each time you run the test.

    In terms of “design-ability” I would favor creating design-time data that is distinct from mock data used for testing. The design-time data can be hard-coded right into the ViewModel, leveraging the base class property “IsInDesignMode.”

  10. Pingback: Screencast: Real-World MVVM with WCF RIA Services | XML, ADO.NET, Windows and Silverlight | Syngu

  11. Hi,

    I created a new SimpleMvvmRiaService 5.0 project template and i get the silverlight client, and ASP.NET web host projects but i can’t get the Silverlight Test project.

    How can i add the silverlight test project?

    Thanks,

    Abiruban

    • Tony Sneed says:

      I’m working on putting the SL testing framework back in. But you can simply add an SL test project to the solution. The project type is avail after installing the toolkit prerequisites.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s