Personalizar botões, botões de opção e caixas de seleção com propriedades de fundo e borda

Imagina que estás a criar uma barra de ferramentas com botões de ação coloridos ou um painel de definições com botões de opção e caixas de seleção com estilo. Não precisas de imagens personalizadas nem de gráficos complexos, basta um botão azul com cantos arredondados e uma moldura discreta.

Até agora, mesmo a personalização visual mais simples exigia a criação de recursos de imagem específicos.

A partir do 4D 21 R5, pode definir uma cor de fundo e propriedades de borda diretamente em botões, botões de opção e caixas de seleção com estilo personalizado.

Dê cor aos seus objetos diretamente

Anteriormente, personalizar a cor de fundo de um botão, botão de opção ou caixa de seleção com estilo personalizado exigia a utilização de uma imagem de fundo. Agora, pode definir uma cor de fundo no Editor de Formulários ou alterá-la em tempo de execução utilizando comandos 4D.

Para os botões, foi introduzido um novo estilo de borda «personalizado» para preservar a compatibilidade com versões anteriores. Este permite ativar a nova propriedade de fundo sem alterar a aparência dos botões 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)

O valor predefinido é «nenhum», preservando a aparência dos formulários existentes. Quando existe uma imagem de fundo, esta é apresentada sobre a cor de fundo, permitindo-lhe combinar fundos coloridos com ícones ou imagens transparentes.

Adicione bordas em segundos

Já não precisa de recursos de imagem específicos apenas para adicionar uma borda. As novas propriedades de borda permitem-lhe personalizar diretamente a aparência dos seus botões, botões de opção ou caixas de seleção com estilos personalizados:

• Cor da moldura
• Largura da borda
• Raio dos cantos

Quer prefira contornos subtis ou botões de ação arredondados, agora tudo pode ser configurado diretamente a partir do Editor de Formulários, do CSS ou do código 4D.

E quando combina cantos arredondados com uma imagem de fundo ou uma cor de fundo, o 4D recorta automaticamente o fundo à moldura. Não é necessário mascarar nem editar imagens.

No caso dos botões, estas novas propriedades só estão disponíveis quando o Estilo da Borda está definido como «personalizado», preservando a aparência dos formulários 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) 

Defina o estilo uma vez com CSS

Se a sua aplicação já utiliza CSS, estas novas propriedades integram-se naturalmente no seu estilo existente. Defina um estilo uma vez e aplique-o sempre que precisar.

@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;
        borderColor: #45A9B9;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #45A9B9;
        textAlign: center;
    }
}

Isto facilita a criação de uma identidade visual consistente em todos os seus formulários, ao mesmo tempo que reduz o número de recursos de imagem que precisa de manter.

Estilo mais simples, menos manutenção

Os objetos baseados em imagens continuam a ser a melhor opção quando é necessária uma aparência diferente para cada estado. Mas, nos muitos casos em que basta um simples botão colorido, um botão de opção ou uma caixa de seleção, as propriedades de fundo e de borda oferecem uma solução muito mais rápida e fácil.

Configure-as no Editor de Formulários, aplique-lhes estilos com CSS ou atualize-as a partir do código; o resultado é o mesmo: menos recursos de imagem para gerir e mais tempo dedicado ao desenvolvimento da sua aplicação, em vez de à edição de elementos gráficos.