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.

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:

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:

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"
   

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

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

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

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:
   

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:
   

2. Select "Data"
   

3. Create a new table called Person
   

4. Select the Person table and explore it
   

   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:
   
   

   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:

   

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.

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.
   

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:
   

   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();

   

   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: