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

Badges work in a similar way to tile notifications. You obtain an XML template, populate
the content, and use it to present some information to the user via the Start menu. Two types of
badge template are available. The first will display a numeric value between 1 and 99, and the
second will display a small image from a limited range defined by Windows.
The numeric and iconic templates are the same in the Consumer Preview and, as Listing
4-10 shows, are much simpler than the ones I used for tiles.
Listing 4-10. The Template for Numeric and Image Badges
<badge value=""/>
The objective is to set the value attribute to either a numeric value or the name of an icon.
I display a numeric badge if there are three or fewer items on the grocery list. If there are more
than three items, then I use an icon to indicate that the user should be concerned about the
extent of their shopping obligations.
The process for creating a badge begins with selecting a template. The two template types are
Windows.UI.Notifications.BadgeTemplateType : for numeric badges you use the badgeNumber
template, and for icons you use the badgeGlyph template. You could use the same template in both
situations because they return the same XML, at least in the Consumer Preview. This may change
in later releases, so it is prudent to select the right template, even though the content is the same.
The next step is to locate the value attribute in the XML and assign it either a numeric value
or the name of an icon. The numeric range for badges is very specific; it is from 1 to 99. If you set
the value to less than 1, the badge won't be displayed at all. Any value greater than 99 results in
a badge showing 99.
The list of icons is equally prescriptive. You cannot use your own icons and must choose
from a list of ten that Windows supports. You can see a list of the icons at http://goo.gl/YoYee .
For this example, I have chosen the alert icon, which looks like an asterisk. Once the XML is
populated, you create a new BadgeNotification object and use it to post the update. As with
tiles, I find that not all badges updates are processed, so I repeat the update five times to make
sure it gets through:
…
for (var i = 0; i < 5; i++) {
var badgeNotification = new tn.BadgeNotification(badgeXml);
tn.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);
}
…
All that remains is to ensure that my badge updates are created. To do this, I have changed
the event handler for the grocery list events so that the tile and badge are updated together. You
can see the four different badge/tile configurations in Figure 4-6 , wide and square tiles, with
number and icon badges.
Figure 4-6. Displaying a badge on a tile