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 !

About these ads

6 thoughts on “Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

  1. Thanks for the sample app. I use several Telerik components (Silverlight, ASP.NET, and ASP.NET MVC) and generally like them very much. But when I looked at Kendo they specifically mention webkit based browsers only so I never gave it further thought. I would rather stick with a true cross platform library like jQuery Mobile. But perhaps Telerik has simply not taken the time to qa Kendo on WP7 and that is why it isn’t officially supported. Let us know if you find any incompatibilities on WP7.

  2. Pingback: Kendo UI ListView Control and OData in Windows Phone Application « debug mode……

  3. Pingback: Windows Azure and Cloud Computing Posts for 5/15/2012+ - Windows Azure Blog

  4. Pingback: Monthly Report May 2012: Total Posts 10 « debug mode……

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s