Telerik UI for Windows Phone by Progress

This topic focuses on how the Telerik Cloud Synchronization mechanism is manually integrated into your Windows Phone application using the Telerik Everlive Cloud services.

Overview

The Telerik Cloud Synchronization mechanism is currently shipped with support for Telerik Everlive Cloud Services and Azure Mobile Services. The local storage support is provided by the Telerik Windows 8 Data Storage Component. The usage of the Telerik Windows 8 Data Storage Component implies building your project either for the x86 platform (when debugging with the Emulator) or ARM when deploying on a device. For that purpose Telerik ships two versions of the assemblies needed to use the Telerik Cloud Synchronization mechanism which reside in a x86 and ARM folders within the main binaries folder in the Telerik installation folder.

If you want to deploy your Windows Phone application on the Emulator during development, you will need to reference the assemblies from the x86 folder, otherwise you will have to use the ARM version.

The following section explains how to integrate the Telerik Cloud Synchronization Mechanism into your Windows Phone app using the Telerik Everlive Cloud Services.

Manually integrating the Telerik Cloud Synchronization Mechanism into your Windows Phone application

The following steps will guide you through the process of manually integrating the Telerik Cloud Synchronization mechanism into your Windows Phone application. The Telerik Everlive Cloud services will be used as a Cloud Service Provider in this demo.

  1. Create a new Windows Phone app project in Visual Studio 2012.
  2. Add references to the following assemblies either choosing them from the x86 or ARM folders (depending on whether you want to deploy on the Emulator or on a Device):

    • Telerik.Windows.Core.Cloud.dll
    • Telerik.Windows.Core.Cloud.Everlive.dll
    • Telerik.Windows.Synchronization.Cloud.dll
    • Telerik.Windows.Synchronization.Cloud.Everlive.dll
    • Telerik.Everlive.Sdk.dll
    • Newtonsoft.Json.dll
    • Telerik.Storage_WP.winmd
    • Telerik.Storage_WP.dll

  3. Go to the App.xaml.cs file of your application and define a InitializeProvider method that is called in the application constructor as follows:

    CopyC#
    /// <summary>
    /// Constructor for the Application object.
    /// </summary>
    public App()
    {
        // Global handler for uncaught exceptions.
        UnhandledException += Application_UnhandledException;
    
        // Standard XAML initialization
        InitializeComponent();
    
        // Phone-specific initialization
        InitializePhoneApplication();
    
        // Language display initialization
        InitializeLanguage();
    
        // Show graphics profiling information while debugging.
        if (Debugger.IsAttached)
        {
            // Display the current frame rate counters.
            Application.Current.Host.Settings.EnableFrameRateCounter = true;
    
            // Show the areas of the app that are being redrawn in each frame.
            //Application.Current.Host.Settings.EnableRedrawRegions = true;
    
            // Enable non-production analysis visualization mode,
            // which shows areas of a page that are handed off to GPU with a colored overlay.
            //Application.Current.Host.Settings.EnableCacheVisualization = true;
    
            // Prevent the screen from turning off while under the debugger by disabling
            // the application's idle detection.
            // Caution:- Use this under debug mode only. Application that disables user idle detection will continue to run
            // and consume battery power when the user is not using the phone.
            PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;
        }
    
        this.InitializeProvider();
    
    }
    
    private void InitializeProvider()
    {
       EverliveProviderSettings settings = new EverliveProviderSettings();
       settings.ApiKey = "<your-api-key-comes-here>";
       CloudProvider.Init(settings);
    }

  4. Create a MainViewModel.cs class in your Windows Phone project following the template shown below:

    CopyC#
    public class MainViewModel
    {
        private static MainViewModel instance;
    
        private MainViewModel()
        {
        }
    
        public static MainViewModel Instance
        {
            get
            {
                if (instance == null)
                {
                    instance = new MainViewModel();
                }
    
                return instance;
            }
        }
    }

  5. Open the Telerik Everlive (http://www.everlive.com) backend portal, create a new application or choose an existing one and create a new Content type called 'Task'. The following screenshot demonstrates from where a new Content Type is created in the Telerik Everlive portal:

    Synchronization-Manual 2

    Create a new Task.cs class and inherit from the Telerik.Windows.Cloud.SynchronizableDataItem class. The SynchronizableDataItem class provides the infrastructure to use the Telerik Everlive Cloud Services for synchronizing instances of the Task class. Also, make sure that the class is mapped to the newly created Content Type in the backend portal. One way of doing this is giving the class the same name as the Content Type's or simply using the ServerTypeName attribute on the class:

    CopyC#
    [ServerTypeAttribute("Tasks")]
    public class Task : SynchronizableDataItem
    {
        private string name;
        private string description;
        private DateTime dueDate;
    
        public string Name
        {
            get
            {
                return this.name;
            }
            set
            {
                if (this.name != value)
                {
                    this.name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }
    
        public string Description
        {
            get
            {
                return this.description;
            }
            set
            {
                if (this.description != value)
                {
                    this.description = value;
                    this.OnPropertyChanged("Description");
                }
            }
        }
    
        public DateTime DueDate
        {
            get
            {
                return this.dueDate;
            }
            set
            {
                if (this.dueDate != value)
                {
                    this.dueDate = value;
                    this.OnPropertyChanged("DueDate");
                }
            }
        }
    }

  6. Extend the already created MainViewModel.cs class as follows:

    CopyC#
    public class MainViewModel
    {
        private static MainViewModel instance;
        private SynchronizationContext<Task> tasksContext;
    
        private MainViewModel()
        {
            SynchronizationContextPool.RegisterContextForType<Task>(new EverliveSyncServiceProvider<Task>("local_db"));
            this.tasksContext = SynchronizationContextPool.GetContextForType<Task>();
        }
    
        public static MainViewModel Instance
        {
            get
            {
                if (instance == null)
                {
                    instance = new MainViewModel();
                }
    
                return instance;
            }
        }
    
        public IEnumerable<Task> Tasks
        {
            get
            {
                return this.tasksContext.View;
            }
        }
    
        public SynchronizationContext<Task> TasksContext
        {
            get
            {
                return this.tasksContext;
            }
        }
    }

    As you can see, a SynchronizationContext instance is registered and obtained. This instance is the point where the synchronization logic for Task instances is performed. It gives you the ability to add new instances, delete existing ones and perform synchronization. For more information about the SynchronizationContext class, take a look at the corresponding article.