Crea un Control de Selección de Color

En este breve tutorial veremos como crear un control de selección de color desde cero. Este será de gran utilidad cuando quieras incorporar en el diseño de tus interfaces de usuario una opción para que el usuario pueda cambiar, por ejemplo, el color de dibujado de un elemento dado.

A lo largo de este tutorial veremos como:

• Crear nuestros propios controles basados en la clase Canvas.
• Como utilizar algunos de los métodos de la clase Graphics para realizar el dibujado.
• Como implementar los Manejadores de Eventos e incluso volver a definirlos, de modo que vuelvan a estar disposnibles para cualquiera de las instancias basadas en la clase.
• Como utilizar algunos métodos compartidos realmente útiles de la clase Color, de modo que nuestro control reaccione automáticamente a los cambios entre los modos Claro y Oscuro.

Crea tu propia subclase basada en Canvas

Canvas es la clase disponible en Xojo para crear tu propio dibujado: desde botones a cualquier otro tipo de control en el que puedas pensar.

Para este tutorial, comenzaremos creando un nuevo proyecto Desktop. A continuación, añade una nueva clase desde Insert > Class. Este elemento se añadirá al Navegador de Proyectos (el área situada más a la izquierda en el IDE).

Selecciona la clase recién añadida en el Navegador de Proyecto para acceder al Panel Inspector. Aquí podrás cambiar algunos atributos con los siguientes valores:

• Name: ColorSelector
• Super: Canvas

Cuando creas una nueva subclase tenemos la opción de indicar su clase “Super”. Esto significa que cuando introducimos aquí el nombre de una clase ya disponible, nuestra subclase heredará todas las propiedades, métodos y eventos disponibles en dicha clase.

En este punto, sabemos que nuestra subclase (un nuevo tipo de dato) tiene el nombre “ColorSelector” y que está basada en la clase Canvas.

Una propiedad para almacenar el color seleccionado

El principal propósito de nuestra subclase es el de almacenar el color seleccionado por el usuario, empleando para ello el diálogo nativo ofrecido por cada sistema operativo; de modo que sólo hemos de definir una Propiedad para almacenar dicho valor (piensa en ello como un tipo de variable especial que vive en cada una de las instancias —u objectos- creados a partir de la clase).

Con nuestro “ColorSelector” aun seleccionado en el Navegador de Proyecto, añade una propiedad desde Insert > Property, cambiando a continuación los siguientes atributos en el Panel Inspector:

• Name: SelectedColor
• Type: Color
• Scope: Public

Seleccionar el Color

Para ofrecer a nuestros usuarios la opción de seleccionar cualquier color, utilizando para ello el diálogo nativo del sistema operativo, hemos de añadir a nuestra clase “ColorSelector” el Evento MouseDown. Asegúrate de que aún tienes seleccionado el elemento ColorSelector en el Navegador de Proyecto, y elige a continuación Insert > Event Handler.

Aparecerá el panel Event Handler, ofreciéndote todos los manejadores de eventos que puedes incorporar de entre todos los soportados por su clase Super (aquella en la que está basada nuestro control). Selecciona MouseDown y confirma tu elección. Esto te llevará al Editor de Código asociado con dicho evento. Es decir, el código que escribamos aquí será el que se ejecute en respuesta a que el usuario haga clic sobre el área del control (ancho y altura).

Escribe las siguientes líneas de código en el Editor de Código:

Call Color.SelectedFromDialog(SelectedColor,"")
Me.Invalidate
return RaiseEvent MouseDown(x,y)

La primera línea de código llama al método compartido Color.SelectFromDialog, pasando como su primer argumento nuestra propiedad SelectedColor, de modo que almacene sobre ella el valor del color seleccionado por el usuario. La magia de este método compartido reside en que no necesitas preocuparte sobre mostrar un diálogo de selección de color en cada uno de los sistemas operativos soportados, el Framework de Xojo se ocupará de ello por ti tanto en Windows como en macOS y Linux.

La segunda línea de código indica al control que se “redibuje” a sí mismo, dado que hemos realizado una operación que probablemente cambie su representación visual (en este caso, el color seleccionado por el usuario).

¿Qué significa la línea return RaiseEvent MouseDown(x,y)?

Bien, no olvides que estamos creando una clase… y si nuestra clase consume un evento dado, esto significa que no estará disponible para la instancia del control que creemos a partir de ella… ¡excepto que volvamos a definirlo! En este caso, esta línea de código viene a significar algo así como “de acuerdo, invoca al mismo manejador de evento en la instancia del control que está basada en mi” y, por supuesto, lo haremos utilizando la misma signatura de manejador de evento y pasando también los parámetros esperados.

