Getting Started with Windows Phone 8

Much awaited Windows Phone 8 SDK got launched on 30th October 2012. And as all we expected there is HTML5 support in Windows Phone 8.

image

To get it started navigate here to download Windows Phone 8 SDK and then from the New Downloads section download Windows Phone SDK 8.0. There are two options available to download Web Installer and DVD.


image

Download Windows Phone 8 SDK from there. After downloading start installing it.

 image

After installing you will be asked to restart the system. Click on Restart Now to restart the system

image

 

After successful installation of Windows Phone 8 SDK, you will get confirmation window as following image. Click on launch to launch Visual Studio after installation.

image

Now go ahead and create a Windows Phone Application project. You will notice that there is template for Windows Phone HTML5 App. However let us go ahead and create an application using Windows Phone App Template.

image 
Next you will be asked to choose the OS version. Choose Windows Phone OS 8.0 here.

image

Let us go ahead and put a Text Block on the MainPage.xaml.

image 

In Windows Phone 8 SDK you got 4 types of emulator to run and test the application. Select Emulator WVGA 512MB and run the application in emulator

image

On running the application, you will see all new emulator. In further post we will discuss more on new features of emulator.

image

So now we are all set to explore more on Windows Phone 8 . In further posts we will go in detail of each new features and API. I hope you find this post useful. Thanks for reading.

Presenting on WCF in C# Corner Delhi Chapter meet: 27th October

 

C-Sharpcorner is one of the most popular site among developers. They have taken the initiative to run a full day off line learning event in various cities of India. They call this offline group as CHAPTER. So far successfully they have done their meet in Delhi, Mumbai and Trivandrum.

This is their second Chapter meet in Delhi/NCR region.

Read more about that here and Register

I have got an opportunity to meet and share my learning of WCF with their community. I am pretty excited about it.

On 27th October 2012, I will be giving a session on WCF in Midcrcaker Noida Office.

Please find the details here

For any further query feel free to give a call to

Pravin Kumar: 09810371053

Hope to see you there.

Thanks to Student created Windows 8 App of my Blog

I am very pleased to write here that one student Akrita Agarwal has shown her love to my blog and voluntarily created Windows 8 Application of my blog. I am very touched by this kind effort. You can get that app from App Store from here


Link to download Application from Store


   

This is two column application. You can browse blog posts on selecting a particular blog post from left. There is feature of searching a blog post and about author as well.

   

 

This may not be the best application but we are celebrating proactive step taked by a student to create an Application for Windows Store here.

Thanks to Akrita and their friends.

Presented: Windows 8 App Development for web Developer

I had an opportunity to present on “Windows 8 App Development for Web Developers” at Microsoft Gurgaon on 13th October 2012. It was nice experience presenting in front of more than 125 enthusiast audiences.

I presented on the topic “Windows 8 App Development for Web Developers” and shown demos on

  1. Migrating CSS based HTML Web Application to Windows 8 Application
  2. Understanding App Package
  3. Understanding different capabilities
  4. Understating different Development options
  5. Create “Netflix Movie Explorer” App for Windows Store

Read step by step documentation shown in this demo

Please find below slides from the presentation,

Thanks for attending the presentation.

How to detect Device is connected to Internet using Cordova

 

Recently, I have been working on some of the Hybrid Application . I come across a requirement to detect that whether device is connected to Internet or not? Since I were developing Hybrid Application so I had an option to detect Internet using HTML5 . However this approach had a problem in the browsers do not support HTML5. Better approach to detect Internet connectivity of device is through Cordova (PhoneGap).

You can detect device is online or offline in if condition as following,

 

image

 

If device is connected to internet then you can check type of the connection in device using Cordova as well. You can do that as following

 

image

Make sure you have added the reference of cordova to work with this.

 

image

Best practice is to create a function to detect device connectivity status and call that function when the device is ready. I hope you find this post useful. Thanks for reading.

 

ASP.Net Web API Service in Windows Phone: Part 4 of Many

Creating First HTTP Service using ASP.NET Web API: Part1 of Many

Consuming ASP.NET Web API Service using HttpClient: Part2 of Many

How to Self-Host ASP.Net Web API: Part 3 of Many

In this post we will consume ASP.Net Web API HTTP Service in Windows Phone Application. If you do not specify header information in HTTP request then by default ASP.Net Web API service returns JSON data. So essentially there are three steps involved in consuming HTTP Service from ASP.Net Web API in Windows Phone Application.

  1. Make a HTTP Request
  2. Read data from HTTP Response
  3. Parse returned JSON data and bind data to data bound control

In this post we are going to consume service created in this POST

I have created a Windows Phone Application by choosing target framework 7.1. We are going to display Bloggers Data returned from ASP.Net Web API service in a ListView. Essentially we are going to consume a JSON Data from a HTTP Service. For that add below references in the project.

image

We are going to de-serialize JSON data using DataContractJsonSerializer class. We need to create a class at client side representing Bloggers entity from the service. Let us create a class called BloggersClient. We will de-serialize JSON data returning from the HTTP service in this object of this class.


namespace WindowsPhoneClient
{
public class BloggersClient
{
public string Id { get; set; }
public string Name { get; set; }
public string AreaOfIntrest { get; set; }

}
}

Once the client class is in placed add following references,

image

We are going to download JSON data from ASP.Net Web API service using WebClient class. Make sure that you are passing URL of your HTTP Service.

image

In the completed event, we will parse returned JSON using DataContractJsonSerializer class. In following code,

  • Creating MemoryStream form returned result
  • Creating object to de-serialize the returned JSON data
  • Reading de-serialized data object in List of BloggersClient
  • Setting List of BloggerClient as ItemSource of ListBox. On the XAML we have put a ListBox with name lstBloggers.

