MVVM In Use

Editor's Notes

• #2: Were you confused by my presentation last month on MVVM? A common issue with the presentation was a lack of an example showing you how the pattern works to make better apps.Today I will be expanding on last month’s presentation, The MVVM Pattern, by demonstrating how the Model-View-ViewModel pattern works. We’ll cover the basics of the pattern again, followed by the presentation of a demo application. Finally, I’ll open the floor to questions.
• #3: First, the Model.This part of the pattern can be shared between apps, and is usually just how the application retrieves and stores the data it operates on.It is the “brain” of the application, because it’s your memory, and without it, you’d be dead (there’d be no app).
• #4: Second, the View.The view is the application’s user interface, and nothing else. Through commands and bindings it interacts with the ViewModel.The View serves as the eyes and hands of the application. It is how the user interacts with the app.
• #5: Third, the ViewModel.This is where all the action happens in the application. It connects the Model and View, working directly on Model objects while staying arms-length from the View, via bindings and commands.A single ViewModel can work with multiple different Views, but the inverse isn’t usually true.The ViewModel is the nervous system of the application; without it, the brain isn’t connected to the eyes or hands.
• #6: Finally, bindings and commands.Bindings serve as a way to let the View and ViewModel pass data, without making them directly rely on each other. Bindings are declared in the View, and the application framework uses them to dynamically connect it to the ViewModel.Commands can be thought of as form messages prepared by the ViewModel and given to the View. When the user clicks a button or interacts with the app in a way that isn’t directly manipulating data, the View will send the appropriate message to the ViewModel through the binding system.When the ViewModel receives a command, it acts accordingly, based on whatever parameter is passed to it by the View.
• #7: Now that we’ve gone over the parts of the MVVM pattern, let’s see it in action.This demo app contains a simple model object holding a line of text. The ViewModel object wraps the model object, and exposes the line of text as a property, which is bound in the View to both a label and a textbox.As you’ll see, changing the text in the textbox also changes the text of the label, demonstrating the binding at work!
• #8: So, what’s going on behind the scenes?I’m not showing the binding manager in this diagram, but you can see what happens when the textbox is changed.The value in the textbox is bound to the text property of the ViewModel, so when the value changes, the view sets the property to the new textbox value. This in turn causes the ViewModel to set the Model’s property, as well as signal to the binding manager (and therefore the View) that the property has changed.When the View is notified of the change, it updates the label, as you saw.
• #9: We’ll now demonstrate commands.The button in the demo app is bound to a command on the ViewModel. While in this case, it simply pops up a dialog box, commands can also be used to tell the ViewModel to save or update data, move to another part of the application, or any other kind of activity!
• #10: And here’s how commands work.As the diagram shows, a control in the View sends the Command to the ViewModel.Sometimes commands will cause the ViewModel to operate on the Model object, but in our sample app, that doesn’t happen.After the command is run by the ViewModel, control is returned to the sender of the command. Usually this will be a View, but commands can also be called by other ViewModel objects in more complex applications.
• #11: In today’s presentation, we’ve reacquainted ourselves with the MVVM architectural pattern, and seen how it works.The MVVM pattern is a great way to make application development and maintenance cleaner and more manageable, by separating different application concerns into their own areas.Later this week, I will be making more information available on the MVVM In Use support site, at mvvmspeech.tumblr.com. The sample app will also be put up for you to play with, and code is already available on the net.If you have any questions, we’ll now take two to three minutes.--- OUT OF TIME: If you still have questions, please visit the support site! You can ask questions about MVVM through there.