In this post we will create WCF Data Service takes $JSONP in query and returns JSON data as response. For example if we want to fetch data as JSON we can fetch as following,

http://localhost:5157/WcfDataService1.svc/People?$format=json

To start with, Let us create WCF Data Service on School Database. Open Visual Studio 2010 as administrator and create a Web Application. We will be hosting WCF Data Service in web application.

Create DataModel

We will create DataModel using ADO.Net Entity framework. To add a DataModel we need to add ADO.Net Entity Model from Data Tab.

We want to create DataModel from database, so we will be choosing Generate from database option.

After this we need to choose Server name and database name. You can select appropriate authentication mechanism, in my case I am choosing Windows Authentication.

In last step, we need to select tables and views we want to keep as part of DataModel. In this case I am selecting all the tables.

Create WCF Data Service

To create WCF Data Service add new item selecting WCF Data Service project template from Web Tab

Modify WcfDataService.svc.cs as following. We need to provide DataModel name. In this case DataModel is SchoolEntites, we created in previous step.

By this step we have created WCF Data Service on SchoolEntities DataModel. Now press F5 to host created WCF Data Service in Cassini server and query in the browser.

And we can query a particular set of entity as following,

Enabling JSONP and URL Control Format

Read More Detail Here MSDN

If we want to fetch response in JSON format as following

http://localhost:5157/WcfDataService1.svc/People?$format=json

We will be getting following exception,

JSONP is used to fetch data from client side even though request need to be cross domain. To support $JSONP, we need to intercept the message before it gets dispatched. At intercept

• Read the request URL and if $JSONP is there remove it from the querystring. Because reading $JSONP in connection string WCF Data Service runtime will throw exception as shown above.
• And change Accept header to application/json

To enable this you need to add following file JSONPSupportBehavior.cs . Download sample project from and file from MSDN Code Gallery

Extract downloaded ZIP file and select JSONSupportBehavior.cs . Right click on your project and add existing item. Choose file JSONSupportBehavior.cs and add to the project.

Then modify WcfDataService.svc.cs as following,

We need to put JSONPSupportBehavior service attribute. Now go ahead and press F5 to run and fetch people in JSON format as following ,

http://localhost:5157/WcfDataService1.svc/People?$format=json

In this way we can enable $JSONP format on WCF Data Service. I hope this post is useful. Thanks for reading

Learn jQuery Part1: Introduction to jQuery

Objective

In this part we will see different ways we can select element or node in jQuery. Before you start with this part, I strongly recommend you to read first part of this series.

In jQuery an element or node can be selected in many ways. An element can be selected

• By ID
• By Class name
• By Attribute or value of an attribute
• If we want to select all elements then that can be selected by using tag name.

Before we go ahead and understand many ways of selecting an element or node, let us first understand what is an Element? In below HTML all the div and P can be called as nodes or elements. Any HTML elements on the HTML page can be termed as node. A node is called as Child Node if it is inside some other node. For example in below HTML snippet P inside div with id hellodiv is child node of this particular div.

Let us use above HTML and we need to select all the div. Since we need to select all the div then we can select that using tag name. All the div can be selected as following. In alert we will be getting number of div is on page.

In the same way if we want to select all the anchor tag <a>, all the page tag <p>, all the table tag <table> , we can do that as following

We can select more than one tag together by separating them with comma. Like following in one statement we can select all the p, table and a elements on the page.

If we want to select a specific element then we can select that using its class name or id. Let us say we have HTML as following

We want to select div with id is hellodiv. This can be selected as following

We will be getting following output in alert box.

Essentially, an element can be selected with ID by using # symbol. If we want to select elements with class name we can do that with the use of period operator.

Now we need to select div using class name. Selecting with class name is exactly the same as selecting by id. However there is performance issue in selecting using class name. Since jQuery iterate through all the DOM objects in memory whereas in case of selecting using ID, jQuery directly fetch the DOM object from memory.

And you will be getting expected output in alert as following,

There is only difference of hash and period in selecting using id or class name.

