Projektdatenbanken: Verschönern Sie Ihre Formulare mit Stilvorlagen

November 8, 2019 3 Lesezeit

Mit den klassischen 4D Binärstrukturen können Sie Stilvorlagen definieren, um die Schriftart, die Schriftgröße und den Textstil für Ihre Formulare sowohl für die macOS- als auch für die Windows-Plattform festzulegen. Mit Projektdatenbanken können Sie sogar noch weiter gehen, indem Sie die Eigenschaften einer Schaltfläche mit vier Zuständen definieren, die Farbe und den Rahmen aller Linienobjekte festlegen oder sogar die Kopfhöhe aller Listenfelder einer Anwendung bestimmen! 4D hat sich von der Grammatik und Syntax von CSS inspirieren lassen und sie an die spezifischen Anforderungen der Formulare in 4D Projektdatenbanken angepasst. Dank der Stylesheets können Sie alle Eigenschaften konfigurieren, um wirklich optisch ansprechende Formulare zu erstellen. Dieser Blogbeitrag zeigt Ihnen wie!

Beispiel einer Stylesheet-Datenbank

Plattform

In Projektdatenbanken können Sie sowohl individuelle Stilvorlagen für beide Plattformen (Windows oder macOS) als auch eine „allgemeine“ Stilvorlage definieren.

Warum sollten Sie unterschiedliche Formatvorlagen für jede Plattform verwenden? Weil unter macOS oft eine andere Schriftart/Schriftgröße verwendet wird als unter Windows. Andererseits ist die Farbe des Textes oft für beide identisch.

Nun können Sie allgemeine Stile in der Datei „stylesheets.css“ und plattformspezifische Stile in eigenen Dateien definieren: „stylesheets_mac.css“ und „stylesheets_windows.css“.

Eigenschaften

Eine der wichtigsten Neuerungen in Projektdatenbanken besteht darin, dass alle von Formularobjekten unterstützten Eigenschaften in Stilvorlagen verwendet werden können.

Sie können beispielsweise eine „buttonAction“-Klasse erstellen, um Schaltflächen mit 4 Zuständen im „Toolbar“-Look, grauem Text und nicht fokussierbar zu erstellen:

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

Dies macht es einfacher, Formulare für Ihre Anwendung zu entwerfen und dabei das gleiche grafische Design beizubehalten.

Selektoren

Eine weitere wichtige Neuerung ist, dass Sie Stilvorlagen nach Klasse, Objekttyp, Objektname oder Attributen erstellen können.

Objekttyp-Selektor

Mit dem Objekttyp-Selektor (entspricht dem CSS-Element-Selektor) können Sie gemeinsame Eigenschaften definieren, die für alle Objekte in der Datenbank gelten. So müssen z. B. alle Listenfelder eine zweizeilige Überschrift haben, leere Zeilen dürfen nicht angezeigt werden, und die Hintergrundfarben der Zeilen müssen gainsboro und whitesmoke sein:

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

Dank dieses Selektors können Sie Ihr eigenes Aussehen für Ihre Formularobjekte definieren.

Attribut-Selektor

Mit dem Attributselektor können Sie eine Stilvorlage über einen Eigenschaftswert definieren.

In den Formularen für die Eingabe/Ausgabe von Daten habe ich zum Beispiel Schaltflächen zum Hinzufügen, Bearbeiten oder Löschen von Datensätzen. Alle diese Schaltflächen verwenden das gleiche Symbol, den gleichen Titel und die gleichen Hilfetipps.

Warum nicht eine Stilvorlage für Aktionsschaltflächen erstellen und einen bestimmten Wert für die Aktionseigenschaft festlegen? Zum Beispiel, wenn die Aktionseigenschaft auf „editSubrecord“ eingestellt ist:

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