Peek Tiles

You can get more into a tile than it can hold by using "Peek" tiles. These are essentially twice the height of the basic tile and you can define text and images that will be shown in succession by scrolling the tile area. 

For example you can combine the two examples given earlier using a tileSquarePeekImageAndText01 which has one image and four lines of text - a block title and three standard lines:

var tileType = Notifications.
          TileTemplateType.
            tileSquarePeekImageAndText01;
var tileXML = Notifications.
              TileUpdateManager.
               getTemplateContent(tileType);
var ImageNode = tileXML.
          getElementsByTagName("image")[0];
ImageNode.attributes.getNamedItem("src").
       nodeValue="http://etc.com/IP.jpg";
var text1Node = tileXML.
         getElementsByTagName("text")[0];  
text1Node.innerText = "99";
var text2Node = tileXML.
           getElementsByTagName("text")[1]; text2Node.innerText = "Hello Tile";

The result is a tile that one moment shows the image and then flips to show the text.

Wide tiles can show a mixture of text and images and can show an arrangement of smaller images to fill the space album style.

Using XML

As in the case of the badge notification system you can use the basic XML definitions of the tiles to create a TileNotification object. All you have to do is create an XmlDocument object and then use its loadXml method to convert the XML to an object:

var tileXML = new Windows.Data.Xml.
                        Dom.XmlDocument();
tileXML.loadXml('<tile><visual>
 <binding template="TileSquareBlock">
  <text id="1">99</text>
   <text id="2">Second line</text>
     </binding></visual></tile>')
var tileNotification = new
   Notifications.TileNotification(tileXML);
var TileUpdater=Notifications.
  TileUpdateManager.
     createTileUpdaterForApplication();
TileUpdater.update(tileNotification);

Notice that this is the entire code needed to perform the update. Also notice that the customized content of the text tags is already in place - there is no need to manipulate the XML DOM.

Unless you have a good reason to use this approach it is best avoided. You can't use it to create new forms of tile only the templates that Microsoft has defined can be used.

Managing notifications

It is important make sure that you understand how notifications work. The tile isn't yours to manipulate - it belongs to the tile manager and you can only request the tile manager to do something. You can send a notification to the tile manager and nothing might happen or it might happen after you application has finished. The entire tile update is nothing much to do with your application.

In principle what happens is that notifications are queued and the tile manager used them when it can. However suppose your application sent some hot new information to the tile manager that didn't get displayed for a few days. It wouldn't look good to the user.

To stop this sort of thing happening you can specify an expiry date for you notifications. The TileNotification object has two properties associated with it - an expirationTime and a Tag. More about the Tag in a moment.

If you set the expirationTime then the notification will not be used after the time has elapsed. If it hasn't been shown then after the expirationTime it will never be shown and it it has been shown and it is still visible it will be removed.

The expirationTime property, despite its name is a full JavaScript Date object and you can set any date or time in the future for the tile to expire. For example:

var expireticks = new Date().getTime()
                            + 30 * 1000;
tileNotification.expirationTime =
                  new Date(expireticks);

The first line gets the current time and date in milliseconds and adds 30 seconds to it, again in milliseconds.  The second line simply creates a new Date object with that number of milliseconds. The tile will now display for at most 30 seconds.

The expiry date is a useful extra but the tile manager is a little more sophisticated. You can schedule an update and set periodic updates. In the case of periodic updates you specify a URI that supplies an XML file - like the example in the previous section on using XML. In this case you need to make sure that the XML is customized with your data so that the up-dates show changing information. Notice that this also shows that the tile update is independent of your app.

You can also opt to send up to five notifications which will be retained in the queue and cycled though. Normally the most recent notification is the only one shown. To turn on cycling you need to use the TileUpdater

TileUpdater.enableNotificationQueue(true);

After this the way that notifications are handled is different. Up to five notifications will be held and displayed in turn. In general, the queue is FIFO (First In First Out) and new notifications will be shown first and then they are cycled through in date order. If the queue is full and a new notification is received, the oldest is discarded.

You can refine the cycling behavior by setting the Tag property on the tileNotification. This is a string that can be used to define the notification's type. Up to five notifications with different tags can be in the queue. If you send a new notification with a tag that is the same as a notification in the queue then the new notification replaces it. In this way you can keep a queue of up to five notifications cycling and replace any one of them by more up-to-date information.

So for example, if your app is showing the temperature of five locations, you could tag each one with "loc1", "loc2" and so on. The tiles would be shown in turn and if you send a notification with a new temperature to "loc2" then it will replace the older tile with the same tag.

Using the queuing system isn't difficult but the logic to keep it all working can become tricky.

Some FAQs

How do you remove a tile?

Use the clear method of the TileUpdater object.

How do you remove the logo in the corner of the tile?

I used to think this was impossible but after browsing the XML Schema it turns out that there is an optional attribute that you can set. 

The visual tag which defines the templates layout has an optional branding attribute which can be set to none, logo or name to remove all branding or show the logo or name. For example if you change the XML in the example above to:

tileXML.loadXml('<tile>
 <visual branding="none">
  <binding template="TileSquareBlock">
   <text id="1">98</text>
   <text id="2">Second line</text>
  </binding>
 </visual>
</tile>')

Then the tile will display without a logo or text.

Is it possible to check if a tile can be updated?

Yes - use the setting property of the TileUpdater which returns 0 if it can be updated or a code for the reason why it cannot be updated.

Can you specify a wide and square tile update?

Yes you create both templates one for  the wide and one for the square tile in the usual way.  Then you add the portion of the square tile between and including the binding tags and add this as a child node of the wide tiles visual tag. The result is to create two binding sections within the visual tag. For example the XML for the combined template for a TileSquareImage and a TitleWideImageAndText01  is something like:

<tile>
 <visual lang="en-US>
  <binding template="TileSquareImage">
   <image id="1" src=uri />
  </binding>
  <binding template="TileWideImageAndText01">
   <image id="1" src=uri />
   <text id="1">some text</text>
  </binding>
 </visual>
</tile>


in Creating JavaScript/HTML5 Metro Applications

• 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

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info