There may be scenario when you want to select a specific type of tag on basis of class name. For example in below HTML all the elements having same class name ‘hellodiv’.

If we want to select element P with class hellodiv then we will be selecting as following,

Essentially we need to put class name with period after the tag name.

Now let us take some other selection examples. For example you from following HTML you want to select all the hidden div.

We can select all the hidden div as following,

If we want to check that whether a div is hidden or not, we can check that as following

There may be scenario when we need to select child elements. For example consider following HTML

Now if we want to print number of <li> elements. We can do that as following,

Let us say you want to print first and last <li> elements, we can do that as following,

If we want to get nth element in the list, we can do that as following,

If we want to select all the odd and even numbers we can do that as following,

In this way we can select Elements or Nodes in different ways.

Conclusion

In this part we focused on different ways of Element or Node selection in jQuery. I hope this post was useful. Thanks for reading.

Using ListView

We can use a ListView control as following. You need to explicitly set data-role for Ul HTML element as listview

Resultant listview would be rendered as following in Windows Phone emulator

We can create Grouped ListView as following. We need to specify data-type as group.

Resultant listview would be rendered as following in Windows Phone emulator

If we want to make ListView items as link we can do that as following .

Resultant listview would be rendered as following in Windows Phone emulator

Working with OData

We are going to fetch movies details form OData feed of Netflix. OData feed if Netflix is available at

http://odata.netflix.com/Catalog/Titles

Very first we need to create datasource from OData feed. Datasource from OData feed can be created as following

While creating datasource , we are specifying URL of OData feed , type and pagesize need to be fetched from Netflix server. After datasource being created we need to set template and datasource of ListView as following.

$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});

In above code snippet we are setting datasource and template. Template can have HTML elements. Any variable data can be fetched as $datasourcename.fieldname

Complete code is as following. We are having two ListViews on the view to display. First ListView is fetching data from OData feed and second ListView is having hard coded data.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {

var data = new kendo.data.DataSource({
type:"odata", // specifies data protocol
pageSize:10,  // limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
});
$("#lst").kendoMobileListView(
{
template: "<strong>${data.Name}<br/><a href= ${data.Url}></a></strong><br/><img src=${data.BoxArt.MediumUrl} alt=a />",
dataSource: data
});
});
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<ul id="lst" data-role="listview" > </ul>
<ul data-role="listview" data-type="group">
<li> Bloggers
<ul>
<li><a href="#debugmode">debugmode</a></li>
<li><a href="#sqlauthrity">SqlAuthority</a></li>
</ul>
</li>
<li> MVP
<ul>
<li><a href="https://twitter.com">Jacob</a></li>
<li><a href="https://twitter.com">Mahesh</a></li>
</ul>
</li>
</ul>
<div data-role="footer">First View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

In Windows Phone emulator we should be getting output as following

In this way we can work with Kendo UI ListView control. I hope this post is useful. Thanks for reading.

After copying Kendo UI files open index.html and modify CSS reference and include below JS file. Make sure you have commented default CSS reference of Cordova.

Now we are all set to go ahead and modify the body of the index.html to work with Kendo UI . Let us make a view

After making view, let us put header and footer in the view.

Before running you need to put script before closing body tag

Complete code for Hello World will look like following,

Index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div data-role="view">
<div data-role="header">Header</div>
Hello World
<div data-role="footer">Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

When you run you should be getting following output on Windows Phone emulator.

Mobile applications are having one HTML pages and multiple views on the same. We can navigate between the views. Let us say there are two views are following,

<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button" style="background-color: green">Go to Second View</a>
<div data-role="footer">First View Footer</div>
</div>

Points need explanation in above DIV is as following,

Any div can be turned as VIEW id data-role is set to view. Data-transition is set to slide. There are many other values of data-slide as well.

A view can contain header, footer and body. Header can be set as below

And a View Footer can be set as below,

On body of the view we set a button. On click event of the button we will go to Second View. We can convert anchor tag to mobile button by setting data-role to button. We can set background color of the button also. In href , we need to provide mobile view name appended with hash to navigate. On click event of button we will be navigated to mobile view with id secondview.

