Glyph Badges

The procedure for creating and using Glyph badges is exactly the same - only badge type changes to badgeGlyph. Which particular glyph you use is determined by the setting of the value attribute.

For example to display a newMessage glyph you would change the program to start:

var Notifications = Windows.UI.
                            Notifications;
var badgeType = Notifications.
               BadgeTemplateType.badgeGlyph;
var badgeXML = Notifications.
               BadgeUpdateManager.
               getTemplateContent(badgeType);

Now you have an XML template that specifies a glyph. To determine which glyph you have to set the value attribute to a descriptive string:

var badgeNode= badgeXML.
           getElementsByTagName("badge")[0];
badgeNode.setAttribute("value","newMessage");

and finally you have to go through the usual steps to display the badge:

var badgeNObj = new Notifications.
                BadgeNotification(badgeXML);
var badgeUpDater = Notifications.
                   BadgeUpdateManager.
         createBadgeUpdaterForApplication();
badgeUpDater.update(badgeNObj);

You can also clear a glyph badge by setting its value attribute to "none".

Now that you know how it all works it is worth giving a list of glyph types and their corresponding XML:

More Advanced Badges

There isn't much that is advanced about badges once you have seen them in action.

There are versions of the BadgeUpdater object for secondary windows and for other apps in the same package which provide you with more flexibility.

The update method lets you add badge updates to the queue ready for the tile manager to get round to doing the job when it is appropriate.

There are also an additional badgeUpdater method - StartPeriodicUpdate. This will retrieve XML for the badge from the specified URL starting at a specified time (optional) and repeating every so often - but no faster than every 30 minutes. Notice that the server has to supply the XML for the badge and the updater does the rest.  Notice that the URL has to be an http/https request - you can't access a local resource. 

This means that you could arrange for a badge to provide the count of say emails waiting or a status update without your app having to be involved  - indeed your app doesn't even have to be running for this to work.

Finally how do you manage updates? Suppose you want to update the count of emails waiting by adding one, or toggle the current state of the system. 

You could keep a reference to the XMLDocument object used to create the badge and use the getAttribute command. For example, to increment the value of a numeric badge:

var count = 1+
          badgeNode.getAttribute("value");
badgeNode.setAttribute("value", count);

Alternatively you can retrieve the current badge as an XMLDocument using:

var badgeXML=badgeNObj.content;
var badgeNode = badgeXML.
           getElementsByTagName("badge")[0];

and then process it as before.

Whatever you do, it seems only logical to package all of these and similar operations in functions and in most cases in methods that belong to objects that encapsulate the badge that you want to create.

So, for example, create a "mailToRead" object complete with addUnread, removeRead methods, and so on.

Where Next

Now that you have seen the way badges work, it is easy enough to extend the idea to updating entire wide tiles - this is covered in the next chapter.

To read more of this book click its cover image:

• 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