Definir un nuevo Manejador de Evento

Definir un nuevo Manejador de Evento para nuestra clase (y, por tanto, disponible para todas las instancias basadas en dicha clase) es un proceso bastante sencillo en Xojo.

Asegúrate de que el item ColorSelector aún este seleccionado en el Navegador de Proyecto y, a continuación, elige la opción Event Definition en el menú Insert.

La anterior opción añadirá una nueva Definición de Manejador de Evento a la clase, de modo que sólo hemos de modificar mediante el Panel Inspector el nombre, parámetros y el tipo devuelto, utilizando para ello los siguientes valores:

• Event Name: MouseDown
• Parameters: X As Integer, Y As Integer
• Return Type: Boolean

Como puedes ver, esta es exactamente la misma signatura del Manejador de Evento que hemos añadido a nuestra clase.

¡Vamos a dibujar!

Ya hemos definido todo lo necesario… excepto lo relativo a dibujar el control propiamente dicho con el color seleccionado por el usuario. Para ello hemos de añadir un segundo manejador de eventos: Paint.

El evento Paint es donde te ocupas de que cualquier control basado en Canvas cree la representación visual que se mostrará al usuario, y para ello puedes utilizar cualquiera de los métodos de dibujado disponibles en la clase Graphics. Con estos puedes controlar desde el color de dibujado que necesitas para cada parte del dibujado, rellenar un área concreta del control utilizando el color de dibujado, dibujar polígonos sencillos o complejos, etc.

Una vez añadido el manejador de evento Paint a la clase ColorSelector, escribe el siguiente código en el Editor de Código asociado:

g.DrawingColor = If(Color.IsDarkMode,&ccccccc,&c000000)
g.DrawRectangle(0,0,g.Width,g.Height)
g.DrawingColor = Color.FillColor
g.FillRectangle(1,1,g.Width-2,g.Height-2)
g.DrawingColor = SelectedColor
g.FillRectangle(4,4, g.Width-8, g.Height-8)

Como puedes ver, el dibujado de nuestro control es bastante simple. El Manejador de Evento Pain recibe un objeto Graphics como primer argumento, de modo que podamos utilizarlo para realizar todas nuestras operaciones de dibujado.

Quizá la línea más interesante sea la primera, dado que decide qué color de dibujado utilizar en el caso de que el sistema operativo esté en Modo Oscuro o Modo Claro; y para conocer este estado sólo hemos de llamar al método compartido IsDarkMode sobre la propia clase Color. El método IsDarkMode devolverá “True” si el sistema operativo está configurado en Modo Oscuro y “False” si no es así. Este será el color que utilizarmos para dibujar el contorno de nuestro control, de modo que tenga un aspecto acorde en cada uno de los Modos Claro / Oscuro.

También utilizaremos otro método compartido muy conveniente de la clase Color (FillColor), de modo que podamos rellenar el fondo de nuestro control utilizando para ello el valor configurado en el sistema, incluso cuando dicha configuración cambie entre los modos Claro y Oscuro.

Por último, asignaremos el valor de color SelectedColor a la propiedad DrawingColor de nuestro variable “g” (Graphics), y simplemente rellenaremos un rectángulo con dicho color. Esta será la pista visual para los usuarios de nuestra aplicación sobre el color seleccionado.

Crear una aplicación de ejemplo

¡Ha llegado el momento de probar nuestra clase ColorSelect! Selecciona el elemento Window1 en el Navegador de Proyecto. La anterior acción te llevará al Editor de Diseño para dicha ventana. Ahora, para añadir una nueva instancia (control) de nuestra clase, sólo hemos de arrastrar el item ColorSelector desde el Navegador de Proyecto y soltarlo en el Editor de Diseño. ¡Eso es todo!

Ejecuta el proyecto y haz clic sobre el control ColorSelector. La anterior acción mostrará el panel que te permitirá seleccionar cualquier color que desees y, tan pronto como cierres dicho panel, el control se redibujará a sí mismo para mostrar el color seleccionado.

Por supuesto, cuando necesites utilizar el color seleccionado en tu código, sólo has de leer el valor almacenado en la propiedad SelectedColor de la instancia. Por ejemplo, algo como:

Var CurrentColor as Color = ColorSelector1.SelectedColor

¡Y eso es todo! A partir de ahora, ya podrás reutilizar la clase en tantos proyectos como desees que la incluyan.