Plugin dashboard - CGastrell/phonegap GitHub Wiki

Con lo visto hasta ahora, el siguiente ejercicio es para crear una aplicacion que:

• Incorpore jQuery Mobile
• Utilice los plugins:
  • org.apache.cordova.device
  • org.apache.cordova.vibration
  • org.apache.cordova.battery-status
• Contenga una pagina por cada plugin
• Demo de cada plugin en cada pagina
• Pueda navegarse entre las paginas

Crear un proyecto

phonegap create prueba5 --name "00 Prueba 5" -src templates\jqm

Instalar los plugins

cd prueba5
phonegap plugin add ..\templates\org.apache.cordova.device
phonegap plugin add ..\templates\org.apache.cordova.vibration
phonegap plugin add ..\templates\org.apache.cordova.battery-status

Preparar el footer en home para que contenga navegacion hacia todas las paginas

<div data-role="navbar" data-iconpos="top">
  <ul>
    <li><a href="#home" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
    <li><a href="#device" data-icon="star" class="">Device</a></li>
    <li><a href="#vibration" data-icon="star" class="">Vibration</a></li>
    <li><a href="#battery" data-icon="star" class="">Battery</a></li>
  </ul>
</div>

Las clases .ui-btn-active y ui-state-persist se utilizan en el vinculo de la pagina en que se halla.

• Duplicar la pagina home
• Modificar el contenido del div data-role="content"
  • Agregar un id="deviceinfo" al tag p
• Modificar el vinculo de footer, ubicar las clases en el vinculo Device

      <div data-role="content">
        <div style="text-align:center">
          <h3>Device</h3>
          <p id="deviceinfo">
            Lorem ipsum...
          </p>

        </div>
      </div>

Modificar el archivo www/js/index.js, agregar en el evento deviceready una iteracion sobre la variable provista por el plugin para escribir los datos en el content de la pagina device

onDeviceReady: function() {
  var deviceinfo = $('#deviceinfo');
  $.each(device, function(key, value) {
    deviceinfo.append('<h4>' + key + '</h4');
    deviceinfo.append('<p>' + value + '</p>');
  });
}

Correr la aplicacion y verificar

phonegap run android

• Duplicar la pagina home
• Modificar el contenido del div data-role="content"
  • Agregar un boton con id="vibrate" dentro del tag p
  • Agregar un boton con id="morse" dentro del tag p
• En el footer, ubicar las clases activas en el vinculo Vibration

Un boton (lindo) en jQuery puede escribirse como un vinculo con la clase ui-btn:

<a href="#" id="vibrate" class="ui-btn">Demo vibrate</a>

En el archivo www/js/index.js, dentro de la funcion que recibe el evento deviceready, agregar una funcion para manejar el evento click de los botones que agregamos:

$('#vibrate').on('click', function(evt) {
  evt.preventDefault();
  navigator.vibrate(1000);
  return false;
});

Correr la aplicacion y verificar: phonegap run android

• Duplicar la pagina home
• Modificar el contenido del div data-role="content"
  • Agregar un id="batterylevel" al tag p
• En el footer, ubicar las clases activas en el vinculo Battery

Vamos a escuchar el evento y modificar el tag p para mostrar el estado de la bateria.

Editar el archivo www/js/index.js. Agregar una funcion para recibir el evento 'batterystatus':

    window.addEventListener('batterystatus', function(evt){
      var color = evt.isPlugged ? 'green' : 'orange';
      $('#batterylevel')
        .css('color','white')
        .css('text-align','center')
        .css('width', evt.level + "%")
        .css('background-color', color)
        .text(evt.level + "%");
    });

Probar la aplicacion

Agregar a la funcion que maneja el evento 'batterystatus' para que vibre 500ms cada vez que suceda el evento (probar enchufando y desenchufando)

Agregamos 2 botones en la pagina Vibration, pero solo le dimos funcionalidad a uno. El otro tiene un id="morse". Utilizar el ejemplo del boton vibrate, agregar un evento click.

Agregar una lista vacia en la pagina de Bateria:

<ul data-role="listview" id="batteryevents" class="ui-listview">
</ul>

Usar la funcion que maneja el evento 'batterystatus' para agregar un tag li a la lista con el texto "Cargando" o "Desenchufado" cada vez que suceda.

Jugar un poco.