<!DOCTYPE HTML>
<!--
Licensed to the Apache Software Foundation (ASF) under one$
or more contributor license agreements. See the NOTICE file$
distributed with this work for additional information$
regarding copyright ownership. The ASF licenses this file$
to you under the Apache License, Version 2.0 (the$
"License"); you may not use this file except in compliance$
with the License. You may obtain a copy of the License at$
$
http://www.apache.org/licenses/LICENSE-2.0$
$
Unless required by applicable law or agreed to in writing,$
software distributed under the License is distributed on an$
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY$
KIND, either express or implied. See the License for the$
specific language governing permissions and limitations$
under the License.$
-->
<html>
<head>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Lifecycle Page 1</title>
<link rel="stylesheet" href="../master.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" charset="utf-8" src="../cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
console.log("Page1: onload");
log("Page1: onload @ " + new Date().toLocaleTimeString());
document.addEventListener("deviceready", onDeviceReady, false);
}
function onUnLoaded() {
console.log("Page1: onunload");
log("Page1: onunload @ " + new Date().toLocaleTimeString());
}
function onDeviceReady() {
// Register the event listener
document.getElementById("platform").innerHTML = device.platform;
document.getElementById("version").innerHTML = device.version;
document.getElementById("uuid").innerHTML = device.uuid;
document.getElementById("name").innerHTML = device.name;
document.getElementById("width").innerHTML = screen.width;
document.getElementById("height").innerHTML = screen.height;
document.getElementById("colorDepth").innerHTML = screen.colorDepth;
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
window.setInterval(function() {
log("Page1: Running");
}, 2000);
}
function onPause() {
console.log("Page1: onpause");
log("Page1: onpause @ " + new Date().toLocaleTimeString());
}
function onResume() {
console.log("Page1: onresume");
log("Page1: onresume @ " + new Date().toLocaleTimeString());
}
function log(s) {
var el = document.getElementById('status');
var status = el.innerHTML + s + "<br>";
el.innerHTML = status;
localStorage.lifecyclestatus = status;
}
function clearStatus() {
console.log("clear()");
localStorage.lifecyclestatus = "";
document.getElementById('status').innerHTML = "";
}
</script>
</head>
<body onload="onLoad()" onunload="onUnLoaded()" id="stage" class="theme">
<h1>Events</h1>
<div id="info">
<h4>
Platform: <span id="platform"> </span>, Version: <span
id="version"> </span>
</h4>
<h4>
UUID: <span id="uuid"> </span>, Name: <span id="name"> </span>
</h4>
<h4>
Width: <span id="width"> </span>, Height: <span id="height">
</span>, Color Depth: <span id="colorDepth"></span>
</h4>
</div>
<div id="info">
<h4>Test 1</h4>
Press "Home" button, then return to this app to see pause/resume.<br>
There should be "Running" entries between pause and resume since app continues to run in the background.
<h4>Test 2</h4>
Press "Load new page" button to load a new Cordova page.<br>
When returning, you should see
<ul>
<li>Page2: onunload</li>
<li>Page1: onload</li>
<li>Page1: Running</li>
</ul>
</div>
<div id="info">
<h4>Info for event testing:</h4>
<div id="status"></div>
</div>
<a href="index2.html" class="btn large" >Load new page</a>
<a href="javascript:" class="btn large" onclick="clearStatus();">Clear status</a>
<script>
document.getElementById('status').innerHTML = localStorage.lifecyclestatus;
</script>
</body>
</html>