The device plugin defines a global device object that describes the device's hardware and software. It is very important to note that the device object is available after the "deviceready" event occurs. In order to use the device plugin in our Apache Cordova project, we need to use the following cordova plugin add command:
> cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
In order to access the device demo, you can click on the Device list item. You will be introduced to the Device page. You can click on the Get Device Info button in order to get your device information, as shown in the following screenshot:
Getting device information
The following code snippet shows the "device" page:
<div data-role="page" id="device">
<div data-role="header">
<h1>Device</h1>
<a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
</div>
<div data-role="content">
<h1>Welcome to the Device Gallery</h1>
<p>Click 'Get Device Info' button below to get the device information.</p>
<input type="button" id="getDeviceInfo" value="Get Device Info"/><br/>
<div id="deviceInfo">
</div>
</div>
</div>As shown in the preceding "device" page code snippet, it contains the following:
- A page header that includes a back button
- Page content that includes a
"getDeviceInfo"button to get the device information and a"deviceInfo"div in order to display device information
The following code snippet shows the "device" page view controller JavaScript object that includes the event handlers of the page (device.js):
(function() {
var deviceManager = DeviceManager.getInstance();
$(document).on("pageinit", "#device", function(e) {
e.preventDefault();
$("#getDeviceInfo").on("tap", function(e) {
e.preventDefault();
$("#deviceInfo").html(deviceManager.getDeviceInfo());
});
});
})();As shown in the preceding code snippet, the "pageinit" event handler registers the "tap" event handler on the "getDeviceInfo" button. In the "tap" event handler of the "getDeviceInfo" button, the device information is displayed in the "deviceInfo" div and retrieved by calling the deviceManager.getDeviceInfo() method.
The following code snippet shows the device manager JavaScript object that uses the Apache Cordova device object (DeviceManager.js):
var DeviceManager = (function () {
var instance;
function createObject() {
return {
getDeviceInfo: function () {
return "Device Model: " + device.model + "<br />" +
"Device Cordova: " + device.cordova + "<br />" +
"Device Platform: " + device.platform + "<br />" +
"Device UUID: " + device.uuid + "<br />" +
"Device Version: " + device.version + "<br />";
}
};
};
return {
getInstance: function () {
if (!instance) {
instance = createObject();
}
return instance;
}
};
})();The DeviceManager object is a singleton object that has a single method as highlighted in the preceding code. The getDeviceInfo() function uses the Cordova device object to retrieve the device information.
The DeviceManager object uses the attributes of the device object, as shown in the following table: