HTML5 Zone is brought to you in partnership with:

Clark is a web evangelist for Microsoft based in Illinois. A Chicago native who can’t spell, Clark as a kid actually made his money building cars, getting grease under his nails. That art of building would later lead him to software development where he drinks the Web Development Kool-Aid. Writing code is what keeps Clark awake at night, while continually working on his craft and rapping with others over a few cold CORS. You can hear Clark muse about software on his podcast Developer Smackdown, or find his family cruising around in a 1968 Camaro SS. Clark is a DZone MVB and is not an employee of DZone and has posted 32 posts at DZone. You can read more from them at their website. View Full User Profile

31 Days of Windows 8 for HTML5 | Day #9: Live Tiles

11.14.2012
| 5066 views |
  • submit to reddit

This article is Day #9 in a series called 31 Days of Windows 8.  Each of the articles in this series will be published for both HTML5/JS and XAML/C#. You can find additional resources, downloads, and source code on our website.

advertisementsample

Today, we’re covering a very important topic: Live Tiles.  As we’ve mentioned in previous articles, your tile is one of the most important parts of your application’s success, and it’s one of the most overlooked.

Your tile represents your relationship with your user.  They caringly pin it to their start screen, arrange it with similar apps, even decide if they want it to be big or small.  Your job is to make it as accommodating and responsive to their needs as possible.  We do this by passing useful updates to the tile.  Here’s a few examples from some of my favorite apps:

The family and I have gotten into a game called Jetpack Joyride, their tile is an excellent example.  Here’s four of the five states it rotates through, reminding me of my high score, as well as the achievements I haven’t yet completed.  These updates have dragged me back in more than once.

9-XAML-JetpackTile19-XAML-JetpackTile2

9-XAML-JetpackTile39-XAML-JetpackTile4

The weather app, on the other hand, doesn’t flip at all.  But I also don’t need anything more that what one static tile can provide when it comes to weather.  I get today’s high and low, as well as the current temperature.  The five day forecast is always one click away.

 image

Finally, as tiles go, I think that the Photos app might be my favorite.  I haven’t figured out how often it updates the set of rotated photos, or even which libraries it uses, but it always seems to have some great old photo on the tile that makes me remember that event.  Here’s a couple of screen shots of my Netduino garage door controller and some awesome peeps That Conference’s Game Night. Might I suggest you check out That Conference, August 12 – 14 in 2013.

 imageimage

I’ve got thousands and thousands of old photos stored in my photo libraries (yes, they’re backed up online, thank you very much), and getting a blast from the past on a daily basis is awesome.

The Rules

When we work on our apps, I’ve discovered there are a few rules we need to be aware of:

  • First, read, and then re-read the Guidelines for Live Tiles.  They’re extensive, but interesting.
  • You must ALWAYS have a small tile.  Wide tiles are a nice-to-have, but you MUST accommodate a small tile.
  • If you want wide tile notification you MUST provide a default wide tile.

Small tiles are not always as interesting as their big brothers, but they can still be conveyed to show interesting information.  Here’s a few small tiles which range from showing nothing but branding to showing updates on your local weather:

image imageimageimage 

Things like SkyDrive don’t update but one could argue what is there to update? However the Weather and Photos apps give me all the same data I get on the large tiles, just in a smaller package.

As I was investigating all the different ways a tile could look, I was worried that this article was going to be SUPER lengthy after showing an example of every possible tile template.  As it turns out, however, Microsoft has provided an amazing page that shows every single tile template, all forty-five of them.  Make sure you check this page out.  It will definitely help you pick the tile template that is appropriate for you, and it provides the XML markup you’ll need to do it as well.

MUST READ: The Tile Template Catalog

So how do we make our tile dance?  Let’s dance.

Updating the Default Static Tile

By default, you’ve got an icon in your app that looks like this:

9-XAML-DefaultLogo

(I added a slight gray background to this one so you can see it on a white background, yours is likely transparent.)  If you only want a static tile that uses your own 150 x 150 pixel image, you can do this one of two ways:

  • Replace the image that currently resides at images/logo.png in your project.
  • Update your package.appxmanifest file, and change the Logo value to a different image in your project, like this:

image

OK, enough of the boring stuff.  Let’s write some code!

Sending a Notification to a Small Live Tile

Let’s start with sending a small tile notification first, since large tiles will be slightly more complicated.  First, as we discussed earlier, you need to decide which template you want to use from the catalog.  (We’ve  even created a static PDF version of this document for you, that’s how important it will be!)

In this example, I’ve chosen TileSquareText04, which looks like this template:

TileSquareText04 example

And is represented by this XML (you’d know this if you’d open the catalog page):

<tile>
  <visual>
    <binding template="TileSquareText04">
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

Now I am sure you’re sitting there thinking, can I use JSON? Well, unfortunately not that I am aware of.  So now we just need to create a new tile update based on that XML, and push it to the TileUpdateManager.  Here’s how it works for TileSquareText04:

  • Get an instance of WinRT Notification
  • From Notifications, get your Template
  • From that Template, get it’s content aka that XML we showed above
  • Select and Update appropriately
  • Create a new tile notification
  • (optionally) set expiration
  • Send tile update

That’s it! No really, that’s it. Ok it seems like a lot but it’s really just a few simple functions and you could wrap that up into a nice factory, pattern here, beer there and boom.

var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileSquareText04;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].innerText = _tileMessage.value; // taking from input box

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

So how do you handle the other templates? Can you mix or match? Well you just select the other template, modify the xml accordingly and send it along. LTileSquareBlock exampleet’s extend what did above to send along for the tile below.

....

var template = notifications.TileTemplateType.tileSquareBlock;

....

var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].innerText = "31"; 
tileTextAttributes[1].innerText = _tileMessage.value; // taking from input box

....

As you can see this is a pretty simple process.  One final note about these templates is that it’s likely your SmallLogo.png file will be displayed on some of these tiles as well.  It’s a great way to extend your branding, but it’s also something to be aware of as you’re working on this.  Using the TileSquareBlock template, here’s how my tile actually ends up looking:

9-XAML-TileSquareBlockActual

This is yet another reason, as we stated on Day #1, for you to use custom images for your app as you explore Windows 8 development.  Without that purple image, I would have had to guess which one was being used, or worse, not realize that it was available at all.  You will see that there are many properties that can be edited for your tile in the package.appxmanifest file of your project.  Not only can we swap out the logo image, but also set background properties, the Small Logo file, and other text and color values.

image

One important piece of this section is the “Show name” dropdown.

I briefly mentioned this earlier, but I want to make sure you understand where these images and values are established.  In addition, simply by defining a Wide Logo file in this manifest, you immediately support the Large Tile size.  In fact, this is the ONLY way to support a wide tile.  Your application won’t even offer the size as an option until you’ve specified that value.  Give it a try.  Now let’s look at how we send updates to a Large Tile.

Sending a Notification to a Large Live Tile

This time, we’re going to choose a Large Tile template, but we’ll also include an image, so that you can see the syntax for that as well.

Important Lesson:  Remember that the user is in control here.  If they have decided to make your tile large or small, you don’t get to decide that.  What you can decide, however, is whether or not you want to support “notifications” in both sizes.  I recommend it, because it’s an opportunity to have your user pay attention to your app on their Start screen.

Because of this, when we send updates, we can actually create two.  One for the small tile, and one for the large one.  Then, through the magic of XML, we’ll merge them together, and send them as one notification, then regardless of what the user has set, they will still receive notifications. But to do so, you will have to have a wide tile set by default in your package.appxmanifest. If no wide, no notification, regardless of what you have sent. Let’s create these two (I think you should use them in your application too):

imageimage

The tile XML will end up looking like this:

<tile>
    <visual lang="en-US>
        
        <binding template="TileSquareImage">
            <image id="1" src="/images/clarkHeadShot.jpg" alt="Clark Sell"/>
        </binding> 

        <binding template="TileWideSmallImageAndText03">
              <image id="1" src="/images/clarkHeadShot.jpg" alt="31 Days"/>
              <text id="1">31 Days of Windows 8</text>
        </binding>  

    </visual>
