Consuming Bing API 2.2(XML+JSON),REST Services in Windows 8 Metro Style Apps with XAML

In Windows 8 Metro Style Apps , we have previewed some great apps like Weather/Stocks consuming Live Streaming data with XAML/HTML5,JavaScript. These Metro Style Apps are based on Live XML/JSON API & formatted data in XAML to preview the corresponding output.

• Just like the Weather Sample in Windows 8 Metro Style Apps:

• With Consumption of Live Data the apps preview the UI according to XAML designing format like GridView,ListView,FlipView with streaming videos.

• Along with that, they have nice app bars which helps to add application functionalities making Metro Style apps for User-Interactive.

• In this example , We will develop a Metro Style Apps which helps to preview Live Stream Images from Bing API in XML/JSON with REST Services. The same can be also consumed by building a simple WCF Services with OData Feed in AtomPub/XML Format.
• Lets start by creating a Metro Style Apps project in VS 11 Developer Preview.

•  Add a few XAML in MainPage.xaml:

<UserControl x:Class=”BingMapsIntegration.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

d:DesignHeight=”768″ d:DesignWidth=”1366″>

<Grid x:Name=”LayoutRoot” Background=”#FF0C0C0C”>

<StackPanel Orientation=”Vertical”>

<StackPanel Orientation=”Horizontal” Height=”48″>

<TextBlock Text=”Enter Keyword:” FontSize=”14″ VerticalAlignment=”Center”

Height=”32″></TextBlock>

<TextBox x:Name=”txtKeyword” Width=”300″ Height=”32″></TextBox>

<Button x:Name=”btnSearch” Width=”40″ Content=”Search” Height=”32″></Button>

</StackPanel>

<StackPanel Orientation=”Horizontal”>

<ListBox x:Name=”PhotoList” HorizontalAlignment=”Left” Width=”250″

ScrollViewer.VerticalScrollBarVisibility=”Visible”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″

Height=”14″ FontSize=”12″ />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

• Add a new Class in your app called BingMaps & add the following codes:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace BingMapsIntegration

{

class BingMaps

{

public string Title { get; set; }

public string MediaUrl { get; set; }

}

}

• You need to also Sign-Up for the Developer API Key in Bing . To Sign up visit: http://www.bing.com/developers
• Modify the MainPage.xaml.cs with the code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using  Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

using System.Net.Http;

using System.Xml.Linq;

namespace BingMapsIntegration

{

partial class MainPage

{

public MainPage()

{

InitializeComponent();

  Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

public async void FetchBingPics(string strKeyWord, object control)

{

String strBingAppID = “[51D201080D27C665353AFD9AB807416147559F43]”;

XNamespace xmlns = http://schemas.microsoft.com/LiveSearch/2008/04/XML/multimedia;

HttpClient client = newHttpClient();

HttpResponseMessage response = await   client.GetAsync( “http://api.bing.net/xml.aspx?AppId=51D201080D27C665353AFD9AB807416147559F43&Version=2.2&Market=en-US&Image.Count=50&Sources=Image&Query=&#8221;+strKeyWord);

string xml = response.Content.ReadAsString();

XDocument doc = XDocument.Parse(xml);

IEnumerable<BingMaps> images = from img in doc.Descendants(

xmlns + “ImageResult”)

where !img.Element(xmlns + “MediaUrl”).Value.EndsWith(“.bmp”)

selectnewBingMaps

{

Title = img.Element(xmlns + “Title”).Value,

MediaUrl = img.Element(xmlns + “MediaUrl”).Value

};

if (control isListBox)

(control  asListBox).ItemsSource = images;

else

(control  asGridView).ItemsSource = images;

}

}

• The Async & Await are the keywords involved in Parallel/Asynchoronus  programming in .NET Framework 4.5 . To get more on Async & Await , please read in MSDN:
•  http://msdn.microsoft.com/en-us/magazine/hh456402.aspx

• Check out the Output of the App:

• Lets modify the Sample by adding some GridView functionality to have more rich UI experience in XAML for Metro Style Apps:
• Add the following code in MainPage.xaml after the ListBox:

<GridView x:Name=”PhotoGrid” Width=”1100″

ScrollViewer.HorizontalScrollBarVisibility=”Visible” Canvas.Left=”240″>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<WrapGrid MaximumRowsOrColumns=”3″ VerticalChildrenAlignment=”Top”

HorizontalChildrenAlignment=”Left” Margin=”0,0,0,0″ />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.ItemTemplate>

<DataTemplate>

<StackPanel Orientation=”Vertical”>

<Image Source=”{Binding MediaUrl}” Width=”200″ Height=”200″

Stretch=”UniformToFill” Grid.Column=”0″ />

<TextBlock Text=”{Binding Title}” Width=”200″ Height=”14″  FontSize=”12″ />

</StackPanel>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

• Along with that Add the Following code in MainPage.xaml.cs :
• Add the EventHandlers in MainPage’s Constructor:

public MainPage()

{

InitializeComponent();

btnSearch.Click += newRoutedEventHandler(btnSearch_Click);

PhotoList.SelectionChanged += new SelectionChangedEventHandler(PhotoList_SelectionChanged);

PhotoGrid.SelectionChanged += new  SelectionChangedEventHandler(PhotoGrid_SelectionChanged);

}

• Add the following methods in MainPage’s Code-behind:

void btnSearch_Click(object sender, RoutedEventArgs e)

{

string strSearch = txtKeyword.Text;

FetchBingPics( strSearch, PhotoList);

}

void PhotoList_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoList.SelectedItem == null))

{

string strTitle = (PhotoList.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoGrid);

}

}

