Part 2: this post
Prep Work and Catch Up
Now that Part 1 is complete and we have seen how to create a simple Xamarin cross platform application with some customized navigation elements its time to put some business use cases behind it by coupling it with an Enterprise Back End like Windows Azure Mobile Services (WAMS). This post will walk you through the prep work to wire up a Xamarin.Forms project to a WAMs service and end by showing a few options for display as well as some of the CRUD operations that can be undertaken.
Below we create the MVVM pattern, we start by creating the Model folder, we already have the Views Folder, and all that’s left is the ViewModel folder to complete the MVVM circle, I also include a helper folder for utilities and the like as you can see below.
In order to build out the scaffolding for the Mobile Application we need to go back and revisit the actual WAMS project/solution. As you can see below, and pay special attention to the DataObjects folder, this is reflective of the Models folder in the Mobile App and will hold the same kind of objects in this case the classes are data objects that map back to the data schema in the underlying SQL Azure database. The TodoItem.cs in the Data Objects is the class representing the data schema, and the TodoItemController.cs is a controller that performs the CRUD operations against the underlying database.
below you see a few things happening, we have a look inside TodoItem.cs that shows the two getters and setters for the Text string property and the boolean Complete property, notice that this class Inherits from EntityData. We are using Entity Framework 6 here in a Code-First fashion to manage the database object.
As this is a Code-First effort, and we are using a mobile app to interact with the WAMS and underlying SQL Azure data, we are going to Seed the Table we are primarily working with so that when the mobile app opens up for the first time, it will actually return something and not come back with a blank screen. See below.
There is a few things to call out when you are implementing the TodoItem class in the Mobile Application. Notice in (1) we are adding a Id property that is of type string, this maps back to the Guid.NewGuid().Tostring() in the above screen shot and underlying schema. We also see in (2) that WindowsAzure.MobileServices is being used but there is an issue. The issue is that the reference is not yet placed in each Platform specific code, remember, Shared Projects do not have Reference objects… but we will fix that shortly.
Looking at the iOS Platform code, we expand the Packages folder and you can also see that there are updates available since the time the template was created, we do those first… then…
we click on the gear icon next to “packages” folder and select “Add Packages” this will open up the Nuget Package Gallery…
inside the Nuget Gallery, we will search for Windows Azure Mobile Service and put a check box as you see below, pay special attention to the dependencies that are also included. this will cause us some grief later on but I also show you how to fix it.. basically it loads other versions of System.Net.Http, System.IO, System.Threading that needs to be replaced
Once you add the package and look again at the iOS implementation of the TodoItem class, you see that the using statement is now ok.
As we are also working with SQL Azure database, with Azure Mobile Service, it allows us the ability to Sync data between our Mobile App through SQL Lite and WAMS, we do this by also including a package for SQL Lite Store, so we also select the checkbox below and note the dependencies as well.
now this takes care of the iOS platform as you can see below, but we need to do the same the Droid (Android) as well.
Once you complete both platforms, and try to do a build/compile (at the time of this writing) you will get the errors below
a closer inspection will reveal the below and as I mentioned above, this is because the packages also include its own version of those assemblies, what I do is KEEP the ones that come with the package and remove the original
as an example here’s a few below, first we go under references and do “edit references” and
then we search for the items individually
remove them, once you rebuild, you should be good to go.
Connecting to Windows Azure Mobile Service (WAMS)
The next thing on the agenda is to build out the Data Services Layer (ViewModel) and we are going to create a class called TodoService as you see below
we will need the references to all the WAMS and SQLLite as you see below and we are also using compiler directives for elements that are platform specific(2)
Next you will need to populate the WAMS uri and Key and we have a local instance of Items to hold the data captured from the Mobile App(2) and then we have a todoTable as the Mobile Services Sync Table then we call the InitializeAsync method to make the connections to WAMS.
Now, I could have fixed this ahead of time but I know this can be a potential gotcha as you can see below but..
but we remedy that by going to the AppDelegate and adding references and initializer ahead of the calling controller, this ensures that we have these elements accessible to us when the form loads, look at (1) below
Once we have all of that, we can test it out.
Test and Extend
We will test the iOS Mobile App first we have below, not in(1) we have the seeded items returned and we are in the “Load Todo Items” Tabbed page…
below is the code that shows how the page is structured
now we test it in Android and without any changes in code, we get a functional app as well.
Extend to Add Items
What we will do now is put a page (screen) by using the second Tabbed Page “Add Todo Item”, this page as you can see below has a label, and entry and button control.
when you populate it with data and press Save..
you get the item below when you go back to the page that loads the persisted data.
We also test it in Android and …
we have the same experience
Extend to add a customized Cell in the List View
We can also make this a bit more informative by extending the cell that currently has 1 data field bound to it by adding two data fields loaded “horizontally” see below
we go back to the tabbed page that loads data and change it from being bound directly to calling the new Cell page.
Now when we test it, Android first we have both the Text and whether it is complete in the same row
and in iOS we have the below
Just to Trust but Verify, if we look at the underlying database by running a query we get all the items we tested with.
Summary and Wrap Up
I hope this was helpful, leave me questions and comments as you see fit. Cheers.