silverlight development & the model-view-viewmodel pattern

Silverlight Development&

TheModel-View-ViewModel

Pattern

Derek Novavi

25 November 2009

2

Silverlight & Model-View-ViewModel

•Overview of Silverlight•Silverlight 3 Features•Silverlight 3 Development•Silverlight Toolkit•Sample Silverlight Application•The Model-View-ViewModel Pattern•Sample M-V-VM Silverlight Application•Silverlight Unit Test Framework•Third Party Products•Silverlight 4 Beta

Overview of Silverlight

4

What is Silverlight?

•Web application framework that supports line-of-business applications.•Competes with AJAX, Adobe Flex / AIR, Sun JavaFX, and emerging technologies HTML5, Google Gears.•Also provides functionality similar to those in Adobe Flash for graphics, animation and video.•Is available on multiple browsers used on Windows and Mac OS X.

5

What is Silverlight?•Runs as a browser plug-in, in much the same way as Adobe Flash.

6

Silverlight Versions

•Silverlight 1 - used a JavaScript programming model – no .NET or BCL.•Silverlight 2 – supported .NET and BCL, with the familiar code-behind model.•Silverlight 3 – enhancements include navigation support for LOB applications, Out-of-Browser applications, richer data-binding, improved networking, graphics and media.

Silverlight 3 Features

8

XAML

XAML elements are objects that map to classes in the Silverlight runtime.

Therefore declaring a XAML TextBlock like this:

<TextBlock />

actually creates a new instance of the TextBlock class like this:

TextBlock t = new TextBlock();

9

.NET Framework Support – CoreCLR

•CoreCLR still responsible for managing memory and enforcing CTS.•JIT Compiler in CoreCLR is enhanced for fast startup time.•Just 2MB in size.•CoreCLR doesn’t need COM Interop or support for full-trust applications.•CoreCLR includes a subset of the BCL called “Small BCL”.

10

Graphics and Animations

•Support for raster graphics and vector graphics.•Local font usage for rendering text.•Animation – declarative and customizable via XAML.•Built-in support for video and audio – WMV, H.264, MP3, WMA, AAC.

11

Page Layout and Design

•Canvas – absolute positioning.•Grid – similar to an HTML table.•StackPanel – arranges elements in horizontal or vertical rows.•DockPanel – arranges elements around the edges of a panel.•WrapPanel – horizontal or vertical list, with wrapping.

12

Page Layout Example – DockPanel

13

Isolated Storage – Overview

•A client-side cache location to store and access commonly-needed data locally.•Persists data across sessions.•By default, web apps have 1MB of local storage. OOB apps have a 25MB quota.•Limit can be increased with user confirmation.•Cannot access end-user’s file system.

14

Isolated Storage – Configuration

15

Isolated Storage – Increasing Space

When an application requires additional storage space, it will prompt the user for approval to user more space on the computer as follows:

16

Isolated Storage – Key/Value Pairs

•Data can be saved and retrieved using key/values pairs.•IsolatedStorageSettings class provides a dictionary to store objects.•Supports the familiar Add, Contains, Remove methods•Also supports the familiar Item property, as in:userSettings["myKey"] = myValue;

17

Isolated Storage – Files

•Data can be saved or retrieved in a virtual file system.•IsolatedStorageFile class represents an isolated storage area that can contain files and directories.•Supports methods such as FileExists, CreateFile, OpenFile, DeleteFile, DirectoryExists, CreateDirectory, DeleteDirectory.

18

Isolated Storage – Location

•The physical location of the files depends on the OS and whether or not roaming user profiles are used.•Data is always isolated by user and by assembly.•If curious, a developer could verify a change to isolated storage using the file system of the operating system.

19

Isolated Storage – Root LocationsOn Windows XP

Roaming-enabled stores: <SYSTEMDRIVE>\Documents and Settings\<user>\Application Data\

Non-roaming stores: <SYSTEMDRIVE>\Documents and Settings\<user>\Local Settings\Application Data\

