7 min read

With the continuous evolution of mobile operating systems, smart mobile devices (such as smartphones or tablets) play increasingly important roles in everyone’s daily work and life. The iOS (from Apple Inc., for iPhone, iPad, and iPod Touch devices), Android (from Google) and Windows Phone 7 (from Microsoft) operating systems have shown us the great power and potential of modern mobile systems.

In the early days of the Internet, web access was mostly limited to fixed-line devices. However, with the rapid development of wireless network technology (such as 3G), Internet access has become a common feature for mobile or portable devices. Modern mobile OSes, such as iOS, Android, and Windows Phone have all provided rich APIs for network access (especially Internet-based web access). For example, it is quite convenient for mobile developers to create a native iPhone program that uses a network API to access remote RSS feeds from the Internet and present the retrieved data items on the phone screen. And to make Internet-based data access and communication more convenient and standardized, we often leverage some existing protocols, such as XML or JSON, to help us. Thus, it is also a good idea if we can incorporate OData services in mobile application development so as to concentrate our effort on the main application logic instead of the details about underlying data exchange and manipulation.
In this article, we will discuss several cases of building OData client applications for various kinds of mobile device platforms. The first four recipes will focus on how to deal with OData in applications running on Microsoft Windows Phone 7. And they will be followed by two recipes that discuss consuming an OData service in mobile applications running on the iOS and Android platforms. Although this book is .NET developer-oriented, since iOS and Android are the most popular and dominating mobile OSes in the market, I think the last two recipes here would still be helpful (especially when the OData service is built upon WCF Data Service on the server side).

Accessing OData service with OData WP7 client library

What is the best way to consume an OData service in a Windows Phone 7 application? The answer is, by using the OData client library for Windows Phone 7 (OData WP7 client library). Just like the WCF Data Service client library for standard .NET Framework based applications, the OData WP7 client library allows developers to communicate with OData services via strong-typed proxy and entity classes in Windows Phone 7 applications. Also, the latest Windows Phone SDK 7.1 has included the OData WP7 client library and the associated developer tools in it.
In this recipe, we will demonstrate how to use the OData WP7 client library in a standard Windows Phone 7 application.

Getting ready

The sample WP7 application we will build here provides a simple UI for users to view and edit the Categories data by using the Northwind OData service. The application consists of two phone screens, shown in the following screenshot:

Make sure you have installed Windows Phone SDK 7.1 (which contains the OData WP7 client library and tools) on the development machine. You can get the SDK from the following website:

http://create.msdn.com/en-us/home/getting_started

The source code for this recipe can be found in the ch05ODataWP7ClientLibrarySln directory.

How to do it…

  1. Create a new ASP.NET web application that contains the Northwind OData service.
    Add a new Windows Phone Application project in the same solution (see the following screenshot).

  2. Select Windows Phone OS 7.1 as the Target Windows Phone OS Version in the New Windows Phone Application dialog box (see the following screenshot).

  3. Click on the OK button, to finish the WP7 project creation.

    The following screenshot shows the default WP7 project structure created by Visual Studio:

  4. Create a new Windows Phone Portrait Page (see the following screenshot) and name it EditCategory.xaml.

  5. Create the OData client proxy (against the Northwind OData service) by using the Visual Studio Add Service Reference wizard.

  6. Add the XAML content for the MainPage.xaml page (see the following XAML fragment). 
    
<Grid x_Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <ListBox x_Name="lstCategories" ItemsSource="{Binding}">
    <ListBox.ItemTemplate>>
      <DataTemplate>
        <Grid>
          <Grid.ColumnDefinitions>
          <ColumnDefinition Width="60" />
          <ColumnDefinition Width="260" />
          <ColumnDefinition Width="140" />
          </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0"
              Text="{Binding Path=CategoryID}"
              FontSize="36" Margin="5"/>
            <TextBlock Grid.Column="1"
              Text="{Binding Path=CategoryName}"
              FontSize="36" Margin="5"
              TextWrapping="Wrap"/>
            <HyperlinkButton Grid.Column="2"
              Content="Edit"
              HorizontalAlignment="Right"
              NavigateUri="{Binding Path=CategoryID,
              StringFormat='/EditCategory.xaml?
              ID={0}'}"
              FontSize="36" Margin="5"/>
        <Grid>
      <DataTemplate>
   <ListBox.ItemTemplate>
  <ListBox>
<Grid>

  7. Add the code for loading the Category list in the code-behind file of the MainPage. xaml page (see the following code snippet). 
    public partial class MainPage : PhoneApplicationPage
{
    ODataSvc.NorthwindEntities _ctx = null;
    DataServiceCollection _categories = null;
    ......
    private void PhoneApplicationPage_Loaded(object sender,
      RoutedEventArgs e)

