El usuario es la parte más importante de nuestros sistemas y debemos garantizar una buena impresión con nuestras aplicaciones. Ext JS cuenta con diferentes efectos visuales que nos permitirán atraer la atención del usuario para informarle el estado del sistema, en este tema se muestran los efectos que podemos utilizar. La clase Ext.Fx es la responsable de agregar esta funcionalidad al objeto Element (del cual hemos hablado anteriormente), utilizamos los métodos de la clase Fx mediante las instancias del objeto Element.

Empaquetando el tutorial

Para iniciar con el tutorial es necesario empaquetar el código que escribiremos, ya sabemos cuales son las ventajas de hacer esto.

Ext.namespace('com.quizzpot.tutorial');

com.quizzpot.tutorial.Fx = {
	init: function(){
		//Aquí el código del tutorial
	}
}
//Ejecutar la función “init” cuando el DOM esté listo para ser usado
Ext.onReady(com.quizzpot.tutorial.Fx.init,com.quizzpot.tutorial.Fx);

Fading

El primer efecto visual que veremos se llama “fade” y existen dos tipos, fadeIn y fadeOut, los cuales ocultan o aparecen suavemente un elemento. Lo que vamos a hacer es crear un botón por cada efecto visual y al presionar ese botón ejecutaremos el efecto visual sobre el elemento que se encuentra en el material de apoyo.

//tomamos el elemento
var el = Ext.get('element');
el.center(); //lo centramos en la pantalla

//cuando se dé clic sobre el botón con id fadeInFx…
Ext.get('fadeInFx').on('click',function(){
	el.setOpacity(0); //le damos opacidad 0 al elemento
	el.fadeIn(); // para que aparezca suavemente
});
//al dar clic sobre el botón fadeOutFx…
Ext.get('fadeOutFx').on('click',function(){
	el.fadeOut(); //desaparece suavemente
});

Este efecto visual puede ser utilizado para eliminar o agregar registros a una tabla o panel y de esta manera llamar la atención del usuario y hacerle notar que algo está pasando.

Frame

El efecto “frame” genera un contorno alrededor del elemento que va creciendo y desapareciendo a la vez.

Ext.get('frameFx').on('click',function(){
	el.frame();
});

Este efecto visual puede ser utilizado para indicarle al usuario que cierta parte de la pantalla requiere su atención; podemos cambiar el color que tiene por defecto por algún otro color como rojo o amarillo los cuales indican advertencia o error, adicionalmente nos permite especificar el número de veces que se quiera repetir el efecto visual, en este ejemplo serán tres repeticiones.

Ext.get('frameFx').on('click',function(){
	el.frame('ff0000',3);
});

Ghost

Normalmente este efecto visual se utiliza para remover elementos de la pantalla, ya que desaparece el elemento suavemente y lo desliza en la dirección definida, por defecto es hacia abajo.

Ext.get('ghostFx').on('click',function(){
	el.ghost();
});

Highlight

Este efecto visual es muy utilizado para mostrar mensajes a los usuarios, de esta manera la atención del usuario es captada al mensaje que se desea mostrar, por defecto el elemento “brilla” en color amarillo, pero puede ser configurado para resplandecer en otro color.

Ext.get('highlightFx').on('click',function(){
	el.highlight('00ff77'); // cambiamos el color por defecto
	Ext.fly('msg').highlight(); //resplandece en color amarillo
});

Puff

Este efecto visual desaparece un elemento haciendo que “explote” y se difumine lentamente.

Ext.get('puffFx').on('click',function(){
	el.puff();
});

Es útil cuando se desea eliminar algún elemento por ejemplo en un carrito de compras, o en alguna galería donde se requiere eliminar una imagen.

Scale

Con este efecto visual podemos redimensionar un elemento, haciendo una transición de sus medidas actuales a las nuevas.

Ext.get('scaleFx').on('click',function(){
			el.scale(50,50);
});
Ext.get('scale2Fx').on('click',function(){
	el.scale(100,100);
});

El primer parámetro que recibe el método es el “width” y el segundo parámetro es el “height” del elemento.

Slide

Existen dos tipos del efecto “slide”, el “slideIn” y el “slideOut”, estos efectos permiten aparecer y desaparecer elementos de la pantalla de una manera llamativa, puede ser una alternativa para alguno de los afectos anteriores.

Ext.get('slideInFx').on('click',function(){
	el.slideIn(); //aparece el elemento
});
Ext.get('slideOutFx').on('click',function(){
	el.slideOut(); //desaparece
});

Este efecto visual puede ser utilizado para crear algún menú vistoso, galerías, transición de imágenes, el límite es tu imaginación.

Shift

Este efecto visual permite cambiar la posición, dimensiones y/o opacidad al mismo tiempo, es ideal para combinar varias propiedades que se deseen cambiar.

Ext.get('shiftFx').on('click',function(){
	el.shift({
		x: 100,
		y: 200,
		width: 200,
		height: 200
	});
});

Es importante mencionar que forzosamente se tiene que especificar alguna propiedad a cambiar de lo contrario al ejecutar el método sin argumentos no se realizará ningún efecto visual ya que no se le definió el comportamiento requerido.

Posiciones

La mayoría de los efectos visuales mencionados soportan las siguientes direcciones de movimiento en los efectos. tl: Esquina superior izquierda (The top left corner) t: El centro superior (The center of the top edge) tr: La esquina superior derecha (The top right corner) l: El centro izquierdo (The center of the left edge) r: El centro derecho (The center of the right edge) bl: La esquina inferior izquierda (The bottom left corner) b: El centro inferior (The center of the bottom edge) br: La esquina inferior derecha (The bottom right corner)

Easing

Para aplicar aceleración o desaceleración a los efectos podemos especificarle algún tipo de “easing” de la siguiente lista: easeNone easeIn easeOut easeBoth easeInStrong easeOutStrong easeBothStrong elasticIn elasticOut elasticBoth backIn backOut backBoth bounceIn bounceOut bounceBoth

Ext.get('scale3Fx').on('click',function(){
	el.scale(200,200,{
		easing:'elasticOut',duration:2
	});
});

Con esto logramos animaciones más llamativas, dándole al usuario una mejor experiencia al utilizar nuestros sistemas.

Conclusiones

Los efectos son una parte importante para mejorar la experiencia del usuario, algunos desarrolladores pueden pensar que esto es una pérdida de tiempo, pero la realidad es que los pequeños detalles son los que marcan la diferencia entre el éxito y el fracaso.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!