Notifications

PUBLISHED

Overview

This article demostrates different types of notifications implemented using Tizen Notification APIs. Notifications are of different types namely Simple, Progress, Thumbnail, Ongoing and Ticker. Notifications have different attributes like content, iconPath, soundPath etc. There are also some functionalities which we can perform on notifications like updating, retrieving and removing notifications. Add the <tizen:privilege name="http://tizen.org/privilege/notification"/> privilege in the config.xml file of the application.

Notifications Demo HTML Page

There are two html pages index.html and index1.html. The content area has listview which will demonstrate different functionalities of notifications.

index.html

To post a ticker notification (which is a part of the application page) the below code must be added inside <div data-role="page"> but above header part.

<div data-role="notification" data-type="ticker" id="notification" data-interval="3000" style="display: none;"></div>

Adding data-type="ticker" and data-role="notificaion" will post a ticker notification on the page itself and data-interval="3000" means the time interval for which the ticker is shown i.e 3 seconds.

Notifications Demo Content Area

The content area consists of list view of seven elements for posting simple notification, updating notification, progress notification(percentage and byte), thumbnail notification, ongoing notification and ticker notification.

<ul data-role="listview">
  <li><a onclick="post_notification();">Simple Notification</a></li>
  <li><a onclick="update_notification();">Update Notification</a></li>
  <li><a onclick="progress_notification();">Progress Notification (PERCENTAGE)</a></li>
  <li><a onclick="progress_notificationByte();">Progress Notification (BYTE)</a></li>
  <li><a onclick="thumbnail_notification();">Thumbnail Notification</a></li>
  <li><a onclick="ongoing_notification();">Ongoing Notification</a></li>
  <li><a onclick="show_ticker();">Ticker Notification</a></li>
</ul>
<div id="text"></div>

index1.html

Notifications Demo Content Area

The content area consists of list view of five elements for performing actions on notifications like retrieve one notification, retrieve all notifications, remove one notification and remove all notifications.

<ul data-role="listview">
  <li><a onclick="retrieve_one_notification();">Retrieve One Notification</a></li>
  <li><a onclick="retrieve_all_notifications();">Retrieve All Notifications</a></li>
  <li><a onclick="remove_one_notification();">Remove one Notification</a></li>
  <li><a onclick="remove_all_notifications();">Remove All Notifications</a></li>
  <li><a onclick="return_notification();">Return To First Page</a></li>
</ul>

Notifications Demo JavaScript File

Posting Simple Notification

The below sample code used for posting Simple Notification. tizen.notification object allows access to the Notification API. void post(Notification notification); - Posts a notification to display. Code covers all the properties of a notification like content, iconPath, appControl etc. Using below appControl we can launch Native Gallery Application when clicked on the notification that is posted. "iconPath" mentioned below is the path for displaying application icon.

function post_notification(){
try {
      var appControl=new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/pick",null,"IMAGE",null);
      var notificationDict={
			content : "Click to Launch Gallery",
			iconPath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
			backgroundImagePath : "images/image5.jpg",
			soundPath : "music/Over the horizon.mp3",
			vibration : true,
			appControl : appControl,
			detailInfo:"post_notification();"
		};

	var notification = new tizen.StatusNotification("SIMPLE","Simple notification", notificationDict);
	tizen.notification.post(notification);
    }catch (err) {
		console.log (err.name + ": " + err.message);
    }
}

Updating Notification

The below sample code Updates a particular notification using it's id. tizen.notification.update(myNotification); is used for updation. The code takes the previously posted notification and updates it's properties.

function update_notification(){
try {
	var appControl = new tizen.ApplicationControl(
				"http://tizen.org/appcontrol/operation/notification",
				null,
				null,
				null);
	var notifications = tizen.notification.getAll();
	if( notifications.length > 0){
	        var myId = notifications[0].id;
		var myNotification = tizen.notification.get(myId);
		var detailInfo1 = new tizen.NotificationDetailInfo('update_notification(); called');
		myNotification.detailInfo = [detailInfo1];
		myNotification.content = "Click for second page of Notifications Demo";
		myNotification.iconPath="images/image4.jpg";
		myNotification.appControl=appControl;
		myNotification.title="Update Notification";
		myNotification.backgroundImagePath="images/image6.jpg"
		myNotification.subIconPath="/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png";
		tizen.notification.update(myNotification);
		}
      } catch (err) {
	console.log (err.name + ": " + err.message);
      }
}

From the code we can see that the appControl property is updated to "http://tizen.org/appcontrol/operation/notification", which is user defined appControl using which we can launch any application which owns this appControl operation. The appControl mentioned is declared in the current application itself in the config.xml file like below, where "src" is set to "index1.html" which is the second page for Notifications Demo, So when clicked on the updated notification we redirect to the second page.

<tizen:app-control>
     <tizen:src name="index1.html"/>
     <tizen:operation name="http://tizen.org/appcontrol/operation/notification"/>
     <tizen:uri name="file"/>
     <tizen:mime name=""/>
</tizen:app-control>

Progress Notification (type : PERCENTAGE)

The below sample code is used for posting progress notification of type "PERCENTAGE" which is default type for Progress Notification . It displays the information on the progress of a job in percentage.

