Post
Ask Question

Windows Phone 8 App Development Using PhoneGap (Cordova): Part 1

Introduction

PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, JavaScript and CSS.

PhoneGap is an application container technology that allows you to create natively-installed applications for mobile devices using HTML, CSS and JavaScript. The core engine for PhoneGap is also 100% open source, under the Apache Cordova project.

The UI layer of a PhoneGap application is a web browser view that takes up 100% of the device width and 100% of the device height.

PhoneGap provides an application programming interface (API) that enables you to access native operating system functionality using JavaScript. You build your application logic using JavaScript and the PhoneGap API handles communication with the native operating system.

PhoneGap currently supports:

  1. iOS
  2. Android
  3. Wndows Phone 7
  4. Windows Phone 8
  5. BlackBerry
  6. WebOS
  7. Symbian
  8. Bada
Did you see that PhoneGap supports 7 different platforms? Interestingly Windows Phone 8 is the seventh (newest ) one to be included.

As per the PhoneGap website, the following features are supported in PhoneGap for Windows Phone 8.
  • Accelerometer
  • Camera
  • Com
  • Contacts
  • File
  • Geolocation
  • Media
  • Network
  • Notification (Alert)
  • Notification (Sound)
  • Notification (Vibration)
  • Storage
Setting up PhoneGap

If you are a Windows Phone Developer and wish to develop Apps using HTML5, CSS and JavaScript, then you can use PhoneGap and develop Windows Phone Apps.

Data Source: PhoneGap Explained Visually

At first you need to download the PhoneGap project from this link. I have used PhoneGap 2.8.0 in this tutorial, Install PhoneGap.

Now unzip the downloaded PhoneGap package, then open the lib folder and then open the windows-phone-8 folder. Now, you will see a Zip file named CordovaWP8_2_8_0.

CordovaWP8
                                                                        Firgure 1

Copy this file and then go to the My Documents \ Visual Studio 2013 \ Templates \ ProjectTemplates folder.

And paste CordovaWP8_2_8_0 here in this folder.

project templet folder
                                                            Figure 2

Creating a Project

Now, open your Visual Studio IDE and click on New Project.

In the New Project panel, you will see the CordoWP8_2_8_0 template and then create a project with your desired name.

Cordova WP 8 in c sharp
                                                                        Figure 3

Now In the Solution Explorer, you will see a WWW folder. Click on this folder and then you will see, a CSS folder, an img folder, a JavaScript folder and an index.html page. You will keep your CSS, JavaScript pages and images in these CSS, JavaScript and img folders.

Now click on the index.html page and then you will see a design like this.

index html
                                                                  Figure 4

Now you can directly run this cross-platform app on your Windows Phone 8 devices. If you deploy it on a real device then you will see a screen like this, in other words, your project is now ready.

Cheers!!!

apache cordova
                     Figure 5

Now select index.html and right-click on the file then select view code.

This is the code of the index.html file and this is what we see when we run this project on an emulator or real device.

Then I did some minor modification to the code. I have deleted the image and texts and added a h1 tag and wrote, Hello Windows Phone Developers. Now see what happens.
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  4.         <meta name="format-detection" content="telephone=no" />  
  5.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
  6.         <title>Hello World</title>  
  7.     </head>  
  8.     <body>  
  9.         <h1>Hello Windows Phone Developers</h1>  
  10.         <script type="text/javascript" src="cordova.js"></script>  
  11.         <script type="text/javascript" src="js/index.js"></script>  
  12.         <script type="text/javascript">  
  13.             app.initialize();  
  14.         </script>  
  15.     </body>  
  16. </html>  
Listing 1

hello windos phone developer
                  Figure 6

Now, we can see the Hello Windows Phone Developers text in our project main screen.

jQuery Mobile Theme
  • jQuery Mobile Theme for Windows Phone 8.

  • Now we will add jQuery Mobile Theme to our Windows Phone 8 project.

  • We can add a jQuery mobile theme in two ways.

  • One, we can install JQMThemeForWindowsPhone8 Package using the Package Manager Console (PMC). Two, we can directly add necessary references to our HTML file.

  • To use the Package Manager Console, at first we need to click Tools then the Library Package Manager and then Package Manager Console.

  • The Package Manager Console will appear at the bottom of Visual Studio.

  • Then we will write:

  • Install-Package JQMThemeForWindowsPhone8 -version 0.0.1

  • In the Package Manager Console and press the Enter button.

    package manager console
                                                                            Figure 7

