Search

Categories

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Send mail to the author(s) E-mail

# Saturday, 20 October 2012
( MVVM | Silverlight )

Continued Ch33

Have seen how to pull code out of the code-behind and into ViewModel, and then out of the ViewModel into Services.

  • less brittle
  • testable
  • reuasblep

Ways for XAML elements to invoke methods in the ViewModel:

  • ICommand – traditional and supported in most MVVM toolkits
  • CallMethodAction – introduced in Expression Blend 4

Commands and CallMethodAction are a great way to separate the View from ViewModel, keeping the contract at just a binding statement or name of a method.

ICommand

More Vacation button disabled by default

image

image
AddVacationBonusCommand is a property on EmployeeListViewModel

CallMethodAction

Introduced with Expression Blend4 – an easy and designer friendly way to wire any event from any control to a method.

Installed Expression Blend Preview for Silverlight 5.

reference Microsoft.Expression.Interactions, System.Windows.Interactivity

image
Easy way to wire up a button click whilst not being tightly coupled.

View Specific Entities

eg not using Employee object all the way to the UI.  If employee changes in the db, then have to change the UI.

So update all client side places that once used Employee to use EmployeeViewModel.

image
Just surfacing the required data to the UI using EmployeeViewModel class which the EmployeeListViewModel uses

Interfaces, IoC and ViewModel Locators

EmployeeList View is tightly coupled to EmployeeListViewModel

image

Similarly the EmployeeListViewModel is tightly coupled to the EmployeeDataService and EmployeeVacationBonusService.

  • can be useful to not have this if want to swap out datastore

Leave for now and see what can do with testing without this..

Testing

image
Need to set the correct aspx as start page otherwise it will try to run the test project.

http://silverlight.codeplex.com/releases/view/78435 – Silverlight 5 Toolkit

Silverlight Unit Testing Framework..didn’t install the templates into VS2012

http://visualstudiogallery.msdn.microsoft.com/caca1e81-becb-41e4-9110-bc247f3f400b?SRC=Home

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\dec11\Testing  - DLLs are here

image
Got this working on already existing templates

image

Testing the EmployeeListViewModel

image

Using NUnit

http://www.frenk.com/2011/11/silverlight-unit-testing-with-nunit-yes-you-can-without-hacks/

Test 'MvvmApplication.NUnitTests.EmployeeListViewModelTests.SelectedEmployeeCanBeSetAndRetrieved' failed: System.IO.FileNotFoundException : Could not load file or assembly 'System.Windows, Version=5.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e' or one of its dependencies. The system cannot find the file specified.
    at MvvmApplication.ViewModels.EmployeeListViewModel..ctor()
    Class1.cs(20,0): at MvvmApplication.NUnitTests.EmployeeListViewModelTests.SelectedEmployeeCanBeSetAndRetrieved()

Could use SilverUnit which doesn’t have these issues.

http://stackoverflow.com/questions/10891403/silverlight-5-and-nunit – had to add in System.Windows into the Unit Testing project from C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\Silverlight\v5.0

image

I added in a normal project reference for MvvmApplication.Core as got version conflicts when just adding the dll from debug (however I get a warning doing it this way)

Async Testing

Added in System.ServiceModel into the Nunit project.

The SilverlightTest base class supplies the critical EnqueueTestComple method, that tells the test framework that the method is complete and can release it from its holding pattern created by the async attribute.

**can’t easily create a new unit test project.

image

Copied old test project across, then wired up the .Web project to include the newly copied project.

So can now do tests with TestDriven.NET on the ViewModels, and the SL Test Runner on Async.

 

http://code.google.com/p/nunit-silverlight/ – unofficial port of unit for SL …Nov 2010.  SL4

http://agunit.codeplex.com/ – R# plugin to allow unit test to run… supports:  MS Test Framework for SL Toolkit, NUnit-Silverlight, xUnitContrib-Silverlight… quite up to date 2012.

http://blogs.msdn.com/b/bharry/archive/2012/07/09/coded-ui-testing-support-for-silverlight.aspx – coded UI support for SL 5.

| | # 
# Thursday, 18 October 2012
( MVVM | Silverlight )

Ch33 in Silverlight 5 in Action book.

Testing is one of the main drivers behind MVVM

  • New project – Silverlight Navigation Application

image
Issue with blurry fonts in IE10

 

image
Database is slightly different from one in book

This one was from SQLExpress2008.  http://msftdbprodsamples.codeplex.com/releases/view/4004  this is the database schema that is used in the book (SQL2005 version)

image

image
The correct schema

Webservice

image

A regular Silverlight-enabled WCF service: a SOAP web service built using WCF

image
Locking the port too.

image
Added a new EmployeeList page and wired it into the navigation.  Now doing a child window called EmployeeDetail.

image
TextBlocks (labels) and TextBox’s (inputs) with TwoWay binding.

Typical Code Behind Solution

image

image
Should be like this (default code gen)

image
But was this (no code gen)

image

Page Caching is turned on.

image

image

image
Child window popping up when press edit.  We don’t clone the Employee here, so cancel doesn’t work if we change a value.. it automatically updates the underlying object, but doesn’t update the database.

image
In EmployeeList when edit button is pressed, we make a new EmployeeDetail View as pass it the Employee.  When the Employee property of the View is set, we set the DataContext to use that employee too.

  • Filling a list from a service call
  • Passing information from 1 view to another

MVVM Version

The most popular pattern for SL and WPF.

  • testable
  • code reuse
  • elimates many of the binding problems

The View uses Binding and Messages (actions or commands) to communicate with the ViewModel

image
Base ViewModel.  INotifyPropertyChanged is required when other classes may be bound to your class.

image
Codebehind in the XAML makes a EmployeeListViewModel then calls the LoadEmployees method on it.
Also sets up an event which fires when loading is complete so loading window disappears

Single Responsibility

image
Driving out into a separate class Vacation bonus logic away from the ViewModel.  However this depends on Employee.

image
ViewModel

image
Better version of vacation as no dependency

image
Calling code in EmployeeListViewModel

Data Access and Service Calls

Abstracting service/data access calls away from the ViewModel

image

However lots of EventHandler code in DataService, ViewModel and Code Behind.

| | # 
# Friday, 05 October 2012
( MVVM | Silverlight )

http://msdn.microsoft.com/en-us/library/gg430857(v=pandp.40).aspx

image
The app takes data, then writes out to Output window when press submit

image
Wiring the Questionnaire View into the MainPage.xaml

In the View:

View – xaml
ViewModel – What the view binds towards a particular view(display)
Model – bottom

| | #