Usar Notificaciones en Android es una parte importante en la programación, por medio de estas podemos interactuar con el usuario, ponerlo al tanto sobre lo que se hace o necesita. Siguiendo el hilo sobre el Desarrollo de Aplicaciones para Android mostraré como usar las notificaciones (Vibración, Sonido, Cuadros de confirmación, Cuadros de alerta) de Android con el FrameWork PhoneGap.

PERMISOS

Para el uso de las notificaciones es necesario contar con los permisos sobre el dispositivo, para esto sera necesario modificar lo siguiente archivos:

app/res/xml/config.xml

app/AndroidManifest.xml

Notificación con Vibrador

Para poder usar este tipo de notificación es necesario incluir en nuestro archivo js la siguiente linea de código:

navigator.notification.vibrate(milliseconds)

Donde el argumento es el tiempo que durara vibrando el dispositivo, este valor se da en milisegundos, como ejemplo, si deseamos que vibre 1 segundo pondremos como parámetro 1000, si son 2 pondremos 2000, y así…..

Notificación con Sonido

Para usar el sonido de las notificaciones del dispositivo lo conseguiremos con la siguiente linea de codigo, esta la usaremos con javascript o jquery:

navigator.notification.beep(times);

El argumento times es el tiempo (dado en milisegundos) que durara reproduciendo el sonido.

Notificación con Cuadro de Confirmación

Podremos realizar Cuadros de confirmación personalizables, se emplea con el siguiente codigo:

navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels]);

– message => El mensaje que habrá en el cuadro de confirmación.
– confirmCallback => Función que puede ser invocada presionando la correspondiente opción.
– [title] => Titulo del del cuadro de confirmación, por defecto se mostrará «Confirm«.
– [buttonLabels] => Etiquetas de los botones que se mostrara en el cuadro, si no se personaliza alguno se mostrará por defecto «OK,Cancel«, los títulos de los botones irán separados por comas (,) ejemplo de esto es lo siguiente (opcion1, opcion2, opcion3, opcionN….); cabe aclarar que el valor del indice de cada botón se tomara de derecha a izquierda, siendo el primer elemento asignado el indice 1, y asi, el backbutton del dispositivo tendrá el indice 0.

Notificación con Cuadro de Alerta

Podremos personalizar un cuadro de alerta, con el mensaje, titulo, función por defecto; emplearemos el siguiente código:

navigator.notification.alert(message, alertCallback, [title], [buttonName])

– message => El mensaje que habrá en el cuadro de Alerta.
– alertCallback=> Función que puede ser invocada una vez aceptando el cuadro de alerta.
– [title] => Titulo del del cuadro de confirmación, por defecto se mostrará «Confirm«.
– [buttonName] => Nombre del boton con el cual aceptaremos, si no se ingresa uno personalizado, se mostrara por defecto «OK«.

Ejemplo de Como Usar las Notificaciones en Android

Para ver de mejor manera como usar estas notificaciones mostrare una aplicación la cual contendrá el como se usaría las notificaciones, antes de comenzar recordemos el post anterior en el cual podremos ver como desarrollar la aplicacion, en este caso solo mostrare el código necesario para el ejemplo.

Código Html

    
        
        
        
        
        
         
                       
        
        
        
        
    
   
    
    
    

     
     

                    
Notificaciones
                
     
     

      
 

      
      

       VIBRAR
      
      
 
       SONIDO
      
      

       CONFIRMACION
      
      
  
       ALERTA
      
   
     
     
     

      

       JaGonzalez.org
      
      
     
     
    
    
    
    
    

     

                    Home
                    
TIMER
 
                
     
     

      

       

        
Horas
   
 
 
Minutos
   
 
 
Segundos
   
 
 
 Iniciar Parar 
 
 
 
 JaGonzalez.org 
 
 
   
 
 Home 
Sonido
 
 
 Play Sound 
 
 
 JaGonzalez.org 
 
 
   
 
 Home 
Confirmación
 
 
 Show Confirm 
 
 
 JaGonzalez.org 
 
 
   
 
 Home 
Alerta
 
 
 Show Alert 
 
 
 JaGonzalez.org 
 
 
  

Código Css

#contador{
 width: auto;
 height: 220px; 
 margin: 0 auto;
}

#botones{
 width: auto;
 height: auto;
 margin-bottom: 50px; 
 clear: both;
}

