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) {
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>
<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>
<div data-win-control="WinJS.UI.HtmlControl"
Search WWH ::

Custom Search