This chapter is from the book
This chapter is from the book
This chapter is from the book
Leveraging Cordova APIs
Now that we know how to configure an application to wait until the Cordova APIs are available, let’s build an application that actually uses some of the Cordova APIs. The Hello World #4 application shown in Listing 2.4 uses the Cordova Device API to allow the application to understand a bit about the environment it is running in.
Listing 2.4 Hello World #4 Application
<!DOCTYPE html>
<html>
<head>
<title>Hello World #4</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height" />
<script src="cordova.js"></script>
<script>
var br = "<br />";
function onBodyLoad() {
console.log("Entering onBodyLoad");
alert("Body Load");
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.notification.alert("Cordova is ready!");
console.log("Cordova: " + device.cordova);
//Get the appInfo DOM element
var element = document.getElementById('appInfo');
//replace it with specific information about the device
//running the application
element.innerHTML =
'Cordova Version: ' + device.cordova + br +
'Platform: ' + device.platform + br +
'Model: ' + device.model + br +
'OS Version ' + device.version;
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Hello World #4</h1>
<p>This is a Cordova application that makes calls to the Cordova Device API.</p>
<p id="appInfo">Waiting for Cordova Initialization to complete.</p>
</body>
</html>
Figure 2.4 shows the Hello World #4 application running on the Windows Phone 8.1 simulator.
)
Figure 2.4 Hello World #4 Application Running on a Windows Phone Simulator
In this version of the HelloWorld application, the code in the onDeviceReady function has been updated so the program updates a portion of the application’s content with an ID of appInfo with information about the device running the application and the version of Cordova used to build the application. Device-specific information is available via the Cordova Device API (http://plugins.cordova.io/#/package/org.apache.cordova.device), and this sample application uses a subset of the available properties in this API.
In order for me to be able to call the Device API, I had to add the Device API plugin to the project using the CLI command:
cordova plugin add org.apache.cordova.device
With the Device API in place, the application can access it using the following code:
var element = document.getElementById('appInfo');
element.innerHTML = 'Cordova Version: ' + device.cordova + br +
'Platform: ' + device.platform + br +
'Model: ' + device.model + br +
'OS Version ' + device.version;
In the figure, you may have noticed that the Cordova version shows that I’m running Cordova 3.6.4. I actually ran this application using Cordova 4.0, but with this release the Cordova CLI, Cordova container, and Cordova APIs have all been broken out into separate releases. So, even though I’m actually running Cordova 4.0, some of the components may be at a different release.
Listing 2.5 shows a slightly modified version of the application; in this case I added some markup to make the device information into an unordered list so it would render more neatly on the page.
Listing 2.5 Hello World #5 Application
<!DOCTYPE html>
<html>
<head>
<title>Hello World #5</title>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1,
maximum-scale=1, minimum-scale=1, width=device-width,
height=device-height" />
<script src="cordova.js"></script>
<script>
function onBodyLoad() {
alert("Body Load");
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.notification.alert("Cordova is ready!");
console.log("Cordova: " + device.cordova);
//Get the appInfo DOM element
var element = document.getElementById('appInfo');
//replace it with specific information about the device
//running the application
element.innerHTML =
'<ul><li>Cordova Version: ' + device.cordova +
'</li><li>Platform: ' + device.platform +
'</li><li>Model: ' + device.model +
'</li><li>OS Version ' + device.version + '</li></ul>';
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Hello World #5</h1>
<p>This is a Cordova application that makes calls to the Cordova Device API.</p>
<p id="appInfo">Waiting for Cordova Initialization to complete.</p>
</body>
</html>
Just so you can see a Cordova application running on yet another device, Figure 2.5 shows the Hello World #5 application running on a Firefox OS simulator.
)
Figure 2.5 Hello World #5 Application Running on a Firefox OS Simulator