Xamarin.Forms – Basic Stuff to WAMS Expert–Part 2 2


Series

Part 1: http://www.fabiangwilliams.com/2015/06/18/xamarin-forms-basic-stuff-to-wams-expert/ 

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.

image

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.

image

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.

image

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.

image

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.

image

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…

image

we click on the gear icon next to “packages” folder and select “Add Packages” this will open up the Nuget Package Gallery…

image

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

image

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.

image

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.

image

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.

image

Once you complete both platforms, and try to do a build/compile (at the time of this writing) you will get the errors below

image

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

image

as an example here’s a few below, first we go under references and do “edit references” and

image

then we search for the items individually

image

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

image

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)

image

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.

image

Now, I could have fixed this ahead of time but I know this can be a potential gotcha as you can see below but..

image

image

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

image

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…

image

below is the code that shows how the page is structured

image

now we test it in Android and without any changes in code, we get a functional app as well.

image

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.

image

when you populate it with data and press Save..

image

you get the item below when you go back to the page that loads the persisted data.

image

We also test it in Android and …

image

we have the same experience

image

and

image

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

image

we go back to the tabbed page that loads data and change it from being bound directly to calling the new Cell page.

image

Now when we test it, Android first we have both the Text and whether it is complete in the same row

image

and in iOS we have the below

image

Just to Trust but Verify, if we look at the underlying database by running a query we get all the items we tested with.

image

Summary and Wrap Up

I hope this was helpful, leave me questions and comments as you see fit. Cheers.


Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “Xamarin.Forms – Basic Stuff to WAMS Expert–Part 2