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

Automaticky přeloženo z Deepl

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.

    blank

    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.

    blank

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

    blank

    Úč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

    blank

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

    blank

    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.

    blank

    (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.

    blank

    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

    blank

    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.

    blank

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

    blank

    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.

    blank

    blankZde je konečný výsledek.
    blank

    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.
    blank

    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í.

    Avatar
    • Product Owner • Marie-Sophie Landrieu-Yvert se připojila k programovému týmu 4D jako Product Owner v roce 2017. Jako Product Owner má na starosti psaní uživatelských příběhů a jejich převod do funkčních specifikací. Její úlohou je také zajistit, aby implementovaná funkce odpovídala potřebám zákazníka. Marie-Sophie vystudovala inženýrskou školu ESIGELEC a svou kariéru zahájila jako inženýrka v IBM v roce 1995. Podílela se na různých projektech (projekty údržby nebo výstavby) a pracovala jako vývojářka Cobol. Poté pracovala jako UML designer a Java developer. V poslední době byly jejími hlavními rolí analyzovat a psát funkčních požadavky a koordinovat obchodní a vývojové týmy.