Using the Windows Azure Service Bus with SharePoint (part 6) - Create a Test Windows Phone 7 Application

After installing the Windows Phone Express tools, open Visual Studio and select File | New Project.

Select the Windows Phone 7 Application template, provide a name for the project (such as GetSPSalesData), and click OK.

The default platform for Windows Phone 7 development is Silverlight.

Open the MainPage.xaml file and drag a listbox and a button onto the designer surface. Name the listbox lstbxSalesData and the button btnGetSales.

Amend the XAML code in the Windows Phone 7 UI as shown in bold here:

<phone:PhoneApplicationPage
  x:Class="SharePointEmployeesApp.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
  <DataTemplate x:Key="salesData">
    <Grid Width="Auto">
      <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="60"/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="140"></ColumnDefinition>
        <ColumnDefinition Width="140"></ColumnDefinition>
        <ColumnDefinition Width="140"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding companyName}"
        FontWeight="Bold" FontSize="20" Height="50"/>
      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding companyContact}"
        FontWeight="Bold" FontSize="20" Height="50"/>
      <TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding companyFY09Sales}"
        FontSize="20" Height="60"/>
      <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding companyFY10Sales}"
        FontSize="20" Height="60"/>
      <TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding companyFY11Sales}"
        FontSize="20" Height="60"/>
    </Grid>
  </DataTemplate>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
    <TextBlock x:Name="ApplicationTitle" Text="SHAREPOINT SALES DATA"
      Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="sales data" Margin="-3,-8,0,0"
      Style="{StaticResource PhoneTextTitle1Style}"/>
  </StackPanel>
  <Grid x:Name="ContentGrid" Grid.Row="1">
    <Button Content="Get Sales" Height="72"
      HorizontalAlignment="Left" Margin="123,512,0,0"
      Name="btnGetSales"
      VerticalAlignment="Top" Width="226" Click="btnGetSales_Click" />
    <ListBox Height="371" HorizontalAlignment="Left"
      Margin="11,32,0,0"
      Name="lstbxSalesData" VerticalAlignment="Top" Width="460"
      ItemsSource="{Binding}"
      ItemTemplate="{StaticResource salesData}">
    </ListBox>
  </Grid>
</Grid>
</phone:PhoneApplicationPage>

Although the UI has only two controls, note that there is a data template associated with the listbox. This template provides some structure and formatting to the returned data—the data from the SharePoint list. You could get fancier with the UI design, but this serves to illustrate the point. The only event tied to the UI is the btnGetSales_Click event, which triggers a call to the WCF service deployed to Windows Azure, which then retrieves the SharePoint on-premises data.

Assuming that you’ve added the preceding code to your project file, your Visual Studio integrated development environment (IDE) UI should look similar to the following.

Because you’re using Silverlight, add the code-behind for this project to the MainPage.xaml.cs file. Before you do this, though, you’ll need to add a service reference to the Windows Azure WCF service. To do this, right-click the project, select Add Service Reference, paste the service URI into the Address field, and click Go—as shown here.

Provide a namespace for your service (such as AzureServiceForSharePoint) and click OK.

Right-click the project and select Add | Class. Name the class Sales and click Add. Edit the code for your class to match the code in bold shown here. You’ll use this class for in-memory data management:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SharePointEmployeesApp
{
    public class Sales
    {
        public string companyName { get; set; }
        public string companyContact { get; set; }
        public string companyFY09Sales { get; set; }
        public string companyFY10Sales { get; set; }
        public string companyFY11Sales { get; set; }
    }
}

Open the MainPage.xaml.cs file and amend the code in the file as shown in bold here:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using SharePointEmployeesApp.AzureServiceProxy;

namespace SharePointEmployeesApp
{
public partial class MainPage : PhoneApplicationPage
{
   List<Sales> listOfSalesData = new List<Sales>();
   public MainPage()
   {
      InitializeComponent();
   }
   private void btnGetSales_Click(object sender, RoutedEventArgs e)
   {
      SharePointCallingServiceClient mySvcProxy = new
         SharePointCallingServiceClient();
         mySvcProxy.GetSalesCompleted += new
         EventHandler<GetSalesCompletedEventArgs>(mySvcProxy_GetSalesCompleted);
         mySvcProxy.GetSalesAsync();
   }
   void mySvcProxy_GetSalesCompleted(object sender, GetSalesCompletedEventArgs e)
   {
      if (e.Error == null)
      {
          var returnEmployeeData = e.Result;
          foreach (var item in returnEmployeeData)
          {
             Sales tempSalesInfo = new Sales();
             tempSalesInfo.companyName = item.Company.ToString();
             tempSalesInfo.companyContact = item.Contact.ToString();
             tempSalesInfo.companyFY09Sales = item.FY09Sales.ToString();
             tempSalesInfo.companyFY10Sales = item.FY10Sales.ToString();
             tempSalesInfo.companyFY11Sales = item.FY11Sales.ToString();
             listOfSalesData.Add(tempSalesInfo);
          }
          lstbxSalesData.DataContext = listOfSalesData;
      }
      else
      {
         MessageBox.Show(e.Error.ToString());
      }
     }
   }
}

The preceding code manages the call to the WCF service you deployed to Windows Azure. The proxy (mySvcProxy) needs to be called asynchronously because you’re using Silverlight. Thus, you have two events that manage the service call: mySvcProxy.GetSalesAsync and mySvcProxy.GetSalesCompleted. You take the results using a var object (returnEmployeeData) and e.Result and create a list collection (listOfSalesData), which is then bound to a formatted listbox. Although the DataContext property is used in the code-behind, you can see in the earlier UI code that each of the textblocks is bound to properties in the custom Sales class.