This chapter is from the book
This chapter is from the book
This chapter is from the book
Leveraging PhoneGap APIs
Now that we know how to configure an application to wait until the PhoneGap APIs are available, let’s build an application that actually uses the PhoneGap APIs as shown in the following HelloWorld3 application.
HelloWorld3 Application
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<script type="text/javascript" charset="utf-8"
src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady,
false);
}
function onDeviceReady() {
//Get the appInfo DOM element
var element = document.getElementById('appInfo');
//replace it with specific information about the device
//running the application
element.innerHTML = 'PhoneGap (version '+
device.phonegap + ')<br />' + device.platform + ' '+
device.name + ' (version ' + device.version + ').';
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>HelloWorld3</h1>
<p>This is a PhoneGap application that makes calls to the
PhoneGap APIs.</p>
<p id="appInfo">Waiting for PhoneGap Initialization to
comp1ete</p>
</body>
</html>
Figure 2-3 shows a portion of the application’s screen when running on the BlackBerry Torch 9800 simulator.
)
Figure 2-3 HelloWorld3 application running on a BlackBerry 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 PhoneGap used to build the application. Device-specific information is available via the PhoneGap device API (http://docs.phonegap.com/phonegap_device_device.md.html), and this sample application uses only a subset of the available methods in this API.
Figure 2-3 highlights one of the problems with the PhoneGap APIs: inconsistent implementation of an API across different mobile device platforms. The call to the device.platform API is supposed to return the name of the mobile device platform the application is running on. In this case, the call should return “BlackBerry,” but instead it returns “3.0.0.100” for some bizarre reason. For iOS devices, the call returns “iPhone” when in reality it should be returning “iOS.” It’s important to keep in mind that any function call might not return what you expect depending on the mobile platform the application is running on. Be sure to test your application on each platform you plan on supporting and make adjustments to your code as needed to deal with inconsistencies with the PhoneGap APIs. Expect the values returned by this property to change over time as well.