function progress_notification(){
try {
	var notificationDict = {
		content:"Progress Type : PERCENTAGE",
		iconPath : "images/image6.jpg",
		vibration : true,
		progressValue : 20 ,
		backgroundImagePath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
		};
	var Mynotification = new tizen.StatusNotification("PROGRESS",
				"Progress notification", notificationDict);
	tizen.notification.post(Mynotification);
     } catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Progress Notification (type : BYTE)

The below sample code is used for posting progress notification of type "BYTE", that displays the information on the progress of a job.The progress is indicated in byte.

function progress_notificationByte(){
try {
	var notificationDict = {
		content:"Progress Type : BYTE",
		iconPath : "images/image1.jpg",
		vibration : true,
		progressValue : 20 ,
		progressType : "BYTE",
		backgroundImagePath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
	};
	var Mynotification = new tizen.StatusNotification("PROGRESS",
				"Progress notification", notificationDict);
	tizen.notification.post(Mynotification);
     } catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Thumbnail Notification

The below sample code is used for posting thumbnail type of notification. It posts a thumbnail-format notification which includes several thumbnail image paths. The thumbnail status notification is removed by a user selection.

function thumbnail_notification(){
try {
	var notificationDict = {
		iconPath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
		soundPath : "music/Over the horizon.mp3",
		vibration : true,
		thumbnails : ["images/image5.jpg","images/image1.jpg","images/image3.jpg","images/image2.jpg"]
	};

	var notification = new tizen.StatusNotification("THUMBNAIL",
				"THUMBNAIL notification", notificationDict);
	tizen.notification.post(notification);
     }catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Ongoing Notification

The below sample code posts an ongoing type of notification that informs the user about an application is running or not. However, an ongoing status notification should be removed by the application that posted the notification.

function ongoing_notification(){
try {
	var notificationDict = {
		iconPath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
		soundPath : "music/Over the horizon.mp3",
		vibration : true,
		};

	var notification = new tizen.StatusNotification("ONGOING",
				"ONGOING notification", notificationDict);
	tizen.notification.post(notification);
     }catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Ticker Notification

The below code opens a ticker notification which is defined in the page of index.html. We can set the icon and text for the ticker notification. "notification('open')" will open ticker, similarly "notification('close')" will close the ticker.

function show_ticker(){
	$('#text').empty();
	console.log("inside show ticker");
	$("#notification").css({ display:"block"});
	$('#notification').notification('icon', './icon.png');
	$('#notification').notification('open');
	$('#notification').notification('text', 'This is Ticker Notification');
	var text = $('#notification').notification('text');
	$('#text').append('<center><p style="color:#305FA3">You just saw Ticker Notification</p></center>');
}

Retrieve One Notification

The below sample code gets a notification that has previously been posted by the current application.

function retrieve_one_notification(){
try {
	var notifications = tizen.notification.getAll();
	if( notifications.length > 0){
	     var myId = notifications[0].id;
	     var myNotification = tizen.notification.get(myId);
	     tizen.notification.post(myNotification);
	}
     }catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Retrieve All Notifications

The below code is used for retrieving all notifications that have previously been posted by the current application along with all their properties.

function retrieve_all_notifications(){
try {
	var notifications = tizen.notification.getAll();
	var index = 0;

	for ( index = 0; notifications.length > index; index++ )
	{
		console.log(notifications[index].id);
		console.log(notifications[index].title);
		console.log(notifications[index].statusType);
		console.log(notifications[index].type);
		console.log(notifications[index].content);
		console.log(notifications[index].postedTime);
		console.log(notifications[index].iconPath);
		console.log(notifications[index].vibration);
		console.log(notifications[index].appControl);
		console.log(notifications[index].detailInfo);
		console.log(notifications[index].soundPath);
	}
     } catch (err) {
	console.log (err.name + ": " + err.message);
     }
}

Remove One Notification

The below sample code is used to remove a previously posted notification.

function remove_one_notification(){
try {
	var notifications = tizen.notification.getAll();
	if( notifications.length > 0){
		var myId = notifications[0].id;
		tizen.notification.remove(myId);
	}
    } catch (err) {
	console.log (err.name + ": " + err.message);
    }
}

Remove All Notifications

The below sample code removes all notifications that have been posted by the current application

function remove_all_notifications(){
try {
	tizen.notification.removeAll();
    } catch (err) {
	console.log (err.name + ": " + err.message);
    }
}

Returning back to same application

The below sample code is used to return back to the same application i.e first page of the application. The "appId" property mentioned holds the application ID to launch when the notification is selected from the notification tray.

function return_notification(){
try {
	var myappInfo = tizen.application.getAppInfo();
        var notificationDict = {
		content:"Click for First Page",
		iconPath : "images/image5.jpg",
		vibration : true,
		appId : myappInfo.id,
		backgroundImagePath : "/opt/apps/9kAyFAxrfU.backup/icons/9kAyFAxrfU.Notifications.png",
	};
	var Mynotification = new tizen.StatusNotification("SIMPLE",
				"Back to First Page", notificationDict);
	tizen.notification.post(Mynotification);
    } catch (err) {
	console.log (err.name + ": " + err.message);
    }
}

Screenshots of Notifications Demo

 

 

 

 

 

 

 

 

 

Figure-1 All Types of Notifications Figure-2 Ticker Notification

 

 

 

 

 

 

 

 

 

 

File attachments: 
Package icon notifications.zip