Plugin dashboard review - CGastrell/phonegap GitHub Wiki

Estructura

En el ejercicio prueba5 armamos una pagina con jQuery Mobile. Esta consta de 4 paginas

<div data-role="page" id="home">
...
</div>
<div data-role="page" id="device">
...
</div>
<div data-role="page" id="vibration">
...
</div>
<div data-role="page" id="battery">
...
</div>

Contenido

Cada una lleva contenido referente/demo a cada uno de los plugins que instalamos:

org.apache.cordova.device
org.apache.cordova.vibration
org.apache.cordova.battery-status

Funcionalidad

La funcionalidad esta dada desde el archivo www/js/index.js. Vimos que todo debe ejecutarse cuando el dispositivo este listo, esto significa que todo debe ser llamado o inicializado desde el evento deviceready.

En nuestro caso este evento es manejado por la funcion app.onDeviceReady

Device

Practicamos una iteracion con jQuery.each, pasando por todos los miembros de la variable device:

//seleccionamos el elemento #deviceinfo que
//se encuentra en la pagina #device
var deviceinfo = $('#deviceinfo');

//iteramos por cada miembro (key) de 
//la variable device que nos deja el plugin
$.each(device, function(key, value) {
  //por cada key, generamos un <h4>
  deviceinfo.append('<h4>' + key + '</h4');

  //y por cada valor, generamos un <p>
  deviceinfo.append('<p>' + value + '</p>');
});

Vibration

Usamos 2 botones, #vibrate y #morse, para asignarles funcionalidad gracias al plugin vibration. Al mismo tiempo vimos como adosar una funcion al evento click:

//seleccionamos el elemento con id=vibrate
//y asignamos una funcion para manejar
//el evento 'click'
$('#vibrate').on('click', function(evt) {
  //prevenimos el evento por defecto
  //para que el link no intente llevarnos 
  //a ningun lado
  evt.preventDefault();

  //usamos la API del plugin vibration
  //para generar una vibracion de 1s
  navigator.vibrate(1000);
  return false;
});

$('#morse').on('click', function(evt) {
  evt.preventDefault();

  //usamos la API del plugin vibration
  //para generar una secuencia de vibraciones
  navigator.vibrate([500,200,500,200,500]);
  return false;
});

Battery

Vimos como capturar el evento desde el objeto window.

window.addEventListener('batterystatus', function(event){...});

La funcion recibe, segun documentacion, el evento. El evento lleva 2 propiedades que nos interesan:

level: nivel de bateria
isPlugged: si esta enchufado o no

Vimos como insertar contenido al DOM con jQuery:

window.addEventListener('batterystatus', function(evt){
  //definimos una variable segun el estado
  //que reporta el evento
  var color = evt.isPlugged ? 'green' : 'orange';

  //seleccionamos #batterylevel 
  $('#batterylevel')

    //le agregamos una clase de jqm
    .addClass('ui-li-static')

    //le asignamos color de texto blanco
    .css('color','white')

    //centramos el texto
    .css('text-align','center')

    //definimos el ancho del elemento
    //basado en el nivel de bateria
    .css('width', evt.level + "%")

    //asignamos el color de fondo
    //a la variable que definimos incialmente
    .css('background-color', color)

    //configuramos el texto para que
    //muestre el nivel de bateria
    .text(evt.level + "%");

  //como extra, indicamos que vibre
  //cada vez que sucede el evento
  navigator.vibrate(200);

  //creamos un elemento <li>
  var status = $('<li />');

  //y le asignamos texto acorde al evento
  status.text(new Date().toTimeString().split(" ")[0] + " " + (evt.isPlugged ? "Cargando..." : "Desenchufado"));

  //por ultimo, refrescamos la lista
  $('ul#batteryevents').append(status).listview('refresh');
});