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.
![image1.jpg]()
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.
![image2.jpg]()
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"
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.
![image3.jpg]()
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.
![image4.jpg]()
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.
![image5.jpg]()
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.
![image6.jpg]()
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:
![image7.jpg]()
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.