Applied MVVM in Windows 8 apps: not your typical MVVM session!

About me…

Gill Cleeren
 .NET Architect @Ordina
 Pluralsight trainer
 Microsoft Regional Director
 Silverlight MVP / Telerik MVP
 Speaker
 Visug user group lead
 Author
 Blog: www.snowball.be
 Email: gill@snowball.be
 Twitter: @gillcleeren

Agenda
Thinking about Modern UI
MVVM Overview
Building Blocks
 Commanding
 ViewModel Locator
 Messaging
Application architecture
Dependency injection
Navigation and window management
Data access and repositories
Data binding to Windows 8 controls
Working with contracts
 Share
Working with tiles updates
 Local
 Push notifications
Lifecycle and state management
Unit testing the VMs and services

Thinking about Modern UI
(aka the technology formerly known as Metro)

Modern UI is different

Content before chrome
Full screen apps
 Snap view and filled view
Orientation and rotation
Windows are now “pages”
New ways of interacting with an app
 App bar
 Charms/Contracts
Lifecycle and tiles
…

MVVM and Modern UI

Currently most Modern UI apps are built in XAML

MVVM is supported in WPF, Silverlight, Windows Phone…

Core concepts of XAML are universal
 Data binding, commands, DataContext…

Each technology has some specifics
 Navigation, controls, lifecycle management, background tasks…

BUT knowledge can be easily leveraged
 Even to non-XAML based technologies (HTML5 with Knockout JS)

So it’s a great idea…

to build Windows 8 apps using
MVVM!

We’ll show you how!

MVVM Overview
For those who might not grasp every concept…

Hello MVVM

MVVM is an architectural
pattern
 Based on MVC pattern
 In turn based on
PresentationModel by Fowler
 Introduced by John Gossman
(WPF dude)
I <3 XAML

Hello MVVM

Leverages power of XAML
framework
 Data binding
 Commanding

Hello MVVM

Became popular with Silverlight
 Also applicable in
 WPF
 Windows Phone 7 and 8
 Windows 8/WinRT

Woot, I can finally
build my code Here’s the design.
without the designer Now let me go and
messing things up! play with my iPhone.

What we all did when we were young…

• Watch Eddy Murphy arrive in America…
• Tom Selleck’s moustache was closely monitored
• Record ourselves…
• Shoot ducks (and try shooting the damn dog)

What we all did when we were young…

And write code in code-behind… Lots of it.

View

XAML

Code-Behind
Data Model
Event Handlers

Meanwhile, in 2013, things have changed.

Not necessarily any better though…

Writing testable code however, is
becoming the norm.
Finally. Courtesy of MVVM.
View

XAML

Code-Behind

Data-binding Change
and commands notification

View Model

State + Data Model
Operations

The View

Represents the user interface that the user will see
Can be a page, user control or Data Template
Keep it simple
 Clean code-behind
 Only visual logic (all the rest should go in the ViewModel)
Should never contain anything that is to be tested
 Model-related

The ViewModel
An abstraction of View, definition of what can be shown on screen
Glue between View and Model
 Implements INotifyPropertyChanged
Contains
 State properties: data
 Operations: commands
 Validation support
Should not contain “view properties” such as Color
 Use converters for this
Often wraps or “re-models” the model for the View to use
Must be testable
No control references!
Often, 1 ViewModel per View
 Can be 1-to-many or many-to-1
Manages the flow of the application
Interacts with the model

The Model

Data model, service reference/proxy classes, DTO…
 Very often, an extra layer is added on top of the generated proxy classes
Validation logic
Data access
No reference to ViewModel

Linking the View and the ViewModel

Data binding is the glue but…
A view needs to “find” its ViewModel
 ViewModel is the DataContext
Can be static or dynamic
 Static: View creates ViewModel and sets it as DataContext
 Dynamic: at runtime, View selects its ViewModel or vice-versa
2 options:
 View-First: ViewModel gets created because View is created
 ViewModel-First: ViewModel is created and View gets selected

Locator pattern

Implemented through a class that contains all VMs as properties
An instance is then made available as Resource
All Views can bind, no code needed in View
 Clean way
 Not good since all VMs need to be known upfront
Property for each available VM
Not easy if more than one instance exists of a View
 In this case, some form of IOC is recommended

Commands

MVVM-based code have no event handlers in code-behind
How to handle events happening in the UI?
 Commands
 Based on Command pattern

In object-oriented programming, the command pattern is a behavioral
design pattern in which an object is used to represent and
encapsulate all the information needed to call a method at a later time.
This information includes the method name, the object that
owns the method and values for the method parameters.