</tile>

Now you already know how to create and modify the small tiles. To modify the large is exactly the same, just different template, and more opportunity to modify things.

var wideTemplate = notifications.TileTemplateType.tileWideSmallImageAndText03;
var wideTileXml = notifications.TileUpdateManager.getTemplateContent(wideTemplate);

var wideTileAttributes = wideTileXml.getElementsByTagName("image");
var wideTileTextElements = wideTileXml.getElementsByTagName("text");

wideTileAttributes[0].setAttribute("src", "ms-appx:///images/clarkHeadShot.jpg");
wideTileTextElements[0].innerText = "31 Days of Windows 8";

Take a close look and you will see that I am actually pulling an image from some weird src, it’s actually the local package. You could use just “/images/clarkHeadShot.jpg” too. You also have the ability to use images that are hosted out on the web or even in your local storage.  Of course the more network hopes something has to take the longer it will take to load, so keep that in mind when using them. Also, to pull images from the web you will need to adjust your apps capabilities in your manifest to allow for internet access. If you do that, you need a privacy policy too.

To merge the two tiles together. We’re basically going to take one template and add it to another.

var node = wideTileXml.importNode(smallTileXml.getElementsByTagName("binding").item(0), true);
wideTileXml.getElementsByTagName("visual").item(0).appendChild(node);

As you can saw above, we will end up with multiple bindings in one <visual> node.  To add additional notifications, you would go through the same process, adding even more to this same node.

- tip -

Above we mentioned there we’re a few different ways we could reference resources like images. Let’s look at a few.

  • ms-appx:///images/Cats.png – reference your local package
  • ms-appdata:///images/Cats.png – reference ApplicationData.LocalFolder
  • /images/cats.png – typical local reference
  • http(s)://31daysofwindows8.com – http(s) reference

Clearing Your Notifications

There are also going to be times where you’ll want to delete your notifications.  Perhaps new information has become available, or something changed before your expiration dates have expired, and you need to start over.  To do this, it’s a simple line of code:

var notifications = Windows.UI.Notifications;
notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

Expire Notifications

Should your notification last forever? Well I can’t answer that, but I am thinking that some of those notifications might in fact need to be cleared out. By default local tile and badge notifications do not expire while push, periodic and scheduled notifications will after three days. To expire a notification just set the expirationTime on your tile notification.

var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);

I know you we’re expecting something much harder. So, we’ve covered small and large tiles, even in combination, but what if you want to provide your user with multiple tiles?

Secondary Tiles

Secondary tiles are an excellent way to surface the information your users want directly to their Start screen.  If you’re a weather application, they can pin multiple cities for a quick reference.  If you’re the People app, you allow me to pin the people that are important to me, so that I can easily see what they’re up to.

I originally intended to write an entire section here about how to actually pin a Secondary Tile to your user’s start screen, but Microsoft has done a phenomenal job already.  Check this out:

Quickstart: Pinning a Secondary Tile

Not only do they want you through creating a Secondary Tile, but they also provide you with all of the code to prompt the user from an AppBar, determine if it has already been pinned, and even remove the tile when it’s not necessary anymore.  It’s a great tutorial, and I highly recommend it.

From the cloud

Push, Periodic and Scheduled notification are something we haven’t touched on yet, but I am going to save that topic for another time. Tomorrow we’re talking toast and the two really go hand in hand when we’re talking about something like push notifications.

Summary

We’ve covered a great deal of content today related to Windows 8 Live Tile updates.  From creation to updates, you can see that it’s pretty simple to do from your app.  I can’t recommend updating your app’s tiles with relevant information as frequently as possible.  It will make your app that much more appealing to your user.

To download my entire solution of sample code for this article, click the icon below:

 downloadHTMLdownloadTheTools

Tomorrow, we’re going to look at the other side of notifications: Toast messages.  Until then, happy coding, and we’ll see you tomorrow!

Published at DZone with permission of Clark Sell, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)