Updating Windows 8 Tiles using JavaScript

One of the great features of Windows 8 apps are tiles, the front facing information of apps. Windows 8 Apps can give live information to the user without the need to run the application. Tiles are not only icons, but can give actual information. A weather app shows the actual temperature, the news app gives highlights on news, the mail app the number of new emails since it was last opened – and all this can be done using pictures to give the app a more interesting look. This blog entry gives information on one way to update tiles automatically by offering a service with information for the tile.

Icons for the Tiles

The icon-based look of the tile can be defined with the package manifest editor as shown in figure 1. The app can have a normal or a wide logo with 150x150 pixels or 310x150 pixels for the tile. The wide logo is optional, and the user is in power to change the size of the tile for the application.

Figure 1

Live Information

To offer live information for the tiles, the TileUpdater from the Windows Runtime namespace Windows.UI.Notifications can be used. The TileUpdater can be retrieved using the TileUpdateManager as shown:

 

var notification = Windows.UI.Notifications;
var tileUpdater = notification.TileUpdateManager.createTileUpdaterForApplication();

 

Now the update for the tile can be requested. The method StartPeriodicUpdate allows specifying an Uri and a value from the PeriodicUpdateRecurrence enumeration that offers different values for updates every half hours up to updates once a day. The first parameter is of type Windows.Foundation.Uri:

 

var recurrence = notification.PeriodicUpdateRecurrence.halfHour;
var url = new Windows.Foundation.Uri(tileUrl);
tileUpdater.startPeriodicUpdate(url, recurrence);

Defining a start time

Instead of starting the tile updates immediately, an overloaded version of the method StartPeriodicUpdate can be used to define the start time for the update, and continue with updates using the periodic update recurrence from there. One example where this is useful is if the data for the tile is always available at the same time of the day. With JavaScript, the parameter type is of type Date:

 

var d = new Date();
var startTime = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 6);
tileUpdater.startPeriodicUpdate(url, startTime,
notification.PeriodicUpdateRecurrence.daily);

Tile Information from the Server

The server just needs to return XML as it is defined with the schema for the tiles. I'm using ASP.NET MVC to return the XML directly from a controller action method. Of course other technologies can be used as well. All what's needed is XML returned. The method GetTileXmlContent returns actual information contained within a square and a wide tile.

 

public ActionResult TileInfo()
{
  return Content(GetTileXmlContent(), "text/xml");
}

 

The XML that needs to be returned from the service can look like this – here two tiles in the format TileWideText04 and TileSquareText04 with one text information are returned to the client:

 

<tile>
<visual>
<binding template="TileWideText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
<binding template="TileSquareText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
</visual>
</tile>

 

Depending if the user selected the large or the square tile, this version will be shown.

Using different tile options

With the tile template TileSquareText04, the text is shown in the tile alongside the 30x30 icon that is defined with the small logo setting in the package manifest as shown in figure 2.

Figure 2

It's not completely free to define any look with the tile. This is a good idea as this way different tiles are not a complete mess but instead have some common experience for the users as shown in figure 3. The name of the application or the icon are always on the same place, the same font is used for the text, badge information with a number or an icon can be used that also shows up at the same position…

Figure 3

The different options for tiles are listed in the tile template catalog. This catalog lists square and wide templates, templates with text only or image only, and peek templates that change between text and an image. The list of wide templates also offer image and text templates.

The templates TileWideText04 and TileSquareText04 that were used in the sample contain one text that is wrapped in a maximum of four lines. Other text templates define multiple lines that are not wrapped, or define a larger header line.

To display an image and text the following XML code uses the wide template alternating with text, the tile templates TileWideSmallImageAndText03 and TileSquarePeekImageAndText04. The peek templates show partly text and an image using an animation.

 

<tile>
<visual>
<binding template="TileWideSmallImageAndText03">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
</visual>
</tile>

 

Figure 4 shows the wide tile variant with image and text.

Figure 4

Showing alternating tiles

To show different tile templates with alternate information, you cannot add multiple binding elements to one XAML that do not differ with the tile size. You need to pass different URL's to the StartPeriodicUpdateBatch method:

 

tileUpdater.startPeriodicUpdateBatch([url1, url2, url3], recurrence);

 

Summary

Just with a few lines of code it's possible to create cool looking tiles for a Windows Store app. Do not miss the chance to offer more information to the user than just a static icon. With just a few lines of code tiles can be dynamically updated with simple XML content from a server.

By far this is not all what's important with tiles. Badge information can be shown with tiles in the form of a number or an icon, to give some special information for the user, e.g. how many emails arrived since the last visit of the application, or some green/yellow/red mark to ask for some special attention. Tiles can also be updated using push notification. All this is the topic of some other blog entries – or my Windows 8 workshops.

More information on developing Windows 8 apps is in my Windows 8 workshop using HTML and JavaScript, and in the book Professional C# 2012 (this is C# code).

Christian

http://www.cninnovation.com

Comments

[paper writers]

At the same time, the athletes really pushed the progression of big mountain snowboarding choosing creative and highly technical lines.

[essay writing services]

Thank you for sharing this post, I really learned a lot. This is very historical and it must not forget.