Telerik blogs

[Part 1Part 2Part 3Part 4Part 5]

Hello everyone,

With the recent release of our cloud-powered controls for Windows Phone 8, now is a great time to begin using them. Using these components, they can help you create an application that stores its data in the cloud that can be easily accessed by multiple users on multiple devices. In this blog post, I will walk you through several of the cloud-powered controls currently available and teach you how to use them in your app. We’ll create an app called “AppointmentTracker”, which allows users to store information about upcoming appointments and so forth.

Getting Setup

Before we can get started, make sure that you have the latest bits installed. The Q3 2013 release contains both our traditional components as well as our cloud components.

After you have installed our controls, you will find several new templates. The one we are interested in working with today is called “Telerik Cloud Powered Windows Phone App” as shown in Figure 1.

1

Figure 1: The new cloud template installed with RadControls for Windows Phone 8.

The “Telerik Cloud Powered Windows Phone App” template is where we are going to begin, so select it and give it a name and press OK.

After doing so, you will be presented with a Cloud Services Configuration dialog, where you will need to enter your username and password and accept the terms and conditions. From this screen you can either select an existing project or create a new one. Let’s create a new one as shown in Figure 2. This information will carry over to our Everlive account which we will take a look at shortly.

2

Figure 2: Creating a new project with our Cloud Controls.

From here, we can simply click the “Create” button, then finish and our project will be loaded in Visual Studio 2012 or 2013.

Changing the Configuration Type

Launch the Configuration Manager and change the “Active Solution Platform” to x86 instead of ARM, where we can test this on an emulator instead of a device as shown in Figure 3.

3

Figure 3: Changing the Configuration Manager.

The Appointment Tracker App

Now that the app is created and connected to the cloud service, let’s add three Windows Phone Portrait pages. First add a folder called “Views” and then add three pages Login.xaml, Registration.xaml and Appointment.xaml inside this folder. You can go ahead and change the TitlePanel in the Registration.xaml and Appointment.xaml to something more appropriate instead of the default text.
Next, you may go ahead and delete the MainPage.xaml file and edit the WMAppManifest.xml to start the Navigation Page to /Views/Login.xaml.

Login.xaml Page

We are going to begin by editing our Login.xaml page by replacing the ContentPanel with the following XAML.

<!--ContentPanel - place additional content here-->
 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <telerikCloudControls:RadCloudLogin 
 x:Name="cloudLogin" 
 SuccessNavigationUri="/Views/Appointment.xaml"
 RegisterNavigationUri="/Views/Registration.xaml"> <telerikCloudControls:RadCloudLogin.LoginProviders>
 <telerikCloudControls:FacebookLoginProvider 
 ClientId="YOUR_CLIENT_ID" 
 ClientSecret="YOUR_CLIENT_SECRET"/>
 <telerikCloudControls:GoogleLoginProvider
 ClientId="YOUR_CLIENT_ID "
 ClientSecret="YOUR_CLIENT_SECRET "/>
 <telerikCloudControls:LiveIDLoginProvider
 ClientId="YOUR_CLIENT_ID "
 ClientSecret="YOUR_CLIENT_SECRET "/>
 </telerikCloudControls:RadCloudLogin.LoginProviders>
 </telerikCloudControls:RadCloudLogin>
 </Grid>

While we are here, let’s map the telerikCloudControls prefix to the Telerik.Windows.Controls.Cloud namespace on all pages:

xmlns:telerikCloud="clr-namespace:Telerik.Windows.Controls.Cloud;assembly=Telerik.Windows.Controls.Cloud"

Let’s examine what we’ve done so far, we’ve used one cloud-control called RadCloudLogin and provided the path to two pages if the registration succeeds or if they need to register. After that we’ve used our new Social LoginProviders to make registration even simpler by adding in support for FaceBook, Google and LiveID. You will need to create an app on the social network in order to get the ClientID and ClientSecret. A page in our help documentation describes this in more detail. In my example, I’m using Facebook, so I headed to https://developers.facebook.com/apps and created a new app as shown below. Now I have my ClientId and ClientSecret.

8

If we look at our designer, we should have the following screen as shown in Figure 4.

4

Figure 4: RadCloudLogin with the various social providers.

Please note that Google and LiveID you will need to setup an app similar to the one we did for Facebook.

Let’s switch over to everlive.com and log into our AppointmentTracker instance and go to settings, then user authentication. Make sure you have a check mark in Facebook, Google and Windows Live as shown in Figure 5. This will give our app more flexibility in the future if we chose to add Google and the the Live ID providers.

5

Figure 5: Adding Everlive permissions to the various social providers.

If we run our app with a valid Client ID and Client Secret for Facebook, we would see the following screen after the user touches the Facebook provider as shown in Figure 6.

6

Figure 6: Using Facebook instead of creating another username and password.

As you can see we can now log in using Facebook and after a successful login, it will take us to our stubbed out “Appointment.xaml” page as shown in Figure 7.

7

Figure 7: Stubbed out Appointment.xaml page.

If we look at our Users table, which was automatically generated for us in Everlive. You will see our user has been added as shown in Figure 8.

9

Figure 8: The User Table in Everlive showing the user we just added and Facebook being a provider.

What’s next?

So far, we’ve started an app that uses Everlive as its backend storage mechanism, modified the user permissions to use social logins, created our first Facebook app and used our first cloud component control called RadCloudLogin. In the next part of the series, we will fill in the gaps, by adding in the Login.xaml page as well as begin to use other cloud-powered component such as RadCloudRegistration (in case they choose not to use a social provider) as well as tie in our RadCloudCalendar control. All of this is coming in part 2, so stay tuned!

Thanks,

Michael Crump
@mbcrump


MichaelCrump
About the Author

Michael Crump

is a Microsoft MVP, Pluralsight and MSDN author as well as an international speaker. He works at Telerik with a focus on everything mobile.  You can follow him on Twitter at @mbcrump or keep up with his various blogs by visiting his Telerik Blog or his Personal Blog.

Comments

Comments are disabled in preview mode.