notify/index.htm

<!DOCTYPE html>
<!--
* Copyright 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<!DOCTYPE html>
<head>
    <title>notification sample app</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="local:///chrome/webworks.js" type="text/javascript"></script>
    <script src="jquery/jquery-1.7.1.min.js"></script>
    <script src="jquery/jquery.mobile-1.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.1.0.min.css" />
    <script>
        function ready() {
            console.log("ready start");
            
            blackberry.event.addEventListener("invoked", invokeHandler);

            document.getElementById("b1").onclick = button1;
            document.getElementById("b2").onclick = button2;
            document.getElementById("b3").onclick = button3;
            document.getElementById("b4").onclick = button4;
            document.getElementById("b5").onclick = button5;
            document.getElementById("b6").onclick = button6;
            document.getElementById("b7").onclick = button7;
        }

        function populateInvokeElement(element, data) {
            element.innerHTML += '<h5>Handler begin</h5>';
            element.innerHTML += '<p>Target: ' + data.target + '</p>';
            element.innerHTML += '<p>Action: ' + data.action + '</p>';
            element.innerHTML += '<p>Type: ' + data.type + '</p>';
            element.innerHTML += '<p>Data: ' + data.data + '</p>';
            element.innerHTML += '<p>URI: ' + data.uri + '</p>';
            element.innerHTML += '<h5>Handler end</h5>';
        }

        function invokeHandler(invokeData) {
            var invokeDataElement = document.createElement("div");
            populateInvokeElement(invokeDataElement, invokeData);
            document.getElementById("log").appendChild(invokeDataElement); 
        }

        function button1 () {
            var n = new Notification("simple notification");
            console.log(n);
        } 

        function button2 () {
            var n = new Notification("Title", { 'body' : "Body", 'tag': "Tag" });
            console.log(n);
        }

        function button3 () {
            var n = new Notification("onShow", {
                'onshow' : function () {
                    alert("onShow");
                }, 
                'onerror' : function () { 
                    alert("onError");
                }
            });
            console.log(n);
        }
        
        function button4 () {
            var n = new Notification("button4", {
                'target' : "notifyTest",
                'targetAction' : "bb.action.OPEN",
                'payloadURI' : "http://www.blackberry.com",
                'payloadType' : "text/html"
            });
            console.log(n);
        }
        
        function button5 () {
            var n = new Notification("button5", {
                'targetAction' : "bb.action.NEWACTION",
            });
            console.log(n);
        }

        function button6 () {
            var n = new Notification("button6");
            console.log(n);
            setTimeout(n.close(), 2000);
        }

        function button7 () {
            var n = new Notification("button7", { 'tag': "Tag" });
            console.log(n);
            Notification.remove("Tag");
        }

        
        window.addEventListener("load", function () {
            document.addEventListener("webworksready", ready);
        }, false);
    </script>
</head>
<body>
    <h2>HTML5 Notification API</h2>

    <button id="b1">Simple Notify</button><br />
    <button id="b2">Notify with title, body and tag</button><br />
    <button id="b3">Notify onShow callback</button><br />
    <button id="b4">Notify with invoke paramters</button><br />
    <button id="b5">Notify with invoke paramters 2</button><br />
    <button id="b6">Notify then close after 2 seconds</button><br />
    <button id="b7">Notify with tag then remove</button><br />

    <div id=log>
        <h3>onInvoked Log</h3>
    </div>

</body>