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,
