Building Silverlight Applications Using the MVVM pattern An Introduction by Peter Messenger Senior Developer – Qmastor

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 Understanding the MVVM pattern WPF Apps using the MVVM pattern MVVM Light Toolkit Advanced MVVM – Josh Smith