Verleihen Sie Ihren Formularobjekten die Rahmenfarbe, die sie verdienen

Eine gut gewählte Rahmenfarbe kann ein Formular übersichtlicher machen und ihm ein professionelleres, einheitliches Erscheinungsbild verleihen. Ganz gleich, ob Sie ein wichtiges Feld hervorheben, eine Gruppe von Objekten abgrenzen oder einfach nur die visuelle Identität Ihrer Anwendung widerspiegeln möchten – Rahmen können ein wirkungsvoller Bestandteil Ihres UI-Designs sein.

Ab 4D 21 R5 können Sie die Rahmenfarbe unabhängig von der Schriftfarbe für Objekte mit Text festlegen, beispielsweise für statischen Text und Eingabeobjekte. Die Rahmenfarbe steht auch für Objekte zur Verfügung, die keine Textfarbe haben, wie beispielsweise Unterformulare und Drehfelder, sodass Sie eine einheitliche Steuerung der Rahmen über eine größere Bandbreite von Formularobjekten hinweg erhalten. Konfigurieren Sie sie im Formular-Editor, aktualisieren Sie sie dynamisch mit 4D-Code oder wenden Sie sie über CSS an.

Festlegen der Rahmenfarbe im Formular-Editor

Die neue Eigenschaft„border color“ weist jedem unterstützten Objekt eine eigene Rahmenfarbe zu. Wählen Sie ein Objekt aus und legen Sie dann die Farbe im Abschnitt „Border“ des Inspektors fest.

Bei Objekten mit einer Schriftfarbe, wie statischem Text oder Eingabeobjekten, kann die Rahmenfarbe nun unabhängig davon definiert werden. Bei Objekten ohne Textfarbe, wie Unterformularen oder Drehfeldern, ermöglicht Ihnen die Eigenschaft einfach die direkte Steuerung des Rahmens.

Die Eigenschaft funktioniert mit den Rahmenstilen „einfach“ und „gepunktet“. Bei Objekten mit einer Schriftfarbe lautet der Standardwert „Wie Schrift“. Bei Objekten ohne Textfarbe lautet der Standardwert „Automatisch“. Diese Standardeinstellungen bewahren das Erscheinungsbild bestehender Formulare und ermöglichen es Ihnen gleichzeitig, bei Bedarf eine separate Rahmenfarbe festzulegen.

So können Sie beispielsweise eine kräftige Textfarbe beibehalten und gleichzeitig einen dezenteren Umriss verwenden, einer Gruppe von Eingabefeldern eine gemeinsame Akzentfarbe zuweisen oder eine einheitliche Rahmenfarbe auf verschiedene Arten von Formularobjekten anwenden, ohne deren andere visuelle Eigenschaften zu ändern.

Rahmen zur Laufzeit aktualisieren

Der Zustand Ihrer Anwendung kann nun den Rahmen unabhängig von den anderen Farben des Objekts beeinflussen. Sie können die aktuelle Eingabe hervorheben, auf ein Validierungsproblem hinweisen oder die Aufmerksamkeit auf eine Liste lenken, die eine Aktion erfordert. Der gleiche Ansatz lässt sich auch bei Objekten anwenden, die keine Textfarbe haben. So können Sie beispielsweise eine bestimmte Rahmenfarbe verwenden, um ein Unterformular optisch hervorzuheben oder einen Spinner zu markieren, wenn dieser Aufmerksamkeit erfordert.

Wenn ein Benutzer beispielsweise ein Formular validiert, können Sie sofort auf einen ungültigen Wert hinweisen, indem Sie die Rahmenfarbe des Eingabefelds ändern und daneben eine zusätzliche Meldung anzeigen.

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

Sie können die Rahmenfarbe auch verwenden, um den äußeren Rahmen des Listenfelds an dessen innere Rasterlinien anzupassen und so ein einheitliches Erscheinungsbild über die gesamte Liste hinweg zu schaffen.

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

Außerdem können Sie die aktuelle Rahmenfarbe abrufen, wenn Ihre Formularlogik den visuellen Zustand eines Objekts beibehalten oder wiederverwenden muss.

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

Stilgestaltung mit CSS einheitlich halten

Wenn Ihr Projekt bereits CSS-Klassen für die Formulargestaltung verwendet, fügt sich „borderColor“ nahtlos in denselben Arbeitsablauf ein. Definieren Sie den Rahmenstil und die Farbe gemeinsam und verwenden Sie die Klasse dann für alle Objekte wieder, die dieselbe visuelle Sprache teilen sollen.

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

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

CSS erleichtert die Pflege von Regeln für helle und dunkle Darstellungen oder die Anwendung eines einheitlichen visuellen Stils in Ihren Formularen, ohne jedes Objekt einzeln bearbeiten zu müssen.

Eine klarere visuelle Sprache für Formulare

Die neue Eigenschaft „border-color“ ermöglicht Ihnen eine präzisere Steuerung Ihrer Formularobjekte:

• Legen Sie eine eigene Rahmenfarbe für Formularobjekte fest, gegebenenfalls unabhängig von deren Schriftfarbe.
• Konfigurieren Sie die Eigenschaft im Formular-Editor oder über CSS.
• Lesen und aktualisieren Sie Rahmenfarben zur Laufzeit mit „OBJECT SET RGB COLORS“ und „OBJECT GET RGB COLORS“.
• Behalten Sie das bestehende Erscheinungsbild von Formularen mit den Standardwerten „likeFont“ und „automatic“ bei.

Sie können Rahmen nun bewusst als Teil der visuellen Gestaltung Ihres Formulars einsetzen, unabhängig davon, ob sie im Formular-Editor konfiguriert, über CSS definiert oder dynamisch durch Ihre Anwendungslogik aktualisiert werden.