Geting Notified

This is an excerpt from the upcoming book Programming Windows 8 with HTML5 for Dummies

--------------------------------------

 Now that you have the template set up, getting notifications on the tile is not that tough. More or less, you want to decide what events in your system should update the tile, and then attach tile updates to them.

 So think about your application. In the ToDoToday app, I update the tile whenever the user updates the task list, making sure I show the latest tasks in the m notification area. If writing a game, you probably would want to update the tile every time the user clears a level.

 In general, treat the notification as exactly what it is. It is the opportunity to notify the user what the last thing happening in the app is. So:

 Update the notifications when the user does something significant

  • Update the notifications when there is significant information to pass on to the user.
  • Update the notifications when the app is about to be suspended.

 

Making notifications part of your tile

 The good news is that you have already made a notification part of your tile, in Rendering Content. Setting the Text element value in the tile XML is essentially a notification - the only difference is in use and strategy - the tactics are the same.

 So to best implement it probably would be best to construct a function that is designed to be called from any of the important events.

 

function updateTile(textNotification) {
    var tileTemplate = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(Windows.UI.Notifications.TileTemplateType.tileWideImageAndText01);
    var tileTextAttributes = tileTemplate.getElementsByTagName("text");
       tileTextAttributes[0].appendChild(tileTemplate.createTextNode(textNotification));
    var tileImageAttributes = tileTemplate.getElementsByTagName("image");
    tileImageAttributes[0].setAttribute("src", "ms-appx:///images/WideLogo.png");
     var tileNotification = new Windows.UI.Notifications.TileNotification(tileTemplate);
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
}

 

This we can then call, and maybe pass in the date just to see how it works. For instance, add a promise activated function after the processAll function in the default.js file of the sample project.

 

WinJS.UI.processAll().done(function (e) {
    var today = new Date();
    updateTile(today);
});

 

Run this and the tile should be updated with the date in the text region. Now, let’s say we want to update the tile live as the user is using the app. To replicate this, you can add a button and an event handler for said button right there on the default page.

 

<body>
   <button type="button" id="actionButton" style="position: relative; left: 300px; top: 300px;">Click Me</button>
</body>

 

Set up a variable for the button in default.js (I called it theButton) and then add a little code to call the updateTile function:

 

theButton = document.getElementById("actionButton")
theButton.addEventListener("click", function (e) {
    var today = new Date();
    updateTile(today);
});

 

Run the app again, then press the Windows key and confirm the date and time is in the tile. Then go back to the sample app and click the button.

 

Press the Windows key again and the tile will have changed. This could be the score, the news, or an appointment. The choice is yours.

 

Getting a message on the queue

 

What if there is more than one thing you want to show the user? You could use one of the templates with a lot of small text, but there is a better choice. Microsoft allows you to stack up to 5 messages on the queue and the tile will cycle through them one at a time.

 

In order to do this you MUST enable the queue. This is a one line property setting that you can put in the initialization code of your app. I used the onactivated event for this example:

 

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);

 

After you do that, I would recommend clearing the queue. You don’t want what was in there before rolling through with your new content.

 

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();

 

So now our onAppActivated looks like this:

 

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
    Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();
            theButton = document.getElementById("actionButton")
            theButton.addEventListener("click", function (e) {
               var today = new Date();
               updateTile(today);
            });
        }
        WinJS.UI.processAll().done(function (e) {
            var today = new Date();
            updateTile(today);
        });
    }
};

Press F5 to start the app, and then click the Windows button to take a look at the Tile. It should have the date on it. Go get a cup of coffee, and come back, I’ll wait.

 

Now press the Click Me button and then take a look at the tile. The notification should be scrolling between the two times - when you started the app, and when you clicked the button.

 

Go back to the app, click the button again. Now look at the tile; there are three dates scrolling by. You can have up to five of these, and the Notification manager will drop the oldest automatically.

 

Comments are closed
Mastodon