Complete code for two views and navigation between views is as following,

Index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button"
style="background-color: green">
Go to Second  View
</a>
<div data-role="footer">First View Footer</div>
</div>
<div id="secondview" data-role="view" data-transition="slide">
<div data-role="header">Second View Header</div>
Hello World Second View <br />
<a href="#firstview" data-role="button" style="background-color:red">Go to First View</a>
<div data-role="footer">Second View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

On running the application in Windows Phone emulator you should have the following output

In this way you can get started with Kendo UI and Cordova to create apps targetting multiple platforms. We will get into details of different Kendo UI mobile widgets in further post . Thanks for reading !

• What is jQuery
• How to start using jQuery
• Understanding document.ready function

What is jQuery?

jQuery is a succinct and concise way to write JavaScript. It is a single JavaScript file and it is having cross browser support.

In simple terms we can say jQuery is simplified way of writing JavaScripts. It is a single file library with very smaller size. It helps in following

• It eases the task of HTML elements traversing. Using jQuery elements can be traversed by tag name, id, and class name.
• It simplifies the task of nested HTML elements traversing. With very readable syntax nested child elements can be traversed.
• It helps in handling several events across browsers.
• It provides many plugins for animations, sorting, searching etc.
• It helps is making Service and Ajax call.
• It adheres to CSS 3.0 and helps to applying them with minimal code on the HTML elements.

There are many other advantages are features are available in form of plugins. As a developer jQuery makes task of writing scripts and creating web based applications simpler and easier.

How to start using it?

To work with jQuery you need to download it and make a reference of the file on the HTML page. jQuery library can be downloaded From official site of jQuery. There are two versions of files to download there.

Production version is minified version and its size is 32 KB. Whereas Development version is uncompressed version and its size is 247KB. You need to be very careful while choosing the file because this file needs to be loaded at the client side. And larger file size may cause the performance loss.

Locally downloaded jQuery file saved in Scripts folder can be referred as below.

Other way of working with jQuery is refer the file from CDN of Microsoft or Google. In this case you do not need to download the file and add it locally. The other advantage of using file from CDN is, you will have always updated copy of the jQuery file. There is one disadvantage that your application will be dependent network always.

Link for Microsoft CDN is as below,

http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js

Minified version is also hosted at Microsoft CDN .You can use jQuery file from CDN as below,

Essentially with reference of jQuery file hosted at Microsoft CDN, your will have structure of HTML file as following,

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" > </script>

</head>
<body>
<h2>HTML Goes here</h2>
</body>
</html>

Understanding document.ready() function

Document.ready function is get executed when all the elements in DOM gets loaded. After all the DOM elements completes loading document.ready() function gets executed. Usually you call all the scripts from this function.

If you want to write some jQuery on click event of HTML element button then in that case, you may want to write code in some other function rather than ready function.

In above example we are calling an anonymous function in the ready function. In some cases you may want to call a named function. You can call a named function as following. However in the majority places you will find anonymous function being called in the document.ready

A complete example can be given as following;

<html>
<head>
<title>Learning jQuery</title>
<script type="text/javascript"
src="/scripts/jquery-1.4.1.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
alert('Other scripts goes here');
alert('Hello jQuery');
});
</script>
</head>
<body>
<h2>HTML Goes here</h2>
</body>
</html>

$(document).ready() is one of the most important function and denotes all the HTML elements in DOM has been loaded.

Conclusion

In this post we got an introduction of jQuery. We also looked into usage and importance of ready function. I hope first post of the series was useful to you. Thanks for reading.

Start with Downloading PhoneGap from github . After downloading of file extract its content and open lib folder

In the Lib folder open Window folder

From Windows Folder copy zipped file CoroDovaStarter and copy to folder

C:\Users\username\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\Silverlight for Windows Phone

Note: If you do not have Silverlight for Windows Phone folder creates it inside Visual C# folder.

Now open visual studio and create new project, you should be having a new project template named CordovaStarter

