Jul 10, 2015

Windows Store apps use tiles to launch the app from the start screen. Tiles can be static or they can be live, receiving notifications from your app or from some external cloud service. In today's blog I will guide you through the steps to implement live tiles in a Windows Store app using HTML5 and JavaScript.

Tiles are available in 4 different sizes: small (70×70), medium (150×150), wide (310×150) and large (310×310). The first step is to define the static images for the tile sizes supported by the app. You double-click the package.appxmanifest file in Solution Explorer to open the app manifest with the designer. Then you go to the Visual Assets tab and enter the paths for each one of the static images. The images should be in the Images folder in Solution Explorer. These images will be used as default for your tiles until the app starts receiving tile notifications as we will see in detail in the next steps.

Every tile has a layout defined by an XML Template. You have to choose from a rather comprehensible collection of templates. Those templates combine one or more text and image tags in a variety of layouts. They are available in the enumeration Windows.UI.Notifications.TileTemplateType, as you can see in the following code snippet

var notifications = Windows.UI.Notifications; var template1 = notifications.TitleTemplateType.tileWide310x150ImageAndText01; var tileXml = notifications.TileUpdateManager.getTemplateContent(template1);

At this point tileXml has the Xml code defining a wide tile using a particular template that has one text element and one image element. We need to assign a string to the text element content and a value to the src attribute of the image as we see in the next snippet:

var tileTextElements = tileXml.getElementsByTagName(“text”); tileTextElements[0].appendChild(tileXml.createTextNode(“Live tiles are awesome!”)); var tileImageElements = tileXml.getElementsByTagName(“image”); tileImageElements[0].setAttribute(“src”, “ms-appx:///images/image01.png”);

The template tileWide310x150ImageAndText01 has only one text and one image, but depending on the chosen template we could have more than one element in the arrays tileTextElements and tileImageElements.

Now we need to create the notification and update the live tile as we see next:

var tileNotification = new notifications.TileNotification(tileXml); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Once this code is executed the wide tile in the start screen is going to be different than the initial static image we assigned in the app manifest. For example, let's say the app is a game and the user has just finished the game and you want the tile to show what was the last score or maybe the highest score so far, etc. The new tile will remain until you update it again, unless you assign an expiration time to the notification as we show next:

var currentTime = new Date(); tileNotification.expirationTime = new Date(currentTime.getTime() + 5 * 60 * 1000); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

The expirationTime is in milliseconds. In the code above the live tile will revert to the static image after 5 minutes. Another way to remove the live tile independently from having or not an expiration time is by executing code like the following-

notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

There is much more to learn about live tiles. We recommend the course 20481 : Essentials of Developing Windows Store apps with HTML5 and JavaScript.