Aprendiendo Ext JS 3

Aplicar efectos visuales a Elementos Más videos

Descripción del tema

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

12Comentarios

  • Avatar-10 Crysfel 01/04/2009

    El video tiene un pequeño error, y es que me confundí al decir "efecto", varias veces dije "evento" en lugar de "efecto"... se nota claramente cuando me estoy refieriendo a un efecto, la verdad es que estaba medio soñoliento cuando lo grabe :(

    • Avatar-12 David 02/04/2009

      Esperando impaciente el siguiente ;)

      • Avatar-3 Urumitero 13/05/2009

        Excelente curso! Muchas gracias, de verdad!

        • Avatar-3 Ronhead 14/05/2009

          Muy buenos tus videos...gracias por el material

          • Avatar-11 Gustavo 17/06/2009

            tengo un problema no carga el video tutorial

            • Avatar-1 Osvaldo 15/07/2009

              jeje.. perfecto socio tambien espero el siguiente

              • Avatar-10 gorrion 16/07/2009

                Muchas gracias por el tutorial, la verdad es que profesionaliza las paginas web, tengo una pregunta, ¿que se puede hacer para que algunos efectos no queden fijos, por ejemplo el scale easing? Gracias

                • Avatar-6 spit 20/07/2009

                  Que chulos los efectos... con esto se le puede dar un toque mucho mas atractivo y ameno al usuarios a la hora de interactuar con la aplicacion.

                  • Avatar-3 jairo 23/09/2009

                    Te felicito, la verdad es que viendo estos videos cualquiera se anima, con la facilidad con que lo explicas. Gracias.

                    • Avatar-12 Santiago Pineda 29/12/2009

                      Esto esta... que pena la palabra, espero que la entiendan..."Brutal", fenomenal, muy bueno, en la version "ext-3.1.0" creo que hay problemas con la funcion fadeIn y fadeOut, parece que no se recuperara.

                      • Avatar-7 Pedro 10/09/2010

                        Muy buen tuto, te felicito...!!!

                        • Avatar-4 chapa 28/06/2011

                          Sos un capooo. estoy iniciandome en esto. me gustaria si tienes material. o clases online. saludos

                          Instructor del curso

                          Crysfel3

                          Autor: Crysfel Villa

                          Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                          Descarga Código Fuente Ver Demostración

                          Regístrate a este curso

                          Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                          Tendrás acceso a descargar los videos, códigos y material adicional.

                          Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                          Llevarás un registro de tu avance.