If you want to create Windows Phone Application using PhoneGap and other web technologies then you need to select CorodovaStarter template. Let us start with selecting this template and creating a Hello World Application. After creation of project examine solution explorer, you will find a folder created named www

www folder contains HTML,CSS, and JavaScript file. Index.html file is the startup file gets rendered. Index.html is normal HTML file with a div tag, h1 tag , and references to javascript and css file. We need to write required HTML for our application in this file. Let us modify HTML here

All the scripts on the page get executed when device is ready. Readiness of device can be

All the scripts should be written in deviceready function.

If you run the application after making above changes, you should be getting below output.

Eventually index.html should be having codes as below,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<h2>DebugMode</h2>
<div id="welcomeMsg">
</div>
</body>
</html>

As of now we have set the environment to develop Windows Phone application using PhoneGap or Cordova. In further post we will explore other capabilities and features of PhoneGap or Cordova.

I have started this series to help you in creating Windows Phone and Android applications using PhoneGap and Kendo UI. In this post I will be showing you setting environment on Windows machine for Android development. In last of the post we will create a Hello World Android application.

Background

PhoneGap and Kendo UI helps to create applications that can be deployed on any devicesApplications created using PhoneGap are having single code base and can be deployed to different types of devices. PhoneGap is HTML5 and CSS3.0 based open source framework. PhoneGap uses HTML5 and javaScript.

• PhoneGap uses Web standards like HTML5 and CSS 3 to create native mobile apps
• PhoneGap uses Javascript to write codes.
• Using PhoneGap native features of devices can be accessed.
• PhoneGap allows deploying applications to multiple platforms.
• PhoneGap supports 7 different platforms.

In further posts we will do more theoretical discussions of PhoneGap and kendo UI. Let us get started with steps to setup Android development environment.

Step 1 : Download and Install JDK

Very first you need to download and install Java Development Kit (JDK) from here . You will get windows installer. Click on Exe to install and follow the dialog boxes by clicking next buttons.

Step 2: Download and Install Eclipse

Download Eclipse Classic from here . After downloading and unzip the file. After unzipping click on eclipse application (Blue one). Once Eclipse is open you need to set the workspace.

Step 3: Download and Install ADT

Now you need to download and install ADT. To do this click on Help ->Install New Software from the menu.

You will be getting Available Software dialog box. Click on Add at right corner.

You will get Add Repository dialog box. In that give name as ADT Plugin and Location as https://dl-ssl.google.com/android/eclipse/

Click on OK then check all the check boxes in Developer Tool check box and all the four check boxes in bottom. After selecting all the check boxes click on Next.

You will get review dialog to review all the items to be installed. Review and click on Next.

Accept term and conditions and click on finish.

After installation you need to click on Restart Now. While installation if you get nay message related to unsigned document then just click on Ok to continue

After Restarting Eclipse you will get Welcome to Android Development dialog box. Here select Install new SDK and click on Next.

Select option Send usage Statistics to Google and click on Finish.

Open Eclipse and open Windows and Android SDK Manager. And Select Android version to install. I recommend you to install all the documents.

After installation you will get done message at bottom.

Step 4: Create Android Virtual Device

Now we are done with all installation and now we need to create Android Virtual Device [AVD]. To create AVD from Menu select Windows and then AVD Manager. You will get AVD manager dialog box. Click on New.

You will be getting below dialog box. Give some name like My_avd and select Target to Android 2.1 and set other parameter as your requirement and click on Create AVD.

Step 5: Create Hello World Project

After creating AVD you are all set to create your first Android app. To create app click on File->New->Project->Android->Android Project

Give name of the project and choose the location. In this case project will be created in default location.

Now choose the target type exactly the same as of AVD.

Next give namespace name. I am giving namespace as Debugmode.Android.Firstapp and click on Finish.

Now time to write some codes. Open MyFirstActivity.java file.

Next write below code. In code I am creating a TextView and setting the text.

From the menu click on Run->Run to run the application in Android emulator.

