Dale a los objetos de tu formulario el color de borde que se merecen

Un color de borde bien elegido puede facilitar la comprensión de un formulario y conferirle un aspecto más pulido y coherente. Tanto si deseas resaltar un campo importante, distinguir un grupo de objetos o, simplemente, adaptarlo a la identidad visual de tu aplicación, los bordes pueden ser un elemento eficaz en el diseño de tu interfaz de usuario.

A partir de 4D 21 R5, puedes definir el color del borde independientemente del color de la fuente para los objetos que contengan texto, como el texto estático y los objetos de entrada. El color del borde también está disponible para objetos que no tienen color de texto, como los subformularios y los controles giratorios, lo que te permite controlar de forma coherente los bordes en una gama más amplia de objetos del formulario. Configúralo en el Editor de formularios, actualízalo dinámicamente con código 4D o aplícalo mediante CSS.

Establecer el color del borde en el Editor de formularios

La nueva propiedad«color del borde» asigna a cada objeto compatible un color de borde específico. Selecciona un objeto y, a continuación, elige el color en la sección «Borde» del Inspector.

En el caso de los objetos que tienen un color de fuente, como el texto estático o los objetos de entrada, ahora se puede definir el color del borde de forma independiente. Para los objetos sin color de texto, como los subformularios o los controles giratorios, la propiedad simplemente te permite controlar directamente el borde.

La propiedad funciona con los estilos de borde «liso» y «punteado». Para los objetos que tienen un color de fuente, su valor por defecto es «Igual que la fuente». Para los objetos sin color de texto, el valor por defecto es «Automático». Estos valores por defecto conservan el aspecto de los formularios existentes, al tiempo que te permiten definir un color de borde independiente siempre que lo necesites.

Por ejemplo, puede mantener un color de texto intenso mientras utiliza un contorno más sutil, asignar a un grupo de campos de entrada un color de acento común o aplicar un color de borde coherente a diferentes tipos de objetos de formulario sin modificar sus demás propiedades visuales.

Actualizar los bordes en tiempo de ejecución

El estado de su aplicación puede ahora influir en el borde independientemente de los demás colores del objeto. Puede resaltar el campo de entrada activo, indicar un problema de validación o llamar la atención sobre una lista que requiera una acción. Este mismo enfoque se puede utilizar con objetos que no tengan color de texto. Por ejemplo, puede utilizar un color de borde específico para distinguir visualmente un subformulario o resaltar un control giratorio cuando requiera atención.

Por ejemplo, cuando un usuario valida un formulario, puede señalar inmediatamente un valor no válido cambiando el color del borde del campo de entrada y mostrando un mensaje adicional junto a él.

// 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

También puede utilizar el color del borde para que el borde exterior del cuadro de lista coincida con sus líneas de cuadrícula interiores, creando así un aspecto coherente en toda la 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)

Asimismo, puedes recuperar el color del borde actual cuando la lógica de tu formulario necesite conservar o reutilizar el estado visual de un objeto.

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

Mantén la coherencia en el estilo con CSS

Si tu proyecto ya utiliza clases CSS para el estilo de los formularios, «borderColor» encaja en el mismo flujo de trabajo. Define el estilo y el color del borde conjuntamente y, a continuación, reutiliza la clase en los objetos que deban compartir el mismo lenguaje visual.

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

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

El CSS facilita el mantenimiento de reglas de presentación claras y oscuras, o la aplicación de un estilo visual coherente en todos tus formularios sin tener que editar cada objeto individualmente.

Un lenguaje visual más claro para los formularios

La nueva propiedad de color de borde te ofrece un control más preciso sobre los objetos de tus formularios:

• Establece un color de borde específico para los objetos del formulario, independientemente del color de la fuente cuando sea aplicable.
• Configura la propiedad en el Editor de formularios o mediante CSS.
• Lee y actualiza los colores de borde en tiempo de ejecución con «OBJECT SET RGB COLORS» y «OBJECT GET RGB COLORS».
• Conserva el aspecto actual de los formularios con los valores predeterminados «likeFont» y «automatic».

Ahora puedes utilizar los bordes como un elemento deliberado del lenguaje visual de tu formulario, tanto si se configuran en el Editor de formularios, como si se definen mediante CSS o se actualizan dinámicamente mediante la lógica de tu aplicación.