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

Populating the XML Template
To get the template XML fragment, I call the TileUpdateManager.getTemplateContent
method, specifying the template I want with a value from the TileTemplateType . This gives me
a Windows.Data.Xml.Dom.XmlDocument object to which I can apply standard DOM methods
to set the value of the text elements in the template. Well, sort of—because the XmlDocument
object's implementation of getElementById doesn't work, I have to use the getElementsByTag-
Name method to get an array containing all of the text elements in the XML. These elements are
returned in the order they are defined in the XML fragment, so I can iterate through and set the
innerText property of each element to one of my grocery list items.

■ Only three of the four text elements defined by the XML template will be visible by the
user on the Start menu. The last element is obscured by the application name or icon. This is true
for many of the tile templates.

Tip

Applying the Tile Update
Once I have set the content of the XML document, I use it to create the update for the applica-
tion tile. I need to create a TileNotification object from the XML and then pass this to the
update method of the TileUpdater object that is returned from the TileUpdateManager.crea-
teTileUpdaterForApplication method:
…
for (var i = 0; i < 5; i++) {
tn.TileUpdateManager.createTileUpdaterForApplication()
.update(new tn.TileNotification(xmlFragment));
}
…

Not all tile updates are processed properly in the Consumer Preview, which is why I repeat
the notification using a for loop. Five seems to be the smallest number of repetitions that guar-
antees that an update will be displayed on the Start menu.

Applying the Tile Update
My tile update is applied in two places. As you saw in Listing 4-4, the tiles.js file sets up
event handlers that call the sendTileUpdate function whenever the contents of the grocery list
change. This ensures that the tile always reflects changes the user makes to the list. I also call
the sendTileUpdate method from the performInitialSetup function in default.js , as shown
in Listing 4-5.

Listing 4-5. Updating the Tile As Part of the Application Setup

…
function performInitialSetup(e) {
WinJS.UI.processAll().then(function () {
UI.List.displayListItems();