As of now we have setup the android environment. We have created Hello World application as well. In next part of this article we will download, install and setup PhoneGap and KendoUI to create native mobile applications to be deployed on multiple platforms.

Recently Kendo UI got an opportunity to say NAMSTE to developers of Hyderabad and very soon it is coming to your city also.

Kendo UI is HTML5 and JQuery based framework for building web and mobile applications. You can find more details about it here

Details of other cities events are as below,

I recommend you to go and explore Kendo UI in your city. Have fun !

Find more details about summit here

Find summit Pics here

Some of the highlight of this event was as following,

• Mindcrcaker launched all new version of http://www.c-sharpcorner.com/
• Mindcracker reached 2.2 Million users.
• Mindcracker announced new Mindcracker User Groups
• Awarded Mindcracker MVP

I was awarded as Mindcracker Member of the Year in Mindcracker MVP Summit 2012

In this event, I got opportunity to present on “Introducing Metro Application Development using HTML and JavaScript”. I tried to give my session more as demo oriented session.

If you want PPT and demo source code from the session then send me a mail at dhananjay.25july@gmail.com with Mindcracker in subject line.

This is an attempt to consolidate all work for a month on a single page. I hope you enjoyed reading my posts. I am sure you would have positive and constructive feedbacks.

I encourage you to share your thought on FACEBOOK PAGE HERE or you can tweet and FOLLOW ME HERE

Please find details of all the post as follows,

How to fetch selected item of ListView in HTML based Windows 8 Metro Application

Awarded with Microsoft MVP Award: 3rd time in Row

Isolated Storage Helper For C# and XAML based Metro Application

Monthly Report March 2012: Total Posts 15

Follow @debug_mode

Read this article for ListView Binding with Grouping and Semantic Zoom in Windows 8 JavaScript Metro Application

I strongly suggest you to read the above article for more detail on ListView. If you continue with above article and want to get the value of selected item you can do that as below,

lstMovies = document.getElementById("movieListView").winControl;  
lstMovies.addEventListener("iteminvoked", function (e) {
                e.detail.itemPromise.then(function (invokedItem) {


                    var titleOfData = invokedItem.data.title;
                    var selecteplayerImg = invokedItem.data.picture;
                });
            }, false);

In above code snippet

• lstMovies is name of the ListView.
• Iteminvoked is name of the event. This event gets fire when an item in the ListView is being selected.
• There are two data bind to the List View item. They are Title and Picture. Any data can be fetched as following snippet. invokedItem is parameter of itemPromise.

Title and Picture are properties of the datasource bind to the ListView.

In this way you can fetch selected item from ListView in HTML based Windows 8 Metro Application. I hope this post is useful. Thanks for reading!

To My Blog Readers,

For me, “Microsoft MVP Award is not an Award rather it is a Responsibility “

I am happy to announce to all my readers that I have been awarded as Microsoft MVP 3^rd Time in row. This time also I have been awarded in discipline Connected System Development (CSD).

From 1^st April 2011 to 31^st March 2012

I would take this opportunity to thank you my dear reader. I promise to serve and help you more in learning and developing throughout the coming years.

To be in touch with me FOLLOW ME ON TWITTER or CONNECT AT FACEBOOK PAGE

Any of your feedback is much appreciated.

Thanks with Regards

Dhananjay Kumar

I encourage you to share your thought on FACEBOOK PAGE HERE or you can tweet and FOLLOW ME HERE

Please find details of all the post as follows,

Difference between Application created using Metro UI guidelines and Real Windows 8 Metro Application

Lives Tiles in XAML based Windows 8 Metro Application

Presented on Windows 8 at Microsoft DreamSpark Yatra 2012 Indore

Some Important Points from Design for Windows Phone Developer session from Bijoy Singhal

Some Important Points from “SQL Misconceptions” Session from Pinal Dave and Vinod Kumar

Some Important Points from “Software Kaizen: Kanban explained ” session from Stephen Forte

ListView Binding with Grouping and Semantic Zoom in Windows 8 JavaScript Metro Application

Meet Telerik at TechEd India Live and win exciting prizes