On Windows Vista

Roaming-enabled stores: <SYSTEMDRIVE>\Users\<user>\AppData\Roaming\

Non-roaming stores: <SYSTEMDRIVE>\Users\<user>\AppData\Local\

20

Isolated Storage – Physical Files

21

Out-of-Browser Applications

•End-user can save application to their desktop. Application stored locally in a low trust location. Still run in a sandbox.•Launched from Start Menu or desktop shortcuts. Run without browser window.•Functionality built-in to Silverlight 3 – no special assemblies or controls required.•Enabled in application properties, which will modify the AppManifest.xml file.

22

Out-of-Browser Applications

Installed / removed using context menu.

23

Accessing Network Resources

•Supports WebClient class for basic HTTP or HTTPS access to URI-based resources e.g. retrieving XML, JSON, RSS or Atom data formats, or downloading media to browser cache.•Supports HttpWebRequest and HttpWebResponse for more flexibility.•Support WCF and WCF RIA Services. Can use auto-generated proxy classes.•Supports sockets for "push-style" apps.

24

•Navigation Framework

•Silverlight 3 introduced new Frame and Page controls to support navigation.•Enables back-forward browser functionality via a hidden iframe.•Allows deep-linking, bookmarking, etc.•Supports URI mapping (descriptive URIs).•New "Silverlight Navigation Application" project template.

25

Data Binding – Overview

•Supports data-bound controls, XAML markup extensions, data context binding and Value Converters,•Setting the DataContext property on an element enables binding on child elements.•ItemsSource property used to bind to collections implementing IEnumerable.•Bindings can be set in XAML or in code.

26

Data Binding – Modes

•OneTime – updates the target property when the binding is created.

•OneWay – updates the target property when the binding is created. Changes to the source object propagate to the target.

•TwoWay – updates either the target or source object when either change.

27

HTML Bridge

•Allows access to the HTML DOM from managed code in Silverlight.•Allows one to call managed code in a Silverlight application from JavaScript.•Used to communicate between a Silverlight app and its hosting web page.•Attach SL event handlers to HTML controls.•Attach JS event handlers to SL controls.

Silverlight Development

29

Building Silverlight Applications

•Visual Studio 2008, using the Silverlight project templates.•Expression Blend.•Eclipse, using the Eclipse Tools for Silverlight plug-in – on either Windows or MacOS. (Version 2 of eclipse4sl will support Silverlight 3.)

30

VS2008 Silverlight 3 Project Templates

[Above: Three Silverlight 3 templates, two .NET RIA Services templates]

31

Example Project in Solution Explorer

32

Embedding the Silverlight Plug-in

The plug-in can be embedded in an HTML page using an object element and child param elements

33

Embedding – Example HTML

Also supports InitParams property to pass initialization parameters.

34

Add Silverlight to Page Using JavaScript

Using the createObject method of the Silverlight object in the Silverlight.js script

35

Example XAML Markup

•The x:Class attribute specifies the fully qualified name of a class.

•XAML compilation joins partial classes between markup and code-behind.•Code partial class defined in a separate code file.

36

Example Code-Behind

Derives from System.Windows.Controls.UserControl

37

Silverlight XAP File

38

What is a XAP File?

•XAP is the file extension for Silverlight application packages.•Contains compressed assemblies and resources of a Silverlight application.•Gets copied into ClientBin folder.•The Silverlight plug-in downloads and runs the XAP file.

39

XAP Mime Type

In IIS, we add the mime type for .xapapplication/x-silverlight-2

40

Example XAP File

The contents can be viewed using any standard .zip utility.

41

Contents of a XAP File

•An assembly for the application.•An application manifest file which defines the assemblies deployed in the client application (AppManifest.xml).•Any additional assemblies needed to run the application.•Can also contain embedded resources files such as graphics, audio, video.•If using WCF, might also contain ServiceReferences.ClientConfig

42

App.xaml

