Adding Live tiles - Build Windows 8 Apps with HTML5 and JavaScript - page 325

The XML content returned to you depends on the selected template. For the template chosen
here, the template contains two text elements to be filled up with the text you want to display on the
tile. Add the following code to add application-specific content to the template.
tilesDemoApp.init = function () {
var template = Windows.UI.Notifications.TileTemplateType.tileSquareText02;
var xml = Windows.UI.Notifications.TileUpdateManager.
getTemplateContent(template);
var textElements = xml.getElementsByTagName("text");
// Fill up text placeholders in the tile template
textElements[0].innerText = "Title";
textElements[1].innerText = "This is the subtitle";
// More code goes here
}
Finally, you need to register the tile with the operating system so that the content can be properly
displayed from the Start screen. A few more lines of code should then be added to the init function in
the tilesDemoApp.js file. Here's the final code you need to have in the init function:
tilesDemoApp.init = function () {
var template = Windows.UI.Notifications.TileTemplateType.tileSquareText02;
var xml = Windows.UI.Notifications.TileUpdateManager.
getTemplateContent(template);
var textElements = xml.getElementsByTagName("text");
// Fill up text placeholders in the tile template
textElements[0].innerText = "Title";
textElements[1].innerText = "This is the subtitle";
// Create and register the notification object
var liveTile = new Windows.UI.Notifications.TileNotification(xml);
Windows.UI
.Notifications
.TileUpdateManager.createTileUpdaterForApplication().update(liveTile);
}
You first create a new notification object from the template XML and then add it to the system's
list of Live tiles for the installed applications. For each currently active Live tile, the system maintains
an updater object that is responsible for periodically displaying up-to-date content in the Start screen.
Figure 13-5 shows the Live tile of the sample application as it shows up on a Windows 8 machine.