It’s time for the fifth and final part of the series of blog posts created to show you how to integrate each of Telerik’s cloud-powered controls for Windows Phone into a single app. This post will show you how you can bring the communication with your users to the next level so that you can easily reach them anywhere at any time.
The application that we are using to present the controls is called Memories. It allows users to store the most memorable moments in their lives. First we added the user's authentication, then we added the memory items, their galleries and last time we allowed the users to save their preferences as application settings and added error notifications that would help us find any existing issues in our application. This time we will focus on the communication with the user by extending our app with notifications and feedback capabilities.
Wouldn’t it be nice if you could promote your new application to your existing user base? Wouldn’t it be nice if you could share your new website with them? Wouldn’t it be nice if you could notify them about the features introduced in the latest update? RadCloudNotificationControl comes to the rescue.
We are going to use the control to check for new notifications and display the first that has not been shown yet. All we need to do is add an instance of the control where we want to display the notification and call the method ShowFirstNotificationAsync:
Memories.xaml.cs:private
async
void
CheckForNotifications()
{
RadCloudNotificationControl notificationControl =
new
RadCloudNotificationControl(
typeof
(EverliveNotificationItem));
await notificationControl.ShowFirstNotificationAsync();
}
You can call the method when you want the notification to be displayed, for example at the end of the page constructor of the Memories page:
public
Memories()
{
InitializeComponent();
…
this
.CheckForNotifications();
}
At this point the application is actually ready to be released, however when we want to send an actual notification, we will need to define it on Everlive.com. If you want to have custom notification type you can easily extend the default EverliveNotificationItem and specify your custom type when you initialize RadCloudNotificationControl. For our application the default notification type will be more than enough. So let’s go to Everlive.com and create the structure of the EverliveNotificationItem type:
Now let’s take a closer look at the fields that we have just added. Title and Message obviously contain the title and the message of our notification. TaskToExecute and TaskToExecuteArgs allow us to execute a specific action if the user is interested in our notification. TaskToExecute is an enumeration with these possible values:
public
enum
TaskToExecute
{
None = 0,
MarketplaceDetail = 1,
WebBrowser = 2,
AppNavigation = 3,
}
They relate to the action that will be executed, if the user presses OK, with the arguments defined as TaskToExecuteArgs. If we use MarketplaceDetail, the user will be navigated to an app in the marketplace. If we use WebBrowser, the user will be navigated to a web page. And if we use AppNavigation, the user will be navigated to a page within the application. IsActive allows us to create notifications in advance, but activate them when they become relevant.
Let’s create our first notification. Open the EverliveNotificationItem content type on Everlive.com and choose “add an item”. Create this item:
Since we chose the WebBrowser task, if the user presses Yes, they will be navigated to the page of Windows Phone at Telerik’s website, because this is the address that we defined in our notification.
The last feature that we will introduce in the Memories application is the ability to get feedback from the users and send them responses within the app. Let’s add a new page that the users will be able to send their feedback. Add a new page in the Views folder and name it SendFeedback and add the telerikPrimitives prefix:
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
<
Grid
x:Name
=
"ContentPanel"
Grid.Row
=
"1"
Margin
=
"12,0,12,0"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
telerikPrimitives:RadTextBox
x:Name
=
"feedbackContent"
TextChanged
=
"OnFeedbackContent_TextChanged"
AcceptsReturn
=
"True"
MinHeight
=
"181"
/>
<
Button
Grid.Row
=
"1"
IsEnabled
=
"False"
x:Name
=
"sendButton"
Content
=
"send"
Click
=
"OnSendButton_Click"
/>
</
Grid
>
private
async
void
OnSendButton_Click(
object
sender, RoutedEventArgs e)
{
EverliveFeedbackItem feedbackItem =
new
EverliveFeedbackItem();
feedbackItem.Message = feedbackContent.Text;
feedbackItem.CreationDate = DateTime.Now.ToLocalTime();
await RadCloudFeedbackControl.SendFeedback(feedbackItem);
this
.NavigationService.GoBack();
}
private
void
OnFeedbackContent_TextChanged(
object
sender, TextChangedEventArgs e)
{
sendButton.IsEnabled = !
string
.IsNullOrEmpty(feedbackContent.Text);
}
EverliveFeedbackItem is the default value type for items handled by RadCloudFeedbackControl. You can easily extend it, but it won’t be necessary for our app since it already contains all the information that we will need.
Let’s define the EverliveFeedbackItem on Everlive.com as a new content type with the following structure:
We have a page for sending new feedback, but we will also need a page where the feedback history is accessible and where the user will be able to see the developer’s responses. Let add a new page and name it Feedback:
<
Grid
x:Name
=
"ContentPanel"
Grid.Row
=
"1"
Margin
=
"12,0,12,0"
>
<
telerikCloud:RadCloudFeedbackControl
x:Name
=
"feedbackControl"
DeveloperName
=
"Memories Team"
SendFeedbackNavigationUri
=
"/Views/SendFeedback.xaml"
/>
</
Grid
>
Add an application bar to this page that will allow users to navigate to the SendFeedback page:
<
phone:PhoneApplicationPage.ApplicationBar
>
<
shell:ApplicationBar
>
<
shell:ApplicationBar.Buttons
>
<
shell:ApplicationBarIconButton
IconUri
=
"/Assets/AppBar/Add.png"
Text
=
"new"
Click
=
"OnAdd_Click"
/>
</
shell:ApplicationBar.Buttons
>
</
shell:ApplicationBar
>
</
phone:PhoneApplicationPage.ApplicationBar
>
You need to specify the type of the feedback items that will be used by the control:
public
Feedback()
{
InitializeComponent();
InitFeedbackControl();
}
protected
async
override
void
OnNavigatedTo(NavigationEventArgs e)
{
base
.OnNavigatedTo(e);
if
(e.NavigationMode == NavigationMode.Back)
{
await
this
.feedbackControl.RefreshFeedbackItemsAsync();
}
}
private
void
InitFeedbackControl()
{
this
.feedbackControl.ItemsType =
typeof
(EverliveFeedbackItem);
this
.feedbackControl.UserName = CloudProvider.Current.CurrentUser.Username;
}
private
void
OnAdd_Click(
object
sender, EventArgs e)
{
this
.feedbackControl.GoToSendFeedbackPage();
}
What’s left is to simply add a link to the Feedback page in the application bar of the Memories page:
<
phone:PhoneApplicationPage.ApplicationBar
>
<
shell:ApplicationBar
>
<
shell:ApplicationBar.Buttons
>
<
shell:ApplicationBarIconButton
Text
=
"new"
IconUri
=
"/Assets/AppBar/Add.png"
Click
=
"OnNewMemoryButton_Click"
/>
</
shell:ApplicationBar.Buttons
>
<
shell:ApplicationBar.MenuItems
>
<
shell:ApplicationBarMenuItem
Text
=
"settings"
Click
=
"OnSettings_Click"
/>
<
shell:ApplicationBarMenuItem
Text
=
"feedback"
Click
=
"OnFeedback_Click"
/>
<
shell:ApplicationBarMenuItem
Text
=
"logout"
Click
=
"OnLogout_Click"
/>
</
shell:ApplicationBar.MenuItems
>
</
shell:ApplicationBar
>
</
phone:PhoneApplicationPage.ApplicationBar
>
private
void
OnFeedback_Click(
object
sender, EventArgs e)
{
this
.NavigationService.Navigate(
new
Uri(
"/Views/Feedback.xaml"
, UriKind.RelativeOrAbsolute));
}
Now here’s the expected flow:
1) User runs the application, goes to the feedback page and send their feedback:
2) The developer reads the feedback, which is in the Cloud, and writes the response:
3) The user receives the response on the feedback page in the app:
And that concludes the series. The application is ready and all of the cloud controls found their spot. You can download the full source code of the Memories application from here.
More about the controls that were included in this post is available in their respective documentation: RadCloudNotificationControl and RadCloudFeedbackControl.
If you still haven’t tried Cloud Controls for Windows Phone, you can go to your Telerik account and download Q2 2013 SP1 which contains the CTP version of these controls. For a better grasp of their capabilities you can download our Examples application which demonstrates their common usages.