Telerik blogs

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

Hello everyone,

In Part 1 and Part 2 of the series, we’ve started creating an app that tracks appointments using Everlive as it’s backend storage mechanism and uses the Telerik Cloud components. So far, we have examined the following controls: RadCloudLogin with SocialSharing via Facebook, RadCloudRegistration and the RadCloudCalendar control. Today, we will extend the Appointment.xaml page by adding a list of appointments for the current day using RadDataBoundListBox. We will also take a look at what is involved in retrieving data from Everlive as well as adding logout functionality to the app.

Creating a Value Converter

We’ll begin by creating a new Folder in our project called, “Helper”. Right click the “Helper” folder and create a new class called “TimeHeaderConverter.cs”. Paste the following snippet inside the class overriding the constructor:

public class TimeHeaderConverter : IValueConverter
{
 
 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        DateTime date = (DateTime)value;
 return date.ToShortTimeString();
    }
 
 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
 throw new NotImplementedException();
    }
 
}

As you can see from looking at the sample, this is going to be a ValueConverter to convert a DateTime value to a ShortTime string. So instead of saying, “12/17/2013 11:00AM”, it will return “11:00AM”.

This will be extremely valuable when we begin to display our Appointment Times.

Appointment.xaml

Heading back to our Appointment.xaml file, we will need to drop in the following snippet before the LayoutRoot is declared.

<UserControl.Resources> 
 <helper:TimeHeaderConverter x:Key="TimeHeaderConverter"/>
</UserControl.Resources>

This will give us access to the converter anytime we need it. Which is coming up shortly!

Inside our content panel, under our RadCloudCalendar component add the following snippet.

<telerikPrimitives:RadDataBoundListBox x:Name="AppointmentsList" Grid.Row="1" Margin="-2,15,-2,0" EmptyContent="There are no appointments for the selected day." >
 <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
 <DataTemplate>
 <Grid Height="50" Margin="0,3,0,3">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto"/>
 <ColumnDefinition Width="96"/>
 <ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition/>
 <RowDefinition/>
 </Grid.RowDefinitions>
 <Rectangle Fill="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="8" Height="32" Grid.RowSpan="2" Margin="0,0,15,0"/>
 <TextBlock Text="{Binding StartDate, Converter={StaticResource TimeHeaderConverter}}" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Column="1" Grid.RowSpan="2" Margin="0,-5,0,0"/>
 <TextBlock Text="{Binding EndDate, Converter={StaticResource TimeHeaderConverter}}" FontWeight="Bold" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeSmall}" Margin="0, -3, 0, -3" Grid.Column="2"/>
 <TextBlock Grid.Row="1" Text="{Binding Subject}" Style="{StaticResource PhoneTextSubtleStyle}" Margin="0, -5, 0, 0" Grid.Column="2"/>
 </Grid>
 </DataTemplate>
 </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox> 

We begin by using our RadDataBoundListBox control and setting several properties including the EmptyContent property. This will allow us to inform the user that no appointments are available for the current day.

An ItemTemplate is created next that will display a Rectangle to help separate the items and then we use three TextBlocks to display the StartDate, EndDate and Subject. You should note here that the Converter we created earlier is being used on StartDate and EndDate.

While we are here, we need a way for the user to log out once they have logged in. We are going to use a simple ApplicationBarMenuItem after the last Grid tag as shown below:

<phone:PhoneApplicationPage.ApplicationBar>
 <shell:ApplicationBar>
 <shell:ApplicationBar.MenuItems>
 <shell:ApplicationBarMenuItem Text="logout" Click="OnLogout_Click"/>
 </shell:ApplicationBar.MenuItems>
 </shell:ApplicationBar>
 </phone:PhoneApplicationPage.ApplicationBar>

Just make sure you add this after the last </Grid> tag. We will also need to add the following code to Appointment.xaml.cs to resolve the event handler.

private async void OnLogout_Click(object sender, EventArgs e)
{
 bool logoutSuccess = await RadCloudLogin.LogoutAsync();
 if (logoutSuccess)
    {
 this.NavigationService.GoBack();
    }
}

Let’s stop for a moment and take a look at our Visual Studio designer in Figure 1.

1

Figure 1: The Appointment.xaml page showing the RadDataBoundListBox control.

Appointment.xaml.cs

Heading back to the code-behind file, go ahead and paste the following snippet replacing what you had there before except the OnLogout_Click event.

EverliveAppointmentSource everliveAppointmentSource = new EverliveAppointmentSource();
 
public Appointment()
{
     InitializeComponent();
     Loaded += Appointment_Loaded;
}
 
void Appointment_Loaded(object sender, RoutedEventArgs e)
{
            DisplayAppointments();
        }
 
 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
 base.OnNavigatedTo(e);
            CloudAppointmentSource.Init(everliveAppointmentSource);
        }
 
 public void DisplayAppointments()
        {
 try
            { 
                everliveAppointmentSource.FetchData(DateTime.Now.Date, DateTime.Now.Date.AddDays(1));                
 this.AppointmentsList.ItemsSource = everliveAppointmentSource.GetAppointments(CurrentAppointment);
            }
 catch (Exception ex)
            {
                RadMessageBox.ShowAsync("Error: " + ex);
            }
        }
 
 private bool CurrentAppointment(IAppointment appointment)
        {
            DateTime currentAppointmentStart = appointment.StartDate;
            DateTime currentAppointmentEnd = appointment.EndDate;
            DateTime requiredAppointmentsStartDate = DateTime.Now.Date;
            DateTime requiredAppointmentsEndDate = DateTime.Now.Date.AddDays(1);
 
 if (requiredAppointmentsEndDate > currentAppointmentStart && requiredAppointmentsStartDate < currentAppointmentEnd)
            {
 return true;
            }
 
 return false;
        }

Taking it from the top, we create an instance of EverliveAppointmentSource as we will be needing access to this class in other methods. We have left our Loaded event handler, except now it simply calls the DisplayAppointments method. This method will fetch new appointments with the start and end date that we specified. Since we only want the current date, we were able to simply use the DateTime class. After we have our appointments, we set the ItemSource to our RadDataBoundListBox by calling the GetAppointments method which create a collection of IAppointment objects. We can then examine that data and only display the appointments for the current date.

Finally, the OnNavigatedTo event will initialize the CloudAppointmentSource to be used.

If we launch the application and add several appointments to the same day, then we will see what is shown in Figure 2.

2

Figure 2: The Appointment.xaml page showing our appointments for the day.

What’s next?

We’ve extended our app by adding a list of appointments for the current day using RadDataBoundListBox. We also took a look at what is involved in retrieving data from Everlive as well as adding logout functionality to the app. But we aren’t done yet. We are going to use the built-in design templates and add in an “About” page, use another Cloud component as well as add in our new Dev Center Template.

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.