How to create WCF Data Service with $JSONP format

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.

image

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.

image

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

image

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.

image

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.

image

Create WCF Data Service

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

image

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

image

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.

image

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

image

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,

image

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

image

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.

image

Then modify WcfDataService.svc.cs as following,

image

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

image

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

 

Learn jQuery Part 2: How to Select Elements or Nodes in jQuery

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.

image

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.

 image

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

image

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.

image

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

image

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

image 

We will be getting following output in alert box.

image

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.

image

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.

image

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

image

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

image

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

image

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

image

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.

image

We can select all the hidden div as following,

image

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

image

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

image

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

image

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

image

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

image

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

clip_image001

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.

 

Kendo UI ListView Control and OData in Windows Phone Application

In this post we will see the way to work with Kendo UI Mobile ListView control and OData. Before you go ahead with this post, I recommend you to read Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

Using ListView

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

image

Resultant listview would be rendered as following in Windows Phone emulator

image

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

image

Resultant listview would be rendered as following in Windows Phone emulator

image

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

image

Resultant listview would be rendered as following in Windows Phone emulator

image

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

image

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

image

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

Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

In this post we will discuss the way we can harness power of Kendo UI in creating Windows Phone application. Before you go ahead along with this blog post please read “Hello World “Windows Phone Application using PhoneGap or Cordova to setup environment for develop Windows Phone application using Cordova. Once you are done with steps of “Hello World “Windows Phone Application using PhoneGap or Cordova , You need to download Kendo UI mobile from here. After downloading you need to put JS, Styles files in the WWW folder.

image

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.

image

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

image

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

image

Before running you need to put script before closing body tag

image

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.

image

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.

image

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

image

And a View Footer can be set as below,

image

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.

image

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

image

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 !

Learn jQuery Part1: Introduction to jQuery

This is first part of Learn jQuery series. In this post we will see,

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

image

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.

image

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.

image

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,

image

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.

image

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

image

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.

“Hello World “Windows Phone Application using PhoneGap or Cordova

In this post, we will setup environment for development of Windows Phone Application using PhoneGap .

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

image

In the Lib folder open Window folder

image

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

image

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

image

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

image

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

image

All the scripts should be written in deviceready function.

image

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

image

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.

Setting up Android Environment for development using PhoneGap or Cordova

Objective

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.

image

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

image

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.

image

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

image

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

image

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.

image

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

image

Accept term and conditions and click on finish.

image

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

image

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

image

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

image

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

image

image

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.

image

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.

image

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

image

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

image

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

image

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

image

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

image

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

image 

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

image

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.