    {
      Uri svcUri = new
        Uri("http://localhost:9188/NorthwindOData.svc");
      _ctx = new ODataSvc.NorthwindEntities(svcUri);
      _categories = new
         DataServiceCollection(_ctx);
      _categories.LoadCompleted += (o, args) =>
      {
          if (_categories.Continuation != null)
              _categories.LoadNextPartialSetAsync();
          else
          {
              this.Dispatcher.BeginInvoke(
                () =>
                {
                  ContentPanel.DataContext = _categories;
                  ContentPanel.UpdateLayout();
                }
              );
           }
       };

    var query = from c in _ctx.Categories
                   select c;
       _categories.LoadAsync(query);
    }
}
  8. Add the XAML content for the EditCategory.xamlpage (see the following XAML fragment). 
    <Grid x_Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <StackPanel>
      <TextBlock Text="{Binding Path=CategoryID,
        StringFormat='Fields of Categories({0})'}"
        FontSize="40" Margin="5" />
      <Border>
        <StackPanel>
          <TextBlock Text="Category Name:" FontSize="24"
            Margin="10" />
          <TextBox x_Name="txtCategoryName"
            Text="{Binding Path=CategoryName,
            Mode=TwoWay}" />

          <TextBlock Text="Description:"
            FontSize="24" Margin="10" />
          <TextBox x_Name="txtDescription"
            Text="{Binding Path=Description, Mode=TwoWay}"
/>
      </StackPanel>
    </Border>
    <StackPanel Orientation="Horizontal"
        HorizontalAlignment="Center">
        <Button x_Name="btnUpdate" Content="Update"
            HorizontalAlignment="Center"
            Click="btnUpdate_Click" />
        <Button x_Name="btnCancel" Content="Cancel"
            HorizontalAlignment="Center"
            Click="btnCancel_Click" />
    </StackPanel>
 </StackPanel>
</Grid>

  9. Add the code for editing the selected Category item in the code-behind file of the EditCategory.xaml page.
    In the PhoneApplicationPage_Loaded event, we will load the properties of the selected Category item and display them on the screen (see the following code snippet). 
    private void PhoneApplicationPage_Loaded(object sender,
RoutedEventArgs e)
{
    EnableControls(false);
    Uri svcUri = new Uri("http://localhost:9188/NorthwindOData.
svc");
    _ctx = new ODataSvc.NorthwindEntities(svcUri);
 var id = int.Parse(NavigationContext.QueryString["ID"]);
    var query = _ctx.Categories.Where(c => c.CategoryID == id);
    _categories = new
     DataServiceCollection(_ctx);
    _categories.LoadCompleted += (o, args) =>
    {
      if (_categories.Count <= 0)
    {
      MessageBox.Show("Failed to retrieve Category item.");
      NavigationService.GoBack();
    }

      else
      {
          EnableControls(true);
          ContentPanel.DataContext = _categories[0];
          ContentPanel.UpdateLayout();
      }
    };
 _categories.LoadAsync(query); 
}

    The code for updating changes (against the Category item) is put in the Click event of the Update button (see the following code snippet).

    private void btnUpdate_Click(object sender, RoutedEventArgs e)
{
    EnableControls(false);
 _ctx.UpdateObject(_categories[0]);
    _ctx.BeginSaveChanges( 
      (ar) =>
      {
          this.Dispatcher.BeginInvoke(
            () =>
            {
              try
              {
              var response = _ctx.EndSaveChanges(ar);
              NavigationService.Navigate(new
              Uri("/MainPage.xaml", UriKind.Relative));
              }
              catch (Exception ex)
              {
              MessageBox.Show("Failed to save
              changes.");
              EnableControls(true);
              }
            }
           );
        },
        null
      );
}
  10. Select the WP7 project and launch it in Windows Phone Emulator (see the following screenshot).

    11. Depending on the performance of the development machine, it might take a while to start the emulator.

Running a WP7 application in Windows Phone Emulator is very helpful especially when the phone application needs to access some web services (such as WCF Data Service) hosted on the local machine (via the Visual Studio test web server).

How it works…

Since the OData WP7 client library (and tools) has been installed together with Windows Phone SDK 7.1, we can directly use the Visual Studio Add Service Reference wizard to generate the OData client proxy in Windows Phone applications. And the generated OData proxy is the same as what we used in standard .NET applications. Similarly, all network access code (such as the OData service consumption code in this recipe) has to follow the asynchronous programming pattern in Windows Phone applications.

There’s more…

In this recipe, we use the Windows Phone Emulator for testing. If you want to deploy and test your Windows Phone application on a real device, you need to obtain a Windows Phone developer account so as to unlock your Windows Phone device. Refer to the walkthrough:

App Hub – windows phone developer registration walkthrough,available at http://go.microsoft.com/fwlink/?LinkID=202697

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here