Telerik blogs

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

Hello everyone,

So far in the series, we have been building an application that uses the Telerik Windows Phone Cloud Components powered by Everlive. We’ve seen how to easily create registration/login screen as well as add the ability to use social networks like FaceBook. We then took a look at RadCloudCalendar to easily create an appointment scheduling app and extended it by using the RadDataBoundListBox control. While our app is now fully functional, let’s add the ability to add developer notifications to the user. We’ll go in detail shortly about the various notifications you can use.

Using the Dev Center Template

Begin by going to the solution and right-clicking and adding a “New Project”. Navigate to Windows Phone and look for the template called, “Telerik Cloud Dev Center Windows Phone App” as shown in Figure 1.

1

Figure 1: Selecting the Telerik Cloud Dev Center project inside Visual Studio.

Go ahead and give it a name and select “OK”.

You will need to log into the Cloud Services as we did before, but this time select the existing project called, “AppointmentTracker” and click “Finish”. Go ahead and select this project as our start-up project and navigate to MainPage.xaml and give your app a name.

You may go ahead now and run the application and see that it has 0 active notification and feedback items. Our app should look like what is shown in Figure 2.

2

Figure 2: The Notification Center app.

Think of this application as an app that you can install on your device to allow developer notification back and forth from the app you created.

While we are in here, let’s go ahead and add a notification. Head back over to everlive.com and create a new Type called, “EverliveNotificationItem” with the fields shown in Figure 3.

3

Figure 3: Adding the necessary fields to Everlive to create a NotificationItem.

After the proper fields have been saved, you can now go back to your app and create a new notification. A notification can pop up a dialog box in your user’s app directing them to a MarketplaceDetail, WebBrowser Link or a certain page in your app. We are going to use the WebBrowser, so fill in the following information and select the save icon as shown in Figure 4.

4

Figure 4: Adding a Notification via the Notification Center.

Hit the save button and the data should be saved to everlive without you writing a single line of code. Awesome!

Tying in notifications to our AppointmentTracker app

Switch back to the “AppointmentTracker” app and set it as your default project. Now open the App.xaml.cs file and add the following property before the constructor.

public RadCloudNotificationControl NotificationControl { get; private set; }

Navigate into the App constructor and under the comment that initializes the Everlive Cloud Provider add the following method.

// Initializes the Telerik Cloud Notifications Control
InitializeNotificationsControl();

Go ahead and resolve the method and add the following code as shown below:

private void InitializeNotificationsControl()
{
 this.NotificationControl = new   RadCloudNotificationControl(typeof(EverliveNotificationItem));
 this.NotificationControl.MaxNotificationsPeriod = TimeSpan.FromDays(30);
 this.NotificationControl.MaxNotificationsCount = 5;
}

The code simply instantiates a new RadCloudNotificationControl that is of type EverliveNotificationItem. We set the MaxNotificationPeriod to limit the displayed notifications by their creation date. We also set a maximum amount of notifications that can be displayed. Let’s head into the Views folder and navigate inside the Appointment.xaml.cs file.

Add the ShowNotification() method to the Loaded event:

void Appointment_Loaded(object sender, RoutedEventArgs e)
{
     DisplayAppointments();
     ShowNotification();
}

Finish up by adding the ShowNotification Method.

private async void ShowNotification()
{
    RadCloudNotificationControl notificationControl = (App.Current as App).NotificationControl;
int newMessagesCount = await notificationControl.GetNewNotificationsCount();
 if (newMessagesCount < 1)
    {
 return;
    }
 if (newMessagesCount == 1)
    {
        await notificationControl.ShowFirstNotificationAsync();
    }
 else
     {
            EverliveNotificationItem notification = new EverliveNotificationItem()
                {
                    TaskToExecute = TaskToExecute.AppNavigation,
                    TaskToExecuteArgs = "/Views/Notifications.xaml",
                    Title = "New notifications",
                    Message = string.Format("You have {0} new notifications. Would you like to open the notifications page now?", newMessagesCount)
                };
 
                await notificationControl.ShowNotificationAsync(notification);
            }
        }

This code will check and see if we have a new notification and if so, display it. Otherwise, if we have more than 1 new notification, then we will navigate them to a page in our app called Notifications.xaml after displaying a dialog box. Go ahead and run the application and your notification should be displayed as shown in Figure 5.

5

Figure 5: Displaying a Notification set via the Notification Center.

If you click “yes”, then it will take launch your web browser and navigate to www.telerik.com as you set earlier.

If you have more than 1 new notification, then it will prompt you as shown in Figure 6 to open the notification page.

6

Figure 6: Displaying New Notifications

But we before we select “yes”, we need to create the Notifications page.

Notifications.xaml

Go to your Views folder and create a new Portrait Page called Notifications.xaml and add the following XAML inside your ContentPanel.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <telerikData:RadJumpList 
 x:Name="jumpList"
 Margin="12,0"
 ItemTap="OnItemTap"
 ItemsSource="{Binding}">
 <telerikData:RadJumpList.ItemTemplate>
 <DataTemplate>
 <Grid Margin="0,0,0,24">
 <Grid.RowDefinitions>
 <RowDefinition/>
 <RowDefinition/>
 </Grid.RowDefinitions>
 <TextBlock 
 TextWrapping="Wrap" 
 Foreground="{StaticResource PhoneForegroundBrush}"
 FontSize="{StaticResource PhoneFontSizeLarge}" 
 FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
 MaxHeight="85"
 Text="{Binding Title}" />
 <TextBlock 
 Grid.Row="1" 
 TextWrapping="Wrap" 
 MaxHeight="50"
 Foreground="{StaticResource PhoneForegroundBrush}"
 FontSize="{StaticResource PhoneFontSizeNormal}" 
 FontFamily="{StaticResource PhoneFontFamilySemiBold}" 
 Text="{Binding Message}"/>
 </Grid>
 </DataTemplate>
 </telerikData:RadJumpList.ItemTemplate>
 </telerikData:RadJumpList>

This will declare a new instance of RadJumpList and we will bind all of our new notifications to it by adding the following code to Notifications.xaml.cs.

public Notifications()
{
    InitializeComponent();
 this.SetDataContext();
}
 
private async void SetDataContext()
{
    IEnumerable<ICloudNotificationItem> items = await (App.Current as App).NotificationControl.GetAllNotificationsAsync();
    IEnumerable<EverliveNotificationItem> notificationItems = items.Cast<EverliveNotificationItem>();
    notificationItems = notificationItems.OrderBy(item => item.CreatedAt);
 
 this.DataContext = notificationItems;
}
 
private async void OnItemTap(object sender, ListBoxItemTapEventArgs e)
{
    EverliveNotificationItem tappedItem = e.Item.Content as EverliveNotificationItem;
    await (App.Current as App).NotificationControl.ShowNotificationAsync(tappedItem);
    jumpList.RefreshData();
}

We begin by calling SetDataContext and getting all of our Notification items. We sort them by the time they were created and set our DataContext to the notificationiItems. When a user taps an item, we will show the notification. A sample of this page can be found in Figure 7.

7

Figure 7: Navigation.xaml displaying all of the unread notifications.

What’s next?

Our app is really taking shape now, we’ve added Notifications that can be sent by the developer and displayed on the user’s phone by using our new Dev Center Template and the RadCloudNotificationControl. In the next post, we’ll talk briefly about the feedback option included in the notification center and wrap up the series with adding in our design templates as well as another Cloud Component. 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.