Programar con Xojo desde cero: representar datos en el Canvas

Una vez que en el capítulo anterior hemos aprendido cómo leer y guardar archivos, es el momento añadir una nueva característica a nuestra aplicación de ejemplo: crear una gráfica que nos permita ver visualmente los gastos realizados en cada una de las categorías.

Para ello utilizaremos una clase realmente potente de entre las disponibles en la Librería de Xojo: el Canvas.

Como su propio nombre indica, el Canvas es un tipo de control muy especial puesto que nos proporciona un “lienzo” sobre el que podemos dibujar libremente lo que requiera cada una de nuestras aplicaciones, no sólo mediante las propiedades disponibles en la propia clase sino también utilizando todas las funciones proporcionadas por otra de las clases que está estrechamente unida a esta: Graphics.

En concreto, el dibujado sobre el Canvas se realiza mediante el código escrito en su manejador de evento Paint, pudiendo ser este invocado automáticamente por el sistema operativo cada vez que sea preciso refrescar el contenido del lienzo (recuerda que Xojo es multiplataforma nativo), o bien siendo nosotros mismos quienes forcemos el redibujado mediante la invocación de los métodos Refresh (inmediata) o Invalidate (delegando el refresco del control cuando sea más adecuado para el sistema operativo).

A lo largo del tutorial también crearemos una clase auxiliar que nos permitirá dibujar las gráficas estadísticas (acumulado de gastos por categoría) con mayor flexibilidad.

Además, el hecho de 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 la gráfica de barras, pero al proporcionar este nivel de abstracción significa que podrás continuar utilizando las nuevas clases tratadas en este capítulo también para representar cualquier otro tipo de valor numérico en otras aplicaciones que puedas crear.

Por otra parte, y para ver en cierta medida la flexibilidad proporcionada por la clase Graphics, crearemos nuestro objeto de gráficas estadísticas de modo que resulte realmente fácil controlar el cómo deseamos presentar las barras: utilizando colores sólidos o gradientes de color, decidiendo incluso los colores que deseamos asignar a cada barra, y también si deseamos aplicar un efecto de sombra paralela en cada una de ellas o no; así como la anchura con la que deseamos dibujar cada una de las barras.

El código de dibujado también se encargará de calcular proporcionalmente la altura de dibujado para cada una de las barras, no sólo sobre el valor presentado por el resto, sino también sobre la altura máxima disponible en la ventana o panel que vaya a incluir el control de gráficas.

Esto significa que, a medida que modifiques el tamaño de la ventana, verás como el control de gráficas recalcula y redibuja en tiempo real cada una de las barras manteniendo en todo momento la proporción correspondiente al valor representado por cada una de ellas.

Y si en este ejemplo utilizamos el control Canvas para dibujar gráficas, resulta muy interesante que sepas que este también es el control que has de utilizar cuando necesites crear, desde cero, un control de UI completamente personalizado.

De hecho, los manejadores de eventos disponibles te permitirán controlar todos los aspectos habitualmente asociados con la interacción con el usuario: cuándo entra o sale el cursor de la superficie, cuando se hace clic sobre él, cuando se arrastran o sueltan objetos sobre su superficie, así como responder a los eventos de teclado.

En fin, mediante el Canvas podrás crear cualquier control o widget de interfaz de usuario que puedas imaginar y que quieras añadir a tu aplicación.

Te invito no sólo a que reproduzcas el tutorial en el IDE de Xojo (por supuesto también puedes descargarte el proyecto de Xojo utilizado en el ejemplo, sino a que pruebes a hacer tus propios pinitos con la clase Graphics en combinación con Canvas.

Si tienes dudas o problemas, los comentarios están abiertos,

Alf

Propietario de www.faq-mac.com.

0 0 votos
Article Rating
Subscribe
Notify of
0 Comments
Opiniones Inline
Ver todos los comentarios
0
Me encantaría saber tu opinión, por favor, deja un comentariox
()
x