CODEWITHSUNDEEP
androideventscordovaandroid-menu
Hafiz
Hafiz

Reputation: 4267

Phonegap application not detecting Android hardware Menubutton Event

I am creating Phonegap app, and want to detect if someone have pressed hardware menu button of android device.

Here is my simple HTML code almost same as in helloworld app:

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you 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.
-->
<html>
    <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    </head>
    <body>
    <div class="app">
        <h1>PhoneGap</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>

        <div id="testapp">Here</div>
    </div>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    </body>
</html>

Here is JS, which have the logic:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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.
 */
var app = {
    // Application Constructor
    initialize: function() {
    this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
    document.addEventListener('menubutton', this.onMenuButton, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
    app.receivedEvent('deviceready');
    },
    onMenuButton:  function(){
    app.menuPressed();
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');



    console.log('Received Event: ' + id);
    },
    menuPressed: function(){
document.getElementById("testapp").innerHTML = "it is in menu div";
    }
};

Here it is detecting when deviceready is detected, but not detecting menubutton detection. What am I doing wrong?

Upvotes: 1

Views: 738

Answers (2)

Magnus Smith
Magnus Smith

Reputation: 5963

I broke my entire app once by omitting the argument ev in the function definition. Not sure why, but it fixed everything when I put it back! This was Phonegap 3.1.0.

document.addEventListener("menubutton", native_menu_button, false);

function native_menu_button(ev) {
    //whatever
}

Upvotes: 1

Hafiz
Hafiz

Reputation: 4267

I have found the reason due to which it wasn't detecting the menubutton event. I was actually attaching event listener at wrong place.

This line: 

document.addEventListener('menubutton', this.onMenuButton, false);

in instead of bindEvents, it should be in onDeviceReady function, because in onDeviceReady we can attach event. But we can't attach it in bindEvents as bindEvents execute only once, the app.initialize is called from index.html.

Let me know if anyone need to know more about it so that it can be useful for you.

Upvotes: 1

Related Questions