MVVM + MEF in Silverlight

Ricardo Fiel

Who’s that guy?

Ricardo FielSenior EngineerFullsix Portugalricardo.fiel@fullsix.com@theplastictoy

xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/

blogs.fullsix.ptlabs.fullsix.pt

Agenda

• The “easy” way• MVVM – Model View ViewModel• MEF – Managed Extensibility Framework• Scenarios for MVVM + MEF together• Q&A

The “easy” way

Question

What are some of the biggest costs in Software Development?

• Maintenance• Bug fixing

• ?

demoBuilding a Silverlight app the “easy” way

That was the DANGEROUS way!

• Too much coupling• Very hard to test• Developer-Designer workflow issues• Maintenance will be a pain• Looks faster, but will become expensive

It’s not always the wrong way, butUSE IT WITH CAUTION!

MV* patterns• Different people reading about MVC in different places take different ideas

from it and describe these as “MVC”.

• Presentation Model is of a fully self-contained class that represents all the data and behavior of the UI, but without any of the controls used to render that UI on the screen. A view then simply projects the state of the presentation model onto the glass.

• The most annoying part of Presentation Model is the synchronization between Presentation Model and view…

• Ideally some kind of framework could handle this, which I'm hoping will happen some day with technologies like .NET's data binding.

Martin Fowler, 2004

MVVMModel-View-ViewModel

Ladies and gentleman, may I introduce you to:

The MVVM triad

• Display data in Controls

• UI Friendly Entities, UI State, Actions

• Entities representing data

ViewModel

View

Model

Model

• Represents the data• The entity• Not required to know where it gets its data

from– From a WCF service. WCF RIA Services, etc

• May contain validation

View

• The screen, the UI, the UserControl in Silverlight

• Handles UI look and feel• Presentation of information• Communicates with ViewModel through

bindings

ViewModel

• Main source of logic for the MVVM triad• Connects the Model to the View• Abstracts the View• Public properties that are bound to a View• INotifyPropertyChanged and

INotifyCollectionChanged talk to the View through bindings

• Listens for changes from the View through bindings• May invoke services to communicate outside the

MVVM triad

MVVM Variations - 1

• View First– ViewModel is created as a StaticResource in the

View’s XAML or in the View’s code-behind– Excellent for Blend (“Blendability”)

<UserControl.Resources> <data:GamesViewModel x:Key="TheViewModel" /> </UserControl.Resources> <Grid DataContext="{Binding Path=Games, Source={StaticResource TheViewModel}}"> ... </Grid>

MVVM Variations - 2

• ViewModel first– View is injected into the ViewModel’s constructor• Example:

– ViewModel is created then the View is created using Dependency Injection

public MyViewModel{ public MyViewModel(IMyView view) { }}

MVVM Variations - 3

• ViewModel and View are created through an intermediary, then paired togethervm = new MyVM();view = new MyView();view.DataContext = vm;

// With Unityvm = container.Resolve<IMyVM>();view = container.Resolve<MyView>();view.DataContext = vm;

From Now On We’re Using ViewFirst

<3

Don’t look up!

• View only knows ViewModel

• ViewModel only knows Model

• The Model stands alone

ICommand interface

• Available in Silverlight 4– ButtonBase and Hyperlink now have Command

and CommandParameter properties<Button Content="Load Products" Width="120"

Command="{Binding FindMatchingProducts}" CommandParameter="{Binding Path=Text, ElementName=CostThresholdFilter}"/>

public interface ICommand{

bool CanExecute(Object parameter);void Execute(Object parameter);event EventHandler CanExecuteChanged;

)

Tools to make it simple

• There are several tools available:– Prism

• www.codeplex.com/CompositeWPF

– Caliburn• www.codeplex.com/caliburn

– Silverlight.FX• projects.nikhilk.net/SilverlightFX

– MVVM Light Toolkit• www.codeplex.com/mvvmlight

• You can build your own MVVM framework• Comparison list at

http://www.japf.fr/silverlight/mvvm/index.html

demoViewFirst MVVM

MEFManaged Extensibility Framework

MEF Intro

• Library for building extensible applications

• Part of Silverlight 4• Silverlight 3 support– mef.codeplex.com

• Prism support– mefcontrib.codeplex.com

• Open source

MEF Basics

• An application is built of Parts

The MEF “Motto”

Export it.

Import it.

Compose it.

Export it

Widget1

[Export(typeof(UserControl))]public class Widget1 : UserControl{

public string Message { get{return(string) Button.Content;}

set{Button.Content=value;} }}

Export

UserControl

Import it

MainPage

[Export(typeof(UserControl))]public class MainPage: UserControl{

[ImportMany(typeof(UserControl))]public IEnumerable<UserControl> { get;set;}

}

ImportMany

UserControl

Compose itPartIntializer: “Compose yourself”

MainPage Compose

public MainPage() { InitializeComponent(); PartInitializer.SatisfyImports(this); }

demoAdding social widgets

Scenarios MVVM + MEF together?

I, MVVM, take you MEF, to be my wife, to have and to hold from this day forward, for better or for worse, for richer, for poorer, in sickness and in health, to love and to cherish; from this day forward until death do us part.

Thanks!

Ricardo FielSenior EngineerFullsix Portugalricardo.fiel@fullsix.com@theplastictoy

xamlpt.com/blogs/rfiel/pontonetpt.com/blogs/rfiel/

blogs.fullsix.ptlabs.fullsix.pt

Please keep in touch!