Windows Phone Application Using Kendo UI Mobile and PhoneGap or Cordova

Dhananjay Kumar
May 17, 2012
11k
0
0
Article

In this article we will discuss how we can harness the power of the Kendo UI for creating Windows Phone applications. Before proceeding with this article please read "Hello World "Windows Phone Application using PhoneGap or Cordova to set up the environment for developing Windows Phone applications using Cordova. When you have completed the steps for the "Hello World" Windows Phone Application using PhoneGap or Cordova, you need to then download the Kendo UI mobile from here. After downloading, you need to put the JS and Styles files in the WWW folder.

After copying the Kendo UI files, open index.html and modify the CSS reference and include the following 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 the Kendo UI. Let us make a view:

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

Before running, you need to put a script before the closing body tag:

The complete code for the Hello World will look like the 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="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 get the following output in the Windows Phone emulator.

Mobile applications have one HTML page and multiple views on it. We can navigate between the views. Let us say the two views in the 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>

Some points need explanation in the above DIV as in the 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. The header can be set as below:

And a view footer can be set as below:

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

The complete code for two views and navigation between the views is as follows:

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"/>

        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 a Windows Phone emulator you should have the following output:

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