Commands

WinRT has the ICommand interface
 Execute()
 CanExecute()
 CanExecuteChanged event

public interface ICommand
{
event EventHandler CanExecuteChanged;

bool CanExecute(object parameter);
void Execute(object parameter);
}

Commands

Way to create commands:
 Write ICommand implementation
 Create instance on VM
 Bind Command property of control to this instance
Works only on some controls
Rest needs to use behaviors

Behaviors
Block of code that we can attach to XAML element
Promotes reuse
Useful in MVVM scenarios on controls that don’t support commanding
 Avoids having code in code-behind
Supported by Blend
Not supported by Windows 8 
 Neither are triggers
 EventToCommand is therefore not available by default

 The community has the answer!

Using EventToCommand as a behavior

Take a look at WinRtBehaviors on CodePlex/NuGet (Joost van Schaik)

<TextBlock Text="TextBlock" FontSize="48">
<WinRtBehaviors:Interaction.Behaviors>
<Behaviors:EventToBoundCommandBehavior Event="Tapped"
Command="{Binding TestCommand}"
CommandParameter="{Binding TestProperty, Mode=TwoWay}"/>
</WinRtBehaviors:Interaction.Behaviors>
</TextBlock>

Works through Attached behaviors
 Attached dependency property

Communication between VMs
View Model View Model




Messaging
View
View XAML
XAML
Code-
Code- Behind
Behind

View Model
View Model State + Data Model
State + Data Model Operations
Operations
Message

Publish
messages View
XAML

Subscribe to Code-
Behind
messages

View Model
Event State +
Message
Aggregator Operations

From the ground up!

Core principles for a testable and maintainable architecture
 Separation of concerns
 “A new class doesn’t cost a thing”
 Repositories
 Loose coupling
 Dependency injection
 Unit testing and mocking

Contoso Cookbook: freshly
baked using MVVM
DEMO

The container

Loose coupling is achieved through dependency injection
Dependencies are instantiated and maintained through container
MVVM Light comes with SimpleIOC
 Not very extended when it comes to managing lifetime of objects
NuGet offers alternatives
 MetroIOC
 TinyIOC
 AutoFac
Can be used to manage
 ViewModels
 Views
 Services
 …

Abstraction for the container

Avoid making direct calls to your container from code
Instead, introduce an abstraction layer for your container
Code not dependent on container
If container changes, only one class needs changing

Navigation and
window management

Navigation in Modern UI

Windows 8 apps use “new” screens to convey information
 Not many controls and content on screen
 Navigation == content
 Result is that we often have to navigate using more clicks/taps
Navigation is based on concept of pages
 Forward and backward navigation support

Pages and Frames

Windows 8 apps know pages: this is the “window”, top-level control
 Used as Views in MVVM scenario
 No visible chrome
Frame will host pages
 One page at a time
 Performs navigation from page to page
 Frame.Navigate()
 Frame.GoBack()
 Single Frame is created at application level
 First view gets loaded after splash screen
 Extended splash screen is MVVM view as well

Navigation and SOC

Navigation is not the task of the ViewModel
Navigation is not the task of the View
… and most certainly not the task of the Model
Then, whose task is it?
Separate service that has link to Frame
Called from ViewModels
NavigationService is injected in ViewModels through IOC
 Easily mockable
 No hard dependency on specific implementation in ViewModels
 Often, single instance is created application-wide and passed through
injection/container

Window management

Windows 8 apps don’t use MDI interfaces, have separate windows
though
 Exception dialog
 Confirmation window
 Message dialog
Managed through separate service
 Called from ViewModels
Again good news for testing and SOC

DEMO

Navigation and
window management
DEMO

Data access and
repositories

Repositories

Abstraction between data persistence and data consumption code
 Allows changing implementation of persistence code without changing consumer
 Easier to test
 Creates central location for all data access
 Advantage in the case where data will be cached locally

A repository often manages access to single resource collection
 More than one entity type on single repository though
 Parent-child relation

Data services

Since repositories often work with a single entity, they are not a good
hook for the ViewModels
 Would make the ViewModel responsible for combining response of several
repository responses
Create separate service for data access
 Per “unit of functionality”
 Shared between ViewModels
Often created application-wide through IOC container
 Injected into ViewModels through DI

Data access and
repositories

DEMO

Data binding to Windows 8
controls

Windows 8 and lists of data
Data lists are everywhere
 RSS feeds
 Flickr images
 News updates
 Local file system enumerations
 …
Microsoft has focused on creating controls that work with these lists
 GridView
 ListView
 FlipView
 Semantic Zoom
