cordova 2: eventos

En esta entrada veremos cuáles son los principales eventos de cordova

Stephen Mackey. Pause.

archivado en: JavaScript / 1 octubre, 2014 / taller:

En la entrada anterior vimos cómo instalar cordova e hicimos nuestra primera aplicación. En esta aprenderemos algunos parámetros qué podemos definir en el archivo config.xml y los eventos. Pero antes veamos a vuelapluma cómo podemos ir viendo lo que estamos haciendo.

Antes de ver ningún emulador, es importante recordar que estamos haciendo una especie de página web, por lo que podemos ver el proyecto simplemente abriendo index.html con el navegador (doy por sentado, que en estos casos siempre se hace una Single Page Aplication). En este sentido, conviene que avancemos todo lo posible antes de cordovizar la aplicación, ya que luego debuguear es mucho más tedioso.

Una vez armado el esqueleto, con sus css y sus plantillicas y demás, cuando ya empezamos a meter código cordoviano, podemos depurar de varias maneras.

Una es instalarse el emulador genymotion, que corre bajo una máquina virtual de oracle. Te lo puedes descargar solo o con la mv si aún no la tienes instalada. Le das a install y chispún, ya sta. Luego en add vas añadiendo los dispositivos virtuales que quieras...

geny01

...y para instalar una aplicación es tan sencillo como, una vez abierto un dispositivo virtual, arrastrar y soltar tu apk. Más simple que un botijo.

geny02

Otra manera de testar la aplicación es copiarla directamente en el dispositivo por usb. En este caso, hay que tener instalado algún explorador de archivos, como el ES explorador de Archivos. Es más laboriosa, pero más fiable.

Y otra tercera manera es corriendo el emulador de android, una vez instalado el Android Studio. Vamos al directorio de nuestra aplicación y ejecutamos esto:

$ cordova emulate android

Bueno, de momento, basta con lo dicho sobre este tema, más adelante veremos cómo podemos debuguear con consola. Pasemos al config.xml.

Config.xml

En el directorio raíz de nuestra aplicación (en el ejemplo anterior, hola/), está el archivo config.xml. Los parámetros que vienen por defecto son algo así:

<?xml version='1.0' encoding='utf-8'?>

<widget id="com.miweb.misubdirectorio" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

<name>HolaMundo</name>

<description>

A sample Apache Cordova application that responds to the deviceready event.

</description>

<author email="dev@cordova.apache.org" href="http://cordova.io">

Apache Cordova Team

</author>

<content src="index.html" />

<access origin="*" />

</widget>

La mitad de ellos no necesitan explicación: en <name> ponemos el nombre de la aplicación que se mostrará en el dispositivo; y en <description> y <author> datos que aparecerán en el store. En <content>, la página de inicio, la que abrirá por defecto el web view; y en <access> los dominios que permitiremos que se comuniquen con la aplicación.

Tenemos más a nuestra disposición con <preference>. Este tag incluye un par de atributos, nombre y valor, en los que podemos definir varias cosas. Las principales son:

Fullscreen, para quitar la barra superior.

<preference name="Fullscreen" value="true" />

Orientation, para forzar que no se pueda rotar horizontal (landscape) o verticalmente (portrait). Por defecto (default) se puede rotar, que es cómo deben hacerse las apis responsive bien hechas :P.

<preference name="Orientation" value="landscape" />

DisallowOverscroll, para permitir (false) o no (true) el scroll. Lo mejor es quitarlo y ponerlo en los divs que lo demanden.

<preference name="DisallowOverscroll" value="true"/>

BackgroundColor, para definir un color de fondo en RGB, con un primer parámetro para indicar la opacidad. Mejor no usarlo, sino utilizar la css background con <body>.

<preference name="BackgroundColor" value="0x006633ff"/>

Eventos

Claro está, en nuestra aplicación realizada con javaScript podemos utilizar todos los eventos propios de este lenguaje, pero, además, contamos con otros propios de cordova. Todos se lanzan definiendo una escucha con addEventListener. Como es sabido, este método le indica al navegador que esté atento a si sucede determinado evento. Su sintaxis es:

elemento.addEventListener(evento, función callback, tipo de captura o flujo);

Donde elemento es el elemento que desencadena la acción, en nuestro caso document; evento, la acción; función callback, la función que invocamos cuando comienza la acción; y el tipo de captura un valor boleano para indicar si queremos que el flujo sea del tipo burbuja o no (otro día explico esto en detalle).

El evento cordoviano más importante es deviceready, que se lanza cuando el dispositivo ha cargado todo el tinglado y está listo. Equivale para aclararnos al $( document ).ready(function() {}) de jQuery. Hay muchas formas de lanzarlo, todo depende de las librerías o framework que estemos utilizando. La más sencilla sería algo así. En el index llamamos una función que inicialice el proceso con un onload de toda la vida:

<body onload="init()">

...y luego en el js, metemos ese evento en esa función, el cual llamará a una función callback que es donde irá todo el tinglado.

function todoListo() {

// Aquí todo el tingado

}
function init() {

document.addEventListener("deviceready", todoListo, false);

}

Claro está, en la vida real el proceso es más sofisticado, pero lo que me interesa ahora es que nos quedemos con que todo nace a partir del evento deviceready.

Otros eventos cordovianos entre varios más que nos pueden resultar útiles son:

pause: cuando la aplicación pasa a segundo plano.

document.addEventListener("pause", funcionPausa, false);

resume: cuando vuelve a estar activa en primer plano

document.addEventListener("resume", funcionResume, false);

backbutton: cuando el usuario pulsa el botón retroceder.

document.addEventListener("backbutton", funcionBackbutton, false);

menubutton: cuando pulsa el botón menú.

document.addEventListener("menubutton", funcionMenubutton, false);

Bueno, a partir de la próxima entrada, en la que empezaremos a ver cómo trabajar con las funcionalidades propias de los dispositivos móviles, como la cámara o la geolocalización, esto se pondrá más divertido. De momento, vamos a dejarlo aquí.

|| Tags: , ,

valoración de los lectores sobre cordova 2: eventos

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.