En este ejercicio pretendemos desarrollar una aplicación para visualizar imágenes que se encuentran agrupadas en categorías. Para ello sugerimos implementar la siguiente funcionalidad:
Crear pestañas o tabs para cada una de las categorías, agrupando así las imágenes, y permitiendo con un solo click cambiar entre una categoría u otra.
Utilizando la pantalla táctil de nuestros dispositivos, habilitar el gesto swipe para acceder a la imagen anterior o posterior.
Activar la reproducción automática mediante un botón, permitiendo a su vez pausar la visualización mediante otro botón.
Permitir ajustar la velocidad en la que se van mostrando las imágenes.
Una posible sugerencia de la interfaz de la aplicación sería la siguiente:
Elementos HTML de IONIC 4
Slides
La funcionalidad principal de este ejercicio nos la proporciona IONIC mediante el elemento
<ion-slides></ion-slides>
<ion-slides></ion-slides>, donde ya se encuentra encapsulada la respuesta a los gestos de swipe y la reproducción automática, tal como se explica en la documentación.
Por ejemplo, para poder visualizar de manera secuencial las imágenes alicante1.jpg, alicante2.jpg y alicante3.jpg, ubicadas en la carpeta img, bastaría con insertarlas dentro de elementos
<ion-img></ion-img>, que tiene un comportamiento casi idéntico al
<img>
<img> de HTML. La diferencia es que esta última versión de IONIC optimiza especialmente aquellas páginas que tienen una lista muy grande de imágenes, ya que sólo se cargarían cuando fueran a estar visibles.
Tabs
El siguiente elemento clave que utilizaremos es
<ion-tabs></ion-tabs>
<ion-tabs></ion-tabs>, ya que nos permitirá agrupar las fotos por categoría. Nos proporciona la funcionalidad necesaria para mostrar unas secciones de nuestro código HTML mientras se ocultan otras.
Conviene destacar además las numerosas opciones de personalización, tales como el color, que se pueden ajustar especificando el valor deseado en el atributo correspondiente (se puede consultar la documentación para más detalles). Por ejemplo, si queremos que se muestren dos pestañas con el fondo de color rojo, una de ellas etiquetada con el texto Madrid y el icono train, y la otra con París y airplane, procederíamos de la siguiente forma:
Un poco más adelante veremos la funcionalidad JavaScript que se ejecutará al pulsar dichos botones.
Para ajustar la velocidad
Para poder ajustar el tiempo que permanece cada diapositiva en la pantalla, sugerimos utilizar un elemento range (
<ion-range></ion-range>
<ion-range></ion-range>). Por ejemplo, para poder establecer un tiempo que oscile entre 0 y 5 segundos (5000 milisegundos), podríamos utilizar el siguiente código:
Por simplificar un poco el código, utilizaremos tres funciones para acceder a cada uno de los elementos clave (range, tabs y slides):
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
functiongetDelay(){
return(document.querySelector('ion-range'));
}
functiongetTabs(){
return(document.querySelector('ion-tabs'));
}
functiongetSlides(){
return(document.querySelectorAll('ion-slides'));
}
function getDelay() {
return(document.querySelector('ion-range'));
}
function getTabs() {
return(document.querySelector('ion-tabs'));
}
function getSlides() {
return(document.querySelectorAll('ion-slides'));
}
function getDelay() {
return(document.querySelector('ion-range'));
}
function getTabs() {
return(document.querySelector('ion-tabs'));
}
function getSlides() {
return(document.querySelectorAll('ion-slides'));
}
Al pulsar play/pause
Para iniciar la reproducción automática de diapositivas bastará con acceder al elemento
<ion-slides></ion-slides>
<ion-slides></ion-slides> correspondiente y ejecutar el método
startAutoplay()
startAutoplay(), tal como se indica en la documentación.
Puesto que tendremos varias pestañas (una por cada categoría) primero deberemos acceder al tab que se encuentre seleccionado (
getTabs().getSelected()
getTabs().getSelected()), que será devuelto en una promesa. Utilizaremos luego simplemente el atributo id para acceder a la categoría activa, iniciando (
s.startAutoplay()
s.startAutoplay()) o parando (
s.stopAutoplay()
s.stopAutoplay()) la reproducción según el botón que se haya pulsado (play o pause):
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
functionplay(){
getTabs().getSelected().then(function(tab){
document.getElementById(tab).startAutoplay();
});
}
functionpause(){
getSlides().forEach(function(s){
s.stopAutoplay();
});
}
function play() {
getTabs().getSelected().then(function(tab) {
document.getElementById(tab).startAutoplay();
});
}
function pause() {
getSlides().forEach(function(s) {
s.stopAutoplay();
});
}
function play() {
getTabs().getSelected().then(function(tab) {
document.getElementById(tab).startAutoplay();
});
}
function pause() {
getSlides().forEach(function(s) {
s.stopAutoplay();
});
}
Al ajustar la velocidad de reproducción
Cada vez que movamos el control deslizante, se generará un evento
ionChange
ionChange, que nos indicará que tenemos que cambiar la velocidad con la que se muestran las diapositivas:
Puesto que la posición izquierda del control deslizante indicará menos velocidad (tiempo de espera mayor), y la posición derecha mayor velocidad (tiempo de espera menor), bastará con hacer una resta del tiempo máximo de visualización (5000 milisegundos) para calcular el tiempo (
delay
delay) que deberá permanecer cada imagen en pantalla:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
autoplay: {
delay: 5000 - getDelay().value
}
autoplay: {
delay: 5000 - getDelay().value
}
autoplay: {
delay: 5000 - getDelay().value
}
Inicializamos también la anchura de cada diapositiva indicando que ocupan toda la ventana:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
s.options = {
width: window.innerWidth,
...
};
s.options = {
width: window.innerWidth,
...
};
s.options = {
width: window.innerWidth,
...
};
Al cambiar de pestaña
Cada vez que cambiemos de pestaña, pararemos la reproducción:
onload y resize para inicializar la velocidad de reproducción de las diapositivas que hemos especificado en el control deslizante, así como la anchura de cada una para que ocupen toda la pantalla:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<body onload="onLoad()">
...
functiononLoad(){
window.addEventListener('resize', init);
...
init();
}
...
functioninit(){
getSlides().forEach(function(s){
...
});
}
<body onload="onLoad()">
...
function onLoad() {
window.addEventListener('resize', init);
...
init();
}
...
function init() {
getSlides().forEach(function(s) {
...
});
}
<body onload="onLoad()">
...
function onLoad() {
window.addEventListener('resize', init);
...
init();
}
...
function init() {
getSlides().forEach(function(s) {
...
});
}
function onLoad() {
getDelay().addEventListener("ionChange", init);
window.addEventListener('resize', init);
getTabs().addEventListener("ionTabsWillChange", pause);
init();
}
function getDelay() {
return(document.querySelector('ion-range'));
}
function getTabs() {
return(document.querySelector('ion-tabs'));
}
function getSlides() {
return(document.querySelectorAll('ion-slides'));
}
function init() {
getSlides().forEach(function(s) {
s.options = {
width: window.innerWidth,
autoplay: {
delay: 5000 - getDelay().value
}
};
});
}
function play() {
getTabs().getSelected().then(function(tab) {
document.getElementById(tab).startAutoplay();
});
}
function pause() {
getSlides().forEach(function(s) {
s.stopAutoplay();
});
}
function onLoad() {
getDelay().addEventListener("ionChange", init);
window.addEventListener('resize', init);
getTabs().addEventListener("ionTabsWillChange", pause);
init();
}
function getDelay() {
return(document.querySelector('ion-range'));
}
function getTabs() {
return(document.querySelector('ion-tabs'));
}
function getSlides() {
return(document.querySelectorAll('ion-slides'));
}
function init() {
getSlides().forEach(function(s) {
s.options = {
width: window.innerWidth,
autoplay: {
delay: 5000 - getDelay().value
}
};
});
}
function play() {
getTabs().getSelected().then(function(tab) {
document.getElementById(tab).startAutoplay();
});
}
function pause() {
getSlides().forEach(function(s) {
s.stopAutoplay();
});
}
El resultado
Puedes hacer clic aquí para observar el aspecto que tiene la galería de imágenes y probar la funcionalidad resultante utilizando el código especificado.
Más adelante veremos el código JavaScript necesario para llevar a cabo las funciones correspondientes:
deleteItem()
deleteItem()
toggleReorder()
toggleReorder()
addEditItem()
addEditItem()
Las listas de tareas
Para mantener dos listas separadas, desde el archivo index.html utilizaremos el elemento
<ion-tabs></ion-tabs>
<ion-tabs></ion-tabs> que personalizaremos escogiendo un icono y un texto descriptivo. Por ejemplo, si quisiéramos utilizar una lista de tareas para el instituto y otra para casa podríamos utilizar los iconos
<ion-reorder-group></ion-reorder-group> que nos permitirá reordenar las tareas que coloquemos dentro. Bastará con pulsar encima de un botón habilitado a tal efecto, y sin soltar arrastrar la tarea en cuestión a la nueva posición. En la documentación de IONIC podemos observar cómo esta simple etiqueta gestiona todo el proceso de arrastrar y soltar.
Las tareas dentro de las listas
Utilizaremos elementos
<ion-item-sliding></ion-item-sliding>
<ion-item-sliding></ion-item-sliding> para cada tarea dentro de las listas. De esta forma podremos tener oculto un botón rojo con una papelera, que aparecerá al deslizar la tarea hacia la derecha, y nos permitirá borrar de la lista sólo ese elemento:
<ion-item></ion-item> para agrupar todos los datos de la tarea. De esta forma, bastará con hacer clic sobre una determinada tarea para acceder a los detalles de la misma:
<ion-itemonclick="..."></ion-item>
<ion-item onclick="..."></ion-item> . Un poco más adelante detallaremos la funcionalidad JavaScript necesaria para crear y mostrar un formulario que nos permita visualizar y editar la tarea seleccionada.
Resaltaremos la descripción de la tarea con una etiqueta
<h2></h2>
<h2></h2>, y a continuación mostremos la fecha de la misma dentro de un párrafo (etiqueta
<p></p>
<p></p>). Encerraremos ambos elementos con una etiqueta
<ion-label text-wrap></ion-label>
<ion-label text-wrap></ion-label> que permitirá que el tamaño de cada elemento de la lista se ajuste para contener todo el texto descriptivo de la tarea.
Resumiendo, cada elemento de la lista de tareas vendrá especificado por el siguiente código HTML:
Para visualizar y editar los detalles de cada tarea (al crear una nueva, o al hacer clic sobre una ya existente) utilizaremos el siguiente código HTML:
<ion-header></ion-header>) simplemente tenemos dos botones para confirmar o cancelar la edición o creación de la tarea.
En el contenido principal del formulario (
<ion-content></ion-content>
<ion-content></ion-content>) tendremos tres campos:
<ion-datetime><ion-datetime>
<ion-datetime><ion-datetime>: Para indicar la fecha de la tarea. Si estamos creando una nueva tarea, en dicho valor introduciremos la fecha actual utilizando código JavaScript.
<ion-input></ion-input>
<ion-input></ion-input>: Para introducir o modificar la descripción de la tarea. Estará en blanco si se trata de una tarea nueva.
<ion-segment></ion-segment>
<ion-segment></ion-segment>: Para seleccionar la prioridad de la tarea. En nuestro ejemplo proponemos 4 opciones (
radio-button-off
radio-button-off para tareas pendientes,
radio-button-on
radio-button-on para tarea finalizada,
snow
snow para una prioridad baja, y
flame
flame para una prioridad alta), aunque los iconos utilizados son una simple sugerencia, y se pueden cambiar fácilmente según el gusto de cada uno.
El código JavaScript
Accediendo a cada una de las listas
Por simplificar un poco el código, utilizaremos tres funciones para acceder y actualizar los dos elementos principales (tabs y lists):
function getTab() {
return(document.querySelector('ion-tab:not(.tab-hidden)'));
}
function getList(tab = getTab()) {
let list = localStorage.getItem('todo-list-'+tab.tab);
return list ? JSON.parse(list) : [];
}
function saveList(tab, list) {
localStorage.setItem('todo-list-'+tab.tab, JSON.stringify(list));
printList(tab);
}
function getTab() {
return(document.querySelector('ion-tab:not(.tab-hidden)'));
}
function getList(tab = getTab()) {
let list = localStorage.getItem('todo-list-'+tab.tab);
return list ? JSON.parse(list) : [];
}
function saveList(tab, list) {
localStorage.setItem('todo-list-'+tab.tab, JSON.stringify(list));
printList(tab);
}
La última función (
saveList()
saveList()) nos permitirá guardar de manera persistente cada una de las listas de tareas, utilizando
localStorage
localStorage, de forma que al actualizar el contenido del navegador (o cerrar la app y volverla a abrir), podamos volver a cargar la lista de tareas.
Construyendo cada elemento de la lista de tareas
Mediante la siguiente función obtendremos todo el código necesario para cada tarea, variando simplemente el texto descriptivo de la misma, la fecha, y el icono indicativo de la prioridad:
Para añadir una nueva tarea o editar los detalles de una tarea existente
Utilizaremos la misma función (
addEditItem(index)
addEditItem(index)) para añadir una nueva tarea o modificar una existente. En ella, siguiendo las instrucciones indicadas en la documentación de IONIC, crearemos un cuadro de diálogo modal que mostrará el formulario para introducir o actualizar los detalles de la tarea:
function addEditItem(index = false) {
closeItems();
let list = getList();
let item = null;
if (index !== false) item = list[index];
else item = { text:"", date:new Date().toISOString(), icon:"radio-button-off" };
const modal = document.createElement('ion-modal');
modal.component = document.createElement('div');
modal.component.innerHTML = `
<ion-header>
...
</ion-header>
<ion-content>
...
</ion-content>`;
modal.component.querySelector('[color="danger"]').addEventListener('click', () => {
modal.dismiss();
});
modal.component.querySelector('[color="primary"]').addEventListener('click', () => {
let newDate = modal.component.querySelector('ion-datetime').value;
let newText = modal.component.querySelector('ion-input').value;
let newIcon = modal.component.querySelector('ion-segment').value;
if (!newText.length) {
error('The task cannot be empty');
}
else {
let newItem = { text:newText, date:newDate, icon:newIcon };
if (index !== false) list[index] = newItem;
else list.unshift(newItem);
saveList(getTab(), list);
modal.dismiss();
}
});
document.querySelector('ion-app').appendChild(modal);
modal.present();
}
function addEditItem(index = false) {
closeItems();
let list = getList();
let item = null;
if (index !== false) item = list[index];
else item = { text:"", date:new Date().toISOString(), icon:"radio-button-off" };
const modal = document.createElement('ion-modal');
modal.component = document.createElement('div');
modal.component.innerHTML = `
<ion-header>
...
</ion-header>
<ion-content>
...
</ion-content>`;
modal.component.querySelector('[color="danger"]').addEventListener('click', () => {
modal.dismiss();
});
modal.component.querySelector('[color="primary"]').addEventListener('click', () => {
let newDate = modal.component.querySelector('ion-datetime').value;
let newText = modal.component.querySelector('ion-input').value;
let newIcon = modal.component.querySelector('ion-segment').value;
if (!newText.length) {
error('The task cannot be empty');
}
else {
let newItem = { text:newText, date:newDate, icon:newIcon };
if (index !== false) list[index] = newItem;
else list.unshift(newItem);
saveList(getTab(), list);
modal.dismiss();
}
});
document.querySelector('ion-app').appendChild(modal);
modal.present();
}
En la primera parte de la función, si recibimos como parámetro la tarea a modificar, recuperaremos los detalles de la misma (fecha, texto descriptivo e icono con la prioridad):
Como se puede observar en la fecha, si en vez de modificar una tarea existente, estamos creando una nueva (parámetro de la función con valor
false
false), entonces obtendremos la fecha actual.
A continuación, crearemos el formulario de edición o creación de tareas, con un encabezado con los botones correspondientes para cancelar y confirmar, y también con el contenido principal, utilizando el código HTML indicado previamente:
function error(message) {
const alert = document.createElement('ion-alert');
alert.message = message;
alert.buttons = ['OK'];
document.querySelector('ion-app').appendChild(alert);
alert.present();
}
function addEditItem(index = false) {
...
if (!newText.length) {
error('The task cannot be empty');
}
...
}});
function error(message) {
const alert = document.createElement('ion-alert');
alert.message = message;
alert.buttons = ['OK'];
document.querySelector('ion-app').appendChild(alert);
alert.present();
}
function addEditItem(index = false) {
...
if (!newText.length) {
error('The task cannot be empty');
}
...
}});
Si estamos modificando una tarea existente, crearemos la nueva tarea con los nuevos datos del formulario, la reemplazaremos por la existente, guardaremos la lista, y cerraremos el cuadro de diálogo.
Si estamos añadiendo una nueva tarea, crearemos un nuevo elemento
<ion-item-sliding></ion-item-sliding>
<ion-item-sliding></ion-item-sliding> que contendrá la fecha, descripción e icono introducidos en el formulario. A continuación añadiremos dicha tarea a la lista que estemos modificando, la guardaremos, y cerraremos el cuadro de diálogo:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
let newItem = { text:newText, date:newDate, icon:newIcon };
La totalidad de la funcionalidad necesaria para reordenar las tareas de una lista ya nos la proporciona IONIC mediante el elemento
<ion-reorder></ion-reorder>
<ion-reorder></ion-reorder>. Lo único que debemos hacer por nuestra parte, es cambiar el valor del atributo
disabled
disabled del elemento
<ion-reorder-group></ion-reorder-group>
<ion-reorder-group></ion-reorder-group> de la lista seleccionada:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
functiontoggleReorder(){
closeItems();
let reorder = getTab().querySelector('ion-reorder-group');
reorder.disabled = !reorder.disabled;
}
function toggleReorder() {
closeItems();
let reorder = getTab().querySelector('ion-reorder-group');
reorder.disabled = !reorder.disabled;
}
function toggleReorder() {
closeItems();
let reorder = getTab().querySelector('ion-reorder-group');
reorder.disabled = !reorder.disabled;
}
En caso de que se esté mostrando algún botón de borrado de una tarea, se ocultará para habilitar correctamente la funcionalidad de reordenar elementos.
Cuando la opción de reordenar se encuentra activa, se mostrará un nuevo icono en todas las tareas. Si lo mantenemos pulsado, nos permitirá arrastrar la tarea correspondiente para soltarla en una nueva posición.
Al volver a pulsar el botón de reordenar ubicado en el encabezado de la aplicación, la opción de reordenar se desactivará, evitando que cambiemos accidentalmente el orden de las tareas.
Borrando tareas
Para borrar todas las tareas de la lista seleccionada, pulsaremos el botón que hemos puesto en el encabezado principal de la aplicación. Y para borrar una tarea específica, pulsaremos el botón que aparece al deslizar la tarea hacia la derecha. En ambos casos, utilizaremos la misma función JavaScript (
deleteItem(index)
deleteItem(index)), pasando como parámetro el elemento HTML que contiene la tarea a borrar, o el valor false para borrar todas las tareas de la lista seleccionada.
Para evitar borrados accidentales, pediremos confirmación al usuario utilizando un cuadro de diálogo de tipoAlert que ya nos proporciona IONIC:
Como se puede observar, al confirmar el borrado, si se recibe un elemento por parámetro, sólo se borra dicho elemento. En caso contrario, se borrará toda la lista, utilizando una cadena vacía para eliminar todo el código HTML que contenía. Finalmente, guardaremos la lista correspondiente:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
...
let list = getList();
if(index !== false){ list.splice(index, 1); }
else{ list.length = 0; }
saveList(getTab(), list);
...
...
let list = getList();
if (index !== false) { list.splice(index, 1); }
else { list.length = 0; }
saveList(getTab(), list);
...
...
let list = getList();
if (index !== false) { list.splice(index, 1); }
else { list.length = 0; }
saveList(getTab(), list);
...
Eventos a tener en cuenta
Cada vez que reordenemos las tareas de alguna lista, deberemos volverla a guardar para que aparezcan en el orden correcto al volver a abrir la aplicación. Para ello capturaremos el evento
ionItemReorder
ionItemReorder, tal como se indica en la documentación de IONIC, apartado de JavaScript:
Puedes hacer clic aquí para observar el aspecto que tiene la aplicación de lista de tareas y probar la funcionalidad resultante utilizando el código especificado.