Continuamos investigando con los manejadores de eventos en Cordova, con escasos resultados, aunque hemos aprendido cosas nuevas.
En primer lugar, hemos intentado implementar una nueva aplicación de ejemplo en la que se hace uso de los eventos "pause" y "resume". El código muestra mensajes de tipo alert cuando la aplicación entra o sale del segundo plano de ejecución. El procedimiento es similar al utilizado en el ejercicio de los botones:
Sin embargo, no es posible conseguir por ahora que las aplicaciones Cordova se pongan en segundo plano, siempre se cierran (tanto con el botón central como el de retroceso). Es posible forzar a que las aplicaciones se ejecuten en segundo plano de forma nativa, usando código Java.
El segundo intento fallido de hoy ha sido desarrollar una pequeña aplicación que se desplace por una barra de volumen de JQuery UI usando las teclas de volumen del teléfono. He caído en la cuenta un poco tarde de que estos eventos sólo funcionan en Blackberry 10, pero aun así, he aquí el código:
En primer lugar, hemos intentado implementar una nueva aplicación de ejemplo en la que se hace uso de los eventos "pause" y "resume". El código muestra mensajes de tipo alert cuando la aplicación entra o sale del segundo plano de ejecución. El procedimiento es similar al utilizado en el ejercicio de los botones:
<!DOCTYPE html>
<html>
<head>
<title>Cordova Pause Example</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
}
// Vamos a mostrar algunos mensajes segun entramos y salimos del segundo plano de ejecucion
function onPause() {
alert("Aplicacion en pausa");
}
function onResume() {
alert("Aplicacion activa");
}
</script>
</head>
<body onload="onLoad()">
<div class="app">
<h1>Eventos PAUSE y RESUME</h1>
<div id="deviceready" class="blink">
<p class="event listening">Cargando...</p>
<p class="event received">LISTO!!!</p>
<p>Esta aplicacion muestra un mensaje dependiendo de la ejecucion en segundo plano</p>
</div>
</div>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Sin embargo, no es posible conseguir por ahora que las aplicaciones Cordova se pongan en segundo plano, siempre se cierran (tanto con el botón central como el de retroceso). Es posible forzar a que las aplicaciones se ejecuten en segundo plano de forma nativa, usando código Java.
El segundo intento fallido de hoy ha sido desarrollar una pequeña aplicación que se desplace por una barra de volumen de JQuery UI usando las teclas de volumen del teléfono. He caído en la cuenta un poco tarde de que estos eventos sólo funcionan en Blackberry 10, pero aun así, he aquí el código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cordova Volume Down Button Example</title>
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery-1.10.2.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#eq span {
height:120px; float:left; margin:15px
}
</style>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
//
// At this point, the document has loaded but cordova-2.5.0.js has not.
// When Cordova is loaded and talking with the native device,
// it will call the event `deviceready`.
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
// Register the event listener
document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);
}
// Handle the volume down button
//
function onVolumeDownKeyDown() { var valor = $( "#master" ).slider( "option", "value" );
valor -= 10;
$( "#master" ).slider( "option", "value", valor );
}
function onVolumeUpKeyDown() {
var valor = $( "#master" ).slider( "option", "value" );
valor += 10;
$( "#master" ).slider( "option", "value", valor );
}
$(function() {
// setup master volume
$( "#master" ).slider({
min: 0,
max: 100,
value: 60,
orientation: "horizontal",
range: "min",
animate: true
});
});
</script>
</head>
<body onload="onLoad()">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Master volume
</p>
<div id="master"></div>
</body>
</html>
No hay comentarios:
Publicar un comentario