En Android, para pasar de una pantalla a otra pasando información(las opciones de configuración de la app, por seguir con el ejemplo anterior), existen las intenciones, de forma que preparamos un array asociativo con los datos que nos interesan antes de cargar la nueva pantalla.
Voy a proponer dos soluciones para que las usemos en Phonegap.
La primera requiere aprender herramientas nuevas. Como estamos usando javascript, podemos aprovecharnos de frameworks como Emberjs.
Ember está basado en el patrón MVC(modelo vista controlador) y permite lanzar aplicaciones "single-page" complejas. Si ya tenemos conocimientos sobre este framework, nos podría servir. En este enlace podemos ver un ejemplo sencillo de registro y login con Emberjs, si queremos implementarlo en Phonegap solamente tendríamos que pegar el fichero html y los javascript en la carpeta www de nuestro proyecto esqueleto.
fuente: http://emberjs.com/
Otra opción es tener todas nuestras vistas cargadas en la aplicación, pero tener en todo momento sólo una visible en pantalla, aplicando con javascript clases CSS a las vistas que queramos mostrar u ocultar. Podemos tener una clase CSS .oculto{display: none;} y .visible{display: block;}. En el html de la aplicación un <div class="oculto"> y un <div class="visible">. La capa visible será la principal de la aplicación, y la oculta será la que mantendremos sin mostrar, hasta que se solicite. En ese caso aplicamos y eliminamos las clases CSS oculto y visible según nos convenga.
A continuación veremos un ejemplo en el que ponemos esto en práctica. Usaremos el esqueleto creado en capítulos anteriores.
El body del html es el siguiente:
<body>
<div id="vistaOpciones" class="oculto container-fluid">
<div class="col-xs-4 col-xs-offset-4">
<h2>Opciones</h2>
<p>Color de texto</p>
<button id="botonRojo" class="btn btn-danger">
Rojo
</button>
<button id="botonAzul" class="btn btn-primary">
Azul
</button>
<br><br>
<button id="botonPrincipal" class="btn btn-default">
Volver
</button>
</div>
</div>
<div id="vistaPrincipal" class="visible container-fluid">
<div class="col-xs-4 col-xs-offset-4">
<h2>Vista principal</h2>
<p>Pulsa para cargar la vista de las opciones, al volver se recordará la opción elegida</p>
<button id="botonMenu" class="btn btn-default">
OPCIONES
</button>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/fastclick.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
</script>
</body>
Nos fijamos que en el mismo html tenemos dos div que representan a las dos "pantallas" de nuestra aplicación. Uno de ellos tiene la clase visible y otro la clase oculto, por lo que sólo se mostrará el div con id vistaPrincipal. Mediante javascript, al pulsar en los botones, se producirán reacciones en la aplicación(reacciones instantáneas, porque tenemos FastClick) que harán que se cambie de pantalla en nuestra aplicación, pulsando en el botón OPCIONES o en el botón Volver. En la vista vistaOpciones hay dos botones además del que nos devuelve a la pantalla principal.
Estos botones al ser pulsados producen cambios que se mantienen al cambiar de pantalla. No estamos cambiando de documento html en ningún momento, por lo que las variables que tengamos en javascript y las clases CSS que tengan los elementos html no se recargan. En este ejemplo sólo mantenemos clases CSS al cambiar de pantalla(el color del texto), pero podríamos guardar valores en variables que afecten el comportamiento de nuestra aplicación.
A continuación vemos el código javascript del ejemplo:
$(function(){
var vistaPrincipal = $('#vistaPrincipal');
var vistaOpciones = $('#vistaOpciones');
var botonMenu = $('#botonMenu');
var botonPrincipal = $('#botonPrincipal');
var botonAzul = $('#botonAzul');
var botonRojo = $('#botonRojo');
function hacerVisible(elemento){
elemento.addClass("visible");
elemento.removeClass("oculto");
}
function hacerOculto(elemento){
elemento.addClass("oculto");
elemento.removeClass("visible");
}
botonMenu.click(function(){
hacerVisible(vistaOpciones);
hacerOculto(vistaPrincipal);
});
botonPrincipal.click(function(){
hacerVisible(vistaPrincipal);
hacerOculto(vistaOpciones);
});
botonRojo.click(function(){
$('p').addClass("fondoRojo");
$('p').removeClass("fondoAzul");
});
botonAzul.click(function(){
$('p').removeClass("fondoRojo");
$('p').addClass("fondoAzul");
});
});
Y este es el CSS de la aplicación usada:
.visible{
display:block;
}
.oculto{
display:none;
}
.fondoAzul{
color: #2222FF;
}
.fondoRojo{
color: #ff2222;
}
Aquí tenemos el código de la aplicación, listo para compilar. Si deseamos, en config.xml podemos editar su id y su nombre.
A continuación veremos un ejemplo en el que ponemos esto en práctica. Usaremos el esqueleto creado en capítulos anteriores.
El body del html es el siguiente:
<body>
<div id="vistaOpciones" class="oculto container-fluid">
<div class="col-xs-4 col-xs-offset-4">
<h2>Opciones</h2>
<p>Color de texto</p>
<button id="botonRojo" class="btn btn-danger">
Rojo
</button>
<button id="botonAzul" class="btn btn-primary">
Azul
</button>
<br><br>
<button id="botonPrincipal" class="btn btn-default">
Volver
</button>
</div>
</div>
<div id="vistaPrincipal" class="visible container-fluid">
<div class="col-xs-4 col-xs-offset-4">
<h2>Vista principal</h2>
<p>Pulsa para cargar la vista de las opciones, al volver se recordará la opción elegida</p>
<button id="botonMenu" class="btn btn-default">
OPCIONES
</button>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/fastclick.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
new FastClick(document.body);
}, false);
</script>
</body>
Nos fijamos que en el mismo html tenemos dos div que representan a las dos "pantallas" de nuestra aplicación. Uno de ellos tiene la clase visible y otro la clase oculto, por lo que sólo se mostrará el div con id vistaPrincipal. Mediante javascript, al pulsar en los botones, se producirán reacciones en la aplicación(reacciones instantáneas, porque tenemos FastClick) que harán que se cambie de pantalla en nuestra aplicación, pulsando en el botón OPCIONES o en el botón Volver. En la vista vistaOpciones hay dos botones además del que nos devuelve a la pantalla principal.
Estos botones al ser pulsados producen cambios que se mantienen al cambiar de pantalla. No estamos cambiando de documento html en ningún momento, por lo que las variables que tengamos en javascript y las clases CSS que tengan los elementos html no se recargan. En este ejemplo sólo mantenemos clases CSS al cambiar de pantalla(el color del texto), pero podríamos guardar valores en variables que afecten el comportamiento de nuestra aplicación.
A continuación vemos el código javascript del ejemplo:
$(function(){
var vistaPrincipal = $('#vistaPrincipal');
var vistaOpciones = $('#vistaOpciones');
var botonMenu = $('#botonMenu');
var botonPrincipal = $('#botonPrincipal');
var botonAzul = $('#botonAzul');
var botonRojo = $('#botonRojo');
function hacerVisible(elemento){
elemento.addClass("visible");
elemento.removeClass("oculto");
}
function hacerOculto(elemento){
elemento.addClass("oculto");
elemento.removeClass("visible");
}
botonMenu.click(function(){
hacerVisible(vistaOpciones);
hacerOculto(vistaPrincipal);
});
botonPrincipal.click(function(){
hacerVisible(vistaPrincipal);
hacerOculto(vistaOpciones);
});
botonRojo.click(function(){
$('p').addClass("fondoRojo");
$('p').removeClass("fondoAzul");
});
botonAzul.click(function(){
$('p').removeClass("fondoRojo");
$('p').addClass("fondoAzul");
});
});
Y este es el CSS de la aplicación usada:
.visible{
display:block;
}
.oculto{
display:none;
}
.fondoAzul{
color: #2222FF;
}
.fondoRojo{
color: #ff2222;
}
Aquí tenemos el código de la aplicación, listo para compilar. Si deseamos, en config.xml podemos editar su id y su nombre.
No hay comentarios:
Publicar un comentario