Html JavaScript Development using MVVM

Shawn Wildermuth talks about using KnockoutJS framework to develop a MVVM application:

KnockoutJS is a framework that allows me to use HTML-based data binding markup to describe my UI, CSS to describe what the design looks like and JavaScript to tie the data to the data binding. The is chiefly accomplished through the concept of observable objects. For example, I created a new JavaScript ‘class’ called gameModel in my view.js by creating members using the observable method on the knockout (e.g. ko) object:

// view.js
$(document).ready(function () {

  function gameModel() {
    this.name = ko.observable();
    this.id = ko.observable();
    this.genre = ko.observable(); this.releaseDate = ko.observable();
    this.price = ko.observable();
    this.imageUrl = ko.observable();
  };
  …
});

 

The observable call returns an object that not only can store a property, but let the KnockoutJS binding stack know when the property changes (two way binding). In order to use the gameModel ‘class’, I created a view model to store a collection of gameModels like so:

 

// Define Main ViewModel
var theViewModel = {
  games: ko.observableArray([]),
  ...
};

The games property of the view models ‘class’ will hold the current list of games that are shown in the UI. The observableArray object is like the observable object but it notifies the data binding stack when a collection changes. The goal here is to have the view model load the games from the REST service and as the collection changes, the HTML should change to react to that. No more manually creating/destroying parts of the markup.

In order to make this work, we must use the data binding syntax in the HTML code:

<div data-bind="foreach: games">
  <div class="game-block">
    <div>
      <img data-bind="attr: { src: imageUrl, alt: name }" /></div>
    <div class="game-name" data-bind="text: name">
    </div>
  </div>
</div>

For more: http://wildermuth.com/2011/11/20/Using_MVVM_on_the_Web_with_KnockoutJS

Developer’s Guide to Microsoft Prism 4.0

The documentation for Prism 4 has been completely rewritten and includes the architectural overview, design, and technical concepts for composite applications, applied patterns, two chapters covering Model-View-ViewModel (MVVM), application navigation, Stock Trader Reference Implementation (Stock Trader RI) and MVVM Reference Implementation (MVVM RI) overview, QuickStart overviews, and deployment topics. Much of this guidance is applicable even if you are not using the Prism Library, but you want to know best practices for creating composite applications

Prism 4.0 – November 2010

The guide contains the following topics:

• Readme
• What’s New in Prism 4.0
• Chapter 1: Introduction
• Chapter 2: Initializing Prism Applications
• Chapter 3: Managing Dependencies Between Components
• Chapter 4: Modular Application Development
• Chapter 5: Implementing the MVVM Pattern
• Chapter 6: Advanced MVVM Scenarios
• Chapter 7: Composing the User Interface
• Chapter 8: Navigation
• Chapter 9: Communicating Between Loosely Coupled Components
• Chapter 10: Sharing Code Between Silverlight and WPF
• Chapter 11: Deploying Prism Applications

More:

• Patterns in the Prism Library – an overview on common patterns used in “Composite Application” & Prisim Library.
• Prism Library – the organization of the Prism Library into 4 different assemblies. (WP7 has only 2 assemblies)
• Extending Prism e.g. custom logging.
• Reference Implementations
  • MVVM Reference Implementation
  • Stock Trader Reference Implementation
• QuickStarts
  • Modularity QuickStarts for WPF
  • Modularity QuickStarts for Silverlight
  • Basic MVVM QuickStart
  • MVVM QuickStart
  • Commanding QuickStart
  • UI Composition QuickStart
  • State-Based Navigation QuickStart
  • View-Switching Navigation QuickStart
  • Event Aggregation QuickStart
  • Multi-Targeting QuickStart
• Appendix H: Prism Hands-On Labs
  • WPF Hands-On Lab: Get Started with Prism
  • Silverlight Hands-On Lab: Get Started with Prism
  • WPF Prism Deployment Hands-On Lab: Publishing and Updating with ClickOnce

Class Library References:

Desktop Class Library

Phone Class Library

Silverlight Class Library

MVVM-Friendly DomainDataSource: DomainCollectionView

Yes, that’s right… we now have a component that is a big step toward addressing the request for an MVVM-Friendly DomainDataSource.  As of this posting, that feature was the #2 requested item on the RIA Services wish list, and we’ve been pondering its design for a long time.  Kyle McClellan has delivered on this and he is posting details to his blog.  This feature is completely separate from the DomainDataSource, and it’s built from the ground up with ViewModel usage in mind.

Here are some specific links from Kyle’s blog:

• Collection Binding Options in WCF RIA Services SP1
• Introducing An MVVM-Friendly DomainDataSource: The DomainCollectionView

Here are the links you need to get up and running:

Install WCF RIA Services SP1 for Silverlight 4

• Install WCF RIA Services SP1 for Silverlight 4 and Visual Studio 2010
• Install the WCF RIA Services December 2010 Toolkit for WCF RIA Services SP1

Silverlight 4 Reference Architecture

• Commanding

• Querying

• The Domain Model

• ViewModels, Coroutines and Binding Conventions

• • The Silverlight Toolkit for all those extra nifty controls;
  • Unity 2 for Silverlight as my preferred IoC container;
  • The official application themes for Silverlight;
  • Caliburn Micro to ease developing using the Model-View-ViewModel pattern and to handle the complexities of asynchronous programming.
  • Rhino Mocks for Silverlight for, well, mocking.
  • Fluent Assertions for improving the readability of my unit tests.

A 24k Powerful MVVM Framework which solves a variety of real-world problems

