MVVM Overview

1
MVVM Overview

• Frank Shoemaker
• MindCrafted Systems
• frank_at_mindcrafted.com

2
Overview of MVVM

• Some background
• Some examples

3
MVVM

• MVVM stands for
• Model
• View
• View-Model

4
Simple Case
5
Model

• Typical class that covers a database
• Could be a WCF Service and its client reference

6
ViewModel

• Provides data to and from the View
• Responds to both the View and the Model
• Informs the View of changes in the data
• Reusable (at least much more than code behind a
  form)

7
ViewModel

• Knows nothing about the View
• Does not push data into the view
• TextBox1.Text object.Name()

8
View

• Uses Binding to subscribe to the ViewModel
• Interprets business data and state of ViewModel
  to the human
• Nothing but Presentation - XAML
• No or minimal code-behind

9
More on the ViewModel in MVVM

• WPF/Silverlight data binding is what makes things
  work
• ViewModel presents a published interface to the
  View
• Binding in the XAML instead of code
• More use of Declarative Programming

10
Architecture
11
Existing StuffDatabase Tables
12
Existing StuffLibrary Class
13
WPF
14
Model Class

• Business data Properties
• Properties to return Select lists (AllSelect
  and StatusSelect)
• The usual CRUD routines

15
Model Class

• Encapsulates how it communications with the
  back-end
• Uses Events to signal I/O successfully completed
  or an error occurred
• In WPF its synchronous, but can be used as if
  its a asynchronous.
• In Silverlight its async.

16
Model Class I/OWPF - Synchronous

• Public Sub Read(ByVal id As Integer)
• Try
• myLibraryObj.MCFetch(id)
• RaiseEvent IOSuccessful("Read", New
  EventArgs())
• Catch ex As Exception
• RaiseEvent IOErrorOccurred("Read", ex)
• End Try
• End Sub

17
Model Class I/OSilverlight - Asynch

• Public Sub Read(ByVal id As Integer)
• Try
• myService.FetchAsync(id,
  ServiceReference1.myContextPayloadType.Heavy
  )
• Catch ex As Exception
• RaiseEvent IOErrorOccurred("Read", ex)
• End Try
• End Sub

18
Model Class I/OSilverlight - Asynch

• Private Sub Read_Completed(ByVal sender As
  System.Object, ByVal e As ServiceReference1.Fetc
  hCompletedEventArgs) Handles myService.FetchCompl
  eted
• If IsNothing(e.Error) Then
• myData e.Result
• RaiseEvent IOSuccessful("Read", New
  EventArgs())
• Else
• RaiseEvent IOErrorOccurred("Read",
  e.Error)
• End If
• End Sub

19
ViewModel Properties

• Properties come in two flavors
• Data Properties
• Name, StatusID, CreateDate, AllSelect
• Form State properties
• IsEditing, IsNotEditing, IsOKToBeginEdit

20
ViewModel Methods

• Methods come in two flavors
• CRUD Methods
• Create, Read, Update, Delete
• Implements the IEditableObject interface
• BeginEdit, CancelEdit, EndEdit

21
ViewModel Class Events

• Implements INotifyPropertyChanged interface
• Notify the View that a property has changed its
  value
• Allows the View to respond to reflect the change,
  if it wants to

22
ViewModel Class Properties

• Present some properties in more than one way for
  the convenience of the View
• IsEditing
• True if the user is currently editing the
  business object
• IsNotEditing
• True if the user is NOT currently editing the
  business object.

23
Gluing the Pieces Together

• DataContext
• Binding

24
Setup the DataContext

• This example sets up the DataContext in code
• Create a new instance of the ViewModel
• Bind the View to the ViewModel Instance
• All Controls on the View then inherit the
  DataContext from the page.

25
Set up the DataContext

• Private Sub Page_Loaded(ByVal sender As Object,
  ByVal e As
  System.Windows.RoutedEventArgs)
• myVM New ViewModel.DepartmentVM()
• ' Set the DataContext for the
• ' entire page to the ViewModel
• Me.DataContext myVM
• End Sub

26
Data Binding - ViewModelINotifyPropertyChanged

• Public Event PropertyChanged(ByVal sender As
  Object,
• ByVal e As
  PropertyChangedEventArgs) _
• Implements INotifyPropertyChanged.Property
  Changed

27
Data Binding - ViewModelDeparment.CreatedBy

• Public Property CreatedBy() As String
• Get
• Return myModel.CreatedBy
• End Get
• Set(ByVal value As String)
• myModel.CreatedBy value
• RaiseEvent PropertyChanged(Me, New
  PropertyChangedEventArgs("CreatedBy"))
• End Set
• End Property

28
Data Binding - ViewDeparment.CreatedBy

• ltTextBox Text"Binding PathCreateDate,
  ModeOneWay" . . .
• Path is within the DataContext
• ModeOneWay means the control wont update the
  ViewModel
• Since its bound to CreateDate, when the
  PropertyChanged event is raised the control
  reloads from the CreateDate property in the
  ViewModel
• Controls dont need to be named

29
Binding For State

• ltTextBox Text"Binding PathName, ModeTwoWay,
  IsEnabled"Binding PathIsEditing"
• . . .
• Binding to interpret the ViewModels state to
  the user.

30
Binding for State

• ltButton Name"Edit" Content"Edit"
• IsEnabled"Binding PathIsOKToBeginEdit"
  
• Click"Edit_Begin" . . .
• ltButton Name"Save" Content"Save"
• IsEnabled"Binding PathIsEditing"
• Click"Edit_Save" . . .
• ltButton Name"Cancel" Content"Cancel"
• IsEnabled"Binding PathIsEditing"
• Click"Edit_Cancel" . . .

31
TwoWay Data Bindning

• ltTextBox Text"Binding PathName, ModeTwoWay,
  . . .
• Bi-directional binding.

32
Validating in the ViewModel

• ltTextBox Text"Binding PathName, ModeTwoWay,
  ValidatesOnExceptionsTrue"
• . . .
• When the ViewModel throws the exception, the View
  changes

33
Setting up Styles for Validation Binding

• ltStyle xKey"styleTextBox" TargetType"TextBox"gt
• . . .
• ltSetter Property"Validation.ErrorTemplate"
• Value"StaticResource
  errorEyeCatcher"/gt
• ltStyle.Triggersgt
• ltTrigger Property"Validation.HasError"
  Value"true"gt
• ltSetter Property"ToolTip"
• Value"Binding RelativeSourceRelati
  veSource Self,
• Path(Validation.Errors)0.Er
  rorContent"/gt
• lt/Triggergt
• lt/Style.Triggersgt
• lt/Stylegt

34
Setting up Styles for Validation Binding

• lt!--Display a Red next to the control with an
  error --gt
• ltControlTemplate xKey"errorEyeCatcher"gt
• ltDockPanelgt
• ltBorder BorderBrush"Red"
  BorderThickness"1" Padding"2"gt
• ltAdornedElementPlaceholder/gt
• lt/Bordergt
• ltTextBlock Foreground"Red" FontSize"24"
  Text""/gt
• lt/DockPanelgt
• lt/ControlTemplategt

35
When to Validate?

• ltTextBox Text"Binding PathName, ModeTwoWay,
  UpdateSourceTriggerLostFocus,
  ValidatesOnExceptionsTrue"
• IsEnabled"Binding PathIsEditing"
• . . .

36
ComboBox Binding

• ltComboBox ItemsSource"Binding
  PathStatusSelect"
• DisplayMemberPath"Value"
• SelectedValuePath"Key"
• SelectedValue"Binding
  PathStatusID, ModeTwoWay"
• . . .

37
Data BindingViewModel.FormStateMessage

• The state of Editing is maintained by the
  ViewModel
• ViewModel exposes properties to indicate state
• View interprets the ViewModels state to the user

38
Displaying the Status Message

• ltTextBlock Text"Binding PathFormStateMessage"
  
• . . .

39
Binding to Change Color of the Message if its an
Error

• ltTextBlock Text"Binding PathFormStateMessage"
  
• Foreground"Binding PathFormStateMessageType,
  
• ConverterStaticResource
  MessageForegroundColor,
  ConverterParameterFormStateM
  essageType"
• . . .
• Use a converter routine to transform integer from
  the ViewModel into a color on theTextBox

40
Converter Routine

• Public Function Convert(ByVal value As
  Object,
• ByVal targetType As System.Type,
• ByVal parameter As
  Object, ByVal culture As System.Globalization
  .CultureInfo) _
• As Object Implements
  System.Windows.Data.IValueConverter.Convert
• If CInt(value) 1 Then
• ' Informational message
• Return "Black"
• Else
• ' Error message
• Return "Red"
• End If
• End Function

41
Setup the Converter Routine as a Resource in the
XAML

• ltPage.Resourcesgt
• ltconverterMessageForegroundColor
  xKey"MessageForegroundColor" /gt
• lt/Page.Resourcesgt

42
Testing

• Since ViewModels know nothing about the UI, they
  can be driven with a programmatic test case.

43
MVVM Wrap up

• Loose coupling between the Model, ViewModel, and
  View
• Bright lines between areas of concerns
• At least some chance of reusability of the
  ViewModel
• ViewModel is independently testable

44
MVVM Wrap up

• View can be worked on by designers without
  messing up the ViewModel
• Would benefit from a root ViewModel class for the
  state management.