Demo

Para hacer vibrar el dispositivo se necesitan seguir los siguientes pasos:

  • Crear el proyecto como se ha comentado en capítulos anteriores.
  • Editamos el archivo index.html con el fin de poder agregarle los framework o estilos que deseemos así como las  etiquetas HTML que vayamos a utilizar.

Importante: No se deben de quitar las rutas de los scripts que acceden a cordova, ya que si lo hacemos no se reconocerán las sentencias referentes a la plataforma.

  • Una vez ya tenemos listo el entorno web se debe de añadir el plugin de vibración, para ello debemos de colocarnos desde la consola en el directorio donde se encuentra nuestro proyecto y utilizando la sentencia pluggin add, añadimos el plugin utilizando su id:
cordova plugin add org.apache.cordova.vibration
  • Una vez que hemos hecho esto, nuestra aplicación reconoce directamente el plugin instalado y se ha modificado el archivo config.xml agregándoselo
  • Solamente falta que la aplicación se comunique con el plugin de Cordova, para ello creamos una función como la siguiente:
function vibrate(){
    navigator.notification.vibrate(2000);
}

Como puede observarse, a nivel de configuración solamente hay que tener en cuenta que en el proyecto se deben de instalar, con las sentencias de Cordova, aquellos plugins que desean utilizarse. Y NUNCA modificar los ficheros manualmente.

Ejercicio desarrollado

A continuación mostramos el código HTML, con el JQuery embebido que hemos utilizado para la elaboración del ejemplo y que se pueda reproducir, una vez que hemos realizado todos los pasos anteriores:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. 
See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1,
width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello World</title> </head> <body> <div class="app"> <h1>Apache Cordova</h1> <div id="deviceready" class="blink"> <p class="event listening">Connecting to Device</p> <p class="event received">Device is Ready</p> </div> <div id="contenido"> <button data-action="vibrar">Vibrar</button> </div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> app.initialize(); </script> <script type="text/javascript"> $(function(){ $("button").click(function(){ if($(this).data("action")=="vibrar"){ vibrate(); } }); }); function vibrate(){ navigator.notification.vibrate(2000); } </script> </body> </html>

Resultado del ejercicio: