Nastavte objektům ve formuláři barvu ohraničení, jakou si zaslouží

Dobře zvolená barva ohraničení může usnadnit srozumitelnost formuláře a dodat mu uhlazenější a jednotnější vzhled. Ať už chcete zvýraznit důležité pole, odlišit skupinu objektů nebo jednoduše sladit vzhled s vizuální identitou vaší aplikace, ohraničení mohou být účinnou součástí návrhu uživatelského rozhraní.

Počínaje verzí 4D 21 R5 můžete definovat barvu ohraničení nezávisle na barvě písma u objektů obsahujících text, jako jsou statický text a vstupní objekty. Barva ohraničení je k dispozici i pro objekty, které nemají barvu textu, jako jsou podformuláře a otočné ovládací prvky, což vám umožňuje jednotnou kontrolu nad ohraničením u širší škály objektů formuláře. Nastavte ji v editoru formulářů, aktualizujte ji dynamicky pomocí kódu 4D nebo ji aplikujte prostřednictvím CSS.

Nastavení barvy ohraničení v editoru formulářů

Nová vlastnost„barva ohraničení“ přiřazuje každému podporovanému objektu vlastní barvu ohraničení. Vyberte objekt a poté zvolte barvu v sekci Ohraničení v Inspektoru.

U objektů, které mají barvu písma, jako jsou statický text nebo vstupní objekty, lze nyní barvu ohraničení definovat nezávisle. U objektů bez barvy textu, jako jsou podformuláře nebo otočné ovládací prvky, vám tato vlastnost jednoduše poskytuje přímou kontrolu nad ohraničením.

Tato vlastnost funguje se styly ohraničení „plné“ a „tečkované“. U objektů, které mají barvu písma, je její výchozí hodnota „Stejná jako písmo“. U objektů bez barvy textu je výchozí hodnota „Automaticky“. Tyto výchozí hodnoty zachovávají vzhled stávajících formulářů a zároveň vám umožňují definovat samostatnou barvu ohraničení, kdykoli ji potřebujete.

Můžete například zachovat výraznou barvu textu a zároveň použít jemnější obrys, přiřadit skupině vstupních polí společnou akcentní barvu nebo použít jednotnou barvu ohraničení u různých typů objektů formuláře, aniž byste měnili jejich ostatní vizuální vlastnosti.

Aktualizace ohraničení za běhu

Stav vaší aplikace nyní může ovlivňovat ohraničení nezávisle na ostatních barvách objektu. Můžete zvýraznit aktuální vstup, upozornit na problém s ověřením nebo upoutat pozornost na seznam, který vyžaduje akci. Stejný přístup lze použít u objektů, které nemají barvu textu. Můžete například použít konkrétní barvu ohraničení k vizuálnímu odlišení podformuláře nebo ke zvýraznění rolovacího seznamu, když vyžaduje pozornost.

Například když uživatel ověřuje formulář, můžete okamžitě upozornit na neplatnou hodnotu změnou barvy ohraničení vstupního pole a zobrazením doplňkové zprávy vedle něj.

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

Barvu ohraničení můžete také použít k sladění vnějšího ohraničení seznamu s jeho vnitřními mřížkovými čarami, čímž vytvoříte jednotný vzhled celého seznamu.

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

Aktuální barvu ohraničení můžete také načíst, pokud logika formuláře potřebuje zachovat nebo znovu použít vizuální stav objektu.

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

Udržujte stylování konzistentní pomocí CSS

Pokud váš projekt již pro stylování formulářů používá třídy CSS, „borderColor“ zapadá do stejného pracovního postupu. Definujte styl a barvu ohraničení společně a poté třídu znovu použijte u objektů, které by měly sdílet stejný vizuální jazyk.

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

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

CSS usnadňuje udržování pravidel pro světlé a tmavé zobrazení nebo použití jednotného vizuálního stylu ve všech formulářích, aniž byste museli upravovat každý objekt zvlášť.

Přehlednější vizuální jazyk pro formuláře

Nová vlastnost barvy ohraničení vám umožňuje přesnější kontrolu nad objekty ve formuláři:

• Nastavte pro objekty formuláře specifickou barvu ohraničení, případně nezávisle na barvě jejich písma.
• Tuto vlastnost nakonfigurujte v editoru formulářů nebo pomocí CSS.
• Čtěte a aktualizujte barvy ohraničení za běhu pomocí příkazů„OBJECT SET RGB COLORS“ a „OBJECT GET RGB COLORS“.
• Zachovejte stávající vzhled formuláře pomocí výchozích hodnot „likeFont“ a „automatic“.

Ohraničení nyní můžete záměrně využít jako součást vizuálního jazyka vašeho formuláře, ať už jsou nakonfigurována v editoru formulářů, definována pomocí CSS nebo dynamicky aktualizována logikou vaší aplikace.