SQL Azure : Building Two OData Consumer Applications (part 2) - Windows Mobile 7 Application

2. Windows Mobile 7 Application

Let's build something cool (not that you haven't done that prior to this point). In this example, you create a new application that consumes the same OData service that you consumed in the last example, but this time you use a Windows Phone 7 application to consume the service.

For this example, you need to download and install a couple of things. First is the OData Client Library for Windows Phone 7 Series CTP, which is available at www.microsoft.com/downloads/details.aspx?FamilyID=b251b247-70ca-4887-bab6-dccdec192f8d&displaylang=en. The install extracts several files to a directory that you specify.

The second item to download is the Windows Phone Developer Tools, which installs the Visual Studio Windows Phone application templates and associated components that provide integrated Visual Studio design and testing of Windows Phone 7 phone applications. The Windows Phone Developer Tools is available at http://developer.windowsphone.com/windows-phone-7/. To download the tools, click the Download the Developer Tools! link.

When the installs are finished, follow these steps:

1. Start a new instance of Visual Studio 2010, and create a new project. In the New Project dialog, select the Silverlight for Windows Phone template (which was installed as part of the Windows Phone Developer Tools), and then select Windows Phone Application, as shown in Figure 3. The project name isn't important, but feel free to give it a meaningful name such as WP7ODataApp.

   Figure 3. Creating a Windows Phone Project

   

2. Before you can start coding and consuming the OData service, you need to do a couple of things. First, the OData Client Library installation extracted a file called System.Data.Services.Client.dll. In Solution Explorer, right-click the References node, and select Add Reference. In the Add Reference dialog, browse to the directory where you extracted the DLL file, and add that file to your references.

3. Next, you need to create a service proxy class that your OData service will use. Open a command prompt, and navigate to the following folder: C:\Windows\Microsoft.Net\Framework\v4.0.30319\.

4. Enter the following command:

   datasvcutil.exe /uri:https://odata.sqlazurelabs.com/OData.svc/v0.1/servername/
   
   TechBio /out:C:\directory\TechBio.cs /Version:2.0 /DataServiceCollection
   
   					  

   
   

   DataSvcUtil is a command-line tool provided by WCF Data Services that consumes an OData feed and generates the client data service class or classes that are needed to access a data service in a .NET client application. In this above, where you see bolded and italicized text, be sure to enter your SQL Azure server and the directory in which you want to save the proxy class.

5. Press the Enter key to generate the proxy class. Figure 4 shows the results.

   Figure 4. Creating the proxy class

   

If no errors are generated, you're set to go. The next step is to include this file in your project:

1. Right-click the project name in Solution Explorer, and select Add →Existing Item from the context menu. Navigate to the directory where you create the proxy class, and add the proxy class to your project.

2. Add a new class to the project. This class will be used to create the connection to the OData service, define and execute the query against the OData service, and load the Docs collection that will bind to the UI. For this example, name the new class TechBioModel.

When you've added all the components discussed, your Solution Explorer should look like Figure 5. You're ready to start adding some code.

Figure 5. Solution Explorer

1. Open the TechBioModel class, and add the following namespaces. These namespaces provide additional functionality needed to query your OData source and work with collections. For example, the System.Collections.ObjectModel namespace contain classes that can be used as collections in the object model of a reusable library. The System.Data.Services.Client namespace represents the Silverlight client library that your application uses to access the data service:

   using System.Linq;
   using System.ComponentModel;
   using System.Collections.Generic;
   using System.Diagnostics;
   using System.Text;
   using System.Windows.Data;
   using TechBioModel;
   using System.Data.Services.Client;
   using System.Collections.ObjectModel;

   
   

2. Add the following code to the TechBioModel class. This class calls out to your OData service. First, you initialize a new TechBio object (the object you created via the DataSvcUtil and added to your project) using the URI to your OData service. Then, you execute a LINQ query and populate your Docs DataServiceCollection which is used to bind to the list box on the phone's user interface. In this example, the query asks for all the document data from the Docs table (Entity) where the AuthorID is 113:

   public MainViewModel()
   {

   
   
   

   LoadData();
   }
   
   void LoadData()
   {
      TechBio context = new TechBio(new Uri("https://odata.sqlazurelabs.com/
   
   OData.svc/v0.1/plqfubbqom/TechBio"));
   
       var qry = from u in context.Docs
                   where u.AuthorId == 113
                   select u;
   
       var dsQry = (DataServiceQuery<Doc>)qry;
   
       dsQry.BeginExecute(r =>
       {
           try
           {
               var result = dsQry.EndExecute(r);
               if (result != null)
               {
                   Deployment.Current.Dispatcher.BeginInvoke(() =>
                   {
                       Docs.Load(result);
                   });
               }
           }
           catch (Exception ex)
           {
               MessageBox.Show(ex.Message.ToString());
           }
       }, null);
   
   }
   
   DataServiceCollection<Doc> _docs = new DataServiceCollection<Doc>();
   
   public DataServiceCollection<Doc> Docs
   {
       get
       {
           return _docs;
       }
       private set
       {
           _docs = value;
       }
   }
   
   					  

   
   

You're probably wondering why you use the Dispatcher for this call. You do so because the call isn't guaranteed to be on the UI thread. You need to use the Dispatcher to marshal the call to the UI thread.

1. In App.xaml.cs, add the following code to the App class:

   private static TechBioModel viewModel = null;
   public static TechBioModel ViewModel
   {
       get
       {
           if (viewModel == null)
               viewModel = new TechBioModel();
   
           return viewModel;
       }
   }

   
   

2. Right-click MainPage.xaml in Solution Explorer, and select View Code. Add the following code below the MainPage constructor:

   protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
   
       if (DataContext == null)
           DataContext = App.ViewModel;
   
   }
   
   					  

   
   

3. Set the ItemSource property of the list box on the phone UI as shown in Figure 6. This binds the list box to the Docs DataServiceCollection so that when the collection is populated, the list box displays the data.

   Figure 6. Setting the ItemSource property

   

4. Press F5 to run the project. The Windows Mobile 7 Phone emulator appears, and initially it has a blank screen. But if you look in the status bar at lower-left in Visual Studio, you see that Visual Studio is connecting to the Windows Phone 7 emulator and then deploying the application to the phone. After several seconds, you should see the phone populate with the list of books for Scott Klein, as shown in Figure 7.

   Figure 7. Book listing on the Windows Mobile Phone 7 via OData

   

Now that you've completed this example, you should agree that this is really cool. Getting data on your mobile device has never been easier.