[download the application complete source code from your Telerik account ]

This is part 3 of the series on Building an Exchange Client For Windows Phone. See part1 and part2.

In the previous part of the series you saw how to connect, authenticate and consume the Exchange server data. In this part I will show you how to build the login UI and how to display the appointments in the windows phone application.

Building the Login UI and storing user password

The UI itself is nothing special – we are just listing the fields that are needed. I want to stress out how important is the security when building such kind of applications. You don’t want your users to sue you because their passwords have been stolen by hackers!

What we want is when users setup the information about the exchange setting this information to be persisted among the multiple application launching. To implement this we are using the SterlingDB, which is an open source, object – oriented database. In our sample we have only one database with two tables – one table for the exchange settings called “ExchangeProvider” and one table where we are storing locally the downloaded appointments – this table is called “LocalAppointment”. You can see how our model for the exchange setting looks like in the simple class diagram below:

To store the password safely in Database we are using the new Encryption APIs introduced with the latest “Mango” version of Windows Phone. To encrypt the password which was typed in the Password field you should use the following method:

Then you can safely store the encrypted password in database. In order to later use this password the Exchange API requires the password as a string. So we need to decrypt it. Here is the code that helps in this case:

Again we are using the encryption/decryption methods available in Mango. Please note that when sending the password to the web service you need to use SSL for communication between the device and the web service.

Displaying the appointments data in Windows Phone client UI

In order to display the appointments data you can use the Telerik Calendar control which can display the appointments directly into its UI like this:
 
To implement this we implemented a special AppointmentsDataSource which is included in RadControls for WindowsPhone. It is used in the following way:

The whole implementation of the Appointments source is in the code block below:

By using RadCalendar for Windows Phone this is easy. Now lets see how we can build the AgendaView. The AgendaView in the Windows Phone Metro UI looks like this:
 
This UI is generally a list of appointments which are grouped by their StartDate. To display a grouped list you can use the Telerik JumpList control and its Sticky Header support. Here is the code to group the appointment data:

Yes – it is that simple – the code above is enough to list and group the appointments data UI. Ofcourse you need to provide the appropriate data template for format the data also. Please check the sample code implementation in order to see the details.

Displaying statistics

To add more rich visualization to the application we added a simple bar chart which is showing the number of appointments.
 
To implement this with Telerik RadChart the following simple XAML code is needed:

To format the data here is the simple C# code behind:

I hope you enjoyed reading the articles – please let us know if you need any additional help setting up your applications using Telerik RadControls for Windows Phone!

You can follow me on Twitter @ValioStoychev for any questions or comments.