Capturing native button clicks in Android phone in javascript

Question

Is there a way by which we can capture the click of HOME and BACK button in the html file in android application using phonegap/jqtouch/javascript?

I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit / go back gracefully.

Minute

can you be more specific with the question – Davilman

have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit/go back gracefully. – Minute

Answer 1

You can catch the BACK button event in PhoneGap, however not the HOME button (this is a bad Android practice as there is a clear user expectation regardless of the app you're using about what the HOME key does: sends you back to your home screen! You don't want to override this functionality).

I will direct you to pieces of code in PhoneGap (LATEST source! pull from github for latest version of the phonegap framework) for guidance.

First, there is a 'BrowserKey' java object bound to the 'BackButton' JavaScript global:

http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/DroidGap.java#L291

The definition of this class is here: http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/BrowserKey.java

First thing you need to do in your application (I suggest you run this during application initialization) is to let the native side of the framework know you are overriding BACK button functionality. You would do this in JavaScript with a simple call:

BackButton.override();

From there on out, you can attach an event handler to the document's 'backKeyDown' event to execute logic every time the BACK button is hit. Something like this should work:

document.addEventListener('backKeyDown', function(e) {
  alert('you hit the back key!');
}, false);

As an addendum, here is the JavaScript code that wraps the back button event dispatching: http://github.com/phonegap/phonegap-android/blob/master/framework/assets/js/keyevent.js

Basically, after calling BackButton.override(), the native side of the framework will call window.keyEvent.backTrigger() every time the BACK button is hit.

Roti

I donot want to override the HOME button. I just want to capture the click of the button and end the session of my application. Is there any way by which i can do that? – Minute

You would have to extend the Java code here: github.com/phonegap/phonegap-android/blob/master/framework/src/… with a switch to capture the HOME button, and then call app.loadUrl('javascript:myFunction();'); to trigger a global 'myFunction' function back in JavaScript that would handle this. Just extend the approach I describe in my answer on how the BACK button capture works and apply it to the HOME button. – Roti

The HOME button should not cause your application to end a session. In Android, HOME is for application switching and the user might come back to your application. Instead, close your session when the Activity is destroyed (see Activity Lifecycle), however PhoneGap lets you do that. – Jeffryjeffy

@filmaj you should fix the url you have provided none of them is working. – Dogtooth

Answer 2

This code sample works for PhoneGap 0.9.5 and later (tested on 0.9.6) :

    document.addEventListener("menubutton", function () { 
        alert('Menu button');
    }, false);  

    document.addEventListener("searchbutton", function () { 
        alert('Search button');
    }, false);                      

    document.addEventListener("backbutton", function () { 
        alert('Back button');
    }, false);  

Home button can't be handled. That's reserved by the system.

Maxiemaxilla

Answer 3

I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit/go back gracefully.

Minute