Personalizar botones, botones de opción y casillas de selección con las propiedades de fondo y borde

Imagina que estás creando una barra de herramientas con botones de acción de colores, o un panel de configuración con botones de opción y casillas de selección con un diseño específico. No necesitas ilustraciones personalizadas ni gráficos complejos, solo un botón azul con esquinas redondeadas y un borde sutil.

Hasta ahora, incluso la personalización visual más sencilla requería crear recursos de imagen específicos.

A partir de la versión 4D 21 R5, puedes establecer el color de fondo y las propiedades del borde directamente en botones, botones de opción y casillas de verificación con estilos personalizados.

Colorea tus objetos directamente

Anteriormente, para personalizar el color de fondo de un botón, un botón de opción o una casilla de selección con estilo personalizado era necesario utilizar una imagen de fondo. Ahora, puedes definir un color de fondo en el Editor de formularios o cambiarlo en tiempo de ejecución mediante comandos 4D.

En el caso de los botones, se ha introducido un nuevo estilo de borde «personalizado» para mantener la compatibilidad con versiones anteriores. Permite utilizar la nueva propiedad de fondo sin modificar el aspecto de los botones existentes.

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

El valor por defecto es «none», lo que mantiene el aspecto de los formularios existentes. Cuando hay una imagen de fondo, esta se muestra sobre el color de fondo, lo que permite combinar fondos de color con iconos o imágenes transparentes.

Añade bordes en segundos

Ya no necesitas recursos de imagen específicos solo para añadir un borde. Las nuevas propiedades de borde te permiten personalizar directamente el aspecto de tus botones, botones de opción o casillas de selección con estilos personalizados:

• Color del borde
• Ancho del borde
• Radio de las esquinas

Tanto si prefieres contornos sutiles como botones de acción redondeados, ahora todo se puede configurar directamente desde el Editor de formularios, CSS o código 4D.

Y cuando combinas las esquinas redondeadas con una imagen de fondo o un color de fondo, 4D recorta automáticamente el fondo al borde. No es necesario realizar enmascaramientos ni editar imágenes.

En el caso de los botones, estas nuevas propiedades solo están disponibles cuando el estilo de borde está configurado en «personalizado», lo que permite conservar el aspecto de los formularios existentes.

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

Estiliza una sola vez con CSS

Si tu aplicación ya utiliza CSS, estas nuevas propiedades encajan de forma natural en tu estilo actual. Define un estilo una sola vez y aplícalo donde lo necesites.

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #164B52;
        color del borde: #45A9B9;
        borde personalizado X: 1;
        marcos del icono: 4;
        alineación del texto: derecha;
        título de imagen: false;
        trazo: #45A9B9;
        textAlign: center;
    }
}

Esto facilita la creación de una identidad visual coherente en todos tus formularios, al tiempo que reduce el número de recursos de imagen que debes mantener.

Estilo más sencillo, menos mantenimiento

Los objetos basados en imágenes siguen siendo la mejor opción cuando necesitas un aspecto diferente para cada estado. Pero en los numerosos casos en los que basta con un simple botón de color, un botón de opción o una casilla de selección, las propiedades de fondo y borde ofrecen una solución mucho más rápida y sencilla.

Ya sea configurándolas en el Editor de formularios, aplicándoles estilos con CSS o actualizándolas desde el código, el resultado es el mismo: menos recursos de imagen que gestionar y más tiempo dedicado a desarrollar tu aplicación en lugar de a editar gráficos.