Bases de datos de proyectos: embellezca sus formularios con hojas de estilo

noviembre 8, 2019 3 tiempo de lectura

Las estructuras binarias clásicas de 4D le permiten definir hojas de estilo para especificar la fuente, el tamaño de la fuente y el estilo del texto que se utilizará en sus formularios, tanto para las plataformas macOS como Windows. Las bases de datos de proyectos le permiten ir aún más lejos al permitirle definir las propiedades de un botón de 4 estados o especificar el color y el borde de todos los objetos de línea o incluso establecer la altura de la cabecera de todos los cuadros de lista de una aplicación. Inspirado en la gramática y la sintaxis de CSS, 4D lo ha adaptado para satisfacer las necesidades específicas de los formularios de las bases de datos de proyectos 4D. Gracias a las hojas de estilo, puede configurar todas las propiedades para crear formularios realmente atractivos desde el punto de vista visual. ¡Esta entrada del blog le muestra cómo!

Ejemplo de hoja de estilo de base de datos

Plataforma

En las bases de datos de proyectos, puede definir hojas de estilo individuales para ambas plataformas (Windows o macOS) así como una hoja de estilo «general».

¿Por qué querría diferentes hojas de estilo por plataforma? Porque a menudo se utiliza una fuente / tamaño de fuente diferente en macOS que la fuente / tamaño de fuente utilizada en Windows. Por otra parte, el color del texto es a menudo idéntico para ambos.

Ahora, puedes definir los estilos comunes en el archivo «stylesheets.css» y los estilos específicos de cada plataforma en sus propios archivos: «stylesheets_mac.css» y «stylesheets_windows.css».

Propiedades

Una de las mayores revoluciones en las bases de datos de proyectos es que todas las propiedades soportadas por los objetos de formulario pueden ser utilizadas en las hojas de estilo.

Por ejemplo, se puede crear una clase «buttonAction» para crear botones de 4 estados con el aspecto de «barra de herramientas», texto gris y no enfocable:

.buttonAction {
  iconFrames: 4;
  style: toolbar;
  stroke: grey;
  focusable: false;
}

Esto facilita el diseño de formularios para su aplicación manteniendo el mismo diseño gráfico.

Selectores

Otro gran cambio es que puedes crear hojas de estilo por clase, por tipo de objeto, por nombre de objeto o por atributos.

Selector de tipo de objeto

Con el selector de tipo de objeto (equivalente al selector de elementos CSS), puede definir propiedades comunes aplicables a todos los objetos de la base de datos. Por ejemplo, todos los cuadros de lista deben tener una cabecera de 2 líneas, las líneas vacías no deben mostrarse y los colores de fondo de las filas deben ser gainsboro y whitesmoke:

listbox {
  headerHeight: 2em;
  hideExtraBlankRows: true;
  fill: gainsboro;
  alternateFill: whitesmoke;
}

Gracias a este selector, puede definir su propia apariencia para sus objetos de formulario.

Selector de atributos

Con el selector de atributos, puede definir una hoja de estilo mediante el valor de una propiedad.

Por ejemplo, en los formularios de entrada/salida de datos, tengo botones para añadir, editar o eliminar registros. Todos estos botones utilizan el mismo icono, título y consejos de ayuda.

¿Por qué no crear una hoja de estilo para los botones de acción y designar un valor específico para la propiedad de acción? Por ejemplo, si la propiedad de acción se establece como «editSubrecord»:

.buttonAction[action=editSubrecord] {
  icon: url("/RESOURCES/Images/Buttons/edit.png");
  tooltip: ":xliff:button_tip_EditRecord";
  text: ":xliff:button_EditRecord" !important;
}