Ejercicios 5

En esta sección de ejercicios vamos a modificar la pantalla con la lista de películas para permitir al usuario elegir un layout diferente para la vista.

Ejercicio 5.1 - Botón cambio de vista

En primer lugar añadiremos un botón en el toolbar superior que nos permitirá alternar entre el layout tipo lista (el actual) y el nuevo layout con formato de cuadrícula.

Para esto vamos a añadir dos botones al toolbar superior dentro del slot primary (revisa la presentación "Componentes 1", sección "toolbar con botones"). Para cambiar al modo cuadrícula usaremos el icono "apps-sharp" y para cambiar al modo lista el icono "reorder-four-sharp".

Estos botones dependerán de la variable booleana modoLista definida en el controlador asociado (que por defecto tendrá el valor true). De forma que si la variable tiene el valor true se mostrará el botón apps-sharp y si la variable tiene el valor false el botón reorder-four-sharp. A modo de ejemplo se muestra el código para el primer botón:

<ion-button *ngIf="modoLista == true" (click)="cambiarVista()">
    <ion-icon slot="icon-only" name="apps-sharp"></ion-icon>
</ion-button>

Como se puede ver en el código, al pulsar sobre este botón se llamará a la función cambiarVista(). El código del otro botón sería igual, llamaría a la misma función, solo variando la condición de *ngIf para que se muestre solo cuando la variable es false.

La función cambiarVista() la tenemos que definir en el controlador asociado para que cada vez que se llame cambie el valor de la variable modoLista. Una vez hecho esto podemos probar la aplicación y comprobar que el botón de la barra superior debería de cambiar cada vez que lo pulsemos.

Ejercicio 5.2 - Vista modo cuadrícula

A continuación vamos a definir la vista tipo cuadrícula. Esta nueva vista la añadiremos a la misma pantalla videoclub, y lo que haremos será simplemente mostrar u ocultar una vista en función del valor de la variable modoLista.

Para esto en la etiqueta de apertura de la lista (la que tenemos actualmente) podemos comprobar si la variable modoLista tiene el valor true y en otro caso mostrar un nuevo template llamado modoGrid:

<ion-list *ngIf="modoLista == true; else modoGrid">
    ...
</ion-list>

<ng-template #modoGrid>
    ...
</ng-template>

Dentro de este template es donde definiremos la nueva vista tipo cuadrícula, la cual la crearemos utilizando un grid con una única fila a la que se añadirán todas las películas, cada una dentro de una columna. El número de columnas variará dependiendo del tamaño de la pantalla, como se muestra en la siguiente captura:

Ejercicio 5.3 - Vista vacía

Por último vamos a realizar una comprobación para que, en el caso de que la lista de películas esté vacía, aparezca un aviso indicándolo.

Para esto añadiremos una etiqueta <div> que englobe a las dos vistas de la sección de contenido, es decir, a la lista y a la cuadrícula. En esta etiqueta comprobaremos si la variable listaPeliculas contiene algún valor, en caso negativo mostraremos una plantilla llamada emptyList con el siguiente aspecto: