1 / 43

MVVM Overview

MVVM Overview. Frank Shoemaker MindCrafted Systems frank@mindcrafted.com. Overview of MVVM. Some background Some examples. MVVM. MVVM stands for M odel V iew V iew- M odel. Simple Case. Model. Typical class that covers a database Could be a WCF Service and its client reference.

niveditha
Download Presentation

MVVM Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. MVVM Overview Frank Shoemaker MindCrafted Systems frank@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. Existing StuffDatabase Tables

  11. Existing StuffLibrary Class

  12. WPF

  13. Model Class Business data Properties Properties to return “Select” lists (AllSelect and StatusSelect) The usual CRUD routines

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

  15. 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

  16. Model Class – I/OSilverlight - Asynch Public Sub Read(ByVal id As Integer) Try myService.FetchAsync(id, ServiceReference1.myContextPayloadType.Heavy) Catch ex As Exception RaiseEventIOErrorOccurred("Read", ex) End Try End Sub

  17. Model Class – I/OSilverlight - Asynch Private Sub Read_Completed(ByVal sender As System.Object, ByVale As ServiceReference1.FetchCompletedEventArgs) Handles myService.FetchCompleted If IsNothing(e.Error) Then myData = e.Result RaiseEventIOSuccessful("Read", New EventArgs()) Else RaiseEventIOErrorOccurred("Read", e.Error) End If End Sub

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

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

  20. 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

  21. 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.

  22. Gluing the Pieces Together DataContext Binding

  23. 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.

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

  25. Data Binding - ViewModelINotifyPropertyChanged Public Event PropertyChanged(ByVal sender As Object, ByVal e As PropertyChangedEventArgs) _ Implements INotifyPropertyChanged.PropertyChanged

  26. Data Binding - ViewModelDeparment.CreatedBy Public Property CreatedBy() As String Get Return myModel.CreatedBy End Get Set(ByVal value As String) myModel.CreatedBy = value RaiseEventPropertyChanged(Me, New PropertyChangedEventArgs("CreatedBy")) End Set End Property

  27. Data Binding - ViewDeparment.CreatedBy <TextBoxText="{Binding Path=CreateDate, Mode=OneWay}" . . . Path is within the DataContext Mode=OneWay means the control won’t update the ViewModel Since it’s bound to CreateDate, when the PropertyChanged event is raised the control reloads from the CreateDate property in the ViewModel Controls don’t need to be named

  28. Binding For State <TextBox Text="{Binding Path=Name,Mode=TwoWay, IsEnabled="{Binding Path=IsEditing}" . . . Binding to interpret the ViewModel’s state to the user.

  29. Binding for State <Button Name="Edit" Content="Edit" IsEnabled="{Binding Path=IsOKToBeginEdit}" Click="Edit_Begin" . . . <Button Name="Save" Content="Save" IsEnabled="{Binding Path=IsEditing}" Click="Edit_Save" . . . <Button Name="Cancel" Content="Cancel" IsEnabled="{Binding Path=IsEditing}" Click="Edit_Cancel" . . .

  30. TwoWay Data Bindning <TextBox Text="{Binding Path=Name, Mode=TwoWay, . . . Bi-directional binding.

  31. Validating in the ViewModel <TextBox Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnExceptions=True}" . . . When the ViewModel throws the exception, the View changes

  32. Setting up Styles for Validation Binding <Style x:Key="styleTextBox" TargetType="TextBox"> . . . <Setter Property="Validation.ErrorTemplate" Value="{StaticResource errorEyeCatcher}"/> <Style.Triggers> <Trigger Property="Validation.HasError" Value="true"> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/> </Trigger> </Style.Triggers> </Style>

  33. Setting up Styles for Validation Binding <!--Display a Red * next to the control with an error --> <ControlTemplate x:Key="errorEyeCatcher"> <DockPanel> <Border BorderBrush="Red" BorderThickness="1" Padding="2"> <AdornedElementPlaceholder/> </Border> <TextBlock Foreground="Red" FontSize="24" Text="*"/> </DockPanel> </ControlTemplate>

  34. When to Validate? <TextBox Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=LostFocus,ValidatesOnExceptions=True}" IsEnabled="{Binding Path=IsEditing}" . . .

  35. ComboBox Binding <ComboBoxItemsSource="{Binding Path=StatusSelect}" DisplayMemberPath="Value" SelectedValuePath="Key" SelectedValue="{Binding Path=StatusID, Mode=TwoWay}" . . .

  36. Data BindingViewModel.FormStateMessage The state of Editing is maintained by the ViewModel ViewModel exposes properties to indicate state View interprets the ViewModel’s state to the user

  37. Displaying the Status Message <TextBlock Text="{Binding Path=FormStateMessage}" . . .

  38. Binding to Change Color of the Message if it’s an Error <TextBlock Text="{Binding Path=FormStateMessage}" Foreground="{Binding Path=FormStateMessageType, Converter={StaticResourceMessageForegroundColor}, ConverterParameter=FormStateMessageType}" . . . Use a converter routine to transform integer from the ViewModel into a color on theTextBox

  39. 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

  40. Setup the Converter Routine as a Resource in the XAML <Page.Resources> <converter:MessageForegroundColor x:Key="MessageForegroundColor" /> </Page.Resources>

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

  42. 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

  43. 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.

More Related