Dê aos objetos do seu formulário a cor de borda que merecem

Uma cor de borda bem escolhida pode tornar um formulário mais fácil de compreender e conferir-lhe uma aparência mais cuidada e consistente. Quer pretenda destacar um campo importante, distinguir um grupo de objetos ou simplesmente harmonizar com a identidade visual da sua aplicação, as bordas podem ser um elemento eficaz no design da sua interface de utilizador.

A partir do 4D 21 R5, pode definir a cor da moldura independentemente da cor da fonte para objetos que contenham texto, tais como texto estático e objetos de entrada. A cor da moldura também está disponível para objetos que não têm cor de texto, como subformulários e spinners, proporcionando-lhe um controlo consistente sobre as molduras numa gama mais ampla de objetos do formulário. Configure-a no Editor de Formulários, atualize-a dinamicamente com código 4D ou aplique-a através de CSS.

Definir a cor da borda no Editor de Formulários

A nova propriedade«cor da borda» atribui a cada objeto suportado uma cor de borda específica. Selecione um objeto e, em seguida, escolha a cor na secção «Borda» do Inspector.

Para objetos que possuem uma cor de fonte, como texto estático ou objetos de entrada, a cor da borda pode agora ser definida de forma independente. Para objetos sem cor de texto, como subformulários ou controlos giratórios, a propriedade permite-lhe simplesmente controlar diretamente a borda.

A propriedade funciona com os estilos de borda «simples» e «pontilhada». Para objetos que possuem uma cor de fonte, o seu valor predefinido é «Igual à fonte». Para objetos sem cor de texto, o valor predefinido é «Automático». Estes valores predefinidos preservam a aparência dos formulários existentes, permitindo-lhe definir uma cor de borda separada sempre que necessário.

Por exemplo, pode manter uma cor de texto forte enquanto utiliza um contorno mais subtil, atribuir a um grupo de campos de entrada uma cor de destaque comum ou aplicar uma cor de borda consistente a diferentes tipos de objetos de formulário sem alterar as suas outras propriedades visuais.

Atualizar bordas em tempo de execução

O estado da sua aplicação pode agora influenciar a borda independentemente das outras cores do objeto. Pode destacar a entrada atual, indicar um problema de validação ou chamar a atenção para uma lista que requer ação. A mesma abordagem pode ser utilizada com objetos que não têm cor de texto. Por exemplo, pode utilizar uma cor de borda específica para distinguir visualmente um subformulário ou destacar um seletor quando este requer atenção.

Por exemplo, quando um utilizador valida um formulário, pode indicar imediatamente um valor inválido alterando a cor da borda do campo de entrada e exibindo uma mensagem adicional ao lado do mesmo.

// Example called when the user validates the form.
If (Not(Is valid email(Form.email)))
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#D34145"; ""; ""; "#F89794")
    OBJECT SET VISIBLE(*; "labelEmailError"; True)
Else
    // Restore the application's normal input border color.
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#FFFFFF"; ""; ""; "#BEDAFF")
    OBJECT SET VISIBLE(*; "labelEmailError"; False)
End if

Também pode utilizar a cor da borda para fazer corresponder a borda exterior da caixa de lista às suas linhas de grelha interiores, criando um aspeto consistente em toda a lista.

// Set the list box's border color.
OBJECT SET BORDER STYLE(*; "ordersList"; Border dotted)
OBJECT SET RGB COLORS(*; "ordersList";""; ""; ""; "#336699")
// Use the same color for the inner grid lines.
LISTBOX SET GRID COLOR( *; "ordersList"; "#336699"; True; True)

Pode ainda recuperar a cor atual da borda quando a lógica do seu formulário precisar de preservar ou reutilizar o estado visual de um objeto.

// Read the current colors of a hierarchical list.
OBJECT GET RGB COLORS(*; "categories"; $fontColor; $backgroundColor; $alternateColor; $borderColor)

Mantenha a consistência do estilo com CSS

Se o seu projeto já utiliza classes CSS para o estilo dos formulários, a «borderColor» integra-se no mesmo fluxo de trabalho. Defina o estilo e a cor da borda em conjunto e, em seguida, reutilize a classe nos objetos que devem partilhar a mesma linguagem visual.

input {
    borderStyle: plain;
    borderRadius: 4;
    borderColor: #0093F5;
}

.secondary-list {
    borderStyle: dotted;
    borderColor: #336699;
}

O CSS facilita a manutenção de regras de apresentação claras e escuras ou a aplicação de um estilo visual consistente em todos os seus formulários, sem ter de editar cada objeto individualmente.

Uma linguagem visual mais clara para formulários

A nova propriedade de cor da borda oferece-lhe um controlo mais preciso sobre os objetos do seu formulário:

• Defina uma cor de borda específica para os objetos do formulário, independentemente da cor da fonte, quando aplicável.
• Configure a propriedade no Editor de Formulários ou através do CSS.
• Leia e atualize as cores das bordas em tempo de execução com «OBJECT SET RGB COLORS» e «OBJECT GET RGB COLORS».
• Preserve a aparência existente dos formulários com os valores predefinidos «likeFont» e «automatic».

Agora pode utilizar as bordas como parte intencional da linguagem visual do seu formulário, quer estejam configuradas no Editor de Formulários, definidas através de CSS ou atualizadas dinamicamente pela lógica da sua aplicação.