Como utilizar Alert en Ionic con ejemplos prácticos

¿Buscas cómo puedes utilizar los Ionic Alert? o, tal vez, estás buscando algo concreto sobre ellos, sus propiedades o su estilo. Si la respuesta a esta consulta, o una que pueda estar relacionada con ella, es afirmativa, déjame decirte que no eres la única, ni serás la última, persona que lo esté buscando. Es más, incluso los desarradores más experimentados tienen que buscar este típo de artículos cuando hacen uso de cualquier sistema.

Y, por si no me conoces aún, mi nombre es Aitor Sánchez González y soy desarrollador de software, centrado en apps móviles y servicios de back end para las mismas, desde el año 2014. Y en el artículo de hoy te explicaré que son los Alert ionic (ventanas modales o popup) en Ionic y cómo podemos utilizarlos.

En primer lugar, hablar de que se trata de un control muy versátil e importante en el desarrollo de aplicaciones híbridas con este Framework. Cuenta con una codificación muy sencilla y le da ese toque Premium a nuestras apps de forma elegante y minimalista a la vez.

Ionic alert controller es válido tanto para Android como para iOS aunque, como pasa siempre, la estética de nuestro modal será diferente depende donde ejecutemos la app.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

AlertController ionic, ¿Qué es? Veamos un ejemplo / example

Pues bien, alert controller ionic es el controlador encargado de darnos acceso a toda la funcionalidad de los Alerts de manera programática.

Como ya conocemos, en primer lugar tenemos que importar “AlertController” como dependencia a nuestra aplicación.

Para ello abrimos nuestro archivo “app.module.ts” Y en la sección de “imports” llamamos a la clase “AlertController” (En versiones nuevas de Ionic no es necesario hacerlo, pero si no lo hacéis y os falla ya sabéis por lo que es) Veamos un ejemplo.

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    ...
    AlertController, //Esta es la línea importante.
    ...
  ]
})

¿Veis que sencillo? Ya lo podemos inyectar en nuestros componentes.

Diferencias entre Android e iOS

Antes de continuar, me gustaría que vieras la diferencia que existe entre plataformas in app. La verdad, que como sucede en el 90% de los componentes de Ionic, es solo diferencia visual. Aquí va:

Nota: La vista es un poco diferente al AlertDialog que tenemos de manera nativa en Android / Java, pero bueno. No se puede pedir peras al olmo.

No es el típico Alert de JS

Bien, muchos de vosotros, sobre todo los que os dedicáis al desarrollo web podéis confundir este tipo de componente con los Alert de JS.

Alert como confirm, prompt o el mismo alert no son lo que estamos tratando en este artículo. Lo siento, si has venido buscando eso, este no es tu sitio.

Como construir un Ion-alert

Esta es la parte principal del Ejemplo, lo primero que tenemos que ver es cómo podemos construir un Alert y usarlo, atento:

import { AlertController } from 'ionic-angular';

constructor(private alertCtrl: AlertController) {

}

presentAlert() {
  let alert = this.alertCtrl.create({
    title: 'Low battery',
    subTitle: '10% of battery remaining',
    buttons: ['Dismiss']
  });
  alert.present();
}

presentConfirm() {
  let alert = this.alertCtrl.create({
    title: 'Confirm purchase',
    message: 'Do you want to buy this book?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Buy',
        handler: () => {
          console.log('Buy clicked');
        }
      }
    ]
  });
  alert.present();
}

presentPrompt() {
  let alert = this.alertCtrl.create({
    title: 'Login',
    inputs: [
      {
        name: 'username',
        placeholder: 'Username'
      },
      {
        name: 'password',
        placeholder: 'Password',
        type: 'password'
      }
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        handler: data => {
          console.log('Cancel clicked');
        }
      },
      {
        text: 'Login',
        handler: data => {
          if (User.isValid(data.username, data.password)) {
            // logged in!
          } else {
            // invalid login
            return false;
          }
        }
      }
    ]
  });
  alert.present();
}

Como habéis podido ver en este código la construcción es muy sencilla. En primer lugar, inyectamos el controlador de las alertas (AlertController) en el constructor de nuestro controlador.

Para poder construir un nuevo objeto Alert basta con que llamemos a la función “create” de nuestro objeto “AlertController” y le pasemos los parámetros que vamos a ver a continuación:

Nota: (Tiene más parámetros que explicaremos después)

title -> string -> El título que aparecerá en la parte superior de nuestro alert

subTitle -> string -> El texto informativo que aparecerá en nuestro contenedor.

buttons -> array -> Los botones que queremos que aparezcan en nuestro alert. Una nota en este punto, puedes asignarle tanto un string a cada hueco del array o construir un botón. Si le asignas un String aparecerá un botón con ese string como texto pero no podemos controlar el click del mismo, simplmente cerrará la ventana modal.

Una vez rellenados los campos basta con llamar al método “show” para que se muestre. ¿”Genital” verdad? 😛

Genial, ya hemos visto cómo podemos construir un Alert en Ionic de manera muy sencilla. Ahora vamos a profundizar un poco.

¿Funciona Alert en Angular JS?

Esto tiene dos matices, ¿estas desarrollando App Web con Ionic? En caso afirmativo lo podrás usar sin problemas. En caso negativo, y si estás haciendo la web con Angular a pelo, no funcionará de manera nativa, tendrás que importar las librerías respectivas de Ionic en tu proyecto.

Me ha parecido correcto poner este punto aquí porque la confusión que hay en torno a este componente es grande. Y me gusta dejar las cosas lo más claras posibles.

Bien, visto esto seguimos adelante.

Propiedades del AlertController de Ionic

Como he dicho antes, vamos a ver las propiedades que tiene este objeto.

AlertOptions:

• Title -> string -> El título de nuestro modal.
• subTitle -> string -> El texto descriptivo que aparecerá en nuestro alert
• message -> string -> El mensaje que queramos incluir en el contenedor de nuestra ventana.
• cssClass -> string -> En caso de que queramos agregar una clase extra a nuestro alert, esta es la zona indicada. Si queremos agregar más de una separarlas por un espacio.
• Inputs -> array -> Un array de campos de entrada de texto para el usuario. Veremos sus opciones más abajo.
• Buttons -> array -> Un array con los botones que vamos a incluir en nuestro componente. Ahora veremos las opciones.
• enableBackdropDismiss-> boleano -> Este campo sirve para decir a nuestro sistema si queremos que la ventana se cierre / close cuando pulsamos fuera de ella o no.

InputsOptions:

Antes hemos dicho que veríamos las propiedades de los inputs. Bien, pues estas son:

Nota: Cada uno de los huecos del array de inputs que hemos visto en el AlertOptions tiene acceso a estas propiedades

• Type-> string -> El tipo de input que queremos agregar. Text, tel, number, pass, bar, etc…
• Name -> string -> El nombre del campo para luego controlarlo desde código. Similar a el name de un field de un form.
• Placeholder-> string -> El texto que ira como ayuda dentro del campo y que desaparece cuando hacemos focus en el componente.
• Value -> string -> El valor por defecto del input.
• Label -> string -> En caso de que queramos que el input lleve un pequeño texto encima, esta es la propiedad adecuada.
• Checked -> boolean -> En caso de que tengamos un checkbox o un radiobutton, esta propiedad le asignará el estado en el que aparece.
• Id -> string -> En caso de que queramos asignar un ID de nuestro input para luego tratar con él alguna entrada o salida, esta es la propiedad.

Sencillo ¿verdad? Ahora veamos las de los botones.

ButtonOptions:

• Text -> string -> El texto que aparecerá en el botón.
• Handler -> any -> La función que será llamada cuando el botón sea pulsado.
• cssClass -> string -> Como en las opciones anteriores, las clases separadas por espacios que queremos que tengan nuestros componentes.
• Role -> string -> “cancel” o vacío. Sirve para decirle a nuestro componente si queremos que ese botón sirva para cerrar el alert.

Bueno, visto hasta aquí ya estamos en condiciones de poder usar correctamente nuestro AlertController. A partir de aquí vamos a ver más cosillas un poquito más avanzadas.

Control de errores en Alert

Veamos, como comento siempre sobre estos temas cuando me preguntan. Es algo bastante lógico que tengamos dudas sobre esto.

Por regla general, se debe a una lógica incorrecta de nuestro código. Vamos, que el fallo lo tiene el programador, no el programa.

Puede que suene un poco fuerte, pero es totalmente cierto. Sabemos que el FW tiene fallos, porque los tiene, como todos, pero a este nivel no los vas a encontrar. Es muy extraño que un componente, en su capa de visualización, creación o control tenga errores que no estén solucionados ya.