•Used by Silverlight application to declare shared resources such as brushes, styles, etc.•The code-behind file (App.xaml.cs) is used to handle global application-level events (similar to Global.asax.cs in ASP.NET applications).

43

App.xaml.cs Example

Derives from System.Windows.Application

44

Silverlight Lifecycle

[Sourced from MSDN documentation]

45

Silverlight Lifecycle

•User requests page hosting the Silverlight plug-in.•Browser loads plug-in, creates Silverlight content region, downloads .xap file.•Plug-in extracts .xap file contents and reads AppManifest.xml.•Plug-in loads Silverlight core services, runtime environment, creates App Domain.•Plug-in loads application assemblies, dependencies, instantiates Application.

Silverlight Toolkit

47

Silverlight Toolkit – Overview

•Developed by Microsoft.•Iterative, evolutionary model to release new controls and updates more often.•Components categorised into Mature/SDK, Stable, Preview and Experimental quality bands.•Recent updates in July 2009, Oct 2009, Nov 2009.

48

Silverlight Toolkit – ControlsAutoCompleteBox

Calendar

ChildWindow

DataGrid

DataPager

DatePicker

GridSplitter

HeaderedItemsControl

TabControl

TreeView

DockPanel

Expander

HeaderedContentControl

Label

NumericUpDown

Viewbox

WrapPanel

Accordion

Charting

DataForm

DomainUpDown

ImplicitStyleManager

LayoutTransformer

Rating

TimePicker

TimeUpDown

GlobalCalendar

TransitioningContentControl

TreeMap

BusyIndicator

[Drag and Drop support for items controls]

49

Silverlight Toolkit – TreeView Control

50

Silverlight Toolkit – DataGrid Control

[Screenshot removed due to data content]

51

Silverlight Toolkit – DataGrid Control

SampleSilverlight Data

Maintenance Application

53

Sample Application – Technologies Used

Built using:•Visual Studio 2008•Silverlight 3•Silverlight 3 SDK (e.g. SlSvcUtil.exe)•Silverlight Toolkit•WCF•C# 3.0•Enterprise Library 4.1 & T-SQL sprocs

54

Sample Application – UI

[Screenshots removed due to data content]

55

Sample Application – Controls Used

Demos the following Silverlight controls:Grid, Image, TextBlock, TextBox, ComboBox, CheckBox, Button, ScrollViewer

Demos the following Toolkit controls:DockPanel, GridSplitter, TreeView, TabControl, DataGrid, DataForm, AutoCompleteBox

56

Sample Application – Demo

[Break out into Visual Studio for demo of application, and a detailed look at the code]

TheModel-View-ViewModel

Pattern

58

Model-View-ViewModel – Overview

•A design pattern that originated from Microsoft.•A specialisation of Martin Fowler’s PresentationModel pattern.•Based on Model-View-Controller pattern.•Targeted at UI development platforms – Silverlight / WPF.

59

Model-View-ViewModel – Objectives

•Separation of concerns – decoupling of presentation, business logic and data layers allows an application to be developed in multiple work-streams.•Testability – eliminate virtually all code from UI e.g. from code-behind .xaml.cs code files. Each layer can be unit-tested independently.

60

Model-View-ViewModel – Description

Model – refers to the data access layer.

View – refers to visual elements used by the UI e.g. textboxes, buttons, and other controls. Uses two-way data binding in XAML to bind to the ViewModel.

ViewModel – an abstraction of the View used to facilitate data binding between the View and the Model. Exposes public properties and commands.

61

Model-View-ViewModel in Silverlight

•Need the ability to for UI layer to bind directly to commands in the ViewModel.•Unlike WPF, there is no built-in command mechanism in Silverlight 3.•Can implement easily in Silverlight using ICommand interface and dependency properties (see sample M-V-VM app).•Commands implemented in libraries such as Prism, Caliburn and Silverlight.FX.

62

Sample M-V-VM Silverlight App – UI

[Screenshots removed due to data content]

63

M-V-VM Sample – Technologies Used

