Notifications & Metro Style apps in Windows8 : Local Toast

As explained in the previous post about notifications in Windows8, notifications can be local or from the Cloud ( push ) .

In this post, we will be discussing the local notifications.

Start a new project

       Visual Studio 11 Developer Preview –> New Project –> JavaScript –> Blank Application

Define the notification

      In the ‘js’ folder, let’s add a new item: a javascript file called toast.

      You should first choose a template for your toast, you can refer to Toast Template Type.

      Back to the toast.js where we will write the following code :

“This example uses the ToastImageAndText01 template, which consists of a large image with, to its right, a single string wrapped across three lines of text.

To specify the content, we retrieve the collection of text elements then enumerates through that collection, assigning a string to each of those elements . It then retrieves the image element and assigns it an image and alt text.” Windows dev center – Metro Style apps

See the toast in action

    We need to let the application send the toast.

    In the ‘ default.html’ file, add a reference to the toast script :

   

 

Voila ! Quick and easy

Notifications & Metro Style apps in Windows 8: Introduction

Did you play around with the Windows Developer Preview ? If so, you did probably notice that tiles are the primary presentation of an app on the start screen.

In order to make the start screen feel vibrant and allow the user to see at a glance what’s new ( which is one of the main purposes of the metro style), you can add notifications to those tiles or use them separately.

There are three types of notifications :

Tile Notifications

Those are the information and notifications that you can see directly through the tile.

Tiles updates use pre-defined templates, and can cycle between five tiles.

Toast Notifications

“A toast notification is a transient message to the user that contains relevant, time-sensitive information and provides quick access the subject of that content in an app. It can appear whether you are in another app, the Start screen, or on the desktop. Toasts are an optional part of the app experience and are intended to be used only when your app is not the active foreground app.” Dev center – Metro style apps website

Toast notifications deliver transient messages outside the app to get the user’s attention immediately.

Badges

It’s a summary or status information concerning the app notification, on the top of the tile.

It supports square and wide tiles.

All those notifications can be :

Local notifications

• Used only when application is running.
• Most useful for updating tiles and badges.

Scheduled notifications

• for toast notifications to be running at a precise time.

Push notifications

• Update tiles, show badges and raise toasts from the cloud.
• Work even if the application is not running.

This post is an introduction, in the coming posts I will be writing about each kind of notifications and how to implement them.

Stay tuned