Mensajes y alertas al usuario
Apr 02, 2009 | Español | By Crysfel | 25 Comments | Read in EnglishLos mensajes son importantes para la interacción del usuario con nuestros sistemas, Ext JS cuenta con un componente especial para remplazar los típicos mensajes “alert” o confirmaciones por unos más llamativos.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
Material de apoyo
Antes de seguir adelante es necesario descargar el material de apoyo para este tema, el cual contiene un HTML con varios botones y algunos estilos, un archivo JS vacío en el cual trabajaremos y una imagen la cual usaremos para el ejercicio, puedes además ver una demostración de lo que haremos en este tutorial.
Empaquetando el ejemplo del tutorial
Vamos a definir un “paquete” en donde estaremos trabajando, hemos visto las ventajas de realizar esto anteriormente.
Ext.ns('com.quizzpot.tutorial');
com.quizzpot.tutorial.Msg = {
init: function(){
//Aquí iré el código del tutorial
}
}
//cuando el DOM este listo ejecutamos la función “init”
Ext.onReady(com.quizzpot.tutorial.Msg.init,com.quizzpot.tutorial.Msg);
Alertas
Mediante el componente “Ext.MessageBox” Ext JS nos proporciona los métodos necesarios para generar diferentes tipos de mensajes, uno de estos son los “alerts”, los cuales los generamos de la siguiente manera:
Ext.MessageBox.alert('Titulo','El mensaje que queremos dar');
//podemos usar el atajo
Ext.Msg.alert('Titulo','El mensaje que queremos dar');
Ahora vamos a agregarle el evento clic al botón “alert” que se encuentra en el HTML, dentro de este evento vamos a desplegar una mensaje de alerta.
Ext.get('alert').on('click',function(){
Ext.Msg.alert('Alerta','Esto es una alerta!');
},this);
De esta manera cuando presionemos el botón “Alert” se mostrará el mensaje que definimos en el código anterior.
Confirmación
Para mostrar una confirmación utilizamos el método “confirm”, en el siguiente ejemplo se le agrega el evento clic al botón de “confirmación” de la siguiente manera:
Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estás seguro de querer hacer esto?');
},this);
Más adelante veremos como detectar el botón presionado y tomar las acciones correspondientes, por ahora nos conformaremos con mostrar el diálogo.
Prompt
Este componente nos permite solicitar al usuario información mediante un diálogo que contiene una caja de texto. En el siguiente código le agregamos el evento clic al botón correspondiente y cuando se dispara el evento únicamente se despliega un mensaje solicitando el nombre del usuario.
Ext.get('prompt').on('click',function(){
Ext.Msg.prompt('Prompt','¿Cual es tu nombre?');
},this);
Más adelante veremos como capturar la información que el usuario ha introducido en la caja de texto.
Wait
Mediante este método podemos mandar al usuario un mensaje de espera, este mensaje contiene una barra de progreso la cual avanza lentamente indicando que algo está sucediendo.
Ext.get('wait').on('click',function(){
Ext.Msg.wait('Cargando... porfavor espere!');
},this);
Si dejamos así el código anterior el mensaje se quedará ahí por siempre ya que no tiene opción de cerrarse, esto sucede por que nosotros debemos cerrarlo manualmente mediante una instrucción, normalmente lo cerraríamos cuando el proceso que lanzamos ha terminado, por ahora simplemente voy a mandar un “timeout” para cerrar el mensaje después de 6 segundos.
Ext.get('wait').on('click',function(){
Ext.Msg.wait('Cargando... porfavor espere!');
window.setTimeout(function(){
Ext.Msg.hide();
},6000);
},this);
Es importante mencionar que el método “hide” cierra cualquier mensaje que se esté mostrando en ese momento.
Callbacks
Los métodos anteriores (excepto el wait) reciben como tercer parámetro una función, esta función será ejecutada cuando el usuario de clic en algún botón o cuando cierre el mensaje, esta función recibe como primer parámetro el botón al cual el usuario dio clic, y en el caso del método “prompt” recibe un segundo parámetro donde viene el texto que el usuario introdujo en la caja de texto, a continuación se muestra como podemos ejecutar ciertas instrucciones de acuerdo a lo que el usuario eligió en un mensaje de confirmación.
Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estas seguro de querer hacer esto?',function(btn){
if(btn === 'yes'){
//si el usuario aceptó
alert('Has aceptado los terminos!')
}else{
//si el usuario canceló
alert('El usuario cancelo')!
}
});
},this);
También podemos pasarle una función para ser ejecutada de la siguiente manera:
Ext.ns('com.quizzpot.tutorial');
com.quizzpot.tutorial.Msg = {
init: function(){
// código removido para mayor compresión…
Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estas seguro de querer hacer esto?',this.callback);
},this);
// código removido para mayor compresión…
},
callback: function(txt){
alert(txt);
}
}
En el ejemplo anterior se creo una función dentro del objeto “Msg” la cual es invocada cuando el usuario da clic en algún botón del mensaje de confirmación.
Mensajes personalizados
Si necesitamos desplegar algún mensaje personalizado, por ejemplo cambiar el icono del mensaje o bien utilizar otros botones, entonces podemos hacerlo mediante el método “show” el cual recibe un objeto de configuración.
Ext.get('custom').on('click',function(){
Ext.Msg.show({
title: 'Personalizado', //<- el título del diálogo
msg: 'Esto es un mensaje personalizado!', //<- El mensaje
buttons: Ext.Msg.YESNO, //<- Botones de SI y NO
icon: Ext.Msg.ERROR, // <- un ícono de error
fn: this.callback //<- la función que se ejecuta cuando se da clic
});
},this);
Este es un mensaje que tiene un ícono de error, existen otros íconos que podemos utilizar:
Ext.Msg.ERROR //Icono de error Ext.Msg.INFO //Icono de información Ext.Msg.WARNING //Icono de advertencia Ext.Msg.QUESTION //Icono de pregunta
Si necesitamos mostrar algún otro ícono debemos crear una clase CSS para poner la imagen como background de la siguiente manera:
.profile{
background:transparent url(profile.png) no-repeat;
}
Luego de esto se le especifica el nombre de la clase a la propiedad ‘icon’.
Ext.Msg.show({
title: 'Personalizado',
msg: 'Este es un mensaje personalizado!',
buttons: Ext.Msg.YESNO,
icon: 'profile', // <- ícono personalizado
fn: this.callback
});
Conclusiones
Ext JS cuenta con estos métodos para comunicarse con el usuario los cuales podemos usarlos en lugar de los típicos “alert” o “confirm” que vienen por defecto con el explorador, permitiendo hacer los mensajes más llamativos.
saludos
excelente tutorial mi amigo!!!!