At this point I’m rather postponing the inevitable need to add an MVVM framework into my application. I’m not going to delve into into what MVVM is as I think that’s a conversation for another day and there are existing sites/reference that more than do this topic justice. However, enough to say that there is an important role for MVVM in the mobile app development space, particularly with Windows platform and Xamarin.Forms where we can use data binding. The reason I’ve been putting it off is that in the past I would have gone the MVVMcross route but I’m yet to see this work against Xamarin.Forms. This leaves me with the need to evaluate other frameworks such as MvvmLite (a long term player in the MVVM space), ReactiveUI and Calcium. I’m still on the hunt for the next killer framework that I’ll use religiously, in the meantime I’m going to avoid the need to make a decision by starting by manually creating and assigning the viewmodel for the main page of the application.
To abstract our view models away from the specifics of how the data is going to be presented (ie the premise of MVVM) I’ll create a separate Portable Class Library which will contain my view models.
When setting the targets, don’t forget to include Windows Phone Silverlight 8, otherwise you won’t be able to use the PCL from the XForms project.
Into this library I’ll create a ViewModels folder and then my first view model, MainViewModel. I’ll then migrate the logic that I had in my shared code from my Windows platform applications across into this view model. This includes
– Adding NuGet package reference to the Microsoft.WindowsAzure.Mobile and Microsoft.WindowsAzure.Mobile.SQLiteStore (just add the latter as the former will be added automatically)
– Add reference to the shared entities project so that the view models can access the data entities
– Remove references to the shared entities projects from the Windows platform projects (otherwise you’ll end up with type reference errors since you’ll effectively have two copies of the entity classes).
– Move the MobileServiceClientExtensions class I created previously into the new portable class library
– Add reference to the new PCL to the XForms and Windows platform projects.
The final outcome is a view model which loads all the properties when the LoadPropertyData method is invoked
public class MainViewModel
{
public static MobileServiceClient MobileService = new MobileServiceClient(
“https://realestateinspector.azure-mobile.net/”,
“wpxaIplpeX—————————–g12”
);
private ObservableCollection<RealEstateProperty> properties = new ObservableCollection<RealEstateProperty>();
public ObservableCollection<RealEstateProperty> Properties
{
get { return properties; }
}
public async Task LoadPropertyData()
{
var data = new MobileServiceSQLiteStore(“inspections.db”);
data.DefineTable<RealEstateProperty>();
data.DefineTable<Inspection>();
await MobileService.SyncContext.InitializeAsync(data, new MobileServiceSyncHandler());
await MobileService.PullLatestAsync<RealEstateProperty>();
await MobileService.PullLatestAsync<Inspection>();
var props = await MobileService.GetSyncTable<RealEstateProperty>().ToListAsync();
foreach (var prop in props)
{
Properties.Add(prop);
}
}
}
Let’s return to our Windows platform applications and wire up a basic interface. In the MainPage.xaml for the Windows project I’ll add some basic layout – this is just to demonstrate that properties are being synchronised and loaded.
<Page
x_Class=”RealEstateInspector.MainPage”
“>”
“>”
“>”
“>”
mc_Ignorable=”d”>
<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<Grid.Resources>
<DataTemplate
x_Key=”PropertyItemTemplate”>
<TextBlock
Text=”{Binding Address}”
FontSize=”30″
Foreground=”WhiteSmoke”/>
</DataTemplate>
</Grid.Resources>
<ListView ItemTemplate=”{StaticResource PropertyItemTemplate}”
ItemsSource=”{Binding Properties}”/>
</Grid>
</Page>