Support data binding
 Some require a little bit of help though!

Semantic zoom done right

Touch-based technique for presenting and navigating large sets of data in
a single view
Based on 2 modes
 Low level: zoomed-in mode
 Shows all data in a flat structure
 High level: zoomed-out mode
 Shows items in groups
Typical uses:
 Addressbook
 Photo album
 Product catalog

Using the semantic zoom control

Contents can be anything that implements ISemanticZoom
 ListView
 GridView
 Most of the time, you’ll use 2 GridViews

<SemanticZoom>
<SemanticZoom.ZoomedOutView>

</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>

</SemanticZoom.ZoomedInView>
</SemanticZoom>

Sharing in Windows 8
Sharing used to go via clipboard or locally saving content
 Sharing is in fact from one app to another

Often time-consuming, sometimes confusing

Windows 8 has the Share charm
 Share contract works when tapping the Share charm

Offers “lightweight, in context” sharing capabilities

Sharing happens between 2 apps
 Source app: app that wants to share data
 Target app: app that can accept data as destination
 An app can be both a source and a target
 Can share with itself

Sharing in Windows 8

Share pane (Win + H)
 List of apps that can accept the data
 Depends on the data being shared
 Quicklinks

Selected app normally opens a specific share view
 Optimized to just handle the share operation
 Closes after finishing the “sharing task”

Sharing apps don’t have to know each other
 Works through broker
 Pub/sub model

Sharing between 2 apps
Register with
DataTransferManager
DataRequested event
Source app

Create data DataRequested
to share
All done!

Activated
for share
target

Target app

Sharing using MVVM

Share source
 Separate service will register with the DataTransferManager
 Will also get in data to share when requested
 ViewModel control this service but don’t directly interact with the
DataTransferManager
Share target
 Separate View for the Share operation
 Separate ViewModel for the Share view
 Service can be used to complete the share operation

Working with contracts

DEMO

Tiles

Tiles can be updated in several ways
 Local (from the app code)
 Can only be used when the app is running
 Useful for tile updates (not that useful for toasts)
 Scheduled
 Update at specific time
 Useful for tiles and toasts
 Periodic
 Update at specific interval
 Poll a cloud service for content
 Push notifications
 Updates are sent from the cloud
 Ideal for updating the tile without the app being executed

Local updates using MVVM

Again not the role of the ViewModel to update a tile/badge/toast
Separate service is required
 Can work with data access service to get information
 Can work with navigation service to navigate to correct page and pass contextual
information
 Can be mocked out to be able to test in isolation

Push notifications

Backend
event

ChannelUri
Service DB
App
ChannelUri

Client Notification
Platform
WNS

Working with Push
Notifications DEMO

Lifecycle
and state management

Process lifecycle in Windows 8

Launching Suspending
Running

Not running/
Not running Suspended
Terminated
Resuming

Termination
App Close
App crash

Process lifecycle management

Managing state information is required
 Suspended apps may not return and get terminated
 Users expect to see the app in the same state they left it
 Syncing state between multiple devices may be expected
 The app could be updated to a newer version
 While suspended, the app may be activated, triggering a different page
 ...
Can be done using
 Application Data API
 LocalSettings/LocalFolder
 RoamingSettings/RoamingFolder
 Via specific service then to repository
It’s not the task of the ViewModel to manage this
 A service has this responsibility

What should be saved?

App data
 Persistent across application reboots
 Should be saved incrementally

Session data
 More temporary of nature
 Saved mostly for suspending/termination
 Includes often location within a multi-page app

DEMO

Lifecycle
and state management

Unit testing the
VMs and services

Unit testing in MVVM

Using MVVM goes hand-in-hand with unit testing
 SOC: Because we use services for all external tasks, the VMs can be tested in
isolation
 DI: possible to pass mock services so that our test is not depending on external
influences
Difficult to test code that interacts directly with UI
Mocking is recommended
 Unit test not depending on external components
 Supply a stub/fake
 DI/abstraction layer is required

DEMO
DEMO

Unit testing the
VMs and services

Summary

It’s a great choice to build using MVVM
Services, services and yes services

Build your next big thing, but now better!

VISUG Day – April 17, 2013

Full details at www.visugday.be

Want to read more?

Read my advanced MVVM articles on www.silverlightshow.net!

Applied MVVM in Windows 8 apps: not your typical MVVM session!

More Related Content

Similar to Applied MVVM in Windows 8 apps: not your typical MVVM session! (20)

More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)

Applied MVVM in Windows 8 apps: not your typical MVVM session!