Foro

Home Forums PhoneGap Double Backbutton (Doble clic hacia atras)

This topic contains 19 replies, has 2 voices, and was last updated by  Jamc 5 dias, 18 horas .

Viendo 15 respuestas - de la 1 a 15 (de 20 en total)
  • Double Backbutton (Doble clic hacia atras)

    Intervenciones
  • Jamc 
    Participant

    Como mostrar un mensaje que diga “Da otro clic para salir” al dar un clic en el boton hacia atras y al dar otro clic en un tiempo de 3 seguntos despues del primero se cierre la aplicación. Y si se pasa de esos 3 segundos al dar el segundo clic no haga solo se recargue la pagina y muestre de nuevo el mensaje “Da otro clic para salir”


    Jose Jesus Perez Rivas 
    Keymaster

    Hola @jamc,

    con Cordova puedes controlar varios eventos de los botones nativos de android, en esta url tiene mucha información oficial de ello: https://cordova.apache.org/docs/en/8.x/cordova/events/events.html#backbutton

    En tu caso concreto tendrás que controlar el “backbutton” y mostrar una alerta nativa donde muestre el mensaje que tu quieres.

    Como ejemplo te comparto este código que casi realiza lo que tu necesitas, sólo necesitarías controlar lo de los 3 segundos:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.

    <script>
    document.addEventListener("backbutton", onBackKeyDown, false);

    function onBackKeyDown() {
        navigator.notification.confirm(
        'Da otro clic para salir',
         onConfirm,
        'Salir',
        ['No Salir','Salir']
      );
    }

    function onConfirm(buttonIndex) {
       if(buttonIndex == 2){
          navigator.app.exitApp();
       }
    }
    </script>

    Saludos y espero que te sea de ayuda :)


    Jamc 
    Participant

    Hola @Jose Jesus Perez Rivas

    Gracias por responder a mi duda. Mira tengo este código pero no me funciona, al dar clic en el botón volver del dispositivo me sale bien el mensaje pero si doy otro clic dentro de los 4 segundos (como marca el codigo) no cierra la app sino que recarga la pagina.

    Y lo que busco es que al dar el primer clic me salga el mensaje y si doy clic nuevamente dentro del rango de los 4 segundos se cierre la app y sino solo se recargue la pagina.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.

    function onBackKeyDown() {
            
         var lastTimeBackPress=0;
         var timePeriodToExit=4000;  

        if(new Date().getTime() - lastTimeBackPress < timePeriodToExit){
            navigator.app.exitApp();
        }else{
            window.plugins.toast.showWithOptions(
                {
                  message: "Presiona nuevamente para salir",
                  duration: 2000, // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                  position: "bottom",
                  addPixelsY: -40 // added a negative value to move it up a bit (default 0)
                }
              );
            
            lastTimeBackPress=new Date().getTime();
            
            location.reload();
           }
        };

    • This reply was modified 4 semanas, 1 dia by  Jose Jesus Perez Rivas. Reason: Recuerda usar la etiqueta "code" para publicar código con buen formato

    • This reply was modified 4 semanas, 1 dia by  Jose Jesus Perez Rivas. Reason: Recuerda usar la etiqueta "code" para publicar código con buen formato
    Jose Jesus Perez Rivas 
    Keymaster

    Lo reviso y te digo mañana sin falta a ver que puede estar saliendo mal ;)


    Jose Jesus Perez Rivas 
    Keymaster

    Hola @Jamc intenta con este código:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.

    var lastTimeBackPress = 0;
    var timePeriodToExit = 4000;  

    function onBackKeyDown() {
            
        if( (new Date().getTime() - lastTimeBackPress ) > timePeriodToExit){
            navigator.app.exitApp();
        }else{
            window.plugins.toast.showWithOptions(
                {
                  message: "Presiona nuevamente para salir",
                  duration: 2000, // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                  position: "bottom",
                  addPixelsY: -40 // added a negative value to move it up a bit (default 0)
                }
              );
            
            lastTimeBackPress=new Date().getTime();
            
           }
    };

    Saludos!


    Jamc 
    Participant

    Hola @Jose

    Gracias ppr el apoyo pero sigue sin funcionar. Me sigue haciendo lo mismo


    Jose Jesus Perez Rivas 
    Keymaster

    Hola @jamc,

    subes tu código a un repositorio público y lo trabajamos juntos?

    Saludos!


    Jamc 
    Participant

    Gracias @Jose

    Te dejo el link, los archivos es https://github.com/IngJamc/INPMApp ahi esta el codigo.

    De ante mano gracias por el apoyo. Saludos


    Jamc 
    Participant

    Hola @Jose

    Te dejo mi numero de WhatsApp 783 134 9675 para comunicarnos y mi correo trolito56@gmail,com.

    Apenas es mi primera app y me gustaría aprender mas sobre el tema en PhoneGap.


    Jose Jesus Perez Rivas 
    Keymaster

    Hola @jamc,

    todas las dudas las intentamos resolver por el foro, de esta forma otros developers pueden ayudarse y resolver dudas.

    Por otro lado comentarte que en tu repo sólo tenemos el archivo index.html y faltaría el archivo config.xml para saber si realmente estás o no agregando correctamente la referencia al plugin que te he comentado.

    Saludos!


    Jamc 
    Participant

    Hola @Jose gracias por tu respuesta. Por la parte del plugin no hay problema si lo tengo bien y si muestra el mensaje en pantalla correctamente. Ya solucione el problema quitando el codigo que recarga la página pero no quiero eso. Lo que necesito es que al dar clic en el boton atras me salga un mensaje en pantalla durante 4 segundos, si en ese lapso doy clic nuevamente se cierre la app, si pasa de los 4 segundos quiero que la página se recargue (actualize) o me abra el menu lateral. Gracias


    Jose Jesus Perez Rivas 
    Keymaster

    Hola @jamc,

    en ese caso yo intentaría maquetando una ventana emergente en la que aparezca el mensaje que comentas, y que al pasar x segundos se ejecute el código de cierre de app que te he pasado antes.

    podría ser algo como:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.

    <div id="modal" class="hide">Esta app se cerrará en 4 segundos</div>
    <style>
    #modal{
    position: absolute;
    top: 0px;
    bottom: 0px;
    color: #cdcdcd;
    background-color: #000
    }
    .hide{
    display:none}
    </style>
    <script>
    function onBackKeyDown() {
    document.querySelector('#modal').classList.remove('hide');
    setTimeout(function(){
            navigator.app.exitApp();
    }, 4000);
    }
    </script>

    Saludos!


    Jamc 
    Participant

    Hola @Jose gracias por su respuesta, pero creo no me entendiste bien.


    Jamc 
    Participant

    El dia de hoy estoy tratando de compilar el proyecto en build phonegap y me manda error y no he hecho ningun cambio despues de la ultima vez que lo compile correctamente. El log que me arroja es el siguiente:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.
    13.
    14.
    15.
    16.
    17.
    18.
    19.
    20.
    21.
    22.
    23.
    24.
    25.
    26.
    27.
    28.
    29.
    30.
    31.
    32.
    33.
    34.
    35.
    36.
    37.
    38.
    39.
    40.
    41.
    42.
    43.
    44.
    45.
    46.
    47.
    48.
    49.
    50.
    51.
    52.
    53.
    54.
    55.
    56.
    57.
    58.
    59.
    60.
    61.
    62.
    63.
    64.
    65.
    66.
    67.
    68.
    69.
    70.
    71.
    72.
    73.
    74.
    75.
    76.
    77.
    78.
    79.
    80.
    81.
    82.
    83.
    84.
    85.
    86.
    87.
    88.
    89.
    90.
    91.
    92.
    93.
    94.
    95.
    96.
    97.
    98.
    99.
    100.
    101.
    102.
    103.
    104.
    105.
    106.
    107.
    108.
    109.
    110.
    111.
    112.
    113.
    114.
    115.
    116.
    117.
    118.
    119.
    120.
    121.
    122.
    123.
    124.
    125.
    126.
    127.
    128.
    129.
    130.
    131.
    132.
    133.
    134.
    135.
    136.
    137.
    138.
    139.
    140.
    141.
    142.
    143.
    144.
    145.

    Build Date: 2018-11-24 15:29:17 +0000
    --------------------------------------------------------------------------------
    PLUGIN OUTPUT
    --------------------------------------------------------------------------------
    Fetching plugin "cordova-plugin-splashscreen" via npm
    Installing "cordova-plugin-splashscreen" at "5.0.2" for android
    Fetching plugin "de.appplant.cordova.plugin.printer" via npm
    Installing "de.appplant.cordova.plugin.printer" at "0.7.1" for android
    Fetching plugin "cordova-plugin-email-composer" via npm
    Installing "cordova-plugin-email-composer" at "0.8.15" for android
    Subproject Path: CordovaLib
    Fetching plugin "com.verso.cordova.clipboard" via npm
    Installing "com.verso.cordova.clipboard" at "0.1.0" for android
    Fetching plugin "cordova-plugin-x-socialsharing" via npm
    Installing "cordova-plugin-x-socialsharing" at "5.4.3" for android
    Fetching plugin "es6-promise-plugin@^4.1.0" via npm
    Installing "es6-promise-plugin" at "4.2.2" for android
    Subproject Path: CordovaLib
    Fetching plugin "cordova-plugin-x-toast" via npm
    Installing "cordova-plugin-x-toast" at "2.7.2" for android
    Fetching plugin "cordova-plugin-insomnia@4.1.0" via npm
    Installing "nl.x-services.plugins.insomnia" at "4.1.0" for android
    Fetching plugin "cordova-plugin-battery-status@~1.1.1" via npm
    Installing "cordova-plugin-battery-status" at "1.1.2" for android
    Fetching plugin "cordova-plugin-camera@~2.1.1" via npm
    Installing "cordova-plugin-camera" at "2.1.1" for android
    Fetching plugin "cordova-plugin-media-capture@~1.2.0" via npm
    Installing "cordova-plugin-media-capture" at "1.2.0" for android
    Fetching plugin "cordova-plugin-file@^4.0.0" via npm
    Installing "cordova-plugin-file" at "4.3.3" for android
    Fetching plugin "cordova-plugin-compat@^1.0.0" via npm
    Installing "cordova-plugin-compat" at "1.2.0" for android

    The Android Persistent storage location now defaults to "Internal". Please check this plugin's README to see if your application needs any changes in its config.xml.

    If this is a new application no changes are required.

    If this is an update to an existing application that did not specify an "AndroidPersistentFileLocation" you may need to add:

          "<preference name="AndroidPersistentFileLocation" value="Compatibility" />"

    to config.xml in order for the application to find previously stored files.
    Fetching plugin "cordova-plugin-console@~1.0.2" via npm
    Installing "cordova-plugin-console" at "1.0.7" for android
    Fetching plugin "cordova-plugin-contacts@~2.0.1" via npm
    Installing "cordova-plugin-contacts" at "2.0.1" for android
    Fetching plugin "cordova-plugin-device@~1.1.1" via npm
    Installing "cordova-plugin-device" at "1.1.7" for android
    Fetching plugin "cordova-plugin-device-motion@~1.2.0" via npm
    Installing "cordova-plugin-device-motion" at "1.2.5" for android
    Fetching plugin "cordova-plugin-device-orientation@~1.0.2" via npm
    Installing "cordova-plugin-device-orientation" at "1.0.7" for android
    Fetching plugin "cordova-plugin-dialogs@~1.2.0" via npm
    Installing "cordova-plugin-dialogs" at "1.2.1" for android
    Plugin "cordova-plugin-file" already installed on android. Making it top-level.
    Fetching plugin "cordova-plugin-file-transfer@~1.5.0" via npm
    Installing "cordova-plugin-file-transfer" at "1.5.1" for android
    Plugin dependency "cordova-plugin-file@4.3.3" already fetched, using that version.
    Dependent plugin "cordova-plugin-file" already installed on android.
    Fetching plugin "cordova-plugin-geolocation@~2.1.0" via npm
    Installing "cordova-plugin-geolocation" at "2.1.0" for android
    Fetching plugin "cordova-plugin-globalization@~1.0.3" via npm
    Installing "cordova-plugin-globalization" at "1.0.9" for android
    Fetching plugin "cordova-plugin-inappbrowser@~1.3.0" via npm
    Installing "cordova-plugin-inappbrowser" at "1.3.0" for android
    Fetching plugin "cordova-plugin-media@~2.2.0" via npm
    Installing "cordova-plugin-media" at "2.2.0" for android
    Plugin dependency "cordova-plugin-file@4.3.3" already fetched, using that version.
    Dependent plugin "cordova-plugin-file" already installed on android.
    Fetching plugin "cordova-plugin-network-information@~1.2.0" via npm
    Installing "cordova-plugin-network-information" at "1.2.1" for android
    Fetching plugin "cordova-plugin-statusbar" via npm
    Installing "cordova-plugin-statusbar" at "2.4.2" for android
    Fetching plugin "cordova-plugin-vibration@~2.1.0" via npm
    Installing "cordova-plugin-vibration" at "2.1.6" for android
    Fetching plugin "cordova-plugin-whitelist@~1.2.1" via npm
    Installing "cordova-plugin-whitelist" at "1.2.2" for android

                   This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
    --------------------------------------------------------------------------------
    PROJECT PROPERTIES
    --------------------------------------------------------------------------------
    # This file is automatically generated by Android Tools.
    # Do not modify this file -- YOUR CHANGES WILL BE ERASED!
    #
    # This file must be checked in Version Control Systems.
    #
    # To customize properties used by the Ant build system edit
    # "ant.properties", and override values to adapt the script to your
    # project structure.
    #
    # To enable ProGuard to shrink and obfuscate your code, uncomment this (available properties: sdk.dir, user.home):
    #proguard.config=${sdk.dir}/tools/proguard/proguard-android.txt:proguard-project.txt
    # Project target.
    target=android-25
    android.library.reference.1=CordovaLib
    cordova.system.library.1=com.android.support:support-v4:24.1.1+
    cordova.system.library.2=com.android.support:support-v4:$ANDROID_SUPPORT_V4_VERSION
    --------------------------------------------------------------------------------
    COMPILE OUTPUT
    --------------------------------------------------------------------------------
    Running command: /opt/gradle/gradle-4.1/bin/gradle -p /project wrapper -b /project/wrapper.gradle
    :wrapper

    BUILD SUCCESSFUL in 1s
    1 actionable task: 1 executed
    Command finished with error code 0: /opt/gradle/gradle-4.1/bin/gradle -p,/project,wrapper,-b,/project/wrapper.gradle
    Subproject Path: CordovaLib
    Running command: /project/gradlew cdvBuildDebug -b /project/build.gradle -Dorg.gradle.daemon=true -Dorg.gradle.jvmargs=-Xmx2048m -Pandroid.useDeprecatedNdk=true
    The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
      at build_5fiswj21bvgn24jr9qw0tbok1.run(/project/build.gradle:156)

    FAILURE: Build failed with an exception.

    * Where:
    Build file '/project/build.gradle' line: 272

    * What went wrong:
    A problem occurred evaluating root project 'project'.
    > Could not get unknown property 'ANDROID_SUPPORT_V4_VERSION' for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

    BUILD FAILED

    Total time: 1.047 secs
    Command finished with error code 1: /project/gradlew cdvBuildDebug,-b,/project/build.gradle,-Dorg.gradle.daemon=true,-Dorg.gradle.jvmargs=-Xmx2048m,-Pandroid.useDeprecatedNdk=true
    Error: /project/gradlew: Command failed with exit code 1 Error output:
    FAILURE: Build failed with an exception.

    * Where:
    Build file '/project/build.gradle' line: 272

    * What went wrong:
    A problem occurred evaluating root project 'project'.
    > Could not get unknown property 'ANDROID_SUPPORT_V4_VERSION' for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

    * Try:
    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
        at ChildProcess.whenDone (/project/cordova/node_modules/cordova-common/src/superspawn.js:169:23)
        at emitTwo (events.js:106:13)
        at ChildProcess.emit (events.js:191:7)
        at maybeClose (internal/child_process.js:877:16)
        at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

    • This reply was modified 2 semanas, 1 dia by  Jose Jesus Perez Rivas. Reason: Debes utilizar la etiqueta "code" para publicar código o resultados

    • This reply was modified 2 semanas, 1 dia by  Jose Jesus Perez Rivas. Reason: Debes utilizar la etiqueta "code" para publicar código o resultados
    Jose Jesus Perez Rivas 
    Keymaster

    Hola de nuevo @jamc,

    siento la tardanza en responder. Necesitaría que a parte de compartirnos el index.html nos compartas tu archivo config.xml para ver que puede estar pasando.

    Saludos!


Viendo 15 respuestas - de la 1 a 15 (de 20 en total)

You must be logged in to reply to this topic.