.number{
    background: #141212; 
    background: -moz-linear-gradient(top, #4C4FFE 0%, #A00000 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0A0013), color-stop(100%,#4C4FFE)); 
    border-radius: 15px;
    -moz-border-radius: 15px;
    line-height: 70px;
    color:#fff;
    font-size: 25px;    
    font-weight:bold;
    height:70px;
    width:70px;
        
    -webkit-box-shadow: 0px 4px 0px #181818;
    border-left:solid 1px #000;
    border-right:solid 1px #000;
    border-bottom:solid 1px #262626;
    float: left;
    text-align: center;
    -webkit-box-shadow: 0px 10px 15px #000000;
    -moz-box-shadow: 0px 10px 15px #000000;
    box-shadow: 0px 10px 15px #000000;    
}

.caja{
 width: auto;
 height: 75px;
 float: left;
 display: block;
 margin: 6px;
}

.opPagM{
 display: block;
}

.btnFoot{
 margin: 0 auto;
 text-align: center;
}

.title{
    margin: 0 auto;
} 

Código JavaScript

var InicTime;
var ActualTime;
var nombreExp;
var AuxTime=new Date();
var Old=new Date();
Old.setTime(0);
Old.setHours(0,0,0,0);
var run = false;
var Hours = 0, Minutes = 0,Seconds =0,Milliseconds=0;
 
function showClock( ){
 
    if(run){
        ActualTime = new Date();
        AuxTime.setHours(0,0,0);
        AuxTime.setTime(ActualTime.getTime() - InicTime.getTime() + Old.getTime());
        Seconds = (AuxTime.getSeconds());
        Minutes = (AuxTime.getMinutes());
        Hours = (AuxTime.getHours());
        
       if((Seconds%10)==0){// corregir
         navigator.notification.vibrate(1000);// funcion para usar el vibrador durante 1 
                                                     //segundo, argumento se da en milisegundos
        }
 
        document.getElementById("Hours").innerHTML = Hours;
        document.getElementById("Minutes").innerHTML = Minutes;
        document.getElementById("Seconds").innerHTML =  Seconds;
 
        setTimeout("showClock()", 1000);
    }
}
 
function pauseClock( )
{
    if(!run)
    {
        run = true;
        document.getElementById("botonClock").innerHTML="Pausar";
        InicTime = new Date();
        ActualTime = InicTime;
        showClock();
    }
    else
    {
        run = false;
        document.getElementById("botonClock").innerHTML= "Continuar";
        saveOld();
    }
}
 
function resetClock()
{
    if(run){
        run = false;
    }
 
    Hours = 0;
    Minutes = 0;
    Seconds = 0;
    Old.setTime(0);
    Old.setHours(0,0,0,0);
 
    document.getElementById("Hours").innerHTML = '0';
    document.getElementById("Minutes").innerHTML = '0';
    document.getElementById("Seconds").innerHTML = '0';
    document.getElementById("botonClock").innerHTML = 'Iniciar ';
}
 
 
function initClock(){
    time = InicTime = new Date();
    document.getElementById("Hours").innerHTML = '0';
    document.getElementById("Minutes").innerHTML = '0';
    document.getElementById("Seconds").innerHTML = '0';
}

function playBeep ()  { //funcion para reproducir sonido
        navigator.notification.beep (1); //en el parentesis va el numero de veces que se desea reproducir el sonido
} 

function onConfirm(buttonIndex) {//funcion para mostrar el indice del boton pulsado
        alert('Has pulsado el boton numero ' + buttonIndex);//muestra el numero del indice del boton pulsado
}

function showConfirm() {
        navigator.notification.confirm(
            'Bienvenidos a JaGonzalez.org',  // mensaje a mostrar
            onConfirm,                       // Funcion si se desea usar
            'Cuadro de Confirmación',        // Titulo del cuadro de confirmacion
            'Reiniciar, Salir, :D'           // Botones a mostrar
        );
}

function alertDismissed() {
        // do something
    }

function showAlert() {
        navigator.notification.alert(
            'Usando cuadro de Alerta!',  // Mensaje a mostrar.
            alertDismissed,              // Funcion si se desea usar
            'Cuadro de Alerta',          // Titulo del cuadro de confirmacion
            'Hecho'                      // Boton a mostrar
        );
    }
    
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){ //funcion cuando el equipo este disponible para usar
    document.addEventListener("backbutton", function(e){//cuando se pulsa el backbutton del equipo
       if($.mobile.activePage.is('#pageMain')){//si se encuentra en la pagina del Home
           e.preventDefault(); //evitar el evento normal del backbutton
           navigator.app.exitApp();//se sale de la aplicacion
       }
       else {//si no esta en el Home
           navigator.app.backHistory()//se devuelve a la pagina anterior de donde estaba
       }
    }, false);
} 

Una vez que pongamos en marcha la Aplicación en nuestro SmartPhone o emulador veremos lo siguiente:

Cuando seleccionemos Confirmación veremos lo siguiente:

Después de haber pulsado «Salir» nos mostraría lo siguiente:

Cuando regresemos a la ventana inicial y seleccionemos «Alerta» veremos lo siguiente:

No muestro los resultados de las notificaciones con el vibrador y el sonido por obvias razones 😀 Pero si elegimos la opción de «Vibrar» veremos un cronometro, este vibrara cada 10 segundos y durara un segundo en vibrar, cuando seleccionemos «Sonido» se emitirá el sonido de notificación por defecto de nuestro dispositivo durante un segundo. Espero que lo anterior haya sido de gran utilidad 🙂

Si te ha gustado el post, compártelo, regala un like ó comenta 😉