0

I'm developing an android mobile application using jquery mobile and Phonegap. I'm new to developing android apps using Phonegap. I need to control the function of a back button in android. What I would like is if i'm on a specific page and if I touch the back button there will be a prompt asking if 'do you want to exit the app?'. I could use help on information to go about this.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" charset="UTF-8"/> 
    <link rel="stylesheet" href="themes/theme.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.mobile-1.3.2.min.js"></script>
<script>
document.addEventListener('backbutton', backButtonCallback, false);

function backButtonCallback() {
navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}
function confirmCallback(buttonIndex) {
if(buttonIndex == 1) {
    navigator.app.exitApp();
    return true;
}
else {
    return false;
}
}
</script>

</head>

XML:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="hap" version="1.0">

    <name>APP</name>
    <description>Happy Au Pair</description>
    <author>Myname</author>        <gap:platforms>
            <gap:platform name="ios" />
            <gap:platform name="android" />
            <gap:platform name="webos" />
            <gap:platform name="symbian.wrt" />
            <gap:platform name="blackberry" project="widgets"/>
    </gap:platforms>
    <gap:plugin name="org.apache.cordova.dialogs" />
     <icon src="icon.png" />
    <preference name="phonegap-version" value="3.1.0" />

    <access origin="*" subdomains="true" />
    <access uri="*" subdomains="true" />
     <access uri="http://gcccs.org" subdomains="true" />
    <feature name="http://api.phonegap.com/1.0/network"/>
    <feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser" />
    </feature>
    <feature name="App">
    <param name="android-package" value="org.apache.cordova.App" />
</feature>

    <preference name="orientation" value="portrait" />
    <preference name="fullscreen" value="true" />
    <preference name="target-device" value="universal" />

    <icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" />

<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />

</widget>

1 Answer 1

2

You will want to add an event listener for the back button:

document.addEventListener('backbutton', backButtonCallback, false);

Then create a function to run whatever you want when it's clicked:

function backButtonCallback() {
    navigator.notification.confirm('do you want to exit the app?',confirmCallback);
}

And then a callback to close the app if the user wants to:

function confirmCallback(buttonIndex) {
    if(buttonIndex == 1) {
        navigator.app.exitApp();
        return true;
    }
    else {
        return false;
    }
}

Additionally for PhoneGap Build you will want to add this to your config.xml file:

<gap:plugin name="org.apache.cordova.dialogs" />

This will allow for the use of the confirm notification.

UPDATE:

Here is a light mod to your html:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" charset="UTF-8"/>
                <link rel="stylesheet" href="themes/theme.min.css" />
                <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
                <script src="js/jquery-1.10.2.min.js"></script>
                <script src="js/jquery.mobile-1.3.2.min.js"></script>
                <script src="cordova.js">
                <script>
                function onLoad() {
                    document.addEventListener('deviceready', deviceReady, false);
                }

                function deviceReady() {
                    document.addEventListener('backbutton', backButtonCallback, false);
                }

                function backButtonCallback() {
                    navigator.notification.confirm('do you want to exit the app?',confirmCallback);
                    }
                function confirmCallback(buttonIndex) {
                    if(buttonIndex == 1) {
                    navigator.app.exitApp();
                    return true;
                    }
                else {
                    return false;
                    }
                }
                </script>

            </head>
            <body onload="onLoad()">

You need to make sure you include the cordova.js always, and then using the event listener for device ready will ensure cordova is loaded before you do anything with the API. This should work now.

13
  • is there anything that will be needed like js files and or additions in the config.xml to make this work? Feb 6, 2014 at 19:06
  • are you using build.phonegap.com or building local? Feb 6, 2014 at 19:08
  • i'm using build.phonegap.com Feb 6, 2014 at 19:11
  • I will update the answer to be build.phonegap.com specific. Please also revise your question to include that you are using the build service, so others will be able to find this. Thanks Feb 6, 2014 at 19:19
  • 1
    yes, in all phonegap build projects you have to add <script src="cordova.js"> to your html file, then when build runs and compiles your project it adds the cordova.js file to your other files. Feb 6, 2014 at 23:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.