Ejercicios 3

En esta sección de ejercicios vamos a continuar con la aplicación de la biblioteca para enlazar todas las páginas que habíamos creado y además añadir una nueva página con la vista detalle de un libro que reciba un parámetro de llamada.

Ejercicio 3.1 - Enlazar las páginas (0.5 puntos)

Empezaremos por enlazar todas las páginas:

• Modifica la página principal "home" para que al pulsar sobre "Acceso a iBiblioteca" se abra la página "ibiblioteca" y para que al pulsar sobre "Consultar información" se abra la página "autor".

• Modifica la página "autor" para que al pulsar sobre "Currículum vítae" se abra la página "curriculum".

Recuerda que para abrir una nueva página desde un botón tenemos que añadirle el evento "click" para que ejecute una función que realice dicha acción. Esta función la tendremos que definir en la clase del propio componente (fichero .ts), la cual tendrá que usar la variable "navCtrl" y hacer push de la página a abrir. Además tenemos que acordarnos de importar en dicha clase la página que queremos abrir.

Ejercicio 3.2 - Ciclo de vida de las páginas (0.5 puntos)

Modifica las páginas "home", "autor", "curriculum" y "biblioteca" para que muestren por consola todos los eventos de su ciclo de vida. Por ejemplo, para el evento "ionViewDidEnter" de la página "biblioteca" tendríamos que añadir el siguiente código al fichero "biblioteca.ts":

ionViewDidEnter() {
  console.log('ionViewDidEnter BibliotecaPage');
}

Emula la aplicación en el navegador y abre las herramientas del desarrollador para ver el log de eventos por la consola. Si utilizas la opción "ionic serve --lab" tendrás que dejar activado el emulador de una sola plataforma para que no se dupliquen los eventos (puedes seleccionar los emuladores a mostrar desde las opciones de menú de la parte superior derecha).

Ejercicio 3.3 - Nueva página detalle (1 punto)

Vamos a crear una nueva página llamada "detalle" en la que mostraremos la información ampliada de un libro. Esta pantalla tendrá un aspecto similar al de la siguiente captura:

Esta pantalla se ha creado utilizando una tarjeta (card) de tipo "Images In Cards". Recuerda cambiar también el título de la barra de navegación para que indique el título del libro.

Ejercicio 3.4 - Enlazar la página detalle (1 punto)

Modifica la plantilla de la página "biblioteca" para que al pulsar sobre cada elemento de la lista se abra la pantalla detalle. Para esto añade a la etiqueta button de cada elemento de la lista de libros el siguiente evento:

(click)="verPaginaDetalle(1)"

Este evento llamará al método "verPaginaDetalle" (que ahora definiremos en la clase) pasándole como parámetro un número fijo a modo de identificador. De momento vamos a pasar a la función este número a modo de identificador (puede ser cualquier número), más adelante modificaremos este parámetro para asociarlo con el libro.

Modifica la clase "ibiblioteca.ts" para añadir el método asociado a este evento. Al abrir la nueva página le pasaremos como parámetro el valor recibido (que como hemos dicho de momento es un número):

verPaginaDetalle(libro):void {
    this.navCtrl.push(DetallePage, {libro: libro});
}

Una vez hecho esto ya podemos recuperar el libro sobre el que se ha pulsado desde la página "detalle". Para realizar esta acción añade la siguiente instrucción en el constructor de la clase:

this.libro = navParams.get('libro');

Declara la variable "libro" con tipo any y muestralá por consola (console.log(this.libro)) para asegurarte de que está recibiendo el valor correcto.