docs/liveTilesExample.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>Live Tiles</title>
    <style>

        button {
            width:300px;
            height:36px;
            margin:4px 0px;
        }

    </style>
   
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>  
    <script type="text/javascript" charset="utf-8">


    var secondaryTile = 'www/liveTiles.html';

    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;
        };
        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;
        };
        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;
        };
        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;
        };

        LiveTiles.deleteSecondaryTile(success, fail, { secondaryTileUri: secondaryTile });
    };

    </script>

  </head>

  <body>
  
    <h1>Live Tile</h1>

    <div id="info">       
        <div>
            <strong>New title:</strong> 
            <div id="Span1"></div>
        </div> 

        <input type="text" id="title" value="new title" style="width:250px;height:20px;"/>
        
        <div>
            <strong>New count:</strong> 
            <div id="Span2"></div>
        </div>

        <input type="text" id="count" value="10" style="width:250px;height:20px;"/>        
        
        <div>
            <strong>Result:</strong> 
            <div id="res"></div>
        </div>
    </div>

    <h2>Action</h2>
    <button onclick="updateAppTile();">Update application tile</button>
    <button onclick="createSecondaryTile();">Create secondary tile (will open this page)</button>
    <button onclick="updateSecondaryTile();">Update secondary tile</button>
    <button onclick="deleteSecondaryTile();">Delete secondary tile</button>

  </body>
</html>      