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

■ Although I show tiles and badges being used together, you can apply badges directly to
static tiles.

Tip

To demonstrate badges, I am going to show a simple indicator based on the number of
items in the grocery list. Listing 4-9 shows the additions to the tiles.js le.

Listing 4-9. Adding Support for Tile Badges
/// <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", {
sendBadgeUpdate: function () {
var itemCount = ViewModel.UserData.getItems().length;
var tn = Windows.UI.Notifications;
var templateType = itemCount ? tn.BadgeTemplateType.badgeGlyph
: tn.BadgeTemplateType.badgeNumber;
var badgeXml = tn.BadgeUpdateManager.getTemplateContent(templateType);
var badgeAttribute = badgeXml.getElementsByTagName("badge")[0];
badgeAttribute.setAttribute("value",
itemCount > 3 ? "alert" : itemCount);
for (var i = 0; i < 5; i++) {
var badgeNotification = new tn.BadgeNotification(badgeXml);
tn.BadgeUpdateManager.createBadgeUpdaterForApplication()
.update(badgeNotification);
}
},
sendTileUpdate: function () {
// …code removed for brevity…
}
});
var eventTypes = ["itemchanged", "iteminserted", "itemmoved", "itemremoved"];
var itemsList = ViewModel.UserData.getItems();
eventTypes.forEach(function (type) {
itemsList.addEventListener(type, function () {
Tiles.sendTileUpdate();
Tiles.sendBadgeUpdate();
});
});
})();