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

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.

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");
   }