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

more about the available tile templates, you can pay a visit to the following URL: http://msdn.micro-
soft.com/en-us/library/windows/apps/hh761491.aspx.
Most of the time, the tile contains a title and a subtitle possibly split over multiple lines. Several
templates, however, exist that also add an image.
The choice of the template should also take into account the size of the tile and the fact that the
user may be willing to change the size of the template on the fly by simply acting on the context
menu of the tile. For the purpose of this exercise, you choose the following templates—for the large
and small tiles, respectively.
Windows.UI.Notifications.TileTemplateType.tileWideText01
Windows.UI.Notifications.TileTemplateType.tileSquareText02
The former template is made of four lines of text styled differently. The first line displays with a
larger font, whereas the lines that follow use regular font size, display on different lines, and do not
wrap text. The latter template is for small tiles and is made of one header string rendered in larger
font. The header string is followed by a second string of text rendered with regular font and wrapped
over a maximum of three lines.
To enable the chosen tile templates, you add the following code to the liveTiles.js file:
liveTilesManager.enable = function (listOfTasks) {
// Prepare template for LARGE tile
var templateLarge = Windows.UI.Notifications.TileTemplateType.tileWideText01;
var xmlLarge = Windows.UI.Notifications.TileUpdateManager.getTemplateContent
(templateLarge);
var textElementsLarge = xmlLarge.getElementsByTagName("text");
// Prepare template for SMALL tile
var templateSmall = Windows.UI.Notifications.TileTemplateType.tileSquareText02;
var xmlSmall = Windows.UI.Notifications.TileUpdateManager.getTemplateContent
(templateSmall);
var textElementsSmall = xmlSmall.getElementsByTagName("text");
// More code goes here
}
As you learned in the previous exercise, a tile template consists of multiple text elements. In the
code, variables textElementsLarge and textElementsSmall are arrays of XML nodes that refer to the
text elements in the two XML templates.
The next step consists of populating these text elements with data that belongs to the running
application.