Una vez que hemos aprendido a leer y guardar archivos en el cap铆tulo anterior, es hora de agregar una nueva caracter铆stica a nuestra aplicaci贸n de muestra: crear un gr谩fico que nos permita ver visualmente los gastos realizados en cada una de las categor铆as.
Para ello utilizaremos una clase muy potente de entre las disponibles en la librer铆a de Xojo: Canvas.
Como su nombre indica, el Canvas es un tipo de control muy especial ya que nos proporciona un "lienzo" sobre el que podemos dibujar libremente lo que requiere cada una de nuestras aplicaciones, no s贸lo a trav茅s de las propiedades disponibles en la propia clase sino tambi茅n utilizando todas las funciones proporcionadas de otra de las clases que est谩 muy relacionada con esta: Graphics.
En concreto, el dibujo en el Canvas se realiza a trav茅s del c贸digo escrito en su manejador de eventos Paint, que puede ser invocado autom谩ticamente por el sistema operativo cada vez que sea necesario actualizar el contenido del lienzo (recuerda que Xojo es multiplataforma nativo). , o estamos forzando el redibujado invocando los m茅todos Refresh (inmediato) o Invalidate (delegando el refresco del control cuando sea m谩s apropiado para el sistema operativo).
A lo largo del tutorial tambi茅n crearemos una clase auxiliar que nos permitir谩 dibujar gr谩ficos estad铆sticos (gastos acumulados por categor铆a) con mayor flexibilidad.
Adem谩s, crear esta clase auxiliar tambi茅n nos permite abstraer el tipo de valores a representar. Es decir, en este caso sabemos que se trata de representar valores correspondientes a gastos personales mediante el gr谩fico de barras, pero al proporcionar este nivel de abstracci贸n, puede seguir utilizando las nuevas clases comentadas en este cap铆tulo tambi茅n para representar cualquier otro tipo de valor num茅rico, en otras aplicaciones puedes crear.
Por otro lado, y para ver hasta cierto punto la flexibilidad que proporciona la clase Graphics, crearemos nuestro objeto de gr谩fico estad铆stico para que sea muy f谩cil controlar c贸mo queremos presentar las barras: usando colores s贸lidos o degradados de color, tambi茅n decidir los colores que queremos asignar a cada barra, y tambi茅n si queremos aplicar un efecto de sombra a cada una de ellas o no; as铆 como el ancho con el que queremos dibujar cada una de las barras.
El c贸digo de dibujo tambi茅n tendr谩 la tarea de calcular proporcionalmente la altura de dibujo de cada una de las barras, no s贸lo sobre el valor que presentan el resto, sino tambi茅n sobre la altura m谩xima disponible en la ventana o panel que incluir谩 el control gr谩fico.
Esto quiere decir que, cambiando el tama帽o de la ventana, ver谩s como el control gr谩fico recalcula y redibuja cada una de las barras en tiempo real, manteniendo siempre la proporci贸n correspondiente al valor representado por cada una de ellas.
Y si en este ejemplo estamos usando el control Canvas para dibujar gr谩ficos, es muy interesante que sepas que este es tambi茅n el control que necesitas usar cuando tienes que crear, desde cero, un control UI completamente personalizado.
De hecho, los controladores de eventos disponibles le permitir谩n controlar todos los aspectos generalmente asociados con la interacci贸n del usuario: cu谩ndo el cursor entra o sale de la superficie, cu谩ndo se hace clic en 茅l, cu谩ndo se arrastran o sueltan objetos en su superficie, as铆 como responder a eventos de teclado
En resumen, a trav茅s de Canvas puede crear cualquier widget de control o interfaz de usuario que pueda imaginar y desee agregar a su aplicaci贸n.
Te invito no solo a reproducir el tutorial en el IDE de Xojo (por supuesto tambi茅n puedes descargar el proyecto Xojo usado en el ejemplo), sino a probar tus primeros pasos con la clase Graphics en conjunto con Canvas.
Si tienes alguna duda o problema, los comentarios est谩n abiertos,
