Windows 8 Metro LOB App .NET 4.5 Category Features with Web API, Entity Framework Code First, Nuget, JSON.NET & Async -Await


Since the Asynchrony power of .NET 4.5 , it reveals the capability of building Windows 8 Metro LOB apps with ASP.NET Web API service , Entity Framework Code first support in backend. The Windows 8 Metro Enterprise app blocks keeps running with ASP.NET Web API , MVC 4, WCF Data Services , Azure Mobile Services keeping on backend as data provider model either in JSON or Atom/XML/RSS format.

The Asynchorony pattern on .NET 4.5 keeps the understanding of TPL (Task Parallel Library) with tremendous explore on APM model architecture pattern on C# Async -Await protocols. The HTTP client asynchorony pattern is greatly demandable with async-await styles for any standard clients (Windows 8 Metro Line-Of – Business Apps with POC , Windows Phone etc) implementations keeping Web Service with dataaccess on backend.

Lets have a look on a smart Metro Enterprise app built on ASP.NET MVC 4 Web API services connecting SQL data access with entity frameworks code first approach.

  • The app covers the entire .NET Framework 4.5 features from Code Contracts to Task Parallel Library (TPL)

  • The app has ASP.NET MVC 4 Web API support as data access strategy with Entity Framework & Code First approach.

Code snippet for FeatureDataSource.cs:

public  class FeatureDataSource

{

private static FeatureDataSource _sampleDataSource = newFeatureDataSource();

private ObservableCollection<FeatureDataItem> _items = newObservableCollection<FeatureDataItem>();

public ObservableCollection<FeatureDataItem> Items

{

get { returnthis._items; }

}

public FeatureDataSource()

{

this.Initialize();

}

public static IEnumerable<FeatureDataItem> Get()

{

return _sampleDataSource.Items;

}

public static FeatureDataItem Get(int id)

{

return _sampleDataSource.Items.FirstOrDefault(i => i.Id == id);

}

private async void Initialize()

{

using (var client = newWebBackendClient())

{

List<int> list = await client.Download<List<int>>(“/featuressummary”);

foreach (var i in list)

{

FeatureDataItem  feature = await client.Download<FeatureDataItem>(“/featuressummary/” + i);

_items.Add(feature);

}

}

}

}

}

  • The Asynchronous Programming Model (APM) has in-built support for Async -Await patterns for non-blocking thread operations & execution of Tasks. The Task Parallel Library is supervized with Data Parallelism & Task Parallelism which is basic coding snippet for Windows Clients HTTP operations (HttpClient,SyndicationClient, Async-Await) from Web API REST or WCF Data Services or Atom/RSS feeds.

  • More on Asynchronous Programming Model (APM) pattern for Windows Client (Windows 8 Metro Enterprise Apps, Windows Phone), Windows Azure , Windows Server can be here.

  • The Task Parallel Library (TPL) for .NET Framework can be diversified with Data Parallelism, Task Parallelism , Parallel LINQ (PLINQ) support majorly. The Windows 8 Metro Enterprise app blocks is patternized with TPL & Asynchronous platform.

  • The Parallel Computing is based on Asynchronous Pattern of Async-Await protocols on HTTPClients , similar way it provides support for web access , image , URL, Web Sockets, Diagnostics API support while it connects with raw WCF services too.

  • The Architecture of Task Parallel Library :

  • More on Task Parallel Library (TPL) for .NET Framework 4.5 support can be found here.

The Windows 8 Metro LOB app can be found in Windows Store Samples

Advertisements

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;

}

}

  • 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.

%d bloggers like this: