Layouts and Tiles - Metro Revealed: Building Windows 8 Apps with HTML5 and JavaScript - page 65

The idea is to populate the text elements with information from the application and
pass the result to the Metro notifications system. To demonstrate this feature, I had added a
new JavaScript file to the project called tiles.js , the content of which is shown in Listing
4-4. The length of the Windows.UI.Notifications is long enough to cause layout problems for
code on the printed page, so I have created a variable called tn as shorthand and assigned the
namespace to it.

Listing 4-4. The tiles.js File

/// <reference path="//Microsoft.WinJS.0.6/js/base.js" />
/// <reference path="//Microsoft.WinJS.0.6/js/ui.js" />
(function () {
"use strict";
WinJS.Namespace.define("Tiles", {
sendTileUpdate: function () {
var tn = Windows.UI.Notifications;
var xmlFragment = tn.TileUpdateManager
.getTemplateContent(tn.TileTemplateType.tileSquareText03);
var textNodes = xmlFragment.getElementsByTagName("text");
var items = ViewModel.UserData.getItems();
for (var i = 0; i < textNodes.length; i++) {
var listItem = items.getAt(i);
if (listItem) {
textNodes[i].innerText = listItem.item;
}
}
for (var i = 0; i < 5; i++) {
tn.TileUpdateManager.createTileUpdaterForApplication()
.update(new tn.TileNotification(xmlFragment));
}
}
});
var eventTypes = ["itemchanged", "iteminserted", "itemmoved", "itemremoved"];
var itemsList = ViewModel.UserData.getItems();
eventTypes.forEach(function (type) {
itemsList.addEventListener(type, Tiles.sendTileUpdate);
});
})();

■ Notice that the first letter of the template name is lowercase. If you use an uppercase
letter, then you will get the default template rather than the one you wanted.

Tip