Aplicación con retroceso y menu

Para crear esta aplicación seguiremos los siguientes pasos

  • Crear un nuevo proyecto de Cordova (seguir el tutorial correspondiente de esta documentación).
  • Modificamos el contenido de assets/www. En nuestro caso, vamos a añadir el siguiente código HTML:
<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplos de manejador de eventos Apache Cordova</title>

	<link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Esperar a que carguen las librerias API del dispositivo
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Las APIs del dispositivo estan disponibles
    //
    function onDeviceReady() {
        // Escuchadores de eventos
        document.addEventListener("backbutton", onBackKeyDown, false);
        document.addEventListener("menubutton", onMenuKeyDown, false);
    }

    // acciones

    function onBackKeyDown() {
       alert("retroceso");
    }
    function onMenuKeyDown() {
       alert("menu");
    }

    </script>
  </head>
  <body onload="onLoad()">
	<div class="app">
            <h1>Manejador de Eventos</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Cargando...</p>
                <p class="event received">LISTO!!!</p>
		<p>Pulsa los botones de tu dispositivo para ver los mensajes de dialogo</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
  </body>
</html>

En esta aplicación vamos a trabajar con tres eventos de Apache Cordova:

  • deviceready: Se puede considerar como el evento más importante de todos. Se lanza cuando Cordova se ha cargado por completo. Esto supone una ventaja interesante, ya que JavaScript sólo se ejecuta una vez se hayan cargado todos los elementos del DOM. De esta forma, una aplicación web puede llamar a una función de Cordova JavaScript antes de que termine de cargarse por completo. Es recomendable que este evento se incluya en cualquier aplicación de Cordova.
  • “backbutton”: Este evento se lanza cuando el usuario pulsa el botón de retroceso del dispositivo móvil.
  • “menubutton”: Este evento se lanza cuando el usuario pulsa el botón de menú del dispositivo móvil.

Lo primero que hacemos en el código es añadir el escuchador de evento de “deviceready”, el cual se lanzará en cuanto se cargue nuestra aplicación.

function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

Ese escuchador de evento lanzará la función onDeviceReady, la cual contendrá los escuchadores de evento para la pulsación de las teclas del dispositivo.

function onDeviceReady() {
        // Escuchadores de eventos
        document.addEventListener("backbutton", onBackKeyDown, false);
        document.addEventListener("menubutton", onMenuKeyDown, false);
    }

A su vez, estos escuchadores lanzarán las correspondientes funciones mediante las cuales se especifica como va a reaccionar la aplicación cuando se pulsen las teclas. En nuestro caso, vamos a lanzar un par de mensajes alert

function onBackKeyDown() {
       alert("retroceso");
    }
function onMenuKeyDown() {
       alert("menu");
    }

Como se puede apreciar, se utiliza el evento deviceready como una especie de “contenedor” que engloba al resto de eventos. Ésta el la manera más recomendable para trabajar con eventos en Apache Cordova, pudiendo agregar funcionalidad a la aplicación antes de que ésta haya cargado por completo el DOM.

  •  Por último, importamos el proyecto modificado de Cordova al entorno de desarrollo nativo pertinente (en nuestro caso, Android Developer Tools) y procedemos a comprobar el funcionamiento de la aplicación.

En el siguiente vídeo puede verse el resultado

 Enlace al proyecto