Telerik blogs

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

Hello everyone,

This is the final part in the series, and we will finish our application that uses the Telerik Windows Phone Cloud Components. We’ve seen a lot already, from user authentication using social sharing to various forms that facilitate this process such as registration and login screens. We’ve used the RadCloudCalendar to keep track of our appointments and extended our app to push developer notifications to the users using a brand new “Dev Center Template” included in the suite. Today, we will wrap things up by taking a look at adding feedback that the end-user and developer can submit as well as make use of the design templates that will add some common pages found in most professional windows phone apps.

Returning back to our app

We finished part 4 by adding developer notifications to our app, but didn’t allow users a way to access that page outside the dialog box shown in Figure 1.

1

Figure 1: New Notification Dialog Box.

Let’s return to the Appointment.xaml file and add in the following XAML to allow the user to easily navigate back to the developer notification screen as well as the developer feedback screen we will be adding shortly.

<phone:PhoneApplicationPage.ApplicationBar>
 <shell:ApplicationBar Mode="Minimized">
 <shell:ApplicationBar.MenuItems> 
 <shell:ApplicationBarMenuItem Text="feedback" Click="OnFeedback_Click"/>
 <shell:ApplicationBarMenuItem Text="notifications" Click="OnNotifications_Click"/>
 <shell:ApplicationBarMenuItem Text="logout" Click="OnLogout_Click"/>
 </shell:ApplicationBar.MenuItems>
 </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar> 

Adding in the Feedback Pages

Inside of the Views folder, create two new portrait pages called, “Feedback” and “SendFeedback”.

Starting with Feedback.xaml

We will begin by working with the Feedback.xaml page and replacing the Content Panel with the following snippet:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <telerikCloud:RadCloudFeedbackControl 
 Grid.Row="2" 
 Margin="0, 24"
 x:Name="feedbackControl"
 UserName="You"
 UserImage="/Images/User.png"
 DeveloperName="Developer"
 DeveloperImage="/Images/User.png"
 SendFeedbackNavigationUri="/Views/SendFeedback.xaml" />
</Grid>

From here, we are using our RadCloudFeedbackControl and giving it text for the UserName and DeveloperName properties. You may also set an image for each user if you like by accessing the DeveloperImage and or UserImage properties. Here we are just using stock images, but these images could come from Everlive or a service, etc. We will also need to add several application bar buttons in order to allow the user to add, refresh or clear the conversation. You can get these icons by using Expression Blend or downloading the completed source code at the bottom of this post.

<phone:PhoneApplicationPage.ApplicationBar>
 <shell:ApplicationBar>
 <shell:ApplicationBarIconButton Text="add" IconUri="/Assets/Icons/Add.png" Click="OnButtonAdd_Click" />
 <shell:ApplicationBarIconButton Text="refresh" IconUri="/Assets/Icons/Refresh.png" Click="OnButtonRefresh_Click" />
 <shell:ApplicationBarIconButton Text="clear" IconUri="/Assets/Icons/Delete.png" Click="OnButtonDelete_Click" />
 </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

If we switch back to Feedback.xaml.cs, then we will need to add in the following code:

public Feedback()
        {
            InitializeComponent();
            InitializeControl();
        }
 
 private void InitializeControl()
        {
            EverliveUser currentUser = CloudProvider.Current.CurrentUser as EverliveUser;
 
 this.feedbackControl.ItemsType = typeof(EverliveFeedbackItem);
 this.feedbackControl.UserName = currentUser.DisplayName ?? currentUser.Username;
        }
 
 private void OnButtonAdd_Click(object sender, EventArgs e)
        {
 this.feedbackControl.GoToSendFeedbackPage();
        }
 
 private async void OnButtonRefresh_Click(object sender, EventArgs e)
        {
            await this.feedbackControl.RefreshFeedbackItemsAsync();
        }
 
 private async void OnButtonDelete_Click(object sender, EventArgs e)
        {
            MessageBoxClosedEventArgs args = await RadMessageBox.ShowAsync("Delete Message History", MessageBoxButtons.YesNo, "Warning: This will delete all of your feedback history. Do you want to continue?");
 if (args.Result == DialogResult.OK)
            {
                await this.feedbackControl.ClearHistoryAsync();
                await this.feedbackControl.RefreshFeedbackItemsAsync();
            }
        }
 protected override async void OnNavigatedTo(NavigationEventArgs e)
        {
 base.OnNavigatedTo(e);
 
 if (e.NavigationMode == NavigationMode.Back)
            {
                await this.feedbackControl.RefreshFeedbackItemsAsync();
            }
        }

