Telerik UI for Windows Phone by Progress

Getting started with Azure Cloud Synchronization

To use the Telerik Cloud Synchronization mechanism with Azure Mobile Services, you have two options:

  • Create a new Windows Phone application by using the Azure Synchronization App for Windows Phone Visual Studio project template
  • Manually integrate the mechanism into an existing Windows Phone application project

Note
The following paragraphs assume that you have Telerik UI for Windows Phone installed on your machine and a valid subscription for Azure Mobile Services.

Creating a new Azure Cloud Synchronization Windows Phone application

This topic will use the Telerik Azure Cloud Synchronization Windows Phone app Project Wizard that comes with the Telerik UI for Windows Phone package. This wizard creates a sample Windows Phone application that uses the Azure cloud to create, update and delete Person objects. The app stores the Person items both locally and in the Azure cloud. In addition it allows offline data access and uses the Telerik Cloud Synchronization Mechanism to synchronize these items among multiple devices.

To create a Telerik Cloud Synchronization enabled application choose the Telerik Azure Cloud Synchronization Windows Phone App project template in the New Project dialog of Visual Studio 2012:

Synchronization Cloud Wizard Azure 1

The Telerik Azure Cloud Synchronization Windows Phone App template allows you to create a Windows Phone app project which is configured to use the Azure Cloud Services. After choosing this project template you will be presented with Wizard which will ask you for your Azure’s Service Key and Service Uri:

Synchronization Cloud Wizard Azure 2

You can obtain the service key and URI from the Azure Mobile Services portal where your Azure Mobile Service is configured. To do so follow these instructions:

  1. Go to https://manage.windowsazure.com/#Workspaces/All/dashboard and log into your Azure account.
  2. Go to "Mobile Services"

    Synchronization Cloud Wizard Azure 3

  3. Select the mobile service (this is the equivalent of an Everlive project) you want to connect to and open it:

    Synchronization Cloud Wizard Azure 4

  4. Obtain the Service Uri and Service Key by selecting "Windows Phone 8" and then expanding "Connect to an existing Windows Phone 8 app"

    Synchronization Cloud Wizard Azure 5

  5. Paste the Service Key and Service Uri in the respective fields and hit OK:

    Synchronization Cloud Wizard Azure 6

  6. Once you’ve obtained your Azure service key and service uri, hit OK and Visual Studio will take care of producing a ready to run application that has the following Azure initialization in the App.xaml.cs file:

    Synchronization Cloud Wizard Azure 7

Now that the app has been set up correctly, it is time to feed it with some data. First, you’ll have to create your Azure content type and configure it appropriately. Please follow the instruction below.

  1. Go to the Azure Mobile Services dev portal and open the Azure Mobile Service with which you have just associated your Windows Phone application:

    Synchronization Cloud Wizard Azure 4

  2. Select "Data"

    Synchronization Cloud Wizard Azure 8

  3. Create a new table called Person

    Synchronization Cloud Wizard Azure 9

  4. Select the Person table and explore it

    Synchronization Cloud Wizard Azure 10

    Note
    For the moment, don’t worry about the columns (properties) our Person object will have. When dynamic schema is enabled on your Azure mobile service, new columns are created automatically when JSON objects are sent to the mobile service by an insert or update operation. This means that you will be able to define your Person’s properties in the Windows Phone app and Azure will make sure to create the appropriate columns.

  5. This is a very important step, so do not skip it. To enable the Telerik Cloud Data Synchronization mechanism to work properly with the Azure cloud, the server-side Insert and Update scripts need to be configured. Go to the Script tab and examine the default Insert and Update scripts:

    Synchronization Cloud Wizard Azure 11

    Synchronization Cloud Wizard Azure 12

    The changes that need to be made are as follows:

    The Insert script becomes:

    CopyJScript.NET
    function insert(item, user, request) {
        item.createdAt = item.modifiedAt = new Date();
        request.execute();
    }

    The Update script becomes:

    CopyJScript.NET
    function update(item, user, request) {
        item.modifiedAt = new Date();
        request.execute();
    }

    Make sure you save the changes before proceeding further:

    Synchronization Cloud Wizard Azure 13

This is what you need to do on the Azure Mobile Services portal so that the Telerik Cloud Synchronization mechanism can work with the chosen mobile service.

Utilizing the Azure Cloud Synchronization app

The newly created Windows Phone application project implements a very simple scenario in which Person instances are created and synchronized with the corresponding Azure Mobile Service. For that purpose you will find a class called Person in the Models folder within your project structure. Another MainViewModel class is also defined which exposes the SynchronizationContext instance that synchronizes with Azure.

You will also notice that the Person class inherits from the AzureSynchronizableCloudItem class. This class provides the needed infrastructure to synchronize objects with the corresponding Azure Mobile Service:

CopyC#
public class Person : AzureSynchronizableCloudItem
{
    private int age;
    private string name;

    public int Age 
    { 
        get
        {
            return this.age;
        }
        set
        {
            if (this.age != value)
            {
                this.age = value;
                this.OnPropertyChanged("Age");
            }
        }
    }

    public int Name 
    { 
        get
        {
            return this.name;
        }
        set
        {
            if (this.name != value)
            {
                this.name = value;
                this.OnPropertyChanged("Name");
            }
        }
    }
}

Let's run the application and create a new Person and synchronize it with our Azure Mobile Service:

  1. Run the application on the Windows Phone emulator or on a real device. Make sure you have an Internet connection.

    Synchronization Cloud Wizard Azure 14

  2. When the main page loads, a synchronization is performed as you can see in the MainPage.xaml.cs file:

    CopyC#
    private async void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        await MainViewModel.Instance.Context.SynchronizeAsync();
    }

    This call will perform a full sync for the Person type as described in this section The Synchronization Context class.

  3. Now let's tap on the Add button and navigate to the page where a new person can be added:

    Synchronization Cloud Wizard Azure 15

    Fill in the required information and click on the 'Add' button. This will execute the following code:

    CopyC#
    string name = this.nameBox.Text;
    if (string.IsNullOrEmpty(name))
    {
        await RadMessageBox.ShowAsync("Invalid Name!");
        return;
    }
    
    // Check whether the age is in correct format
    double result;
    bool success = double.TryParse(this.ageBox.Text, out result);
    int age;
    if (success && (int)result > 0)
    {
        age = (int)result;
    }
    else
    {
        await RadMessageBox.ShowAsync("Invalid Age!");
        return;
    }
    
    // Synchronize the newly created person
    this.newPerson.Name = name;
    this.newPerson.Age = age;
    await this.newPerson.SynchronizeAsync();
    NavigationService.GoBack();

    Synchronization Cloud Wizard Azure 16

    As you can see, the new Person object is created, populated and a call of the Person.SynchronizeAsync method is made.

    Note
    The SynchronizeAsync method is inherited from the AzureSynchronizableCloudItem class.

    This call will add the new instance to the local storage of your phone and will upload it into the current Azure Mobile Service:

    Synchronization Cloud Wizard Azure 17