Anpassen von Schaltflächen, Optionsfeldern und Kontrollkästchen mithilfe von Hintergrund- und Rahmen-Eigenschaften

Stellen Sie sich vor, Sie erstellen eine Symbolleiste mit bunten Aktionsschaltflächen oder ein Einstellungsfenster mit stilvoll gestalteten Optionsfeldern und Kontrollkästchen. Sie benötigen dafür keine eigenen Grafiken oder aufwendigen Bilder, sondern lediglich eine blaue Schaltfläche mit abgerundeten Ecken und einem dezenten Rahmen.

Bislang mussten selbst für einfache visuelle Anpassungen spezielle Bildelemente erstellt werden.

Ab 4D 21 R5 können Sie Hintergrundfarben und Rahmen-Eigenschaften direkt für individuell gestaltete Schaltflächen, Optionsfelder und Kontrollkästchen festlegen.

Objekte direkt einfärben

Bisher war für die Anpassung der Hintergrundfarbe einer benutzerdefinierten Schaltfläche, eines Optionsfelds oder eines Kontrollkästchens die Verwendung eines Hintergrundbildes erforderlich. Jetzt können Sie eine Hintergrundfarbe im Formular-Editor festlegen oder sie zur Laufzeit mithilfe von 4D-Befehlen ändern.

Für Schaltflächen wurde ein neuer Rahmenstil „custom“ eingeführt, um die Abwärtskompatibilität zu gewährleisten. Er aktiviert die neue Hintergrundeigenschaft, ohne das Erscheinungsbild bestehender Schaltflächen zu verändern.

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

Der Standardwert ist „none“, wodurch das Erscheinungsbild bestehender Formulare beibehalten wird. Ist ein Hintergrundbild vorhanden, wird es über der Hintergrundfarbe dargestellt, sodass Sie farbige Hintergründe mit transparenten Symbolen oder Bildern kombinieren können.

Rahmen in Sekundenschnelle hinzufügen

Sie benötigen keine speziellen Bilddateien mehr, nur um einen Rahmen hinzuzufügen. Mit den neuen Rahmeneigenschaften können Sie das Erscheinungsbild Ihrer individuell gestalteten Schaltflächen, Optionsfelder oder Kontrollkästchen direkt anpassen:

• Rahmenfarbe
• Rahmenbreite
• Eckenradius

Ganz gleich, ob Sie dezente Umrisse oder abgerundete Aktionsschaltflächen bevorzugen – alles lässt sich nun direkt über den Formular-Editor, CSS oder 4D-Code konfigurieren.

Und wenn Sie abgerundete Ecken mit einem Hintergrundbild oder einer Hintergrundfarbe kombinieren, schneidet 4D den Hintergrund automatisch an den Rahmen an. Es ist weder eine Maskierung noch eine Bildbearbeitung erforderlich.

Bei Schaltflächen sind diese neuen Eigenschaften nur verfügbar, wenn der Rahmenstil auf „benutzerdefiniert“ gesetzt ist, wodurch das Erscheinungsbild bestehender Formulare erhalten bleibt.

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

Einmal mit CSS gestalten

Wenn Ihre Anwendung bereits CSS verwendet, fügen sich diese neuen Eigenschaften nahtlos in Ihr bestehendes Styling ein. Definieren Sie einen Stil einmalig und wenden Sie ihn überall dort an, wo Sie ihn benötigen.

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #164B52;
        borderColor: #45A9B9;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #45A9B9;
        textAlign: center;
    }
}

Dies erleichtert die Erstellung einer einheitlichen visuellen Identität für alle Ihre Formulare und reduziert gleichzeitig die Anzahl der zu pflegenden Bilddateien.

Einfachere Gestaltung, weniger Wartungsaufwand

Bildbasierte Objekte sind nach wie vor die beste Wahl, wenn Sie für jeden Zustand ein anderes Erscheinungsbild benötigen. In den vielen Fällen jedoch, in denen eine einfache farbige Schaltfläche, ein Optionsfeld oder ein Kontrollkästchen ausreicht, bieten Hintergrund- und Rahmen-Eigenschaften eine wesentlich schnellere und einfachere Lösung.

Ob Sie diese im Formular-Editor konfigurieren, mit CSS gestalten oder per Code aktualisieren – das Ergebnis ist dasselbe: weniger Bilddateien, die verwaltet werden müssen, und mehr Zeit für die Entwicklung Ihrer Anwendung statt für die Bearbeitung von Grafiken.