Setting up Visual Studio11 Beta for Metro Application Creation

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

Start working with INFRAGISTICS NETADVANTAGE for WPF : Part 1 of Many

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

Monthly Report February 2012: Total Posts 19

Working with Telerik Kendo UI Widgets: Calendar

How to Create Bootable USB for Windows 8 Consumer Preview

Follow @debug_mode

Why to use Metro Application Isolated Storage Helper?

This helper class helps you to perform Read,Write and Delete of structured data in Isolated storage folders.

How to use this?

Download Metro Application Isolated Storage Helper from here

• Download XAML Metro Application Isolated Storage Helper from here
• Add reference of XAMLMetroAppIsolatedStorageHelper.dll
• Add Namespace using XAMLMetroAppIsolatedStorageHelper;

You have a class Student

public class Student
    {
        public string Name { get; set; }
        public int RollNumber { get; set; }
    }

You want to save object of Student then you can save it in Local Folder of isolated storage as below

Student objStudent = new Student { Name = "DJ ", RollNumber = 1 };
            var objectStorageHelper = new StorageHelper<Student>(StorageType.Local);            
            objectStorageHelper.SaveASync(objStudent,"abc");

And you can read back Student from isolated storage as below

public async void ReadData()
        {            
            var objectStorageHelper = new StorageHelper<Student>(StorageType.Local);           
            Student objStudent = await objectStorageHelper.LoadASync("abc");
            
        }

Abc is name of the file. If you want to store List<Student> then you can do that as following,

List<Student> lstStudent = new List<Student>()
                                        {new Student { Name = "DJ ", RollNumber = 1 },
                                         new Student { Name = "debugmode", RollNumber = 2 }
                                        };

            var objectStorageHelper = new StorageHelper<List<Student>>(StorageType.Local);
            objectStorageHelper.SaveASync(lstStudent, "abc");

You can read List<Student> from local folder of isolated storage as following

public async void ReadData()
        {            
            var objectStorageHelper = new StorageHelper<List<Student>>(StorageType.Local);           
            List<Student> lstStudent = await objectStorageHelper.LoadASync("abc");
            foreach (var r in lstStudent)
            {
                string n = r.Name;
            }
        }

Background

I was working with storing and retrieving structured data in Isolated Storage. While Binging I came across nicely written Generic Object Storage Helper for WinRT . This is written by Jamie Thomson . When I tried using this utility I came across an exception. I tried to store object of Student as following.

private void btnSaveData_Click_1(object sender, RoutedEventArgs e)
        {
            Student objStudent = new Student { Name = "Hary ", RollNumber = 1 };
            var objectStorageHelper = new ObjectStorageHelper<Student>(StorageType.Local);            
            objectStorageHelper.SaveASync(objStudent);
        }

But while running the program I came across exception as below,

After inspecting I found that library is written in Developer Preview and few API has been changed in Consumer Preview. Thankfully Jamie Thomson has put the source code on the CodePlex also. A big thank to him for the same. Rather than adding DLL and working with API, I copied and pasted code in my program and started to debug that.

First changes in API from DP to CP was that there were no TryMoveToRecycleBin in StorageDeleteOption enum

Now StorageDeleteOption enum contains only two values as below,

So I replaced above line of code as below,

The Second changes from DP to CP I found was removal of OpenWrite and OpenRead method from IRandomAcccessStream interface

Where readStream is defined as below,

And OpenWrite has been replaced with AsStreamForWrite

