Bienvenidos al tercer post de Ionic Framework. En este artículo seguiremos con el proyecto creado en el post anterior con el nombre tabsProject en donde estaremos hablando sobre algunos de los distintos elementos que podemos agregar a nuestra aplicación y también veremos la forma de como debemos interactuar con ellos mismos.
Introducción
Ionic cuenta con una gran cantidad de componentes de los cuales podemos hacer uso para nuestra aplicación así de esta manera satisfacer las necesidades de los usuarios.
Para ver que componentes cuenta Ionic debemos acceder a su sitio oficial en donde podremos implementar cada uno de ellos.
Componentes
A continuación veremos e implementaremos una serie de componentes de los cuales nos brinda Ionic Framework.
Action Sheets
Las Action Sheets o en español Hojas de acción se deslizan hacia arriba desde la parte inferior de la pantalla de nuestro dispositivo mostrando una serie de opciones las cuales tienen como capacidad de confirmar o cancelar una acción. Estas en ciertos casos se pueden usar como alternativa a los menú, pero no esta permitido usarse como forma de navegación por nuestra aplicación.
Las action sheets aparecen siempre por encima del resto de los componentes y para darle una mayor importancia se oscurece el fondo para darle prioridad a la misma.
Implementación
Vamos a implementar esta acción dentro del Home de nuestra aplicación, lo cual basta con modificar 2 archivos los cuales están ubicados dentro de nuestro proyecto tabsProject.
Primero que nada modificaremos el contenido entero de nuestro archivo home.html el cual esta ubicado en la ruta src/pages/home/home.html colocando lo siguiente.
<ion-content padding> <ion-header> <ion-navbar> <ion-title>Home Action Sheets</ion-title> </ion-navbar> </ion-header> <ion-content padding class="action-sheets-basic-page"> <h2>Bienvenidos Ionic!</h2> <button ion-button block (click)="openMenu()"> Action Sheet </button> </ion-content> </ion-content>
Luego de tener nuestra vista html modificada deberemos de crear la funcionalidad para que se despliegue el menú en nuestro dispositivo, esto lo hacemos modificando el archivo home.ts el cual esta ubicado en la ruta src/pages/home/home.ts de nuestro proyecto.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform, ActionSheetController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public platform: Platform,
public actionsheetCtrl: ActionSheetController) {
}
openMenu() {
let actionSheet = this.actionsheetCtrl.create({
title: 'Albums',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Eliminar',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Compartir',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Ejecutar',
icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favoritos',
icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancelar',
role: 'cancel', // will always sort to be on the bottom
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}}
Una vez hecho estos dos cambios ya podremos visualizar e interactuar con nuestra aplicación. Recuerden que como se menciono en el post anterior para ejecutar la aplicación debemos de posicionarnos en la carpeta de nuestro proyecto y correr el comando ionic serve. Una vez hecho esto se nos abrirá una ventana en nuestro navegador en donde deberemos de activar el modo de desarrollador como se menciono en el post anterior.
Alerts
Las alertas sirven para brindarle al usuario la posibilidad de elegir una acción especifica, así como también pedir confirmación para la ejecución de cierta función y ademas sirven para brindar información importante al usuario.
Desde la parte visual que ve el usuario estas se pueden definir como un formulario flotante que por lo general se ubica en el centro de la pantalla cubriendo únicamente una parte de la misma. Esta función se puede utilizar como para acciones de verificación de la contraseña, notificaciones de la aplicación o como opciones rápidas. Esta al igual que el Action Sheet se posiciona por encima de todos los elementos y coloca el fondo en un color mas oscuro para darle importancia a la misma.
Implementación
Para implementar este tipo de alertas basta con crear un botón en la página que nosotros queramos y luego hacer llamado de la función que desplegara el mensaje. En nuestro caso implementaremos 2 tipos de alertas, una básica y la otra que solicite ingresar un texto para así de esta forma conoceremos 2 ejemplos.
Primero que nada realizaremos esta acción en el apartado de Nosotros colocando el siguiente código en el archivo about.html que esta en la ruta src/pages/about/about.html.
<ion-header> <ion-navbar> <ion-title> Nosotros </ion-title> </ion-navbar> </ion-header> <ion-content padding class="action-sheets-basic-page"> <button ion-button block (click)="mostrarAlerta()"> Alerta Simple </button> <button ion-button block (click)="mostrarAlertaRapida()" color="secondary"> Alerta Rápida </button> </ion-content>
Luego de generar este archivo deberemos de crear las 2 funciones que se llaman mostrarAlerta y mostrarAlertaRapida, en donde estas van a mostrar los diferentes mensajes de alerta mencionados anteriormente. Para crear estas funciones debemos editar el archivo about.ts que se encuentra en la ruta src/pages/about/about.ts y debemos colocar lo siguiente.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
@Component({
selector: 'page-about',
templateUrl: 'about.html'
})
export class AboutPage {
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
}
mostrarAlerta() {
let alert = this.alertCtrl.create({
title: 'Hola Ionic!',
subTitle: 'Este es un mensaje proveniente de una alerta!',
buttons: ['OK']
});
alert.present();
}
mostrarAlertaRapida() {
let prompt = this.alertCtrl.create({
title: 'Hola Ionic!',
message: "Ingrese su nombre en el campo de abajo por favor",
inputs: [
{
name: 'nombre',
placeholder: 'Tu nombre'
},
],
buttons: [
{
text: 'Cancelar',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Guardar',
handler: data => {
console.log('Saved clicked');
}
}
]
});
prompt.present();
}
} Una vez hecho esto si no tenemos corriendo nuestro servidor debemos levantarlo y al posicionarnos en el tab «Nosotros» veremos 2 botones, uno azul con el nombre Alerta Simple el cual una vez lo presionemos se mostrara un mensaje simple, y otro botón verde con el nombre Alerta Rápida el cual nos desplegara una alerta en donde nos solicitará ingresar nuestro nombre.
Listas
Para finalizar este post de componentes agregaremos una lista de contactos en nuestro tabs Contactos, la cual estará ordenada alfabéticamente simulando una agenda.
Implementación
En este caso vamos a generar una agenda estática, esto quiere decir que colocaremos la información de los contactos a mano y no lo generaremos de forma dinámica. Lo que debemos de hacer es modificar el archivo contact.html el cual esta ubicado en la ruta src/pages/contact/contact.html de nuestro proyecto colocando lo siguiente.
<ion-header> <ion-navbar> <ion-title> Contactos </ion-title> </ion-navbar> </ion-header> <ion-content> <ion-item-group> <ion-item-divider color="light">A</ion-item-divider> <ion-item>Angel</ion-item> <ion-item>Andrés</ion-item> <ion-item>Alvaro</ion-item> <ion-item>Alexa</ion-item> <ion-item>Armando</ion-item> </ion-item-group> <ion-item-group> <ion-item-divider color="light">B</ion-item-divider> <ion-item>Bruno</ion-item> <ion-item>Belen</ion-item> <ion-item>Benito</ion-item> <ion-item>Benjamín</ion-item> <ion-item>Bernabé</ion-item> <ion-item>Berenice</ion-item> </ion-item-group> <ion-item-group> <ion-item-divider color="light">C</ion-item-divider> <ion-item>Carlos</ion-item> <ion-item>Claudio</ion-item> <ion-item>Camila</ion-item> <ion-item>Camelia</ion-item> <ion-item>Carmen</ion-item> <ion-item>Cecilia</ion-item> <ion-item>Carola</ion-item> <ion-item>Cristiano</ion-item> <ion-item>Cristian</ion-item> <ion-item>César</ion-item> </ion-item-group> </ion-content>
De esta manera una vez corramos nuestra aplicación en la sección de contacto veremos un listado con los valores que colocamos recientemente en el archivo.
Conclusión
Ionic Framework cuenta con una serie de complementos de los cuales son fáciles de implementar, con tan solo modificar 2 archivos ya podemos estar corriendo en la aplicación los nuevos componentes implementados. Es muy importante leer la documentación del sitio oficial de ellos ya que ahí se explica con exactitud para que sirve cada uno de ellos.
Si te ha gustado este post sigue atento nuestra serie de ‘Manual de Ionic Framework – Parte 4‘ que publicaremos pronto.