Building Silverlight Applications Using the MVVM pattern

An Introduction by Peter Messenger Senior Developer – Qmastor http://www.petermessenger.com

Silverlight and WPF

• User interface programming platform operates on top of the NET framework • WPF is windows based • Silverlight can run in web browsers, Windows and Apple, Windows Mobile etc – Use XAML (eXtensible Application Markup Language) – Have powerful databinding capabilities – Have command properties where screen elements can perform actions

Example XAML and Code Behind

Hello World Example Using XAML View and “traditional” events and elements knowledge Simple.xaml

What is the MVVM pattern?

• Model View ViewModel is a coding pattern to develop Silverlight and WPF applications.

• Main aims – Cleaner code and easier to maintain and extend – Testable applications – Thinner user interface layer – Easier for User Interface designers to concentrate on how the application will look and coders to concentrate on what the application will do

Concepts of MVVM

Three broad categories of objects – Model • Contain data consumed and modified by user • Include things like business rule processing, input validation, change tracking and other things relating to system data • In database terms, this could be considered as tables, views and stored procedures used to update them

Concepts of MVVM

Three broad categories of objects – View • UI control that displays data • Allows the user to modify the state of the data via keyboard or mouse • Shows video, images or whatever else needs to be displayed • Bound to the model via databinding

Concepts of MVVM

Three broad categories of objects – ViewModel • Model of a view (abstraction) • Expose properties to which views are bound • Including properties that return command objects • Notify view of changes via PropertyChangedEvent (INotifyPropertyChanged interface) • Collections of data can be updated via ObservableCollections • Gets update of data via two way binding in the view

Example XAML and Code Behind

Hello World Example Using XAML View bound to ViewModel Binding.xaml

Comments

• As can be seen, this simple example takes some setting up and increased code • When you work on more complicated programs and use inheritance, this becomes much less of an issue • There are several different open source templates that can be used to get started

My Experience with MVVM

• Spent last 8 months developing Silverlight application for Qmastor – Web interface for NSW mines to interact with the new Newcastle Coal Port to manage their coal shipments – Trialled using the MVVM pattern with great success – Other developers in the company then started using it – Likely to be the company defacto standard from now on

Discussion and Code

More complicated example Data Entry and Validation Employee database MainPage.xaml

Questions

Links

• Wikipedia http://en.wikipedia.org/wiki/Model_View_ViewModel • Understanding the MVVM pattern http://live.visitmix.com/MIX10/Sessions/EX14 • WPF Apps using the MVVM pattern http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

• MVVM Light Toolkit http://www.galasoft.ch/mvvm/getstarted/ • Advanced MVVM – Josh Smith http://www.advancedmvvm.com