Looking at this code snippet, you can tell the first order of business is determining who our current user is. This will allows us to fill in the ItemsType property for the control. We then have several methods that we can call to send the user to a feedback page (that we defined in XAML), refresh items, and clear the history. We also override the OnNavigatedTo method to refresh the items after a user has submitted a new one.

Switching over to SendFeedback.xaml

Taking a look now at the SendFeedback.xaml page, replace the Content Panel with the following snippet:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto"/>
 <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>
 <TextBox x:Name="Message" MinHeight="520" TextWrapping="Wrap" />
 <Button Grid.Row="1" x:Name="btnSendFeedback" Content="Send Feedback" Click="btnSendFeedback_Click"/>
</Grid>

This will simply fill the page with a TextBox control that wraps the text and a button to capture what the user typed.

Switch to SendFeedback.xaml.cs, and add in the following code:

private async void btnSendFeedback_Click(object sender, RoutedEventArgs e)
{
 if (string.IsNullOrEmpty(this.Message.Text))
    {
        await RadMessageBox.ShowAsync("You need to enter something first!", "Not sent");
 return;
    }
    EverliveFeedbackItem feedback = this.CreateFeedbackItem();
 bool sentSuccessfully = await RadCloudFeedbackControl.SendFeedback(feedback);
 if (!sentSuccessfully)
    {
        await RadMessageBox.ShowAsync("Feedback not sent.");
    }
 else
    {
 if (this.NavigationService.CanGoBack)
        {
 this.NavigationService.GoBack();
        }
    }
}
 
private EverliveFeedbackItem CreateFeedbackItem()
{
    EverliveFeedbackItem feedback = new EverliveFeedbackItem();
    feedback.Message = this.Message.Text;
    feedback.CreationDate = DateTime.Now.ToLocalTime();
 return feedback;
}

After the user taps on the send feedback button, we perform a check to make sure they entered something then create an EverliveFeedbackItem passing in the message they typed and auto populating the Creation Date. If for some reason, we had problems (no network, etc.), then we will return a MessageBox saying the feedback was not sent.

As eager as you are to run the application, head back over to everlive.com and create a new Type called, “EverliveFeedbackItem” with the fields shown in Figure 2.

2

Figure 2: Adding the necessary fields to Everlive to create a FeedbackItem.

After the proper fields have been saved, you can now go back to your user app and run it. Navigate to the feedback page and you will see the following screen as shown in Figure 3.

3

Figure 3: Our Feedback.xaml Page without any Feedback.

Go ahead and click on the new feedback icon and it will take you to the SendFeedback.xaml page as shown in Figure 4.

4

Figure 4: Sending Feedback to the Developer through the User app.

Go ahead and hit the “Send Feedback” button and your new item should be displayed in a conversation view as shown in Figure 5.

5

Figure 5: Conversation View between the User and Developer.

Switch to our Dev Center App

Now that the data is being saved properly, let’s switch over to our Dev Center application and we will notice that we have 1 user with feedback as shown in Figure 6.

6

Figure 6: 1 User has Submitted Feedback.

If we navigate inside of feedback, then we can read the message and respond back to them as shown in Figure 7.

7

Figure 7: The Developer is responding to the feedback.

If you launch the user app again, and navigate back inside of feedback, then you will see the developer’s response as shown in Figure 8.

8

Figure 8: The User’s view of the Feedback page.

Design Templates

Now that our app is complete, you might want to take advantage of some of our design templates as shown in Figure 9.

9

Figure 9: The Various Design Templates available for Telerik Windows Phone Users.

These are easily accessible by right-clicking on an existing project and selecting “Add” -> “Existing Item”. While there is templates for various scenarios, we will add an about page by navigate to “Pages” then “About” and give it a name and hit the add button. This will automatically wire up commands, view models, a sample image and the view itself. The page is fully interactive (meaning users can send you an email or rate the app) and the only thing you need to edit is the view to your app’s needs as well as add a valid email to the SendAnEmailCommand.cs file. An example of what mine looks like is shown in Figure 10.

10

Figure 10: Using the “About” Page Design Template.

Wrap-Up

In this five part series, we have created a fully featured Windows Phone 8 app from scratch that uses some of our standard controls as well as our cloud-enabled controls. We also took advantage of the design templates that our designer created, to build an “About” page in about 10 seconds. With 60 production ready controls, you are sure to get your app in the marketplace in a shorter amount of time. Backed by our support staff and new releases every 4 months, what are you waiting for? Download a trial today!

Download the completed solution containing all parts. 

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.