In order to access the notification demo, you can click on the Notification list item. You will be introduced to the Notification page. You can click on one of the available buttons to see, hear, and feel the different available notifications. The following screenshot shows the result of clicking on the Show Prompt button, which shows a prompt dialog to have the user input:

The notification prompt

You also have the option to show an alert message and confirmation dialog. You can vibrate the device by clicking on the Vibrate button, and finally, you can make the device beep by clicking on the Beep button.

The following code snippet shows the "notification" page:

<div data-role="page" id="notification">
    <div data-role="header">
        <h1>Notification</h1>
        <a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
    </div>
    <div data-role="content">
        <h1>Welcome to the Notification Gallery</h1>
        <p>Click the buttons below to check notifications.</p>
        <input type="button" id="showAlert" value="Show Alert"/>
        <input type="button" id="showConfirm" value="Show Confirm"/>
        <input type="button" id="showPrompt" value="Show Prompt"/>
        <input type="button" id="vibrate" value="Vibrate"/>
        <input type="button" id="beep" value="Beep"/>

        <div id="notificationResult">
        </div>
    </div>
</div>

The preceding "notification" page contains the following:

The following code snippet shows the "notification" page view controller JavaScript object, which includes the event handlers of the page (notification.js):

(function() {
    var notificationManager = NotificationManager.getInstance();

    $(document).on("pageinit", "#notification", function(e) {
        e.preventDefault();

        $("#showAlert").on("tap", function(e) {
            e.preventDefault();

            notificationManager.showAlert("This is an Alert", onOk, "Iam an Alert", "Ok");          
        }); 

        $("#showConfirm").on("tap", function(e) {
            e.preventDefault();

            notificationManager.showConfirm("This is a confirmation", onConfirm, "Iam a confirmation", "Ok,Cancel"); 
        });         

        $("#showPrompt").on("tap", function(e) {
            e.preventDefault();

            notificationManager.showPrompt("What is your favorite food?", onPrompt, "Iam a prompt", ["Ok", "Cancel"], "Pizza"); 
        });          

        $("#vibrate").on("tap", function(e) {
            e.preventDefault();

            notificationManager.vibrate(2000);          
        });  

        $("#beep").on("tap", function(e) {
            e.preventDefault();

            notificationManager.beep(3);          
        });        

    });

    function onOk() {            
        $("#notificationResult").html("You clicked Ok<br/>");
    }

    function onConfirm(index) {            
        $("#notificationResult").html("You clicked " + ((index == 1) ? "Ok":"Cancel") + "<br/>");
    }    

    function onPrompt(result) {
        if (result.buttonIndex == 1) {
            $("#notificationResult").html("You entered: " + result.input1);
        }
    }        
})();

As shown in the preceding code snippet, the "pageinit" event handler registers the "tap" event handlers on the "showAlert", "showConfirm", "showPrompt", "vibrate", and "beep" buttons.

In the "tap" event handler of the "showAlert" button, an alert is shown by calling the notificationManager.showAlert(message, callback, title, buttonName) method specifying the message to display ("This is an Alert"), the callback to be called when the dialog is dismissed (onOk), the dialog title ("Iam an Alert"), and finally, the button name (Ok). In onOk, the "You clicked Ok" message is displayed in the "notificationResult" div.

In the "tap" event handler of the "showConfirm" button, a confirmation dialog is shown by calling the notificationManager.showConfirm(message, callback, title, buttonLabels) method specifying the message to display ("This is a confirmation"), the callback to be called when the dialog is dismissed or if any of the confirmation dialog buttons is clicked (onConfirm), the dialog title ("I am a confirmation"), and finally, the button labels, which are represented using a comma-separated string that specify button labels ("Ok,Cancel"). In onConfirm(index), the clicked button is displayed in the notificationResult div using the received index callback parameter, which represents the index of the pressed button. Note that index uses one-based indexing, which means that the "Ok" button has the index 1 and the "Cancel" button has the index 2.

In the "tap" event handler of the "showPrompt" button, a confirmation dialog is shown by calling the notificationManager.showPrompt(message, callback, title, buttonLabels, defaultText) method specifying the message to display ("What is your favorite food?"), the callback to be called when any of the prompt dialog buttons is clicked (onPrompt), the dialog title ("Iam a prompt"), the button labels, which are represented as an array of strings that specify button labels (["Ok", "Cancel"]), and finally, the default input text ("Pizza"). In onPrompt(result), result.buttonIndex represents the button index (which is one-based indexing) that is clicked. If the "Ok" button (which has the index 1) is clicked, then the user input is obtained using result.input1.

In the "tap" event handler of the "vibrate" button, the device is vibrated by calling the notificationManager.vibrate(milliseconds) method specifying milliseconds to vibrate the device (2,000 milliseconds).

In the "tap" event handler of the "beep" button, the device is made to beep by calling the notificationManager.beep(times) method specifying the times to repeat the beep (three times).

The following code snippet shows NotificationManager.js:

var NotificationManager = (function () {     
    var instance;

    function createObject() {
        return {
            showAlert: function (message, callback, title, buttonName) {
                navigator.notification.alert(message, callback, title, buttonName);
            },
            showConfirm: function (message, callback, title, buttonLabels) {
                navigator.notification.confirm(message, callback, title, buttonLabels);
            },
            showPrompt: function (message, callback, title, buttonLabels, defaultText) {
                navigator.notification.prompt(message, callback, title, buttonLabels, defaultText);
            },
            beep: function (times) {
                navigator.notification.beep(times);
            },
            vibrate: function (milliseconds) {
                navigator.notification.vibrate(milliseconds);
            }
        };
    };

    return {
        getInstance: function () {
            if (!instance) {
                instance = createObject();
            }

            return instance;
        }
    }; 
})();

As shown, NotificationManager is a singleton object that does a simple wrapping for the Cordova Notification API. It has the following methods:

Now, we are done with the notification functionality in the Cordova Exhibition app.