Te invito, a que si tienes cualquier problema con esto, me mandes un correo, o dejes un comentario, y estaré encantado de ayudarte J

¿Puedo ponerle un style personalizado a la caja / box del Alert?

Vamos a matizar un poco aquí. Si tú quieres modificar la apariencia del componente, claro que puedes, mediante CSS como hemos hecho toda la vida de dios. Le asignamos la clase CSS en la propiedad correspondiente, que la tienes un poco más arriba en el artículo, y listo.

Pero si quieres tocar el comportamiento, eso ya es un poco más complejo. Ahora mismo no te voy a explicar cómo se hace, por que daría para un artículo entero, pero ese artículo lo haré, y tu podrás leer como realizarlo. Una pista, tocaremos las directivas, comportamientos y el display de una manera lógica y entendible extendiendo el componente mediante la herencia.

Redirect / o control de navegación en Ionic Alert

Continuamos hablando de AlertControler, ahora toca el tema de usar la navegación desde el componente.

Esto hay muchas maneras de hacerlo. La que yo personalmente utilizo es la de toda la vida, porque siempre me ha funcionado y no he tenido problemas nunca. Se trata del NavController simplemente llamando a la función “setRoot” o “add” de este controlador para cambiar de página y posteriormente, en el handler del botón, llamamos al “dismis” del AlertController y listo.

Se pueden poner Icon/s en los botones o Inputs

Hummm, esto es interesante. A la fecha de escribir estas líneas, y concretamente en este componente, no podemos poner, de manera sencilla, un icono en los botones o inputs.

Haber, poder, podemos. Pero para hacerlo tendremos que tocar el html del componente, o bien extendiendo el componente, tocándolo mediante CSS o con las funciones de acceso al DOM que nos provee ionic.

Una putada, pero es así.

Cambiar el color de los botones / button color

Esta es otra de esas cosas que me preguntan con bastante asiduidad. Aitor, ¿cómo puedo cambiar el color de los botones de un Alert en Ionic?

Pues esto tiene una respuesta muy sencilla. Como hemos visto en las opciones de los botones, se les puede asignar una clase CSS ¿verdad? Pues ahí tienes tu respuesta. Basta con que le asignes la clase correspondiente y whoala. Ya tendrás tu puntero para modificar lo que veas oportuno de el botón / botones que quieras.

Apunte adicional, Ionic usa componentes de BootStrap

Si amigos, así es. Con toda la proliferación que ha tenido este FW CSS en desarrollo responsive. Era de esperar que se uniera directa o indirectamente a Ionic.

Aunque modificado, el uso es muy similar e intuitivo. Si tienes conocimiento de este FW no tendrás problema en entender el uso de los componentes de Ionic y las plantillas / templates.

¿Y los eventos del Alert?

El modal que se levanta cuando el método “create” del “AlertController” es llamado se llama “onShow”.

Al igual que cuando se cierra se llamará a la function “onDismiss”. Tiene alguno más y los que hereda de los padres, pero ya está.

Más contenidos del curso:

Ionic App Center Push | Así podrás utilizarlo en tus apps

¿Pensando en implementar la librería Ionic App Center Push en tu aplicación Continuar leyendo

Exoplayer Ionic | Qué es y cómo se utiliza e implementa

¿Quieres saber cómo implementar Exoplayer Ionic en tu aplicación móvil? O, quizás, Continuar leyendo

Document Viewer en Ionic de 0 a PROFESIONAL

¿Pensando en implementar la api Document Viewer Ionic en tu aplicación para Continuar leyendo

Photo Library Ionic | Cómo acceder a las fotos del dispositivo

¿Dentro de tu app vas a permitir que el usuario cargue imágenes Continuar leyendo

Modals Ionic | Todo lo que necesitas saber

¿Quieres aprender cómo se usan las ventanas modales, o modals, en Ionic? Continuar leyendo

Y el turorial en video, para los más ganduletes

Bueno, pues creo, que con esto y un bizcocho hasta mañana las 8. Espero que el artículo os haya sido de utilidad, que para eso lo he escrito, y que si ha sido así lo compartas con tus amigos / compañeros. Así me echas una manilla a seguir escribiendo. Un saludo.