Qodly Studio pro 4D: Dynamická uživatelská rozhraní se stavy stránek

Qodly Studio pro 4D představilo ve verzi 4D 20 R6 novou vzrušující funkci: Stavy stránky. Možná jste se již setkali s naším předchozím příspěvkem, ale pojďme prozkoumat, v čem je tato funkce tak cenná pro dynamická uživatelská rozhraní.

Představte si uživatelská rozhraní, která se okamžitě přizpůsobují různým krokům nebo kontextům uživatele.

Zde jsou některé běžné případy použití, ve kterých stavy stránky zazáří:

• Aktivujte nebo deaktivujte komponenty na základě akcí uživatele (např. aktivujte tlačítko „Uložit“ pouze tehdy, když jsou vyplněna všechna povinná pole).
• Přepínání mezi světlým a tmavým režimem pomocí jednoduchého přepínače.
• Omezit přístup k akcím (čtení, aktualizace atd.) na základě oprávnění uživatele.

PIQS_States

Stavy stránky: Dynamické řešení pro interaktivní uživatelská rozhraní

Ale co přesně je stav stránky? Stav je definován tím, jak se liší od původní stránky Qodly, známé jako Základní stránka, a umožňuje podmíněně zviditelnit prvky uživatelského rozhraní nebo použít různé styly na základě interakcí uživatele. A vše začíná u Základní stránky, původního rozvržení uživatelského rozhraní.

K dispozici je nová sekce Stavy, která slouží ke zpracování stavů.

Začněme jednoduchým příkladem.

Tato stránka Qodly má stylový rámeček s průhledným pozadím. Jedná se o Základní stránku.

Pokud chcete uživateli předložit variantu Základní stránky, vytvořte nový stav, vyberte jej v seznamu Stavy a navrhněte jej.

Zde byl vytvořen stav Zelená, který má zelené pozadí místo průhledného pozadí Základní stránky.

Byl vytvořen takéstav Purples fialovým pozadím namísto průhledného pozadí, které nabízí stránka Base.

Účelem je zapnout nebo vypnout stav podle situací, které se vyskytnou během uživatelského prostředí.

Na stránce Qodly můžete vytvořit tolik stavů, kolik potřebujete podle případů použití, se kterými se koncový uživatel setká.

Povoleno může být několik stavů najednou.

Jak povolíte nebo zakážete stavy?

Aktivaci nebo deaktivaci stavu lze provést třemi způsoby:

1. Pomocí standardních akcí
2. Prostřednictvím vazby na stav
3. Z back-end kódu na serveru

standardní akce stavu

Díky standardním akcím můžete zapínat/vypínat stavy při interakci uživatele se stránkou.

V příkladu níže uživatelské rozhraní navrhuje světlý a tmavý režim. Stav Light zpracovává světlý režim pomocí CSS lightMode

, a tmavý stav zpracovává tmavý režim pomocí css darkMode

Níže je uvedena základní stránka. Když uživatel klikne na ikonu světla, zapne se světlý stav a tmavý stav se vypne.

(A opačná akce se provede, když uživatel klikne na tmavou ikonu: Tmavý stav je povolen a Světlý stav je zakázán).

Zde je konečný výsledek.

podmíněné stavy

Zde se odehrává skutečné kouzlo. Stavy lze vázat na podmínky, což umožňuje uživatelskému rozhraní reagovat na konkrétní kritéria, jako jsou uživatelská oprávnění nebo hodnoty dat. Stav je dynamicky povolen nebo zakázán podle vyhodnocení podmínky jako TRUE nebo FALSE.

V tomto příkladu uživatelské rozhraní zobrazuje seznam produktů a část Podrobnosti o produktu, která nakonec aktualizuje název vybraného produktu.

Byly vytvořeny dva stavy:

• stav ReadOnly
• stav Aktualizace

Je snadné to uhodnout: stav Update je potřeba, když uživatel může vybraný produkt aktualizovat, zatímco stav ReadOnly je potřeba, když uživatel může údaje o produktu pouze zobrazit.

Níže je uveden stav Update. V části Podrobnosti o produktu je povoleno pole Název a je zde tlačítko Uložit.

A zde je stav ReadOnly. V sekci Podrobnosti o produktu je pouze vypnuté pole Název.

Stavy ReadOnly a Update jsou každý vázán na podmínku. Možnost aktualizovat produkt závisí na vybraném atributu produktu, který lze aktualizovat.

Stav ReadOnly je povolen, pokud je podmínka theProduct.updatable = false. Stav Update je povolen, pokud je podmínka theProduct.updatable = true.

Zde je konečný výsledek.

Díky výkonnému a uživatelsky přívětivému editoru podmínek můžete vytvářet vnořené podmínky, které zvládnou i tu nejsložitější obchodní logiku!

Tyto podmínky mohou být založeny na kritériích, jako jsou hodnoty zdrojeQodly , zda relace má nebo nemá některá oprávnění a další. Více se dozvíte v dokumentaci.

Zpracování stavů ze serveru

Poslední věc, kterou je třeba si uvědomit, je, že povolení/zakázání stavů z back-end kódu může být užitečné, pokud lze některá obchodní pravidla vyhodnotit pouze na back-endu.

V přiložené ukázce uvidíte takový příklad. Uživatel vybírá produkty. Jakmile je celková částka vybraných produktů vyšší nebo rovna 300 USD, je povolen stav zabraňující jakémukoli výběru produktů.

Díky funkcímWeb Form.enableState() a Web Form.disableState() je toto provedeno.

Níže je uveden kód. Stav LimitReached zakáže jakýkoli uživatelský výběr.

	If ($tempSelection.sum("price")>=300)
		Web Form.enableState("LimitReached")
		Web Form.disableState("Initial")
	End if 

Zde je konečný výsledek.

Chcete to vidět v akci?

Stáhněte si přiloženou ukázku Play In Qodly Studio, kde se dozvíte, jak používat stavy stránky a jak koncovým uživatelům nabídnout dynamické rozhraní.