Programar con Xojo desde cero: Dominar Container Control

Hace dos capítulos comenzamos a crear el componente que nos permitía mostrar una gráfica de barras. Sin embargo, necesitaba mejoras, puesto que el usuario de la aplicación sólo podía ver una cantidad limitada de barras: el indicado por el ancho de la ventana que lo contenía. En este capítulo nos encargaremos de solucionar dicha limitación.

Y para ello haremos uso otro de los controles disponibles en el panel Librería del IDE de Xojo. Se trata del ContainerControl.

ContainerControl es un control muy especial, puesto que está a medio camino entre lo que sería una ventana y un control simple. De hecho, su uso es el más conveniente cuando en el diseño de nuestra aplicación necesitemos utilizar controles de interfaz de usuario compuestos.

¿Y qué es un control de interfaz de usuario compuesto? Pues bien, podemos denominar como tal aquellos en los que se precise del uso combinado de varios controles de interfaz de usuario simples con el objeto de proporcionar una característica o funcionalidad común.

Por ejemplo, el Canvas que veníamos utilizando para nuestra gráfica de barras es un control simple; pero si queremos añadir la funcionalidad de hacer scroll (o desplazamiento horizontal y/o vertical), entonces también necesitaremos añadir a la composición el uso de otro control disponible en la Librería: el ScrollBar. Por tanto, el uso combinado de un Canvas y el ScrollBar, donde cada uno precise interactuar sobre el otro, forman un control compuesto de interfaz de usuario.

Ahora bien, tanto el Canvas como el ScrollBar necesitarán de una superficie de común que nos permitan definir cómo será su diseño en la ventana donde se vayan a utilizar, y dicha superficie es la que nos proporciona el ContainerControl.

De hecho, el diseño de controles compuestos mediante el ContainerControl es similar al que estamos acostumbrados a realizar cuando diseñamos la interfaz de usuario de las ventanas de nuestra aplicación: sólo tenemos que arrastrar el ContainerControl desde la Librería a la barra de Navegación del IDE (la situada más a la izquierda, y que es la que contiene todos los elementos utilizados en el proyecto), para crear una nueva instancia (por omisión tendrá el nombre «ContainerControl1»).

Luego, cuando seleccionamos la instancia del ContainerControl en el Navegador accederemos al Editor de Diseño que nos recordará enormemente al mismo que venimos utilizando en el diseño de las ventanas de la aplicación.

Por tanto, una vez que accedemos al Editor de Diseño para la instancia de ContainerControl seleccionada, ya es cuestión de ir arrastrando sobre él los elementos de interfaz de usuario que deseemos utilizar, ya sea desde la Librería o desde el propio Navegador, para indicar la posición y tamaño que tendrán.

Una vez que el diseño del ContainerControl esté completo, ya podremos dotarle de funcionalidad utilizando los elementos de programación que conocemos por ahora: propiedades, métodos y eventos sobre el propio ContainerControl además de los que se han podido implementar ya en aquellos controles utilizados en su diseño; como puede ser el caso de nuestra clase para mostrar gráficas de barras basada en Canvas.

No te preocupes, en el vídeo que acompaña a este artículo podrás ver paso a paso todo el proceso correspondiente al diseño de ContainerControl, así como el modo en el que podrás incorporarlos posteriormente en el diseño de las ventanas donde se vayan a utilizar, y también en el modo en el que se relacionan todos los elementos mediante código.

Una vez completado, nuestro ContainerControl ya contará con una barra de scroll para realizar desplazamiento lateral, de modo que nos permita ver también aquellas barras que inicialmente queden ocultas debido al ancho de la ventana.

En el código también verás cómo se van actualizando los datos de forma dinámica a medida que el usuario interactúa sobre la interfaz de usuario. Así, por ejemplo, la barra de scroll modificará su valor máximo cada vez que el usuario modifique el ancho de la ventana que contiene la instancia del ContainerControl.

En este capítulo también continuaremos haciendo uso del manejador de evento KeyDown, permitiendo que el usuario pueda desplazarse también a izquierda o derecha utilizando las habituales teclas de cursor.
— 
Javier Rodríguez

Xojo Engineer

Twitter: @xojoes

Facebook: http://facebook.com/xojoes/

Descarga la última versión desde www.xojo.com

Recursos Xojo en Español: https://docs.xojo.com/spanish