HTML and CSS Reference
In-Depth Information
Creating Live tiles for a basic application
The most interesting aspect of dealing with tiles is making them live, via support for programmatic
notifications. To approach the task of turning tiles into Live tiles in a simple way, you'll first build a
new sample application that displays some static text in its tile. Next, you'll proceed with a more
sophisticated example where the text displayed reflects the data and state of the application itself.
preparing the application
Create a new Windows Store application using the usual Blank App template and add the usual
header.html
and
footer.html
files in the
Pages
folder. You will also need to add a few new styles to the
default.css
file and add a JavaScript file named
tilesDemoApp.js
after the application. In addition, it is
key for you to add the following line to the
default.js
bootstrapper code.
app.onready = function (args) {
tilesDemoApp.init();
};
Here's the initial content of
tilesDemoApp.js
:
var tilesDemoApp = tilesDemoApp || {};
tilesDemoApp.init = function () {
// More code goes here
};
The
default.html
page should look like the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Tiles Demo</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- TilesDemo references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/tilesdemoapp.js"></script>
</head>
<body>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
Search WWH ::
Custom Search