{"id":953,"date":"2011-05-17T12:02:56","date_gmt":"2011-05-17T12:02:56","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/odatateam\/2011\/05\/17\/accessing-an-odata-media-resource-stream-from-a-windows-phone-7-application-streaming-provider-series-part-3\/"},"modified":"2024-02-16T13:10:38","modified_gmt":"2024-02-16T20:10:38","slug":"accessing-an-odata-media-resource-stream-from-a-windows-phone-7-application-streaming-provider-series-part-3","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/odata\/accessing-an-odata-media-resource-stream-from-a-windows-phone-7-application-streaming-provider-series-part-3\/","title":{"rendered":"Accessing an OData Media Resource Stream from a Windows Phone 7 Application (Streaming Provider Series-Part 3)"},"content":{"rendered":"

In this third post in the series on implementing a streaming data provider, we show how to use the OData client library for Windows Phone 7 to asynchronously access binary data exposed by an Open Data Protocol (OData) feed. We also show how to asynchronously upload binary data to the data service. This Windows Phone sample is the asynchronous equivalent to the previous post Data Services Streaming Provider Series-Part 2: Accessing a Media Resource Stream from the Client<\/a>; both client samples access the streaming provider that we create in the first blog post in this series: Implementing a Streaming Provider<\/a><\/font>. This post also assumes that you are already somewhat familiar with using the OData client library for Windows Phone 7 (which you can obtain from the OData project in CodePlex<\/a>), as well as phone-specific concepts like paged navigation and tombstoning. For more information about OData and Windows Phone, see the topic Open Data Protocol (OData) Overview for Windows Phone<\/a>. <\/p>\n

OData Client Programming for Windows Phone 7 <\/h3>\n

This application consumes an OData feed exposed by the sample photo data service, which implements a streaming provider to store and retrieve image files, along with information about each photo. This service returns a single feed (entity set) of PhotoInfo entries, which are also media link entries. The associated media resource for each media link entry is an image, which can be downloaded from the data service as a stream. The following represents the PhotoInfo entity in the data model:<\/p>\n

<\/p>\n

This sample streaming data service is demonstrated in Implementing a Streaming Provider<\/a><\/font>. You can download this streaming data service as a Visual Studio project from Streaming Photo OData Service Sample<\/a> on MSDN Code Gallery. In our client phone application, we bind data from the PhotoInfo feed to UI controls in the XAML page. <\/p>\n

First we need to create a Window Phone application that references the OData client library. (Note that the same basic APIs can be used to access and create media resources from a Silverlight client, except for the tombstoning functionality, which is specific to Windows Phone.) I won\u2019t go into too much detail on the XAML that creates the pages in the application, since this is not a tutorial on XAML. You can review for yourself the XAML pages in the downloaded ODataStreamingPhoneClient project. Here<\/font> are the basic steps to create this application:<\/font><\/p>\n

    \n
  1. Download and install the OData client library for Windows Phone 7<\/a>. This includes the System.Data.Services.Client.dll assembly and the DataSvcUtil.exe tool. <\/li>\n
  2. Create the Windows Phone project. <\/li>\n
  3. Run the DataSvcUtil.exe program (included in the OData client library for Windows Phone 7<\/a> download) to generate the client data classes for the data service.
    Your command line should look like this (except all on one line): \n
    \n

    DataSvcUtil.exe \/out:"PhotoData.cs" \/language:csharp \/DataServiceCollection
    \/uri:<\/font>http:\/\/myhostserver\/PhotoService\/PhotoData.svc\/<\/font><\/font><\/font> \/version:2.0<\/font><\/p>\n<\/blockquote>\n<\/li>\n

  4. Add a reference to the System.Data.Services.Client.dll assembly. <\/li>\n
  5. Create a ViewModel class for the application named MainViewModel. This ViewModel helps connect the view (controls in XAML pages) to the model (OData feed accessed using the client library) by exposing properties and methods required for data binding and tombstoning. The following represents the MainViewModel class that supports this sample:
    \"image\"<\/a> <\/li>\n
  6. Implement tombstoning to store application state when the application is deactivated and restore state when the application is reactivated. This is important because deactivation can happen at any time, including when the application itself displays the PhotoChooserTask to select a photo stored on the phone. To learn more about how to tombstone using the DataServiceState object, see Open Data Protocol (OData) Overview for Windows Phone<\/a>. <\/li>\n
  7. The MainPage.xaml page displays a ListBox of PhotoInfo objects, which includes the media resources as images downloaded from the streaming data service.
    \"image\"<\/a> <\/li>\n
  8. When one of the items in the ListBox is tapped, details of the selected PhotoInfo object are displayed in a Pivot control the PhotoDetailsWindow page:
    \"image\"<\/a>\"image\"<\/a>  <\/li>\n<\/ol>\n

    Querying the Data Service and Binding the Streamed Data<\/h3>\n

    The following steps are required to asynchronously query the streaming OData service. All code that access the OData service is implemented in the MainViewModel class.<\/p>\n

      \n
    1. Declare the DataServiceContext<\/a> used to access the data service and the DataServiceCollection<\/a> used for data binding. \n
      \n

      \/\/ Declare the service root URI.
      private Uri svcRootUri =
          new Uri(serviceUriString, UriKind.Absolute);<\/font><\/p>\n

      \/\/ Declare our private binding collection.
      private DataServiceCollection<PhotoInfo> _photos;<\/font><\/p>\n

      \/\/ Declare our private DataServiceContext.
      private PhotoDataContainer _context;<\/font><\/p>\n

      public bool IsDataLoaded { get; private set; }<\/font><\/p>\n<\/blockquote>\n<\/li>\n

    2. Register a handler for the LoadCompleted event when the binding collection is set.   \n
      \n

      public DataServiceCollection<PhotoInfo> Photos
      {
          get { return _photos;}
          set
          {
              _photos = value;<\/font><\/p>\n

              NotifyPropertyChanged("Photos");<\/font><\/p>\n

              \/\/ Register a handler for the LoadCompleted event.
              _photos.LoadCompleted +=
                  new EventHandler<LoadCompletedEventArgs>(Photos_LoadCompleted);
          }
      }<\/font><\/p>\n<\/blockquote>\n<\/li>\n

    3. When MainPage.xaml is navigated to, the LoadData method on the ViewModel is called; the LoadAsync method asynchronously executes the query URI. \n
      \n

      \/\/ Instantiate the context and binding collection.
      _context = new PhotoDataContainer(svcRootUri);
      Photos = new DataServiceCollection<PhotoInfo>(_context);<\/font><\/p>\n

      \/\/ Load the data from the PhotoInfo feed.
      Photos.LoadAsync(new Uri("\/PhotoInfo", UriKind.Relative));<\/font><\/p>\n

      <\/font><\/p>\n<\/blockquote>\n<\/li>\n

    4. The Photos_LoadCompleted method handles the LoadCompleted event to load all pages of the PhotoInfo feed returned by the data service. \n
      \n

      private void Photos_LoadCompleted(object sender, LoadCompletedEventArgs e)
      {
          if (e.Error == null)
          {
              \/\/ Make sure that we load all pages of the Customers feed.
              if (_photos.Continuation != null)
              {
                  \/\/ Request the next page from the data service.
                  _photos.LoadNextPartialSetAsync();
              }
              else
              {
                  \/\/ All pages are loaded.
                  IsDataLoaded = true;
              }
          }
          else
          {
              if (MessageBox.Show(e.Error.Message, "Retry request?",
                  MessageBoxButton.OKCancel) == MessageBoxResult.OK)
              {
                  this.LoadData();
              }
          }
      }<\/font><\/p>\n

      <\/font><\/p>\n<\/blockquote>\n<\/li>\n

    5. When the user selects an image in the list, PhotoDetailsPage.xaml is navigated to, which displays data from the selected PhotoInfo object. <\/li>\n<\/ol>\n

      Binding Image Data to UI Controls<\/h3>\n

      This sample displays images in the MainPage by binding a ListBox control to the Photos property of the ViewModel, which returns the binding collection containing data from the returned PhotoInfo feed. There are two ways to bind media resources from our streaming data service to the Image control. <\/p>\n