Manejadores de eventos en Apache Cordova (II)

Continuamos investigando con los manejadores de eventos en Cordova, con escasos resultados, aunque hemos aprendido cosas nuevas.

En primer lugar, hemos intentado implementar una nueva aplicación de ejemplo en la que se hace uso de los eventos "pause" y "resume". El código muestra mensajes de tipo alert cuando la aplicación entra o sale del segundo plano de ejecución. El procedimiento es similar al utilizado en el ejercicio de los botones:

 <!DOCTYPE html>  
 <html>  
  <head>  
   <title>Cordova Pause Example</title>  
      <link rel="stylesheet" type="text/css" href="css/index.css" />  
   <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>  
   <script type="text/javascript" charset="utf-8">  
   function onLoad() {  
     document.addEventListener("deviceready", onDeviceReady, false);  
   }  
   function onDeviceReady() {  
     document.addEventListener("pause", onPause, false);  
     document.addEventListener("resume", onResume, false);  
   }  
   // Vamos a mostrar algunos mensajes segun entramos y salimos del segundo plano de ejecucion  
   function onPause() {  
     alert("Aplicacion en pausa");  
   }  
   function onResume() {  
     alert("Aplicacion activa");  
   }  
   </script>  
  </head>  
  <body onload="onLoad()">  
   <div class="app">  
       <h1>Eventos PAUSE y RESUME</h1>  
       <div id="deviceready" class="blink">  
         <p class="event listening">Cargando...</p>  
         <p class="event received">LISTO!!!</p>  
         <p>Esta aplicacion muestra un mensaje dependiendo de la ejecucion en segundo plano</p>  
       </div>  
     </div>  
     <script type="text/javascript" src="js/index.js"></script>  
     <script type="text/javascript">  
       app.initialize();  
     </script>  
  </body>  
 </html>  

Sin embargo, no es posible conseguir por ahora que las aplicaciones Cordova se pongan en segundo plano, siempre se cierran (tanto con el botón central como el de retroceso). Es posible forzar a que las aplicaciones se ejecuten en segundo plano de forma nativa, usando código Java.

El segundo intento fallido de hoy ha sido desarrollar una pequeña aplicación que se desplace por una barra de volumen de JQuery UI usando las teclas de volumen del teléfono. He caído en la cuenta un poco tarde de que estos eventos sólo funcionan en Blackberry 10, pero aun así, he aquí el código:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
 <html>  
  <head>  
   <title>Cordova Volume Down Button Example</title>  
   <link rel="stylesheet" href="themes/base/jquery.ui.all.css">  
      <script src="jquery-1.10.2.js"></script>  
      <script src="ui/jquery.ui.core.js"></script>  
      <script src="ui/jquery.ui.widget.js"></script>  
      <script src="ui/jquery.ui.mouse.js"></script>  
      <script src="ui/jquery.ui.slider.js"></script>  
      <link rel="stylesheet" href="../demos.css">  
   <style>  
   #eq span {  
     height:120px; float:left; margin:15px  
   }  
   </style>  
   <script type="text/javascript" charset="utf-8">  
   // Call onDeviceReady when Cordova is loaded.  
   //  
   // At this point, the document has loaded but cordova-2.5.0.js has not.  
   // When Cordova is loaded and talking with the native device,  
   // it will call the event `deviceready`.  
   //  
   function onLoad() {  
     document.addEventListener("deviceready", onDeviceReady, false);  
   }  
   // Cordova is loaded and it is now safe to make calls Cordova methods  
   //  
   function onDeviceReady() {  
     // Register the event listener  
     document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);  
     document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);  
   }  
   // Handle the volume down button  
   //  
   function onVolumeDownKeyDown() { 

           var valor = $( "#master" ).slider( "option", "value" );  
           valor -= 10;  
           $( "#master" ).slider( "option", "value", valor );  
   }  
   function onVolumeUpKeyDown() {  
           var valor = $( "#master" ).slider( "option", "value" );  
           valor += 10;  
           $( "#master" ).slider( "option", "value", valor );  
   }  
   $(function() {  
     // setup master volume  
     $( "#master" ).slider({  
                min: 0,  
                max: 100,  
       value: 60,  
       orientation: "horizontal",  
       range: "min",  
       animate: true  
     });  
   });  
   </script>  
  </head>  
  <body onload="onLoad()">  
   <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">  
   <span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>  
   Master volume  
   </p>  
   <div id="master"></div>  
  </body>  
 </html>  

Manejadores de eventos en Apache Cordova (I)

El manejo de eventos en Apache Cordova es fundamental si queremos añadir a nuestra aplicación una funcionalidad dinámica acorde al hardware de nuestro dispositivo móvil. Esta mañana, ya que por lo visto en la empresa de prácticas hoy no tenían trabajo para mí, me he dedicado a investigar un poco con esto, ayudándome de la siempre necesaria y todopoderosa documentación de Apache Cordova.

He implementado una aplicación bastante simple, basandome en la documentacion, (de hecho, me he basado en la aplicación por defecto de Cordova y sólo le he modificado el contenido de los parrafos en el apartado visual, el elemento importante de este ejercicio era el manejo de Javascript). El ejercicio consiste en hacer que aparezcan mensajes de alerta cuando se pulsa la tecla de retroceso o de menú de un dispositivo móvil, mostrando un mensaje en el que se indica qué botón se ha pulsado:

 <!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 un principio quise hacerlo con el plugin de dialogos de Cordova, pero por ahora no me ha funcionado, seguiré investigando, ya que queda mucho más elegante y profesional que escribir un triste alert.

He aquí un video mostrando en ejecución el código anteriormente expuesto. A partir de aquí, iremos investigando, probando e implementando ejemplos de todos los diferentes tipos de eventos.