Post
Ask Question

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

Introduction

Hello everyone, this is the second article about Windows Phone 8 app development using PhoneGap (Cordova).

In the last article we talked about the PhoneGap (Cordova) installation process in Visual Studio 2013 and how to create our first “Hello world” Windows Phone project using Visual Studio and PhoneGap (Cordova).

At the end we saw two ways to integrate jQuery mobile with our Visual Studio project to make our project more beautiful and professional.

Link of first article: Windows Phone 8 App Development Using PhoneGap (Cordova): Part 1.

Topics will be covered

Here in this article we will see various PhoneGap APIs and code to use various sensors or capabilities of a Windows Phone device. In this article, we will cover topics like:

  • Popup Window
  • Vibrate
  • Connection Type
  • Device Info
  • Camera Capture
  • Back Button
  • Accelerometer
  • Com
  • Geo-location
  • Battery Status
  • Collapsible Control
  • Panel Control

Interface of the Application

The following images are the screen shots of the long list of selectors and using that we will select various functionalities and actions.

phone apps

Here, in the preceding image we can see a long list of selectors. Using this long list of selectors we will see various actions of the available functionalities of PhoneGap in Windows Phone.

Code Behind

The code from this long list selector is given below. Each section is described separately and briefly.

jQuery Mobile Reference

Since we are using jQuery Mobile UI, we added these three lines of reference code first. This is the reference code of the jQuery Mobile Theme.

  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 1

Using Long List Selector

The HTML code of this long list selector is given below.

  1. <div data-role="page" id="pageone">  
  2.     <div data-role="header">  
  3.         <h1>Phonegap</h1>  
  4.     </div>  
  5.     <ul data-role="listview" data-inset="true">  
  6.         <li><a href="#pagetwo">Show Pop Up</a></li>  
  7.         <li><a href="#pagethree">Vibrate</a></li>  
  8.         <li><a href="#pagefour">Connection Type</a></li>  
  9.         <li><a href="#pagefive">Device Info</a></li>  
  10.         <li><a href="#pagesix">Camera Capture</a></li>  
  11.         <li><a href="#pageseven">Back Button</a></li>  
  12.         <li><a href="#pageeight">Accelerometer</a></li>  
  13.         <li><a href="#pagenine">Com</a></li>  
  14.         <li><a href="#pageten">GeoLocation</a></li>  
  15.         <li><a href="#pagetwelve">Battery Status</a></li>  
  16.         <li><a href="#pageeleven">collapsible Control</a></li>  
  17.         <li><a href="#pagethirteen">Panel Control</a></li>  
  18.                 
  19.     </ul>  
  20.   
  21.     <div data-role="footer">  
  22.         <h1>APIs</h1>  
  23.     </div>  
  24.     </div>  
  25. ...  
  26. </div>  
Listing 2

Popup Control

Now if we select the first option in the long list selector, a Pop-up, then we will see a screen as in the following page. Then, if we click on the Click Me button, then a Pop-up menu will appear with the text of Button Clicked.

popup

HTML and JavaScript code of Pop-up menu.
  1. <div data-role="page" id="pagetwo">  
  2.     <div data-role="header">  
  3.         <h1>Welcome To My Homepage</h1>  
  4.     </div>  
  5.   
  6.     <div data-role="main" class="ui-content">  
  7.         <a href="#" onclick="btn_click()" class="ui-btn">Click Me</a>  
  8.         <a href="#pageone">Go back to Home page</a>  
  9.     </div>  
  10.     <div data-role="footer">  
  11.         <h1>Footer Text</h1>  
  12.     </div>  
  13. </div>  
  1. function btn_click()  
  2. {  
  3.     navigator.notification.alert("Button Clicked",null,"Pop Up","");  
  4. }  
Listing 3

Using Vibrate

Now we will look at the mobile device Vibrate API. The following is the screen shot of the vibrate me page.

Using Vibrate
                           Figure 3

We can vibrate our mobile device by calling the following JavaScript vibrate function. The single line of JavaScript code is initializing the vibration in the device and here the duration of vibration is 1 second (1000 miliseconds).
  1. function vibrate()
  2. {  
  3.    navigator.notification.vibrate(1000)  
  4. }  
Listing 4

Connection Type

Connection Type
                        Figure 4

