Añadir controles de UI en tiempo de ejecución: Control Set

Una de las inquietudes que suelen plantearse, tarde o temprano, quienes empiezan con Xojo es como se pueden añadir controles (elementos gráficos) en tiempo de ejecución. Es decir, la capacidad de añadir elementos de interfaz de usuario, o bien de cualquier otro tipo basado en Canvas o RectControl, en función de cual sea el tipo de aplicación que estemos diseñando. Continúa leyendo para saber como. La respuesta: los Control Set.

Xojo nos permite añadir absolutamente cualquier nueva instancia de control que esté ya disponible en un diseño de ventana (Window); eso sí, siempre y cuando hayamos definido previamente a través del panel Inspector que dicho control actúe como un Control Set.

Básicamente, podríamos definir un Control Set como un grupo de controles, del mismo tipo, que comparten los mismos Manejadores de Eventos. La forma de identificar las instancias dentro de cada uno de estos grupos de controles es a través de sus índices. Por tanto, si bien todos ellos compartirán los mismos Manejadores de Eventos, Xojo identifica que se trata de un miembro de un Control Set y pasa como parámetro adicional el índice correspondiente a la instancia. ¡Esta es la forma en la que puedes identificar cada uno de ellos en tiempo de ejecución!

Pero, ¿cómo puedes crear uno de estos Control Set para empezar? Fácil:

• Añade un control a la ventana, ya sea desde el Navegador de Proyectos (si es que se trata de una subclase) o bien desde el Panel de la Librería en el IDE de Xojo.
• Una vez que el control esté en la ventana, selecciónalo y en el panel del Inspector pulsa sobre el botón que corresponde al apartado de Atributos (el que tiene el icono con forma de rueda dentada).
• Selecciona la opción New Control Set en el menú desplegable Member Of del apartado Control Set. Esta acción creará un nuevo Control Set, definiendo el elemento seleccionado con el índice ‘0’. Es decir, el primer miembro del control.

Ten en cuenta que este será el control que utilices como plantilla para la clonación de nuevos elementos en tiempo de ejecución, de modo que probablemente querrás ajustar su propiedad Visible a Off. Es decir, el control existitrá en tiempo de ejecución en la ventana, pero no será visible, de modo que podremos utilizarlo para crear nuevas instancias del grupo a partir de él al tiempo que los usuarios de la aplicación no podrán interactuar con esta instancia invisible. Justo lo que queremos.

Crear nuevas instancias

Ahora que ya tenemos nuestro elemento plantilla como parte de la ventana, la creación de nuevas instancias desde código es realmente sencillo. Pongamos que el control que queremos clonar tiene como nombre btClon (es un botón). Por tanto, el código para clonarlo será:

Dim nuevaInstancia as PushButton = new btClon
nuevaInstancia.visible = true

Observa que hemos de definir la variable que contendrá la nueva instancia con el TIpo correspondiente al Contro general (en este caso un PushButton), mientras que el nombre del tipo que acompaña al constructor (New) es el correspondiente a nuestra plantilla.

A partir de ese momento, nuevaInstancia ya contendrá la nueva instancia creada a partir del clon, con su índice incrementado en uno sobre el último elemento creado (es decir, la primera de las instancias creadas a partir del clon será “1”, la segunda “2” y así sucesivamente…).

Tal y como harías con cualquier otra instancia, podrás invocar sus métodos y también modificar todas y cada una de sus propiedades: posición, etiqueta, tamaño, etc. La diferencia fundamental, es que estas nuevas instancias heredan los valores del control clonado. Por ejemplo, observa que lo primero que hace el código es definir su propiedad Visible con el valor True, para que dicha nueva instancia sí sea visible en la ventana dado que el Control clonado, del cual parte, tenía dicha instancia en valor False.

Modificar orden del control en el eje Z

Está claro que los controles clonados aumentan su índice de forma secuencial y progresiva, del mismo modo que también se van añadiendo sobre la ventana en el mismo orden.

Esto significa que si el control con el índice “3” se solapa sobre el control clonado con el índice “2”, entonces el primero cubrirá parcialmente al segundo. ¿Y si en un momento dado quisieras modificar la posición en el eje Z de forma que fuese precisamente el objeto “2” el que pasara a primer término?

Actualmente no existe en Xojo una forma sencilla de modificar el valor del eje Z que ocupa cada uno de los controles en tiempo de ejecución de forma transparente, pero lo que sí puedes lograr es que cualquiera de estos elementos clonados (o cualquier otro, para el caso) pase al primer plano.

Para ello, todo lo que hemos de hacer es lo siguiente:

• En primer lugar hemos de asignar la propiedad Parent de la instancia clonada (o control) en cuestión a otro RectControl, como por ejemplo en nuestro caso el botón btClon que además permanece invisible.
• A continuación volvemos a asignar a la propiedad Parent de la misma instancia (o control) nuevamente a la venana que lo contiene. De este modo pasa a ocupar el primer plano

El código podría ser algo similar a esto:

btClon(2).parent = btClon(0)
btClon(2).parent = Window1 //Podría ser ‘Self’ o ‘Me’, en función del método o evento en el que escribamos este código.

En el siguiente vídeo podrás ver un tutorial que pone en práctica esto mismo, además de observar en qué modo podemos capturar los Manejadores de Eventos para que actúen sobre la instancia concreta sobre la que estemos trabajando en cada caso.

En definitiva, puedes observar que la creación de controles y su incorporación a las ventanas en tiempo de ejecución es bastante sencillo en Xojo, siempre y cuando hayamos entendido previamente los pasos involucrados en el proceso.

Si tienes consultas o dudas adicionales sobre este u otros temas de programación en Xojo… ¡no dudes en contactar conmigo!