Live tiles are a big plus if you are designing for Metro/WinRT and, as long as you understand how it all works, it isn't difficult to implement updates.

This article is Chapter 6 of  Creating JavaScript/HTML5 Metro Applicationsand follows on from these previous ones: 

• Chapter 1 Getting Started With Metro JavaScript
• Chapter 2 WinControls
• Chapter 3 The App Bar
• Chapter 4 Templates & Data Binding
• Chapter 5 Working with Tiles - Badges
• Chapter 6 Working with Tiles - Notifications
• Chapter 7 Toast Notification
• Chapter 8 Custom Controls
• Chapter 9 Promises
• Chapter 10 Web Workers & Promises
• Chapter 11 Data Binding
• Chapter 12 Life Cycle

In the previous chapter we looked at how to use badges and notifications to update a tile - but only one of the two bottom corners and in a very limited way. However, badges are often enough to let the user know what is happening so don't think you always have to move on to a full live tile approach.

The good news is that if you have understood how badges work then updating the entire tile is just as easy and follows the same overall logic.

Tiles

As already explained, you can't simply allow applications to have direct access to their tiles. This would cause security and efficiency problems. What happens in WinRT is that applications have to send a notification complete with a customized template for the new tile. The notification joins a queue and the tile manager performs the update when it is appropriate. Notice that if the Start screen isn't visible then no updates will be performed and when it is visible the tile manager might well skip many of the notifications you have placed in the queue. The rules for how this all works are very simple, but first let's implement a simple tile update.

It is worth pointing out that if your app only supports a small tile then you can only use square tile templates and these aren't as varied as the wide tile templates.  How to add a wide tile to your app was discussed in the previous chapter. In this example we will use a square template to make things simpler.

Tile Notifications

The steps in updating a tile follow the steps for updating a badge. First you selects an XML template, retrieve the template as an XMLDocument object, customize the XMLDocument and then use it to create a TileNotification object. This is then passed to the tile manager queue using the update method of the TileUpdaterForApplication object.

The big difference between working with tiles from working with badges is that there are generally more attributes of the XML template that you might want to customize.

Let's get started without modifying any attributes to see what a template looks like in its default state.

First we set up a referent to the Notifications namespace to make programming easier and get a numeric value that specifies the tile template we are going to use:

var Notifications=Windows.UI.Notifications;
var tileType = Notifications.
         TileTemplateType.tileSquareBlock;

As in the case of badges the tile templates are identified by an integer and in this case the template tileSquareBlock is just template 1. You could simply write

var tileType =1;

but don't because the codes might change.

Next we use the template enumeration code to create an XMLDocument object that corresponds to the XML that defines the template. 

var tileXML = Notifications.
   TileUpdateManager.
          getTemplateContent(tileType);


Think of this as an XML equivalent of the DOM - complete with nodes and attributes. You can manipulate this to customize the template - more in this in a moment.

Once you have the XMLDocument object that specifies the tile you can convert it into a Notification object ready to be sent to the tile update manager:

var tileNotification =
         new Notifications.
              TileNotification(tileXML);

The final step is to create a TileUpdater for the application and use it to send the notification to the tile. Of course it might well be that the TileUpdater has already been created in an earlier step, in which case you would simply use it.

var TileUpdater=Notifications.
       TileUpdateManager.
          createTileUpdaterForApplication();
TileUpdater.update(tileNotification);

The update method of the TileUpdater can be used to send multiple updates with different tile templates and each notification joins the queue waiting to be processed by the tile manager.

If you run the program you will see a blank square tile with the default tile image in the bottom corner.

If you also send a badge notification to the tile you will also see it in the opposite corner. You can use badges with tile templates. If you switch to a wide tile then you will not see the new template but it appears when you return to a small tile.

Next we need to discover how to customize the tile.