void PhotoGrid_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

if (!(PhotoGrid.SelectedItem == null))

{

string strTitle = (PhotoGrid.SelectedItem asBingMaps).Title;

FetchBingPics(strTitle, PhotoList);

}

}

• Format the output as follows:

• The complete Metro Style Apps with GridView in XAML  consumed Live Bing API Feed in XML/JSON REST Services.

• Formatted GridView in XAML 4.5 for Windows 8 Metro Style Apps.

Consuming OData WCF REST Service from Android Client Device

As in my previous blog , already mentioned to create about OData Service feed in ATOM format which can be consumed in Windows Phone 7, Android, iPhone/iPAD , Silverlight,PHP, Windows Azure Table Storage clients.

• Lets check , how to consume the OData WCF REST service in Android client. To work with OData Android client lets download Odata4j Android client library from RESTlet: http://www.restlet.org/downloads/ & select the OData4j-Bundle.jar in Java Build Path of your Android project.
• Next, to consume OData service from android device, we need to host the service in IIS. In my demo, i have hosted it in IIS 7.5.
• Now, Start develop an android client application which can consume OData feed.

• Modify AndroidManifest.xml as it can consume feed from internet from native application:

<uses-permissionandroid:name=“android.permission.INTERNET”>

</uses-permission>

   Write code for  Activity.java :

package com.example.android.OData;

import java.util.ArrayList;

import java.util.List;

import org.odata4j.consumer.ODataConsumer;

import org.odata4j.core.OEntity;

import android.app.ListActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

public class JsonGrabbingConsumerExampleActivity  extends  ListActivity {

/** Called when the activity is first created. */

@Override

public void  onCreate(Bundle savedInstanceState) {

 super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String>(this,   android.R.layout.simple_list_item_1, GetExpenseReports()));

        getListView().setTextFilterEnabled(true);

    }

// read expenses odata feed

    ArrayList<String> GetExpenseReports()

    {

// build a simple array list of strings to test things out

        ArrayList<String> listUI = new ArrayList<String>();

// use odata4j consumer

        ODataConsumer c = ODataConsumer.create(http://10.12.1.223/ODataSample1/Service.svc);

// run a query just for Pending states

        List<OEntity> listExpenses = c.getEntities(“SampleCustomerData”).execute().toList();

for(OEntity expense : listExpenses) {

    listUI.add(expense.getProperty(

“CustomerID”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerName”).getValue().toString()

    +

“; “ + expense.getProperty(“CustomerNotes”).getValue().toString()

    );

        }

return  listUI;   

    }

}

• Checkout the output in Android 2.3:

Consuming OData WCF REST service from Windows Phone 7 Panorama Application

Consuming an OData (Open Data Protocol) in Client devices , Client services are quite easy. Open Data protocol , is a web protocol for querying and updating data and it was born of the need to break down data silos and increase their shared value. This allows data silos to interoperate between producers such as SQL Server, SharePoint servers, Cloud Storage Services, and consumers, for example Java, PHP, Silverlight, IIS, ASP.NET, AJAX.

OData incorporates with JSON, AtomPub, RSS to provide access to the  information from a range of applications, services, relational databases, file systems, content management systems (CMS), traditional websites.

Supported Platforms for OData Services:

1. Microsoft Visual Studio 2008 SP1
2. Microsoft Visual Studio 2010
3. Microsoft SQL Server 2008 R2
4. Microsoft Sharepoint 2010
5. Microsoft Windows Azure Storage(Blobs, Tables, Queues)
6. Microsoft SQL Azure
7. Microsoft Office Excel 2010 PowerPivot

• Lets create an OData WCF REST Service that for this purpose lets create an empty web application from Visual Studio

• Lets add a new WCF Service in the application & named it as Service.SVC

• Next , add the following Code to the service & check the resulting feed in browser.

using System;

using System.Collections.Generic;

using System.Data.Services;

