Ejemplo1

Iniciar un proyecto nuevo

Vista al archivo home.page.html

Actualización en la estructura de directorios

Actualización de archivo app.routes.ts, si no se actualizo automaticamente, debe hacer manual el cambio.

Actualización en home.page.html

A) Dejar vacío el ion-content

B) Cambiar el header principal

Clases de IONIC

Ionic tiene sus clases propias para aplicar estilos, la información se encuentra en la liga:

https://ionicframework.com/docs/layout/css-utilities

Para esta caso se aplicará una clase para centrar el título

Componentes de IONIC

Los componentes de Ionic se encuentran al igual que las clases en la documentación.

https://ionicframework.com/docs/components

ion-item

Los items pueden contener texto, iconos, avatares, imágenes, entradas y cualquier otro elemento nativo o personalizado. Solo deben usarse como filas en una lista con otros elementos. Se pueden deslizar, eliminar, reordenar, editar, etc.

Agregar las etiquetas ion-item, ion-intput, ion-button, al archivo home.page.html, todas deben ser importadas en el ts

Salida actual de la vista

Agregar el propertie task al .ts de home.page.html e importar FormsModule

Enlazar con ngModel el input al propertie task

Agregar al home.page.html la funcion addTask, por el momento sólo imprimir en consola el valor de task (input)

Mandar llamar la funcion addTask en el evento click del botón

Iconos

Para agregar iconos ir al sitio:

https://ionic.io/ionicons

Para esta caso, se utilizará el ícono +

Buscar el ícono

Dar click sobre el ícono a utilizar, para que se muestre en la parte inferior como utilizarlo

Para esta caso, remplazarlo por el texto de agregar del boton

Importar IonIcon en el .ts

Dentro del constructor de la clase home.page.ts, (que es en donde se utilizará el ícono), agregar la funcion addIcons de la siguiente forma:

Importar addIcons

Dentro del constructor:

Dentro de las llaves, se agregan todos los icono que se utilizarán, separados por comas.

Nomenclaturas ejemplo:

En el html => en el constructor

add-outline => addOutline

add-circle-outline => addCircleOutline

por lo tanto, para este caso:

Construcor de clase

Import en la clase

Vista hasta este punto

Agregando tareas

1) crear un propertie tasks de tipo arreglo de strings

2) completar la función addTask

home.page.ts

home.page.html

ion-alert

Creación de servicio Alert

ng g s alert

De acuerdo a la documentación de IONIC, buscar la función que invoca el alert, copiarla y pegar en el servicio recien creado.

Actualización en el archivo home.page.ts

Actualizando la funcion del servicio que llama al alert

1 Cambio de nombre de función

2 Omitir el subheader

3 Preparar la función para que reciba parámetros

4 Asignación de valores

Cambio en la funcion addTask de home.page.ts

Mostrando las tareas

ion-item-sliding

Agregar el evento click para que llame una función

Agregar la función en el .ts

Actualizar el llamado de la funcion, en el html

Alerta de confirmación en la eliminación de tarea

Ir a la documentación de IONIC => Docs => Alert => ion-alert => Buttons

El objetivo es aprender el uso de las alertas con botones de opciones

En AlertService, crear la funcion confirmAlert con los siguientes parametros

header <= texto en el título

message <= texto del mensaje

functionOk <= es la funcion que se va a ajecutar,

cancelText <= el texto para el botón cancelar

confirmText <= el texto para el botón aceptar

Nota: En el caso de los parametros cancelText y confirmText, si no se les pasa estos parametros al llamar la función, tendran, como valor predeterminados 'Cancelar' y 'Aceptar' respectivamente.

Copiar el contenido de la funcion showAlert y agregarlo en la función nueva confirmAlert

Como se puede ver, el parametro de buttons, es un arreglo, para el caso de la función showAlter, sólo se requiería un elemento, y simplemente el texto, aceptar.

Para esta caso ya que se van a utilizar dos botones y cada uno tiene una diferente funcionalidad, se remplaza el 'OK', por un arreglo de botones como se muestra.

Descripción

Elemento 1: Botón cancelar

text <= el texto que se mostrará en el botón

role <= role para el botón

Elemento 2: Botón aceptar

text <= texto que se mostrará en el botón

role <= role para el botón

handler <= es un callback, que en este caso, llama a la función que se pasó como parámetro.

Actualización en home.page.html

Crear la funcion deleteTask()

Llamar a la función showAlert en el home.page.html, dentro de la función confirmDelete

Esta funcion debe cambiar a la siguiente forma

Eliminación de tarea

Ordenando las tareas

ion-reorder-group, ion-reorder

Crear una función para actualizar el orden de la lista, en home.page.ts

Se agrega la etiqueta ion-reorder-group

Mover todo el ciclo @for, como contenido de la etiqueta ion-reorder-group

Agregar la etiqueta ion-reorder, después de ion-label (el que muestra la tarea)

Si se arrastra y suelta la tarea, se queda atorada en el lugar donde se suelta, no se acomoda en un lugar, para corregir esto, se debe poner al final de la función actualizarPosiciones una instrucción.