Then PCM will install the JQM Theme for Windows Phone 8 successfully and we will see many JavaScript files, CSS files and pages have been added to our project (look at the Solution Explorer at the right).

Now if we rename our index.html file to any other name and rename themeStartPage.html file to index.html file and run this project then we will see the stunning look of the jQuery Mobile Theme in our Windows Phone 8 project. Here, you will see multiple jQuery mobile controls, backgrounds and transitions. I have selected the Dark theme and below you can see some screen shots of the Dark Theme.

plugins
                                                                           Figure 8

Way, two, directly add references of the jQuery Mobile theme in your index.html file.

  1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">  
  2. <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
  3. <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>  
Listing 2

Using a ListView Control

Now, I have added a list view control code in my index.html file and you can see how it looks like now in the following images. Here, I have used the jQuery Mobile light theme.

mobile light theam
                                                                           Figure 9

The full code of the Index.html file is given below.
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.         <meta name="format-detection" content="telephone=no" />  
  6.         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />  
  7.         <title>Functions</title>  
  8.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">  
  9.         <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>  
  10.         <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>  
  11.         <script type="text/javascript" charset="utf-8">  
  12.   
  13.             function checkLanguage() {  
  14.                 navigator.globalization.getPreferredLanguage(  
  15.                   function (language) { alert('language: ' + language.value + '\n'); },  
  16.                   function () { alert('Error getting language\n'); }  
  17.                 );  
  18.             }  
  19.         </script>  
  20.     </head>  
  21.     <body>  
  22.   
  23.         <div data-role="page" id="pageone">  
  24.             <div data-role="header">  
  25.                 <h1>List</h1>  
  26.             </div>  
  27.             <div data-role="main" class="ui-content">  
  28.                 <ul data-role="listview" data-autodividers="true" data-inset="true">  
  29.                     <li><a href="#pagetwo" data-transition="flip">Adele</a></li>  
  30.                     <li><a href="#">Agnes</a></li>  
  31.                     <li><a href="#">Albert</a></li>  
  32.                     <li><a href="#">Billy</a></li>  
  33.                     <li><a href="#">Bob</a></li>  
  34.                     <li><a href="#">Calvin</a></li>  
  35.                     <li><a href="#">Cameron</a></li>  
  36.                     <li><a href="#">Chloe</a></li>  
  37.                     <li><a href="#">Christina</a></li>  
  38.                     <li><a href="#">Diana</a></li>  
  39.                     <li><a href="#">Gabriel</a></li>  
  40.                     <li><a href="#">Glen</a></li>  
  41.                     <li><a href="#">Ralph</a></li>  
  42.                     <li><a href="#">Valarie</a></li>  
  43.                 </ul>  
  44.                 <p>The data-autodividers="true" attribute creates dividers where it is appropriate with uppercased first letters of the item's text.</p>  
  45.             </div>  
  46.             <div data-role="footer">  
  47.                 <h1>Footer Text</h1>  
  48.             </div>  
  49.         </div>  
  50.         <div data-role="page" id="pagetwo">  
  51.             <div data-role="header">  
  52.                 <h1>Welcome To My Homepage</h1>  
  53.             </div>  
  54.   
  55.             <div data-role="main" class="ui-content">  
  56.                 <p>Click on the link to go back. <b>Note</b>: fade is default.</p>  
  57.                 <a href="#pageone">Go back to Page One</a>  
  58.             </div>  
  59.             <div data-role="footer">  
  60.                 <h1>Footer Text</h1>  
  61.             </div>  
  62.         </div>  
  63.         <script type="text/javascript" src="cordova.js"></script>  
  64.         <script type="text/javascript" src="js/index.js"></script>  
  65.         <script type="text/javascript">  
  66.             app.initialize();  
  67.         </script>  
  68.     </body>  
  69. </html>  
Listing 3

Summary

I hope you've understoond how to get started with PhoneGap and create hybrid apps. I hope to see you soon. Happy coding.

Source of this jQuery Mobile List View code: jQuery Mobile List Views.

 


Similar Articles