using System.Data.Services.Common;

using System.Linq;

using System.ServiceModel.Web;

using System.Web;

namespace ODataSample1

{

public class Service : DataService<SampleDataSource>

{

// This method is called only once to initialize service-wide policies.

public static void InitializeService(DataServiceConfiguration config)

{

// TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.

// Examples:

// config.SetEntitySetAccessRule(“MyEntityset”, EntitySetRights.AllRead);

// config.SetServiceOperationAccessRule(“MyServiceOperation”, ServiceOperationRights.All);

config.SetEntitySetAccessRule(“*”, EntitySetRights.All);

config.SetServiceOperationAccessRule(“*”, ServiceOperationRights.All);

config.MaxResultsPerCollection = 100;

config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion.V2;

}

}

[ EntityPropertyMappingAttribute(“CustomerName”, SyndicationItemProperty.Title, SyndicationTextContentKind.Plaintext, true)]

[DataServiceKey(“CustomerID”)]

public class CustomerRecord

{

public int CustomerID { get; set; }

public string CustomerName { get; set; }

public string CustomerEmail { get; set; }

public string CustomerNotes { get; set; }

public DateTime CustomerLastContact { get; set; }

}

public class SampleDataSource

{

private readonly List<CustomerRecord> _sampleCustomerRecordList;

public SampleDataSource()

{

_sampleCustomerRecordList = newList<CustomerRecord>();

for (int i = 0; i < 100; i++)

{

CustomerRecord CR = newCustomerRecord();

CR.CustomerID = i;

CR.CustomerName =string.Format(“FirstName{0} LastName{1}”, i.ToString(), i.ToString());

CR.CustomerEmail =string.Format(“Email{0}@{1}.com”, i.ToString(), i.ToString());

CR.CustomerNotes =string.Format(“Notes{0}.Notes{1}”, i.ToString(), i.ToString());

CR.CustomerLastContact =DateTime.Now.AddDays(-10000).AddHours(i);

_sampleCustomerRecordList.Add(CR);

}

}

public IQueryable<CustomerRecord> SampleCustomerData

{

get

{

return _sampleCustomerRecordList.AsQueryable();

}

}

}

}

• Now check the Service status in Linqpad (http://www.linqpad.com) by adding the WCF service endpoint to the database/service endpoint connection.

• Lets check the status of the feed by entering query (<atom:title>)(e.g : SampleCustomerData  for this demo)in the browser

•  Check after entering query in the URL of the feed

• Service endpoint shows successful OData feed , next add a Windows Phone Panorama Application with the solution to implement a smartClient to the OData REST application.

• Now check the OData Codeplex site:http://odata.codeplex.com/releases/view/54698  & Download ODataClient_BinariesAndCodeGenToolForWinPhone.zip  , extract it in windows explorer & run the following command in the command prompt by browsing the corresponding directory.

datasvcutil /uri:http://localhost:8554/Service.svc/ /out:.\ServiceModel.cs /Version:2.0 /DataServiceCollection

<!–Panorama item one–>

<controls:PanoramaItem Header=”first item”>

<ListBox x:Name=”lst” Margin=”0,0,-12,0″ ItemsSource=”{Binding}”>

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Margin=”0,0,0,17″ Width=”432″>

<TextBlock Text=”{Binding CustomerID}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerName}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerEmail}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

<TextBlock Text=”{Binding CustomerNotes}” TextWrapping=”Wrap” Margin=”12,-6,12,0″ Style=”{StaticResource PhoneTextExtraLargeStyle}” />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</controls:PanoramaItem>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using ODataWP7Panorama.CustomersModel;

using System.Data.Services.Client;

namespace ODataWP7Panorama

{

public partial classMainPage : PhoneApplicationPage

{

public  SampleDataSource ctx = new SampleDataSource(new Uri(“http://localhost:8554/Service.svc/&#8221;, UriKind.Absolute));

// Constructor

public MainPage()

{

InitializeComponent();

this.Loaded += newRoutedEventHandler(MainPage_Loaded);

// Set the data context of the listbox control to the sample data

}

// Load data for the ViewModel Items

private void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var ctx = newSampleDataSource(newUri(http://localhost:8554/Service.svc/));

var coll = new  DataServiceCollection<CustomerRecord>(ctx);

lst.ItemsSource = coll;

coll.LoadCompleted +=newEventHandler<LoadCompletedEventArgs>(coll_LoadCompleted);

var qry = “/SampleCustomerData”;

coll.LoadAsync(newUri(qry, UriKind.Relative));

}

void coll_LoadCompleted(object sender, LoadCompletedEventArgs e)

{

if (e.Error != null)

{

MessageBox.Show(e.Error.Message);

}

}

}

}

• Now , lets the OData REST Service in Windows Phone 7.1 Client :