Anatomía de un sistema de navegación de aplicaciones Cordova (parte I): gesto de deslizar

Deja un comentario / Córdoba / Por

Hola!

Bienvenidos a este tutorial sobre cómo construir un sistema de navegación fiable y eficaz para una aplicación móvil Cordova. La pequeña aplicación que vamos a construir no hará nada: sin envío de formulario, no hay funciones de exploración de base de datos ni de carga o uso compartido de imágenes. Absolutamente nada: sus páginas serán solo páginas en blanco vacías, con solo una etiqueta de título con el título, solo para darnos una retroalimentación básica de lo que está sucediendo.

En lo que quiero enfocarme son las técnicas que podemos usar para construir una aplicación que admita la navegación a través de sus vistas usando gestos. (tocar y deslizar) y botones duros. Nuestra aplicación tendrá una sola página, índice.html, que dividiremos en muchas secciones, cada una de las cuales representará una ver.

Sistema de navegación de aplicaciones Cordova

Caracteristicas

Nuestra aplicación estará estructurada en dos tipos de vistas:

  • algunas vistas se agruparán y serán las principales puntos de vista de nuestra aplicación: Podremos navegar a través de estas vistas deslizando el dedo hacia la izquierda o hacia la derecha o, alternativamente, tocando un botón en la barra superior; Para ir a la vista anterior también podremos usar el botón Atrás duro de nuestro teléfono
  • otras vistas serán independientes entre sí y estas serán las vistas secundarias: a este segundo tipo de vistas pertenecerá un menú lateral y todas aquellas vistas que utilice la aplicación para realizar una tarea específica, como agregar un cliente, registrar un nuevo usuario, ver detalles de un producto, etc. (Oye, Tenga en cuenta que estos son solo ejemplos y no implementaremos ninguna de estas funciones específicas en nuestra aplicación de ejemplo

Discutiremos los siguientes aspectos del sistema de navegación:

  • cómo implementar un sistema de deslizamiento para navegar por la principales puntos de vista: Deslizando el dedo hacia la izquierda podremos ir a la siguiente vista, Deslizando el dedo hacia la derecha volveremos a la anterior.
  • cómo crear un menú superior fijo con iconos para proporcionar a nuestros usuarios una forma alternativa de navegar por las vistas principales
  • cómo crear un menú lateral
  • cómo construir varias vistas para realizar acciones específicas: estas vistas secundarias será llamado por los elementos del menú o por los botones colocados en las vistas principales
  • qué tan cerca de las vistas secundarias usando un botón de retroceso suave, un gesto de deslizar o el botón de retroceso del teléfono con indiferencia
  • cómo usar el botón de retroceso del teléfono para volver a la página anterior, no importa si es una vista principal o secundaria o un menú lateral; También implementaremos el comportamiento estándar del botón Atrás, de modo que si el usuario lo toca dos veces, saldrá de la aplicación

Requisitos

Para construir nuestro sistema de navegación vamos a utilizar alguna herramienta habitual, con el que cualquier desarrollador web está familiarizado, y algún complemento adicional:

  • Bootstrap 3.x
  • jQuery
  • jquery.touchSwipe.js (no es un complemento de Cordova, pero funciona muy bien incluso en aplicaciones de Cordova)
  • Complemento PhoneGap Toast (esto no es un requisito para el sistema de navegación, pero es bueno mostrar mensajes al usuario al estilo perfecto de Android en lugar de usar alertas de javascript)

Procederemos a instalar cada plugin cuando lo necesitemos, Así que por el momento no hagas nada: solo sigue leyendo, el tiempo de acción llegará pronto!

Antes de continuar leyendo el tutorial, asegúrese de haber seguido los pasos descritos en el artículo. Configuración básica del proyecto Cordova. Admito que no es un gran artículo, pero da algunas sugerencias básicas para iniciar un nuevo proyecto de Córdova y prepararlo para seguir los diversos tutoriales que encontrarás en este blog. El único cambio que tienes que hacer es el nombre de la aplicación.; usa este comando: cordova crea navApp com.codingfix.navApp NavApp . Para el resto, solo sigue los pasos descritos en ese artículo.: no porque representen la mejor manera de configurar un proyecto de Cordova, sino simplemente porque de esta manera estaremos seguros de que nuestros archivos son idénticos y no nos arriesgaremos a algún malentendido aburrido.

Las principales vistas

Ahora, Estamos listos para empezar. Lo primero que vamos a construir es el 4 estructura de vistas principales de la aplicación, así que lo preparamos para admitir el gesto de deslizar.

El marcado

Después de la cuerpo etiqueta añadir marcado siguiente:

<div id ="myCarousel" class ="diapositivas carrusel" = Datos-ride"carrusel" intervalo de tiempo ="falso">
	<div class ="carrusel-interior" role ="cuadro de lista">
		<div id ="Página 1" class ="elemento activo"><h2>Página 1</h2></Div>
		<div id ="PAGE2" class ="articulo "><h2>Página 2</h2></Div>
		<div id ="página3" class ="articulo"><h2>Página 3</h2></Div>
		<div id ="página 4" class ="articulo"><h2>Página 4</h2></Div>
	</Div>
</Div>

El carrusel Bootstrap es una manera excelente y fácil de implementar el soporte de gestos en una aplicación móvil híbrida. Pero antes de que podamos verlo en acción, tenemos que hacer algunas cosas adicionales..

Ante todo, tenemos que instalar el complemento TouchSwipe. Puedes usar sobre el nivel del mar o cenador o simplemente puede descargar o clonar el repositorio de Github: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin.

Una vez que tenga el software instalado, poner la versión minificada del complemento, el archivo jquery.touchSwipe.min.js en tus navApp / www / js / directorio y vincularlo en su índice.html archivo:

        <de script type ="text / javascript" src ="Córdoba.js"></guión>
		<de script type ="text / javascript" src ="JS / jquery-2.2.3.min.js"></guión>
		<de script type ="text / javascript" src ="JS / bootstrap.min.js"></guión>
		<de script type ="text / javascript" src ="js / jquery.touchSwipe.min.js"></guión>
        <de script type ="text / javascript" src ="JS / index.js"></guión>
    </cuerpo>
</.html>

La hoja de estilo

Abre tu navApp / www / css / index.css usando el editor de código de su elección. Si seguiste mis sugerencias Debe tener un aspecto como este:

.html, cuerpo{
	altura: 100%;
}

Ahora, agregar las siguientes líneas:

.carrusel,.articulo,.activo{
	altura:100%;
}
.carrusel-interior{
	altura:100%;
}

Con esto nuestras páginas llenarán el espacio disponible en la pantalla de nuestro teléfono inteligente.

el javascript

Ahora que tenemos todo en su lugar, solo tenemos que escribir algunas líneas de código para configurar nuestro carrusel e inicializar el complemento TouchSwipe. Ante todo, dentro de la función principal de jQuery que tenemos en nuestro navApp / js / index.js, tenemos que inicializar el carrusel Bootstrap:

$(documento).Listo(función () {
	$('.carrusel').carrusel('pausa');
});

Lo ves? Hacemos una pausa en el carrusel porque no queremos que las vistas de nuestra aplicación se deslicen automáticamente como si fueran imágenes en un sitio web!

Luego vamos con el código del complemento TouchSwipe:

$(".carrusel-interior").golpe fuerte({
	deslizar a la izquierda: función () {
		$(esta).padre().carrusel('Siguiente');
	},
	desliza a la derecha: función () {
		$(esta).padre().carrusel('Anterior');
	},
	límite: 200,
	excludedElements: "etiqueta, botón, entrada, Seleccione, área de texto, .noDeslizar"
});

Observe que estamos vinculando el evento golpe fuerte al elemento con clase carrusel-interior. los golpe fuerte el evento tiene 2 funciones de devolución de llamada adjuntas en nuestro ejemplo, deslizar a la izquierda y desliza a la derecha: de acuerdo con el evento desencadenado, usaremos Bootstrap para hacer que nuestro carrusel se deslice al siguiente elemento para deslizar a la izquierda y al anterior por desliza a la derecha. Luego establecemos el umbral a 200: esto significa que el usuario tiene que deslizar el dedo durante al menos 200 px en orden golpe fuerte evento ser activado. Finalmente excluimos algún elemento que no queremos que active el golpe fuerte evento.

Está mucho más allá del alcance de este tutorial analizar las muchas opciones que el complemento TouchSwipe le ofrece para administrar los gestos. Quizás este sea el argumento para otro artículo. De todas formas, si quieres conocer mejor este complemento increíblemente útil, puedes leer la documentación completa aquí.

Vamos!

Bueno, Es el momento de comprobar si hemos hecho todo bien. Conecte su teléfono a su computadora, abre tu CLI y ve al directorio de tu proyecto navApp / y escriba el siguiente comando:

cordova ejecutar android

Guau, fantástico! Puede navegar por sus vistas simplemente deslizando el dedo hacia la izquierda o hacia la derecha!!! Excelente! Pero… Whooops! Nunca se detiene! Se desliza una y otra vez, en un bucle infinito: Eso es malo. Como cualquier otra aplicación móvil, una vez que hayas llegado a la última vista, El evento de deslizar hacia la izquierda ya no debería activarse; Y cuando estás en la primera vista no podría ser posible deslizar el dedo hacia la derecha e ir directamente a la vista 4.

Bueno, Tendremos que corregir este error. por suerte, Bootstrap tiene un vasto arsenal preparado para nosotros y entre las otras armas podemos encontrar el evento. slide.bs.carousel. Al vincular este evento a su carrusel, puede ejecutar código personalizado antes de el deslizamiento ocurre (para ejecutar un código después el evento de diapositiva se ha disparado uso slid.bs.carrusel en lugar).

Así que es el momento de usar los identificadores que hemos configurado para nuestras vistas. Vamos a usarlos para comprobar si la página actual es Página 1 o página 4 y actuar en consecuencia solo previniendo el comportamiento predeterminado del evento:

$('#myCarrusel').en('slide.bs.carousel', función (mi) {
	página var = $('.Item.active').Atracción('carné de identidad');
	Si (e.direction == 'izquierda') {
		Si (página == 'página4') {
			e.preventDefault();
		}
	} más {
		Si (página == 'page1') {
			e.preventDefault();
		}
	}
});

Probablemente alguien podría pensar que podríamos hacer este código más compacto y tendría razón.. Pero prefiero mantenerlo así solo por una razón: en una aplicación real, Probablemente tendremos que ejecutar líneas específicas de código en consecuencia, no solo en la dirección del deslizamiento, sino incluso en el ID de la página activa, por lo que mantener la verificación de la dirección separada de la verificación de la página es más cómodo y deja claro de inmediato cómo administrar este aspecto de nuestra aplicación.

Está bien, ahora. Vuelva a ejecutar la aplicación y verá que se comporta como se espera. Tu todo índice.js debería gustarle esto:

era aplicación = {
    inicializar: función() {
        document.addEventListener('Deviceready', this.onDeviceReady.bind(esta), falso);
    },
    onDeviceReady: función() {
        this.receivedEvent('Deviceready');
    },
    recibidoEvento: función(carné de identidad) {
        consola.log('Evento recibido: ' + carné de identidad);
    }
};

app.initialize();

$(documento).Listo(función () {
	$('.carrusel').carrusel('pausa');

	$(".carrusel-interior").golpe fuerte({
		deslizar a la izquierda: función () {
			$(esta).padre().carrusel('Siguiente');
		},
		desliza a la derecha: función () {
			$(esta).padre().carrusel('Anterior');
		},
		límite: 200,
		excludedElements: "etiqueta, botón, entrada, Seleccione, área de texto, .noDeslizar"
	});
	
	$('#myCarrusel').en('slide.bs.carousel', función (mi) {
		página var = $('.Item.active').Atracción('carné de identidad');
		Si (e.direction == 'izquierda') {
			Si (página == 'página4') {
				e.preventDefault();
			}
		} más {
			Si (página == 'page1') {
				e.preventDefault();
			}
		}
	});
	
});

El botón de retroceso duro

Generalmente, Al tocar el botón de retroceso de su teléfono, se lo lleva a la vista anterior de la aplicación: ¿No sería maravilloso si pudiéramos implementar esta función en nuestra aplicación?? si, Sería. Así que ábrete índice.js archivar y buscar el onDeviceReady método de la aplicación objeto (si has seguido mis sugerencias, debería estar en la línea 5). Cambie este método para que tenga el siguiente aspecto:

onDeviceReady: función () {
	this.receivedEvent('Deviceready');
	document.addEventListener("botón de retroceso", onBackKeyDown, falso);
},

De esta manera, cada vez que se toque el botón de retroceso de nuestro teléfono, Córdoba disparará la función onBackKeyDown(). Podemos mantener esta función bastante simple, por el momento:

onBackKeyDown función(mi) {
	e.preventDefault();
	$('.carrusel').carrusel('Anterior');
}

Si ejecuta su aplicación, puedes ver que este código funciona bien. Pero, desde que usamos jQuery preventDefault() método para administrar el botón de retroceso por nosotros mismos, ahora ya no podemos salir de la aplicación. Entonces tenemos que hacer nuestro onBackKeyDown() funciona un poco más complejo. Antes de ver el código, Instalemos otro gran plugin, el Complemento PhoneGap Toast. Vaya a su CLI y, en el directorio raíz de su proyecto, escriba el siguiente comando:

complemento cordova agregar https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Este complemento nos permitirá mostrar alguna alerta a nuestros usuarios usando un estilo nativo de Android. Vuelve al código.

fue la última vez que la contrapresión = 0;
era timePeriodToExit = 2000;
onBackKeyDown función(mi) {
	e.preventDefault();
	página var = $('.Item.active').Atracción('carné de identidad');
	Si (página == 'page1') {
		Si (nuevos Fecha().consigue tiempo() - lastTimeBackPress < timePeriodToExit) {
			navigator.app.exitApp();
		} más {
			window.plugins.toast.showWithOptions({
				mensaje: "Presione de nuevo para salir.",
				duración: "corto", // cual es 2000 Sra. "largo" es 4000. O especificar el nr del ms yourself.
				posición: "fondo",
				addPixelsY: -40  // añadido un valor negativo para moverlo hacia arriba un poco (defecto 0)
			});
			lastTimeBackPress = nueva fecha().consigue tiempo();
		}
	} más {
		$('.carrusel').carrusel('Anterior');
	}
}

Lo primero que notamos es el par de variables lastTimeBackPress y timePeriodToExit. Usaremos estas variables para comprobar si el usuario ha pulsado dos veces el botón Atrás y para medir el tiempo entre el primer y el segundo toque: si este tiempo es menor que 2 segundos salimos de la aplicación, de lo contrario mostramos un «brindis» al usuario que le dice que tiene que tocar de nuevo para salir de la aplicación. Las opciones del complemento Toast son solo algunas y se explican por sí mismas, así que no te voy a aburrir con bla-bla-bla innecesario. Solo ejecuta la aplicación, deslice hacia la izquierda y hacia la derecha para navegar entre las vistas, use el botón de retroceso del teléfono para volver a la primera vista y toque el botón de retroceso nuevamente para ver su «brindis». Frio, No es?

En el próximo artículo veremos cómo añadir una barra superior fija para aumentar las opciones de navegación de nuestros usuarios.

Saludos 🙂

Parte 1 – Parte 2 – Parte 3 – Parte 4

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *