Working with Consuming an ODATA Service in WP7

Introduction:

In this article we are going to see how to consume a ODATA service in Windows Phone 7 application. ODATA is Open Data Protocol is an entity model used to access data as a REST service, which can be used to execute queries and to create, update and delete data on to the remote data service. ODATA service allows the consumers to query the data over the http protocol and retrieve the result in a plain XML format. Normally a mobile application development requires data that are available as a service which can be consumed and use on demand, where the ODATA Service plays a major role. We have variety of ODATA services that are available in market, rather we can create our ODATA service which can also be consumes as a WCF Data Services.

As per ODATA website, The Open Data Protocol (OData) is a Web protocol for querying and updating data that provides a way to unlock your data and free it from silos that exist in applications today. OData does this by applying and building upon Web technologies such as HTTP, Atom Publishing Protocol (AtomPub) and JSON to provide access to information from a variety of applications, services, and stores. The protocol emerged from experiences implementing AtomPub clients and servers in a variety of products over the past several years. OData is being used to expose and access information from a variety of sources including, but not limited to, relational databases, file systems, content management systems and traditional Web sites.

We have a comprehensive list of public ODATA Services that can be consumed from the client devices using the link http://www.odata.org/producers. Let us see the step by step process on how to consume the ODATA Service in our Windows Phone 7 application and see how to make use of it efficiently.

Steps:

Open Visual Studio 2010 IDE in administrator mode and create a new Silverlight for Windows Phone 7 project with a valid project name as shown in the screen below.



Now we need to design our XAML page where we want to show our consumed ODATA service, we can use the Listbox and dynamically bind the data which we consume. Copy the below XAML code to get the unique design in our sample project as shown in the screen below.



XAML Code:

<Grid x:Name="LayoutRoot" Background="White"> 

<Grid x:Name="LayoutRoot" Background="Transparent">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions> 

<!--<span class="hiddenSpellError" pre="">TitlePanel</span> contains the name of the application and page title-->

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG WP7 TUTORIALS" Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="OData Service" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

<!--<span class="hiddenSpellError" pre=""--> StackPanel>

<!--<span class="hiddenSpellError" pre="">ContentPanel</span> - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<button>OData" Margin="0,507,0,0" Click="Button_Click"></button>

<ListBox x:Name="MainListBox"&nbsp; ItemsSource="{Binding}" Margin="0,6,0,106">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin="0,0,0,17" Width="432">

<TextBlock Text="{Binding Path=Name}" TextWrapping="NoWrap"

Style="{StaticResource PhoneTextExtraLargeStyle}"/>

<TextBlock Text="{Binding Path=Description}" TextWrapping="NoWrap"

Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>

<TextBlock Text="{Binding Path=Url}" TextWrapping="NoWrap" Margin="12,-6,12,0"

Style="{StaticResource PhoneTextSubtleStyle}"/>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</Grid>

Once we designed the XAML page, now we need to consume the ODATA service, in this sample application we will make use of the Telerik Video's ODATA service which is available to public. The ODATA service is available using the URI http://tv.telerik.com/services/odata.svc/. To add the ODATA service right click on the project name and select Add Service Reference as shown in the screen below.



Clicking on Add Service Reference will get a pop window where we need to provide the OATA Service uri and click on Go button to discover the service online. Once the service is discovered we need to change the namespace to a user defined name as ODataTelerik as shown in the screen below.



On successfully adding the ODATA service reference to the project we can see a list of files added to the service reference folder. Now we are ready with the service, our next step is write some code that will do the necessary process to get the data from the service and show it to the user interface which we designed. Add the below 2 namespaces which are required to consume and get the data from the ODATA service as shown in the screen below.

Code Behind:
 

using System.Data.Services.Client;

using F5debugWp7ODataConsule.ODataTelerik;

Once we added the above 2 namespaces we need to start with our code to consume the service, copy the below code and add it to the Mainpage class. This code creates an instance of the reference which we added to the project and get the ODATA service URI which is used to create a reference while consuming the service as shown in the code below.



Code Behind:
 

private ODataDataSource TelerikEntity;

private static string strODataURI = "<a href="http://tv.telerik.com/services/odata.svc/%22;">http://tv.telerik.com/services/odata.svc/";</a>

private readonly Uri tURI = new Uri(strODataURI);

private DataServiceCollection<Video> videos;

Now in the button click event we need to call the ODATA Service and get the data which is required to bind to the controls which we designed in our initial process. Once we created the instance we can query the data from the DataServiceCollection by just using the LINQ query as shown in the screen below. Just copy and paste the below code the button click event to step further.



Code Behind:
 

private void Button_Click(object sender, RoutedEventArgs e)

{

TelerikEntity = new ODataDataSource(tURI);

videos = new DataServiceCollection<video tabindex="0">(TelerikEntity);</video> 

var queryvideo = from vid in TelerikEntity.Videos

select vid; 

videos.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(videos_LoadCompleted);

videos.LoadAsync(queryvideo);

}

Now we need to add the below code which is basically required to handle the event on the completion of loading the data to the user interface to scroll and have a better look for the end users as shown in the code below.

Code Behind:
 

void videos_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error == null)

{

if (videos.Continuation != null)

{

videos.LoadNextPartialSetAsync();

}

else

{

this.MainListBox.DataContext = videos;

}

}

else

{

MessageBox.Show("Error while fetching the data!!!");

}

}

Now we are done with our complete code, our final code behind class will look like the below code.

Code Behind:
 

using System.Data.Services.Client;

using F5debugWp7ODataConsule.ODataTelerik;

namespace F5debugWp7ODataConsule

{

public partial class MainPage : PhoneApplicationPage

{

private ODataDataSource TelerikEntity;

private static string strODataURI = "<a href="http://tv.telerik.com/services/odata.svc/%22;">http://tv.telerik.com/services/odata.svc/";</a>

private readonly Uri tURI = new Uri(strODataURI);

private DataServiceCollection<Video> videos; 

// Constructor

public MainPage()

{

InitializeComponent();

} 

private void Button_Click(object sender, RoutedEventArgs e)

{

TelerikEntity = new ODataDataSource(tURI);

videos = new DataServiceCollection<Video>(TelerikEntity); 

var queryvideo = from vid in TelerikEntity.Videos

select vid; 

videos.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(videos_LoadCompleted);

videos.LoadAsync(queryvideo);

} 

void videos_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error == null)

{

if (videos.Continuation != null)

{

videos.LoadNextPartialSetAsync();

}

else

{

this.MainListBox.DataContext = videos;

}

}

else

{

MessageBox.Show("Error while fetching the data!!!");

}

}

}

}

 
Now build and execute the application by simply pressing F5 from the keyboard and we can see the expected results are shown in the screens below.
Output Screens:



Conclusion:

So in this article we have seen what is ODATA service and how to consume the service from the Windows Phone 7 application to get the data and process it as per the requirement. Hope this article is useful for the readers.

Thanks for reading my article. If you like my blog and if you are interested in getting the latest updates on new articles, kindly follow me through one of these options.