Editando una Imagen Más videos
Comentarios: 0
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
En esta ocasión veremos como interactuar con una imagen por medio de sliders, los cuales nos ayudaran a que este elemento pueda ser editado. Veremos cómo cambiar propiedades básicas de nuestro elemento.
En este tutorial vamos a modificar mediante los sliders la opacidad y dimensiones de una imagen, esto nos permitirá comprender el uso adecuado de componente “Ext.slier.SingleSlider”, la siguiente imagen es un ejemplo de lo que obtendremos al final del tutorial:
Resultado Final
Empaquetando el Tutorial
Vamos a empaquetar el código para evitar conflictos con otras variables.Ext.ns(“com.quizzpot.tutorial”);
com.quizzpot.tutorial.SliderTutorial= {
init : function(){
//code
}
}
Ext.onReady(com.quizzpot.tutorial.SliderTutorial.init, com.quizzpot.tutorial.SliderTutorial);
Colocando la Imagen
Lo primero que haremos es crear la estructura html sobre la cual trabajaremos a lo largo del tutorial.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Demo: Slider | Quizzpot</title>
<link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../resources/style.css" />
<script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.2.1/ext-all.js"> </script>
<script type="text/javascript" src="slider.js"></script>
<style type="text/css">
#frame{width:800px;height:400px;margin:50px;}
#canvas{width:595px;height:100%;overflow:hidden;border:1px solid #99BBE8;float:left;}
#tools{width:200px;height:100%;float:right;}
</style>
</head>
<body>
<div id="frame">
<div id="canvas">
<img src="mac-book-pro.png" id="img">
</div>
<div id="tools">
</div>
</div>
</body>
</html>
Lo que hicimos fue crear tres divs, el primero es “frame” este es el div en el cual se encontraran alojados los otros divs que es “canvas” en el cual colocaremos la imagen que editaremos en el tutorial, y por ultimo está el div “tools” este lo usaremos para renderizar el panel con los slider.
También creamos estilos para nuestros divs con estos estilos posicionamos y les asignamos un tamaño.
Si ejecutamos el html podemos ver que solo tenemos los divs y la imagen, lo primero que haremos es tomar la imagen por su id, el código que aparece a continuación debe ir en el archivo slider.js dentro de la función init.
var el = Ext.get('img'),//step 1
frame = Ext.get("canvas"); //step 2
el.setWidth("50%"); //step 3
setTimeout(function(){
el.center(frame);
},500);
En el paso uno lo que hacemos es obtener la imagen por medio de su id el cual está definido dentro de nuestro documento html.
En el paso dos obtenemos el div donde está colocada la imagen.
En el paso tres cambiamos el tamaño de la imagen usando “setWidth()”.
Usamos “setTimeout()” para ejecutar la función después del tiempo marcado en milisegundos, esto da tiempo para que a se pueda calcular el nuevo tamaño de la imagen.
Y por último usamos “center()” para colocar la imagen en el centro, si notamos le pasamos como parámetro “frame” esta causara que se centre dentro del div “canvas” que es el espacio que dedicamos para colocar nuestra imagen.
Colocando la Imagen
Creando los Sliders
Ya que tenemos nuestra imagen lista, lo siguiente es colocar los sliders “size” y “opacity” con los cuales podremos manipular el tamaño y la trasparencia de nuestra imagen, lo haremos de la siguiente manera:var size = new Ext.slider.SingleSlider({ //step 1
fieldLabel : "Size",
width : 100, // el tamaño que tendrá el slider
minValue : 20, // el valor mínimo que se obtendrá del slider
maxValue : 120, //el valor máximo que obtendrá el slider
value : 50, //valor inicial que tendrá el slider
plugins : tip
});
var opacity = new Ext.slider.SingleSlider({ //step 2
fieldLabel : "Opacity",
width : 100,
increment : 10, // el slider tendrá un aumento de 10 en 10
minValue : 0,
maxValue : 100,
value : 100,
plugins : tip //step 3
});
En el paso uno creamos el slider “size”, y si vemos en el paso dos se crea el slider “opacity” ambos tienen los mismos atributos solo cambia el atributo “imcremenent” que se encuentra en “opacity”.
Notemos que estamos usando un “SingleSlider” ya que este componente nos permite renderizarlo verticalmente si es que lo deseamos.
En el paso tres lo que hacemos es pasarle los “tips” a los sliders vía “plugins” pero para esto tenemos que crearlos antes de crear los sliders, lo haremos dela siguiente manera:
Ext.QuickTips.init(); //step 1
var tip = new Ext.slider.Tip({ // step 2
getText: function(thumb){ // step 3
return String.format('{0}%', thumb.value);
}
});
En el paso uno iniciamos los QuickTip, es importante que esto solo se tiene que declarar una vez en todo el proyecto.
En el paso dos creamos una instancia de “Ext.slider.Tips” y en el paso tres lo que hacemos es sobre escribir el método “getText” esto es con el fin de que en el tip se vea el signo “%” de lo contrario solo se desplegará el valor del slider.
Ya que tenemos nuestros sliders lo siguiente es colocarlos en un panel para poder mostrarlos, el panel quedaría de la siguiente manera:
new Ext.Panel({
renderTo : "tools",
title : "Settings",
collapsible : true,
labelWidth : 60,
layout : "form",
frame : true,
items : [size,opacity]
});
Con esto el resultado debe ser parecido a esto:
Sliders Dentro del Panel
Interactuando con la Imagen
Ya que tenemos listo nuestros slider lo siguiente es crear las funciones que harán que nuestra imagen pueda cambiar de tamaño y el valor de la opacidad.size.on("change",function(slider,value){
el.setWidth(value+"%")
el.center(frame);
});
Lo que el código anterior hace es usar el evento “change” el cual se ejecuta cuando el usuario cambia el valor del slider, recibe como parámetros el slider mismo y el nuevo valor, por ultimo usamos nuevamente “set.Width()” y le pasamos como parámetro el valor que se obtiene del slider, con esto podemos cambiar el tamaño de la imagen, es importante mencionar que no es necesario cambiar la altura de la foto ya que el navegador la calcula basándose el ancho de esta.
Por ultimo solo centramos la foto en el div para que después del cambio de tamaño, siempre este en el centro, recuerda que le pasamos “frame” para que lo centre en el div contenedor.
Lo siguiente es cambiar la opacidad de la foto y eso lo haremos de una manera similar :
opacity.on("change",function(slider,value){
el.setOpacity(value/100);
});
Básicamente es lo mismo que hicimos para cambiar el tamaño la única diferencia es que usamos “seOpacity()” y le damos el valor del slider, notemos que ese valor es dividido entre cien esto es porque la opacidad es manejada de 0 a 1 por lo cual .5 sería el valor 50 del slider.
Conclusión
En esta ocasión vimos cómo crear sliders, y darles un uso básico. Estos son muy útiles cuando deseamos hacer cambios a ciertos elementos de nuestro sistema, modificar rangos, etc. Si tienes alguna duda o comentario por favor coméntenlo en el foro, recuerden seguirnos en Twitter (@quizzpot) o Facebook para estar al tanto de las actualizaciones.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.
Instructor del curso
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.
Se el primero en comentar!