Bases de données du projet : embellissez vos formulaires avec des feuilles de style

novembre 8, 2019 4 min de lecture

Les structures binaires 4D classiques vous permettent de définir des feuilles de style pour spécifier la police, la taille de la police et le style de texte à utiliser dans vos formulaires pour les plateformes macOS et Windows. Les bases de données de projet vous permettent d’aller encore plus loin en vous permettant de définir les propriétés d’un bouton à 4 états ou de spécifier la couleur et la bordure de tous les objets ligne ou même de définir la hauteur de l’en-tête de toutes les boîtes de liste d’une application ! Inspiré par la grammaire et la syntaxe de CSS, 4D l’a adapté pour répondre aux besoins spécifiques des formulaires des bases de données des projets 4D. Grâce aux feuilles de style, vous pouvez configurer toutes les propriétés pour créer des formulaires vraiment attrayants visuellement. Ce billet de blog vous montre comment !

Exemple de feuille de style pour une base de données

Plate-forme

Dans les bases de données de projet, vous pouvez définir des feuilles de style individuelles pour les deux plateformes (Windows ou macOS) ainsi qu’une feuille de style « globale ».

Pourquoi vouloir des feuilles de style différentes par plateforme ? Parce que souvent, une police / taille de police différente est utilisée sur macOS par rapport à la police / taille de police utilisée sur Windows. En revanche, la couleur du texte est souvent identique pour les deux.

Maintenant, vous pouvez définir les styles communs dans le fichier « stylesheets.css » et les styles spécifiques à la plateforme dans leurs propres fichiers : « stylesheets_mac.css » et « stylesheets_windows.css ».

Propriétés

L’une des principales révolutions dans les bases de données de projets est que toutes les propriétés prises en charge par les objets de formulaire peuvent être utilisées dans les feuilles de style.

Par exemple, vous pouvez créer une classe « buttonAction » pour créer des boutons à 4 états avec l’aspect « barre d’outils », du texte gris et non focalisable :

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

Il est ainsi plus facile de concevoir des formulaires pour votre application tout en conservant la même conception graphique.

Sélecteurs

Un autre changement important est que vous pouvez créer des feuilles de style par classe, par type d’objet, par nom d’objet ou par attributs.

Sélecteur de type d’objet

Avec le sélecteur de type d’objet (équivalent du sélecteur d’élément CSS), vous pouvez définir des propriétés communes applicables à tous les objets de la base de données. Par exemple, toutes les boîtes de liste doivent avoir un en-tête de 2 lignes, les lignes vides ne doivent pas être affichées et les couleurs d’arrière-plan des lignes doivent être gainsboro et whitesmoke :

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

Grâce à ce sélecteur, vous pouvez définir votre propre look and feel pour vos objets de formulaire.

Sélecteur d’attributs

Avec le sélecteur d’attributs, vous pouvez définir une feuille de style par la valeur d’une propriété.

Par exemple, dans les formulaires de données d’entrée/sortie, j’ai des boutons pour ajouter, modifier ou supprimer des enregistrements. Tous ces boutons utilisent la même icône, le même titre et les mêmes conseils d’aide.

Pourquoi ne pas créer une feuille de style pour les boutons d’action et désigner une valeur spécifique pour la propriété d’action ? Par exemple, si la propriété d’action est définie sur « editSubrecord » :

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