I have modified code to explicitly take filename as well. After these changes have been done Code was ready to be used in Consumer Preview. Updated helper class code is as following,

     public enum StorageType
    {
        Roaming, Local, Temporary
    }

    public class ObjectStorageHelper<T>
    {
        private ApplicationData appData = Windows.Storage.ApplicationData.Current;
        private XmlSerializer serializer;
        private StorageType storageType;

        
        public ObjectStorageHelper(StorageType StorageType)
        {
            serializer = new XmlSerializer(typeof(T));
            storageType = StorageType;
        }

        public async void DeleteASync(string FileName)
        {
            FileName = FileName + ".xml";
            try
            {
                StorageFolder folder = GetFolder(storageType);

                var file = await GetFileIfExistsAsync(folder, FileName);
                if (file != null)
                {
                    await file.DeleteAsync(StorageDeleteOption.PermanentDelete);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }

        public async void SaveASync(T Obj,string FileName)
        {

            FileName = FileName + ".xml";
            try
            {
                if (Obj != null)
                {
                    StorageFile file = null;
                    StorageFolder folder = GetFolder(storageType);
                    file = await folder.CreateFileAsync(FileName, CreationCollisionOption.ReplaceExisting);

                    IRandomAccessStream writeStream = await file.OpenAsync(FileAccessMode.ReadWrite);
                    Stream outStream = Task.Run(() => writeStream.AsStreamForWrite()).Result;
                    serializer.Serialize(outStream, Obj);
                }
            }
            catch (Exception)
            {
                throw;
            }
        }
        public async Task<T> LoadASync(string FileName)
        {
            FileName = FileName + ".xml";
            try
            {
                StorageFile file = null;
                StorageFolder folder = GetFolder(storageType);
                file = await folder.GetFileAsync(FileName);
                IRandomAccessStream readStream = await file.OpenAsync(FileAccessMode.Read);
                Stream inStream = Task.Run(() => readStream.AsStreamForRead()).Result;
                return (T)serializer.Deserialize(inStream);
            }
            catch (FileNotFoundException)
            {
                //file not existing is perfectly valid so simply return the default 
                return default(T);
                //throw;
            }
            catch (Exception)
                 {
                //Unable to load contents of file
                throw;
            }
        }

        private StorageFolder GetFolder(StorageType storageType)
        {
            StorageFolder folder;
            switch (storageType)
            {
                case StorageType.Roaming:
                    folder = appData.RoamingFolder;
                    break;
                case StorageType.Local:
                    folder = appData.LocalFolder;
                    break;
                case StorageType.Temporary:
                    folder = appData.TemporaryFolder;
                    break;
                default:
                    throw new Exception(String.Format("Unknown StorageType: {0}", storageType));
            }
            return folder;
        }

        private async Task<StorageFile> GetFileIfExistsAsync(StorageFolder folder, string fileName)
        {
            try
            {
                return await folder.GetFileAsync(fileName);

            }
            catch
            {
                return null;
            }
 }
    }

In this way you can work with structured data in XAML based Metro Application for Windows 8. I hope this post is useful. Thanks for reading.

I have been seen people are bit confused in between “An Application Designed with UI Guidelines of Metro “and in “METRO APPLICATION “itself. To make my point more clear let us visit this site.

If you see this TechED India site is beautifully designed and adhering to Metro UI design guidelines. Although it is following all the UI guidelines of Metro, it cannot be called as METRO APP. Then next question you may ask that what is a Metro App then?

Let us create a simple Hello World Metro Application. I am creating Hello World Metro Application using HTML and JavaScript.

There is nothing fancy about above application but a Hello World Text in H1 tag.

New to Metro Application Development? Read here

Hit F5 to run the application. While application is running open Task Manager. To open Task Manger press Ctr+Alt+Del. In Task Manger you can see your application is listed in the Application tab.

Click on the Details tab and you can see a program called WMAHost.exe is running. Microsoft WMA Host is responsible to run Metro Application on Windows 8 Machine.

What point I am trying to make here is that when you run a website adhering to Metro UI guidelines is run through a browser on your Windows 8 machine. Whereas Windows 8 Metro Application runs by a program WMAHost.exe. This program runs in sandbox rather than user login to the Windows 8 machine. To understand it more download and install ProcessExplorer.exe.

Open Process Explorer and in the Integrity tab you can see Windows 8 Metro Application run in App Container.

Here you see that Windows 8 Metro Application runs in AppContainer and this is the major difference between any applications created with the UI guidelines of Metro and Windows 8 Metro Application. I hope now it is clear to you difference between Windows 8 Metro application and application adhering UI guidelines of Metro. Thanks for reading