What is MVVM, Managed Extensibility Framework (MEF)
1. Create a Silverlight Application(Version 4). Add web project to it when prompted (call it MySLApplication).
2. Add a folder called Models in your server project(MySLApplication.Web)
3. Add an interface called IModel which will be interface for your data Model.
Public Interface IModel
Function GetData() As List(Of String)
Sub AddData(ByVal Title As String)
End Interface
4. Add 2 references to MyApplication.Web, Download MEF Preview 9(link at top) if you have not done already and decompress it, add reference to System.ComponentModel.Composition(which will be in bin\sl\ folder)
5. Add a class implementing IModel as follow in same Model Folder you can add another class in same file to instantiate MyDataModel
<Export(GetType(IModel))>
Public Class MyDataModel
Implements IModel
Private ReturnData As New List(Of String)
Public Sub New()
'Adding data mnaully but you might get it form your database
ReturnData.Add("Learn Silverlight")
ReturnData.Add("MEF in Silverlight")
End Sub
Public Sub AddData(ByVal Title As String) Implements IModel.AddData
ReturnData.Add(Title)
End Sub
Public Function GetData() As List(Of String) Implements IModel.GetData
Return ReturnData
End Function
End Class
Now we have data model ready which is going to be consumed by a listbox in our silverlight application. We are going to implement Model View View Model pattern to display our data.
6. So in silverlight client project(MyApplication), Add a folder called ViewModels
7. Now we are adding a base class for our ViewModels implementing INotifyPropertyChanged. So add a class called ViewModelBase in ViewModels Folder as below
Imports System.ComponentModel
Public Class ViewModelBase
Implements INotifyPropertyChanged
Sub New()
'Anything we want to intialize for all our viewmodels
End Sub
Protected Sub OnPropertyChanged(ByVal PropertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(PropertyName))
End Sub
Public Event PropertyChanged(ByVal sender As Object, ByVal e As _
System.ComponentModel.PropertyChangedEventArgs) Implements _
System.ComponentModel.INotifyPropertyChanged.PropertyChanged
End Class
8. In ViewModels folder lets create a class called MainPageViewModel which we are going to bind to our MainPage
Imports System.ComponentModel.Composition
'probably using constant is better for attribute value
<Export("MainPageViewModel")>
Public Class MainPageViewModel
Inherits ViewModelBase
'Name MyModel can be anything, only interface IModel is used to find data
<Import()>
Public Property MyModel As IModel
Sub New()
CompositionInitializer.SatisfyImports(Me)
Books = MyModel.GetData()
End Sub
Public Property Books As List(Of String)
End Class
9.
10. Open MainPage.xaml file and add a list box with binding it to Books
<ListBox Height="100" ItemsSource="{Binding Books}" HorizontalAlignment="Left" Margin="132,98,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120" />
11. Open MainPage.xaml.cs and modify Sub New as following
Public Sub New()
InitializeComponent()
CompositionInitializer.SatisfyImports(Me)
End Sub
<Import("MainPageViewModel")>
Public WriteOnly Property MainPageViewModel As Object
Set(ByVal value As Object)
Me.DataContext = value
End Set
End Property
12. Build your application and run it, you will be able to see 2 books listed in listbox
In my next blog I will write about how to handle commands in ViewModel and also about WCF RIA WCF services.
Download source application below.
MySLApplication.zip (1.02 mb)