Back
Overview | Project

Notification Manager Sample Overview

The NotificationManager sample application demonstrates how you can manage notifications.

The application opens with the main screen where you can post or get notifications.

If you click Get Notification, a list of current notifications is displayed. To see the details of a notification, click it in the list.

The following figure illustrates the main screens of the NotificationManager.

Figure: NotificationManager screens

NotificationManager screen NotificationManager screen NotificationManager screen

Prerequisites

To ensure proper application execution, the following privilege must be set:

  • http://tizen.org/privilege/notification

Source Files

You can create and view the sample application project, including the source files, in the IDE.

Table: Source files
File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/style.css This file contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/app.js This file contains the application code.

Implementation

Defining the Application Layout

To define the application layout:

  1. In the index.html file, create a <div> element for each component in the page-main main screen:

    <!--index.html-->
<div class="page active" id="page-main">
   <div class="page-header">
      <p>Notification
         <br/>Manager</p>
   </div>
   <div class="page-content">
      <div class="list-item" id="notification-post-btn">
         <p>Post Notification</p>
      </div>
      <div class="list-item" id="notification-get-btn">
         <p>Get Notifications</p>
      </div>
   </div>
</div>

  2. In the index.html file, create a <div> element for each component in the page-notification notification list screen:

    <!--index.html-->
<div class="page" id="page-notification">
   <div class="page-header">
      <p>Notifications</p>
   </div>
   <div class="page-content">
      <div id="notification-list"></div>
      <div id="no-notification">No notifications</div>
   </div>
   
   <div class="page-footer">
      <div id="remove-all-btn">REMOVE ALL</div>
   </div>
</div>

  3. Set the styles for the page header, content, and footer in the style.css file:

    <!--css/style.css-->
.page-header
{
   height: 30%;
   width: 100%;
   display: table;
   border-image: 0 0 1 0 -webkit-linear-gradient(0deg, transparent, #12B4FF, transparent);
}

.page-content
{
   height: 55%;
   width: 100%;
   display: table;
}

.page-footer
{
   height: 15%;
   width: 100%;
   display: table;
}

  4. Set the styles for the notification list item in the style.css file:

    <!--css/style.css-->
.list-item
{
   margin-left: 10%;
   height: 50%;
   width: 80%;
   display: table;
   table-layout: fixed;
   border-image: 0 0 1 0 -webkit-linear-gradient(0deg, transparent, #404040, transparent);
   vertical-align: middle;
}

  5. Set the styles for the list item components in the style.css file:

    <!--css/style.css-->
.item-header
{
   height: 30px;
}

.item-title
{
   white-space: pre;
   float: left;
   width: 40%;
   height: 24px;
   line-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
}

.item-time
{
   float: right;
   margin-right: 5%;
   width: 35%;
   height: 24px;
   line-height: 24px;
   text-align: right;
}

.item-delete-btn
{
   float: right;
   width: 24px;
   height: 24px;
   background-color: #ff0000;
   border-radius: 100%;
   background-image: url("../images/delete.png");
   background-size: 20px 20px;
   background-repeat: no-repeat;
   background-position: center;
}

Posting Notifications

To post a notification:

  1. Bind a click event to the Post Notification button:

    /* js/app.js */
document.querySelector("#notification-post-btn").addEventListener("click", postNotification);

  2. Set a notification dictionary and post the notification:

    /* js/app.js */
function postNotification()
{
   var notification,
       notificationDict;

   try
   {
      /* Set notification dictionary */
      notificationDict =
      {
         content: "Hello Tizen!",
         iconPath: "../icon.png",
      };
      /* Create notification object */
      notification = new tizen.StatusNotification("SIMPLE", "Notification Manager", notificationDict);

      /* Post notification */
      tizen.notification.post(notification);
   }
   catch (err)
   {
      console.log(err.name + ": " + err.message);
   }
}

Getting Notifications

To get a notification:

  1. Get all notifications:

    /* js/app.js */
notifications = tizen.notification.getAll();

  2. If no notifications exist, display the no notification screen:

    /* js/app.js */
if (notifications.length === 0)
{
   /* If there are no notifications, show "No notification" message */
   document.querySelector("#no-notification").style.display = "table-cell";
   document.querySelector("#notification-list").style.display = "none";
   document.querySelector("#remove-all-btn").style.display = "none";
}
else
{
   for (i = 0; i < notifications.length; i++) 
   {
      addNotificationItem(notifications[i]);
   }
   document.querySelector("#no-notification").style.display = "none";
   document.querySelector("#notification-list").style.display = "block";
   document.querySelector("#remove-all-btn").style.display = "table-cell";
}

  3. Add a notification item:

    /* js/app.js */
/* Create list item DIV object */
listItem = createDiv("list-item");

/* Create left container DIV object */
itemContainerLeft = createDiv("item-container-left");

/* Create title and time DIV objects and append to left container */
itemTitle = createDiv("item-title");
itemTitle.appendChild(document.createTextNode(notification.title));
itemTime = createDiv("item-time");
itemTime.appendChild(document.createTextNode(getTimeString(notification.postedTime)));
itemContainerLeft.appendChild(itemTitle);
itemContainerLeft.appendChild(itemTime);
listItem.appendChild(itemContainerLeft);

/* Create right container DIV object */
itemContainerRight = createDiv("item-container-right");

/* Create remove button DIV object and append to right container */
itemRemoveBtn = createDiv("item-remove-btn");
itemContainerRight.appendChild(itemRemoveBtn);
listItem.appendChild(itemContainerRight);

Showing Detail Information

To show notification details:

  1. Bind a click event to the notification item:

    /* js/app.js */
listItem.addEventListener("click", function()
{
   setNotificationDetail(notification);
});

  2. When the user clicks a list item, show the detail screen:

    /* js/app.js */
function setNotificationDetail(notification)
{
   /* Remove texts of title, time, and content */
   removeChildren("#detail-title");
   removeChildren("#detail-time");
   removeChildren("#detail-content");

   /* Set texts about notification title, time, and content */
   document.querySelector("#detail-title").appendChild(document.createTextNode(notification.title));
   document.querySelector("#detail-time").appendChild(document.createTextNode(notification.postedTime.toUTCString()));
   document.querySelector("#detail-content").appendChild(document.createTextNode(notification.content));

   /* Change active page */
   document.querySelector("#page-notification-detail").classList.toggle("active");
   document.querySelector("#page-notification").classList.toggle("active");
}