We will now see the connection type of our mobile device. We can get the connection type of the device by calling the following JavaScript Connection_Type function. Here we are declaring a variable named networkState and then assigning the connection type value to this variable by calling the navigation.network.connection.type code. Then we can see the network status using an alert message.
  1. function Connection_Type()  
  2. {  
  3.    var networkState = navigator.network.connection.type;  
  4.    navigator.notification.alert(networkState);  
  5. }  
Listing 5

Device Information

Device Information
                           Figure 5

Here we can see the Device info of our mobile device by calling the JavaScript Device_Info function. Here, the JavaScript APIs like, device.name, device.platform, device.uuid, device.version are showing us the Device Name, platform, Unique ID and Version of the mobile device. Then, an alert message is showing us the device info.

  1. function Device_Info()
  2. {  
  3.     var DeviceName = device.name;  
  4.     var Platform = device.platform;  
  5.     var UniqueID = device.uuid;  
  6.     var Version = device.version;  
  7.     navigator.notification.alert('Device Name : ' + DeviceName + '\n Platform : ' + Platform  
  8.     + '\n UUID : ' + UniqueID + '\n Version : ' + Version);  
  9. }  
Listing 6

Camera Capture

Camera Capture

We can take a picture, save it and preview it in Windows Phone using the JavaScript API. Here, we are calling the Camera Capture function and this function is invoking the camera and then we can take a picture. We are using camera.getPicture and if our application successfully invokes the camera and takes the picture then it will move to the onSuccess function and then takes an image control and shows the recently taken photo on that image control by setting its source.
  1. function Camera_Capture() {  
  2.     navigator.camera.getPicture(onSuccess, onFail, { sourceType: Camera.PictureSourceType.CAMERA });  
  3. }  
  4.   
  5. function onSuccess(data) {  
  6.     var imageControl = document.getElementById('image');  
  7.     imageControl.src = "data:image/jpeg;base64," + data;  
  8. }  
  9.   
  10. function onFail(message) {  
  11.     alert('Error taking picture');  
  12. }  
Listing 7

Back Button

Back Button
                     Figure 7

You can simply use the “Back Button” control by adding a single line of code. Declare the data-rel="back", in the Button property. Here is the code.
  1. <div data-role="page" id="pageseven">  
  2.     <div data-role="header">  
  3.         <h1>Welcome To My Homepage</h1>  
  4.     </div>  
  5.   
  6.     <div data-role="main" class="ui-content">  
  7.         <a href="#" class="ui-btn" data-rel="back">Go Back</a>  
  8.         <a href="#pageone">Go back to Home page</a>  
  9.     </div>  
  10.     <div data-role="footer">  
  11.         <h1>Footer Text</h1>  
  12.     </div>  
  13. </div>  
Listing 8

Accelerometer

Accelerometer
                           Figure 8

Here we can see the Acceleration on the X, Y, Z axes and timestamp using the Accelerometer sensor of the Windows Phone device. Here, the JavaScript APIs like acceleration.x, acceleration.y, acceleration.z and acceleration.timestamp are showing us the X,Y,Z acceleration and timestamp of the mobile device. Then, an alert message is showing us the acceleration info.
  1. function Dev_Ready()
  2. {  
  3.     navigator.accelerometer.getCurrentAcceleration(onSuccess, Error);  
  4. }  
  5.   
  6. function onSuccess(acceleration)
  7. {  
  8.     alert('Acceleration X: ' + acceleration.x + '\n' +  
  9.             'Acceleration Y: ' + acceleration.y + '\n' +  
  10.             'Acceleration Z: ' + acceleration.z + '\n' +  
  11.             'Timestamp: '      + acceleration.timestamp + '\n');  
  12. }  
  13.   
  14. function Error()
  15. {  
  16.     alert('onError!');  
  17. }  

Listing 9

Com

Com
                           Figure 9

Here we are calling com.getCurrentHeading to get the Com heading of the mobile device then if our application successfully calls the getCurrentHeading then then the application will show the current heading value using heading.magneticHeading using a message box.
  1. function Com() 
  2. {  
  3.     navigator.com.getCurrentHeading(Success, Errror);  
  4. }  
  5.   
  6. function Success(heading)
  7. {  
  8.     alert('Heading: ' + heading.magneticHeading);  
  9. }  
  10.   
  11. function Errror(comError)
  12. {  
  13.     alert('Com Error: ' + comError.code);  
  14. }  
Listing 10

Geolocation

Geolocation
                           Figure 10

The following is the JavaScript code to get the current location of the mobile device. At first we are calling geolocation.getCurrentPosition and if it is successfully called then we will call the GeoSuccess function and the data of the position that we get from getCurrentPosition. Then, by using position.coords.lattitude and position.coords.longitude we will get the longitude and latitude value of the current location and show it using a message box.
  1. function Geo_Location()  
  2. {  
  3.     navigator.geolocation.getCurrentPosition(GeoSuccess, GeoError);  
  4. }  
  5.   
  6. function GeoSuccess(position)  
  7. {  
  8.     var element = document.getElementById('geolocation');  
  9.     alert('Latitude: ' + position.coords.latitude  + '\n' +  
  10.                         'Longitude: ' + position.coords.longitude + '\n' +  
  11.                         'Altitude: ' + position.coords.altitude + '\n' +  
  12.                         'Accuracy: ' + position.coords.accuracy + '\n' +  
  13.                         'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +  
  14.                         'Heading: ' + position.coords.heading + '\n' +  
  15.                         'Speed: ' + position.coords.speed + '\n' +  
  16.                         'Timestamp: ' + position.timestamp);  
  17. }  
  18.   
  19. function GeoError(error)  
  20. {  
  21.     alert('code: ' + error.code + '\n' +  
  22.             'message: ' + error.message + '\n');  
  23. }  
Listing 11

Battery Status

The following is the code to get the battery status of the device. We can see the battery status if the current battery level increases or decreases. If the current battery level is the same then the message will not show. We can see the battery status only if the status changes.
  1. window.addEventListener("batterystatus", onBatteryStatus, false);  
  2. function onBatteryStatus(info)
  3. {  
  4.     // Handle the online event  
  5.     //console.log("Level: " + info.level + " isPlugged: " + info.isPlugged);  
  6.     alert("Level: " + info.level + "%, isPlugged: " + info.isPlugged);  
  7. }  
Listing 12

Collapsible Control

Collapsible Control
The following is the code of the collapsible control in the jQuery mobile.
  1. <div data-role="page" id="pageeleven">  
  2.     <div data-role="header">  
  3.         <h1>Insert Page Title Here</h1>  
  4.     </div>  
  5.   
  6.     <div data-role="main" class="ui-content">  
  7.         <div data-role="collapsible" data-theme="b" data-content-theme="b">  
  8.             <h1>Click me - I'm collapsible!</h1>  
  9.             <p>I'm the expanded content.</p>  
  10.         </div>  
  11.     </div>  
  12.   
  13.     <div data-role="footer">  
  14.         <h1>Insert Footer Text Here</h1>  
  15.     </div>  
  16. </div>  
Listing 13

Panel Control

Panel Control
This is the code of the opening of the panel in a page. If we click on the button then a different panel will appear from the right side of the application:
  1. <div data-role="page" id="pagethirteen">  
  2.     <div data-role="panel" id="myPanel" data-theme="b">  
  3.         <h2>Panel Header</h2>  
  4.         <p>I am a themed panel!</p>  
  5.         <p> You can close me by clicking outside of me, pressing the Esc key or by swiping.</p>  
  6.     </div>  
  7.   
  8.     <div data-role="header">  
  9.         <h1>Page Header</h1>  
  10.     </div>  
  11.   
  12.     <div data-role="main" class="ui-content">  
  13.         <p>Click on the button below to open the themed Panel.</p>  
  14.         <a href="#myPanel" class="ui-btn ui-btn-b ui-btn-inline ui-corner-all ui-shadow">Open Panel</a>  
  15.     </div>  
  16.   
  17.     <div data-role="footer">  
  18.         <h1>Page Footer</h1>  
  19.     </div>  
  20. </div>  
Listing 14

Summary

I hope you've understoond how to use these controls in PhoneGap. For further reading just visit the following links. Have a nice day. Happy Coding!

PhoneGap Documentation of Windows Phone APIs: Getting Started with Windows Phone 8.

jQuery Mobile Control Codes: jQuery Mobile Tutorial
<< Windows Phone 8 App Development Using PhoneGap (Cordova): Part 1.


Similar Articles