image

Code behind to load data from ASP.Net Web API HTTP Service on page load of the application and s display in ListBox is as following


using System;
using System.Collections.Generic;
using System.Net;
using Microsoft.Phone.Controls;
using System.Runtime.Serialization.Json;
using System.IO;
using System.Text;

namespace WindowsPhoneClient
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
WebClient proxy = new WebClient();
proxy.DownloadStringCompleted +=
new DownloadStringCompletedEventHandler(proxy_DownloadStringCompleted);
proxy.DownloadStringAsync(new Uri("http://localhost:39192/api/Bloggers"));
}

void proxy_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
Stream s = new MemoryStream(Encoding.Unicode.GetBytes(e.Result));
DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(List<BloggersClient>));
List<BloggersClient> result = (List<BloggersClient>) ser.ReadObject(s);
lstBloggers.ItemsSource = result;
}
}
}

On the XAML, we have put ListBox control do bind data from HTTP Service in the control.

If you are not aware of Data Binding in ListBox then watch a quick Video here


<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel 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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ASP.Net Web API" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="lstBloggers">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextTitle2Style}" />
<TextBlock Text="{Binding AreaOfIntrest}" Style="{StaticResource PhoneTextAccentStyle}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>

Now press F5 to run the application. You should able to get Bloggers detail from ASP.Net Web API service in Windows Phone Application.

image

I hope you find this post useful. Thanks for reading.

How to Self-Host ASP.Net Web API: Part 3 of Many

Creating First HTTP Service using ASP.NET Web API: Part1 of Many
Consuming ASP.NET Web API Service using HttpClient: Part2 of Many

In this post, we will step by step walkthrough that How to Self-Host ASP.Net Web API. We are going to host Web API in a console application. To do that creates a Console Application.

image

After creating Console Application make sure to change target framework to .NET Framework 4.0. To change framework right click on the project and select Properties and choose .NET Framework 4 from drop down

image

Next we need to add reference of ASP.Net Web API. We will add reference using NuGet. We will add NuGet Web API package. To add this right click on the project and click on Manage NuGet Package

image

In the search box type Microsoft.AspNet.WebApi.SelfHost and click on search button. Make sure to install Microsoft ASP.NET Web API Self Host in the project.

image

Accept the license term to install the package.

image

By this time we have set up the environment for self-hosting of Web API. Next we will add a Model class. To add that right click and add a class to the project.

Bloggers.cs


namespace webapihostapp
{
public class Bloggers
{
public string Id { get; set; }
public string Name { get; set; }
public string AreaOfIntrest { get; set; }
}
}

Next we will add a Controller class. To add that right click and add a class to the project. Make sure that you are appending Controller with the class name. For example you want to give controller name as abc then make sure that you are giving class name ABController. In this case we are giving controller name BloggersController .

image

Controller class needs to be inherited from ApiController class.

image

Next we need to write Action in the controller. We are writing a simple Action and this is returning List of Bloggers. Controller class will look like following

BloggersController.cs


using System.Collections.Generic;
using System.Web.Http;

namespace webapihostapp
{
public class BloggersController :ApiController
{
public List<Bloggers> GetBloggers()
{
return new List<Bloggers>
{
new Bloggers { Id="1", AreaOfIntrest ="Sql Server " , Name ="Pinal Dave"},
new Bloggers { Id="2", AreaOfIntrest ="ASP.Net " , Name =" Suprotim Agarwal " },
new Bloggers { Id="3", AreaOfIntrest ="C Sharp " , Name ="ShivPrasad Koirala"},
new Bloggers { Id="4", AreaOfIntrest ="Sql Server" , Name =" vinod Kumar " },
new Bloggers { Id="5", AreaOfIntrest ="JavaScript " , Name ="John Papa"},
new Bloggers { Id="6", AreaOfIntrest ="Dan Wahlin " , Name ="HTML5" },
new Bloggers { Id="7", AreaOfIntrest ="Business Intelligence " , Name ="Stephen Forte"},
new Bloggers { Id="8", AreaOfIntrest ="Web API " , Name ="Glen Block" },
new Bloggers { Id="9", AreaOfIntrest ="Windows Azure " , Name ="Gaurav Mantri"},
new Bloggers { Id="10", AreaOfIntrest ="Entity Framework" , Name ="Julie Lerman " },
new Bloggers { Id="11", AreaOfIntrest ="HTML" , Name ="John Bristow"},
new Bloggers { Id="12", AreaOfIntrest ="Silverlight" , Name ="Kunal" },

};

}
}
}

As of now we have Model and Controller in place. We will write code in Program file to host the Web API. Very first add the following namespaces in Program.cs

image

Then create instance of HttpSelfHostConfiguration

image

Next add a default route

image

After adding default route we need to create instance of HttpSelfHostServer and pass the configuration we just created as parameter.

image

Consolidating all the discussion together code to self-host ASP.Net Web API would be as following

Program.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.Http;
using System.Web.Http.SelfHost;

namespace webapihostapp
{
class Program
{
static void Main(string[] args)
{
var config = new HttpSelfHostConfiguration("http://localhost:9999");
config.Routes.MapHttpRoute(
"API Default", "api/{controller}");

using (HttpSelfHostServer server = new HttpSelfHostServer(config))
{
server.OpenAsync().Wait();
Console.WriteLine("Press Enter to quit.");
Console.ReadLine();
}
}
}
}

Now press F5 to run the application

image

Now browse to URL and should able to download Bloggers detail as JSON.

image

In this way we can self-host ASP.Net Web API in a console application. I hope you find this post useful. Thanks for reading.