Creating a great tile experience (part 1)

A live tile is one of the best ways to entice users back to your app. This post shows you how to update your app’s live tile using polling and local APIs so that you can show off what is great about your app directly on the Windows 8 Start screen. Your tile can put front and center the best of what’s going on inside of your app. The app tile is a core part of your app, and quite possibly its most frequently seen part – take advantage of the tile to get users back into your app!

In this post I walk through an example app to illustrate how to:

1. Design for tile updates
   
2. Choose templates to match the tile content
   
3. Use polling notifications from the cloud to update the tile while the app is not running
   
4. Update the tile while the app is running by using the NotificationsExtensions library included in the SDK (Windows 8 SDK App tiles and badges sample).
   

Introducing the Contoso Food Trucks app

Let’s walk through an example app: Contoso Food Trucks. This app allows users to get info about traveling food trucks. This is the same app that we showcased in the website to Metro style app case study. In this blog post, I show how to add live tiles to it.

What is your app best at?

Keeping in mind what your app is best at helps you figure out what content the tile should contain and how frequently it should update.

The Contoso Food Trucks app is best at helping users find and track their favorite food trucks, and to discover new ones near them. Because of that, I have these goals for our Food Trucks tile:

• Feature the food trucks near a location
  
• Track the user’s favorite food trucks
  

Don’t use your app tile as an advertisement surface. Using the tile to show ads is not allowed in most cases per the terms of the Windows app store.

Default tile and tile size

Each app has a default tile. This is the tile that the user sees when they first install your app. The default tile logo image represents your app logo or other branding so users can clearly identify the app.

You define the default tile logo image in the app manifest and Windows displays it until the tile is updated by receiving its first notification. The tile can revert back to the default image when it has no notifications to display for example, when the current tile notification expires or the user turns off live tile updates for the app.

The default tile images also define the sizes that the tile supports. Tiles are available in two sizes: square or wide. All apps must support a square tile, but an app can also support a wide tile. If an app doesn’t provide a wide logo image for the default tile, the app tile cannot be resized to a wide tile, which means that it cannot receive a wide tile notification. If the app includes a wide logo image, Windows shows the tile in its wide format by default.

For our Contoso Food Trucks app I chose to support wide tiles because I update the tile at least once a day, and the content the app provides needs the extra space. These are the images I use for default tile logos:

Both square and wide tiles can receive notifications. When sending notifications, I always include both a square version and a wide version. This way, if a user resizes the tile to a smaller size, they still see updated data.

More info on how to create a default image for your app is in this Quickstart: Creating a default tile using the Microsoft Visual Studio 11 Manifest Editor. You can find more about tile size concepts in the tile and notification overview.

Designing tile updates

Feature the food trucks nearby

One of the best things about our app is that it helps users decide which food truck to visit. So, we need to know which food trucks are nearby. To figure this out, our app lets users set their default lunch location. When the user sets this location, we show the user which food trucks are by that location now. For this tile update, I chose a template without an image.

Because tiles are updated by fitting the app content into system-defined templates, our first task is to choose a template that works for our content. After looking through the catalog of templates in the Dev Center (see Choosing a tile template), I picked the TileWideText01 template for the wide tile. For the square tile, I picked the TileSquareText03 template. I picked these two text-only templates because I am only updating text strings on the tile.

I used the Windows 8 SDK App tiles and badges sample to play with different template options before making my final decision. Using the sample lets me easily swap in different text strings and images until I settle on the final tile design. For example, by testing the templates in the sample, I determined that I had to use the food truck’s short name in the square template to get the text to fit correctly.

Tile updates are created by sending a notification. A notification is simply a snippet of XML that fills out the tile schema. You create the XML in code by using the TileUpdateManager.getTemplateContent() function, or using the NotificationsExtension library which I will talk about in the second part of this post. The notification indicates which tile template is used when rendering the notification, and the text and images to be displayed on the tile according to the template’s layout.

To create the tile updates shown earlier for our food truck app, I used this tile XML:

Tile XML

There are two elements in this XML – one each for the wide and square tile. Because our app supports wide tiles, I always supply the wide and square tile template bindings in every tile notification. This lets the tile always show the notification update content no matter what size the user sets the tile to. The square tile shows only two truck names because the third doesn’t fit on the smaller square template.

Favorite food trucks

In our app, I want to let users know where their favorite food trucks are. On the tile, I want to let users know the same thing. In my case, the info fits on a couple of short lines of text. I also have images that represent each food truck, which will make our tile look more interesting.

Because tiles are updated by fitting the app content into system-defined templates, our first task is to pick the right template. After looking through the catalog of templates in the Dev Center (Choosing a tile template), I picked the TileWideImageAndText02 tile template for the wide tile that supports an image and two short text strings. For the square tile, I picked the TileSquarePeekImageAndText04 template to let the tile show both the image and the text. The peek templates allow me to supply more content than the normal tile area permits. Windows animates peek templates to show both the image and the text I put in the template within the square tile, so the top and bottom frames of the square tile alternate on the tile. The content of a peek tile scrolls up and down within the tile space to display the full content provided.

Tile XML

As before, I determined what the tile will look for by using a notification defined as an XML payload. The difference between my first tile and this one is that I am using images in this notification. The images in notifications are not included in the XML payload – they are referenced from the payload to other locations. The images can be either on a web service, as shown here, or on the local machine. After Windows receives the notification, it downloads the images from the web service at the time it’s shown to the user. More info on how to include images to a tile is in How to add images to a tile template in the Dev Center.

There are limitations on the content size of the images in KB and pixel sizes. Tile notifications won’t be displayed if the images are too big, so use images that meet these limitations. Also note that tiles support only JPG and PNG images. For more details about including images in your tile see Tile image sizes in the Dev Center.

More to come

Now that we know what we want the tiles to look like, the next step is to figure out when to update them. In part 2 of this post, we walk through how to add polling and local tile updates to the Contoso Food Trucks app. I show you how to start polling for tile updates from your app, provide example ASP.NET and PHP that can be used to build a web service for polling, and talk about how to add a secondary tile to the app and update it using the NotificationsExtension library. Until then, I hope this post has helped you to start thinking about how you can make your app shine with a live tile!

View the full article

Edited February 9, 201410 yr by AWS