Caliburn Micro: A Micro-Framework for WPF, Silverlight and WP7

A small, yet powerful implementation of Caliburn designed for WPF, Silverlight and WP7. The framework implements a variety of UI patterns for solving real-world problems. Download here.

• Introducing Caliburn.Micro
• Caliburn.Micro Soup to Nuts Pt. 1 – Configuration, Actions and Conventions
• Caliburn.Micro Soup to Nuts Pt. 2 – Customizing The Bootstrapper
• Caliburn.Micro Soup to Nuts Pt. 3 – All About Actions
• Caliburn.Micro Soup to Nuts Pt. 4 – Working with Windows Phone 7
• Caliburn.Micro Soup to Nuts Pt. 5 – IResult and Coroutines
• Caliburn.Micro Soup to Nuts Part 6a – Screens, Conductors and Composition
• Caliburn.Micro Soup to Nuts Part 6b – Simple Navigation with Conductors
• Caliburn.Micro Soup to Nuts Part 6c – Simple MDI with Screen Collections - New

Documentation here

A video that talks about some of the features of the MVVM framework – the post and the video

A Silverlight Expense Report Module using MVVM

By Michael Washington

A Silverlight Expense Report Module using View Model (MVVM) – CodeProject

Using The Silverlight DataGrid with MVVM

 

View Model and the Silverlight DataGrid

The Silverlight DataGrid is a powerful control that allows inline editing, paging, sorting, and drag and drop re-ordering of columns. It can be challenging to understand when using normal code behind techniques, but sometimes downright baffling when using View Model / MVVM style programming.

In the following examples, we will not directly reference the DataGrid in the View Model. The code we will create can be consumed by any collection control such as a ListBox.

It’s Not The DataGrid You Want to Manipulate – It’s the Collection Bound To The DataGrid

For more -> Using The Silverlight DataGrid with View Model / MVVM – CodeProject

In conclusion – View Model – Less Code, Really!

Hopefully you can see that View Model is not hard at all. It really is not complicated once you see how it is done. Expression Blend was designed to work in "View Model Style", so you should have an easier time using Expression Blend when you use this simple pattern.

While it may seem easier to implement a DataGrid using code behind, you will usually find that you will need to create a lot of code to locate and modify values and properties in the DataGrid.

Controls such as the DataGrid are designed to Bind to collections. View Model is designed to implement binding. It’s the Binding that saves you code. Once a Binding is created, it will perform functionality automatically. you do not have to explicitly write code for each piece of functionality. Most importantly, you will Bind to, and gather parameters, directly from the DataGrid element that you are ultimately concerned with, rather than hooking into an event and then hunting for the real value you are looking for.

Furthermore, you will realize that a lot of programmatic functionality, is best implemented, on the underlying data source not the DataGrid it’s self.

Also note, this example uses standard web services, you can easily use WCF or WCF RIA Services. The View and the View Model would still be exactly the same.

Silverlight Master Child View View Model Communication

An example of Silverlight View Model communication between Master and Child View Models

Simple View Model Communication

With using "View Model Style" programming it may be a little confusing as to how you can communicate between View Models. There are various methods available, but this article explores what I hope to be an easy simple method.

Via Silverlight View Model Communication – CodeProject

Introduction to Attached Behaviors in the context of MVVM

 

There is also a great and yet simple article that shows how attached behaviors is used to capture an element’s right-click event and Bind it to a MVVM ICommand property.

Introduction to Attached Behaviors in the context of MVVM

Download demo project

For example, suppose that the user searches through a TreeView for an item whose display text matches a user-defined search string. When the search logic finds a matching item, the matching ViewModel object will have its IsSelected property set to true. Then, via the magic of data binding, the TreeViewItem associated with that ViewModel object enters into the selected state (i.e., its IsSelected property is set to true, too). However, that TreeViewItem will not necessarily be in view, which means the user will not see the item that matches their search string. So how can we have the TreeViewItem brought into view when the ViewModel determines that it is in the selected state.

The ViewModel objects have no idea that a TreeViewItem exists, and is bound to them, so it does not make sense to expect the ViewModel objects to bring TreeViewItems into view. The question becomes, now, who is responsible for bringing a TreeViewItem into view when the ViewModel forces it to be selected?

Attached Behaviors

The solution to the problem explained above is to use an attached behavior. Attaching a behavior to an object simply means making the object do something that it would not do on its own.

The idea is that you set an attached property on an element so that you can gain access to the element from the class that exposes the attached property. Once that class has access to the element, it can hook events on it (e.g. TreeViewItem’s Selected event) and, in response to those events firing, make the element do things that it normally would not do. It is a very convenient alternative to creating and using subclasses, and is very XAML-friendly.

So how do we attach the behavior to every TreeViewItem in the TreeView? 

By adding a Setter to the Style applied to every TreeViewItems

<TreeView.ItemContainerStyle>
  <Style TargetType="{x:Type TreeViewItem}">
    <!--
    This Setter applies an attached behavior to all TreeViewItems.
    -->
    <Setter 
      Property="local:TreeViewItemBehavior.IsBroughtIntoViewWhenSelected" 
      Value="True" 
      />

Introduction to Attached Behaviors in WPF – CodeProject

Using MEF, MVVM and WCF RIA Services in Silverlight 4

A sample Silverlight business application using MEF, MVVM Light, and WCF RIA Services.

• Part 1
• Part 2
• Part 3

• Download source files – 637.78 KB
• Download setup package – 1.57 MB