Files
phonegap-plugins/WindowsPhone/LiveTiles/liveTilesExample.html
2012-02-24 12:59:27 -08:00

131 lines
5.2 KiB
HTML

<!DOCTYPE HTML>
<html>
<head>
<!-- meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=2.0, maximum-scale=4.0, minimum-scale=1.0" / -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- ISO-8859-1 -->
<title>PhoneGap</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen"/>
<script type="text/javascript">
// provide our own console if it does not exist, huge dev aid!
if (typeof window.console == "undefined") {
window.console = { log: function (str) { window.external.Notify(str); } };
}
// output any errors to console log, created above.
window.onerror = function (e) {
console.log("window.onerror ::" + JSON.stringify(e));
};
console.log("Installed console ! ");
</script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="liveTiles.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReady = false;
var secondaryTile = 'www/liveTiles.html';
/**
* Function called when page has finished loading.
*/
function init() {
document.addEventListener("deviceready", function () {
deviceReady = true;
console.log("Device=" + device.platform + " " + device.version);
}, false);
window.setTimeout(function () {
if (!deviceReady) {
alert("Error: PhoneGap did not initialize. Demo will not run correctly.");
}
}, 1000);
}
function updateAppTile() {
console.log('Update app tile');
var success = function (res) {
console.log('tile was updated');
document.getElementById('res').innerHTML = res;
};
var fail = function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
};
navigator.plugins.liveTiles.updateAppTile(success,fail,{title:document.getElementById('title').value, image:'Images/appbar.next.rest.png', count: document.getElementById('count').value, backTitle: 'Back title', backContent:'Back side', backImage : 'Images/appbar.close.rest.png'});
};
function createSecondaryTile() {
console.log('Create secondary tile');
var success = function (res) {
console.log('secondary tile was created');
document.getElementById('res').innerHTML = res;
};
var fail = function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
};
navigator.plugins.liveTiles.createSecondaryTile(success, fail, { title: document.getElementById('title').value, image: 'Images/appbar.save.rest.png', count: document.getElementById('count').value, secondaryTileUri: secondaryTile,backTitle:'back'});
};
function updateSecondaryTile() {
console.log('Update secondary tile');
var success = function (res) {
console.log('tile was updated');
document.getElementById('res').innerHTML = res;
};
var fail = function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
};
navigator.plugins.liveTiles.updateSecondaryTile(success, fail, { title: document.getElementById('title').value, count: document.getElementById('count').value, secondaryTileUri: secondaryTile });
};
function deleteSecondaryTile() {
console.log('Delete secondary tile');
var success = function (res) {
console.log('tile was deleted');
document.getElementById('res').innerHTML = res;
};
var fail = function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
};
navigator.plugins.liveTiles.deleteSecondaryTile(success, fail, { secondaryTileUri: secondaryTile });
};
</script>
</head>
<body onLoad="init();" id="stage" class="theme">
<h1>Live tile</h1>
<div id="info">
<b>New title:</b> <span id="Span1"></span><br/>
<input type="text" id="title" value="new title" style="width:250px;height:20px;"/>
<br/>
<b>New count:</b> <span id="Span2"></span><br/>
<input type="text" id="count" value="10" style="width:250px;height:20px;"/>
<br/>
<b>Result:</b> <span id="res"></span>
</div>
<h2>Action</h2>
<a href="#" class="btn large" onclick="updateAppTile();">Update application tile</a>
<a href="#" class="btn large" onclick="createSecondaryTile();">Create secondary tile </br>(will open this page)</a>
<a href="#" class="btn large" onclick="updateSecondaryTile();">Update secondary tile</a>
<a href="#" class="btn large" onclick="deleteSecondaryTile();">Delete secondary tile</a>
<h2>&nbsp;</h2><a href="index.html" class="backBtn">Back</a>
</body>
</html>