Tutorial: Crear un Control personalizado de Botón en Xojo (Tercera Parte)

A continuación encontrarás traducido al castellano el artículo escrito por Gabriel Ludosanu y publicado originalmente en el Blog de Xojo.

En la primera parte creamos el control personalizado de un botón en Xojo mediante una subclase de DesktopCanvas. En la segunda parte lo mejoramos con colores personalizables, esquinas redondeadas y el estado de desactivado.

Ahora haremos que nuestro control CanvasButton sea aun más sencillo de usar en el IDE de Xojo al sacar provecho de la característica Inspector Behavior. Esto te permite (y cualquier otro que use el control) configurar su aspecto y comportamiento en el Editor de Diseño, justo en el panel de Propiedades.

La importancia de Inspector Behavior

Cuando creas un control personalizado sus propiedades personalizadas no aparecerán por omisión en el panel Inspector. La característica Inspector Behavior te permite elegir las propiedades que se mostrarán en dicho panel y también el modo en el que se agruparán. Esto hace que tu control luzca más pulido y profesional, además de ahorrar tiempo a los usuarios del control, dado que no tendrán que utilizar código para ajustar dichas propiedades.

Paso 1: Abre Inspector Behavior

Para personalizar las opciones del Inspector para tu CanvasButton:

En el IDE de Xojo, selecciona la clase CanvasButton en el Navegador de Proyecto.
Accede al menú contextual y selecciona la opción Inspector Behavior…

Paso 2: Activa y Organiza las Propiedades

En el diálogo correspondiente al Inspector Behavior verás un listado con todas las propiedades públicas (tanto las heredadas como las añadidas).

Activa las siguientes propiedades para que sean visibles en el Inspector:

ButtonText
CornerRadius
BackgroundColor, HoverColor, HighlightColor, BorderColor, TextColor (todas ellas agrupadas bajo una sección personalizada con el nombre “Button Colors”)

Organiza las propiedades en grupos lógicos para obtener una mejor claridad.

Truco: Al definir valores por omisión en las propiedades de tu clase significa que dichos valores se emplearán automáticamente en el Inspector Behavior. Sin embargo, Xojo te proporciona incluso más flexibilidad. Puedes sobre-escribir dichos valores directamente en el diálogo correspondiente a Inspector Behavior, de modo que tienes control absoluto sobre cómo se mostrarán por omisión las nuevas instancias de tu control.

Paso 3: Disfruta de la personalización en el Editor de Diseño

Con todo ya configurado en el diálogo de Inspector Behavior, ya podrás hacer las siguientes operaciones (o bien otros desarrolladores que usen tu control):

Cambiar el texto del botón directamente en el panel de Propiedades.
Seleccionar colores personalizados para los diferentes aspectos y estados del control, usando para ello el Selector de Color estándar del Sistema Operativo.
Ajustar visualmente el redondeo de las esquinas para el control.

Paso 4: Buenas Prácticas y Consejos

Utiliza nombres de grupos que resulten claros (como “Colores del Botón”) para ayudar a que tus usuarios encuentren más fácilmente las propiedades relacionadas.

Define valores por omisión que sean útiles para todas las propiedades, pero recuerda que puedes sobre-escribirlas en el diálogo Inspector Behavior.

Conclusión

Con el Inspector Behavior tus controles personalizados se sentirán como ciudadanos de primera en Xojo. Tanto tú como otros desarrolladores podréis utilizar ahora botones personalizados simplemente arrastrándolos, soltándolos y ajustando sus propiedades en el panel Inspector… ¡todo ello sin código!

Permanece atento a las futuras entregas, donde exploraremos capacidades incluso más avanzadas.