When using the PhoneGap JavaScript library we must make sure the device is ready before we start calling the various PhoneGap functions. In order to verify the device is ready we should hook up with the ‘deviceready’ event.
The following code sample shows how simple it is to hook up with this event. If you are not familiar with PhoneGap and with the basic fundamental steps you need to follow in order to use it I recommend checking my PhoneGap Basics free course at http://abelski.lifemichael.com.
<!DOCTYPE html>
<html>
<head>
<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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div id="msg">...</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
function onDeviceReady()
{
document.getElementById("msg").innerHTML = "<h1>device is ready</h1>";
}
document.addEventListener('deviceready', onDeviceReady, false);
</script>
</body>
</html>
The following video clip goes over this code sample, shows its execution and explains it step by step.
You can find more video clips, tutorials and code samples for using PhoneGap in my free PhoneGap Basics course at http://abelski.lifemichael.com.
