Activate!

A toast can be used to simply supply some information to the user but most often it is alerting the user to something happening in your app. If the user taps or clicks on the toast then your app can intercept an activate event that occurs and can do something in response.

How this works is very simple indeed as it really is only standard event handling.First we need to define a function to handle the event:

function onActivated(eventArgs) {
    var temp = eventArgs.type;
}

In this case the event hander simply stores the type of the event which should be "activate" in this case. Next we need to subscribe to the event:

toast.addEventListener("activated",onActivated);

Now if you run the program you will discover that clicking or tapping on the toast calls the event handler.

You can also subscribe to a "dismissed" and a "failed" event that occur  then the toast is dismissed (or simply times out) or if the toast failed for some reason.,

 In the case of activation you often need some additional information about the toast that had caused the activation. You can store information in the ToastNotification object that will be passed to the event handler. To do this you need to set the launch attribute of the toast tag in the XML to a  string - usually corresponding to a JSON format object - that provides the data. 

For example:

toastXml.getElementsByTagName("toast")[0].
 setAttribute("launch", "The toast is ready");

To retrieve the string you would use something like

var temp = eventArgs.target.content.innerText;

Scheduled Toasts

As in the case of tile notificiations you can schedule a toast notification.

 To do this you have to create a ScheduledToastNotification object. This has a startTime parameter which determines when the toast will be displayed. You can also specify a repeat time to create recuring toasts. After you have create the object you add it to the ToastNotifier's queue using the addToSchedule method.

If you think about the way toasts are supposed to be used then the idea of a scheduled toast doesn't make much sense and a recurring toast makes even less sense. In addition a scheduled toast doesn't raise any events so you can use it to reactiveate your app. The only use for a scheudled toast is to provide information to the user that something is still alive and happening or to deliver advertising.

For example, to create a toast that shows after 3 seconds:

var currentTime = new Date();
var startTime = new Date(
          currentTime.getTime() + 3 * 1000);
var toast = new Notifications.
       ScheduledToastNotification(toastXml,
                                  startTime);
toast.id = "Future_Toast";
toastNotifier.addToSchedule(toast);

The id attribute has to be 16 characters in length and it can be used to cancel a scheduled toast.

More Toast

As well as simple toasts generated from your app you can also create toasts that are pushed from a WNS server. This is beyond the scope of this chapter. You can also send toasts from desktop apps, but as these cannot be written in JavaScript this topic isn't covered.

 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

Coming soon, chapters on Promises, Life Cycle, Custom Controls and Data Binding.

Comments

Make a Comment or View Existing Comments Using Disqus

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

To be informed about new articles on I Programmer, install the I Programmer Toolbar, subscribe to the RSS feed, follow us on, Twitter, Facebook, Google+ or Linkedin,  or sign up for our weekly newsletter.