As with first POC shown, built using:•Visual Studio 2008, Silverlight 3, Silverlight Toolkit, C# 3.0, EntLib 4.1, T-SQL sprocsBut also uses the following:•.NET RIA Services•Silverlight Unit Test Framework•Unity Application Block 1.2•Rhino Mocks 3.5 for Silverlight•[And a lightweight M-V-VM framework]

64

Sample M-V-VM Silverlight App – Demo

[Break out into Visual Studio for demo of application, detailed look at the code, unit tests, integration tests with UI automation, and explanation of the benefits of using Model-View-ViewModel]

SilverlightUnit Test Framework

66

Unit Testing in Silverlight

•VS Test projects cannot target the Silverlight "CoreCLR" Runtime as used by Silverlight Applications and Silverlight Class Libraries built with Silverlight 3.

67

Silverlight Unit Test Framework

•Unit tests run inside the browser.•Supports testing of Silverlight Class Libraries.•Allows testing of Silverlight Applications and UI controls.•Includes basic support for asynchronous testing.•Can use in conjunction with classes in System.Windows.Automation for UI integration tests (simulating button clicks).

68

Silverlight Unit Test Framework

[Sourced from SUT Framework website]

69

Silverlight Unit Testing

•See also Jamie Cansdale's Silverlight NUnit Project Template, which can be used with TestDriven.NET.

Third Party Products

71

Third Party Products

In addition to:•Silverlight Toolkit on CodePlex•Silverlight Unit Test Framework

There is an increasing range of support:•Controls from vendors such as Infragistics, ComponentArt, Telerik and DevExpress.•Rhino Mocks 3.5 for Silverlight•Unity Application Block 1.2 for Silverlight

Silverlight 4 Beta

73

Silverlight 4 – What’s New (selected)

•Support for .NET 4 CLR – same compiled code can run on desktop and Silverlight without change.•Elevated privileges and other improvements in OOB applications.•Printing API.•New RichTextBox control, and more.•Support for drag & drop.•Support for right-click.

74

Silverlight 4 – What’s New (selected)

•MouseWheel support on many controls.•Data-binding improvements.•SelectedValue and SelectedValuePath properties on Selector controls.•Implicit styles.•Managed Extensibility Framework.•Webcam/Mic support.•Support for Google Chrome.•Silverlight Designer in VS2010.

Summary

76

Summary

•Silverlight is a rapidly-maturing technology which is increasingly difficult for .NET developers to ignore.•Built-in functionality and third party support enables development of highly-responsive, robust line-of-business applications.•Can use modern design patterns such as Model-View-View-Model to enable separation of concerns and unit-testing.

Useful Links

78

Useful Links #1The Official Microsoft Silverlight Sitehttp://www.silverlight.net/

Get Started Building Silverlight 3 Applicationshttp://silverlight.net/getstarted/

Silverlight Toolkithttp://silverlight.codeplex.com/

The Model-View-ViewModel Design Pattern for WPFhttp://msdn.microsoft.com/en-us/magazine/dd419663.aspx

Silverlight Unit Test Frameworkhttp://code.msdn.microsoft.com/silverlightut

Unity Application Block 1.2 for Silverlight – December 2008

http://www.microsoft.com/downloads/details.aspx?FamilyID=0991cedb-953a-4367-a2b6-071e31766b4c&DisplayLang=en

79

Useful Links #2WCF RIA Services (formerly known as .NET RIA Services)http://silverlight.net/getstarted/riaservices/

WCF RIA Services - Forumhttp://forums.silverlight.net/forums/53.aspx

Infragistics Silverlight Controls for Line of Businesshttp://www.infragistics.com/dotnet/netadvantage/silverlight/line-of-business.aspx

Infragistics Silverlight Controls for Data Visualisationhttp://www.infragistics.com/dotnet/netadvantage/silverlight/data-visualization.aspx

What’s New in Silverlight 4 Betahttp://silverlight.net/getstarted/silverlight-4-beta/#whatsnew