Siena – príklad vytvorenia Windows 8.1 aplikácie bez programovania III.

Výber produktov z ponuky

Ponuková časť aplikácie je vytvorená, avšak aplikácia zatiaľ slúži len na prezentačné účely. Aby si používateľ mohol z ponúkaných možností vybrať, je potrebné vytvoriť virtuálny nákupný košík, v tomto prípade veľmi zjednodušený. Nebudeme riešiť objednávací proces (aplikácia využíva fiktívne údaje fiktívnej firmy), len v aplikácii zapamätáme, ktoré produkty si používateľ vybral a vložil ich do virtuálneho nákupného košíka.

Fungovanie aplikácie môžete kedykoľvek vyskúšať. Stačí na hornej aplikačnej lište aktivovať tlačidlo Preview situované úplne vpravo.

Aby sme používateľovi umožnili označiť položku, pridáme do prvku Image Gallery prvok CheckBox. Stačí ho pridať v šablóne k jednému objektu a bude zobrazený pri všetkých položkách. Umiestnite ho v sposnej časti šablóny položky vľavo od jej názvu. Implicitne sa pri zaškrtávacom políčku zobrazí názov Option. Tento názov nebudeme potrebovať, preto ho vymažte.

K prvku CheckBox je potrebné definovať funkcionalitu – pridanie vybraného objektu do zoznamu, ktorý je fyzicky reprezentovaný programátorom dobre známym objektom typu Collection. Programátor by taktiež povedal, že bude programovať obsluhu udalostí, čiže zaškrtnutie prvku CheckBox, alebo zrušenie zaškrtnutia. V prostredí Siena nebudeme pochopiteľne nič programovať, ale budeme definovať obsluhu udalostí – čo sa stane po zaškrtnutí, alebo zrušení zaškrtnutia prvku CheckBox .

Kliknite na tlačidlo Behavior na spodnej lište a následne na tlačidlo OnChecked. Zapnite voľbu Collect. Aby mohol používateľ svoju voľbu aj korigovať, teda zrušiť definujte funkcionalitu Remove pre udalosť OnUnchecked. V tomto prípade odstráni aplikácia predtým vybraný objekt z kolekcie.

Zobrazenie vybraných produktov

Aby ste mohli zobraziť vybrané produkty, je potrebné vytvoriť a navrhnúť ďalšiu, v poradí už tretiu obrazovku aplikácie Screen3. Pridajte novú obrazovku a na nej postupom popísaným v predchádzajúcej stati prvok Back Arrows (nájdete ho v ponuke vizuálnych prvkov po kliknutí na dlaždicu Shapes). Ako akciu na udalosť OnSelected definujte navigáciu na obrazovku Screen2. Na obrazovku Screen3 môžete umiestniť vhodný titulok napríklad “Moje vybrané produkty”, “Môj nákupný košík” a podobne

Vráťte sa na Screen2 (obrazovka s videami a ponukou produktov). Označte zaškrtnutím aspoň dva produkty. Na obrazovku Screen3 pridajte vizuálny prvok Image Gallery with Caption, tentokrát v horizontálnom usporiadaní, aby sa čo najlepšie využila plocha obrazovky Screen3. Prvok je po kliknutí na tlačidlo Items na spodnej lište potrebné napojiť na kolekciu zákazníkom vybraných produktov Collection 1.

Pozorný čitateľ si určite všimol, že sme vyriešili navigáciu z obrazovky Screen3 späť na obrazovku Screen2. Ale ako sa používateľ dostane na obrazovku Screen3? Mohli by ste ho tam navigovať po každom označení produktu, ale to by bolo neprehľadné a z hľadiska filozofie prevádzkovateľa aplikácie e-shopu predať čo najviac aj nežiadúce. Po každom výbere produktu zákazníkovi by ho aplikácia odviedla od ďalšej ponuky a pripomínala by mu čo si už vybral. Lepším riešením bude tlačidlo na obrazovke Screen2 pomocou ktorého zákazník môže kedykoľvek nahliadnuť do svojho virtuálneho nákupného košíka.

Predtým by ste mali venovať pozornosť jednej zdanlivo bezvýznamnej drobnosti. Keď už riešite detaily týkajúce sa používateľskej skúsenosti a tieto detaily sú pre úspech rozhodujúce, mali by ste vyriešiť zastavovanie prehrávania videa pri navigácii na/z obrazovky Screen2. Na zapamätanie stavu využijeme kontextovú premennú ktorá uchováva obsah bez ohľadu na to, na ktorej obrazovke sa používateľ nachádza. Nazveme ju napríklad VideoPaused. Na základe obsahu tejto premennej sa video buď spustí alebo zastaví.

Na obrazovke Screen1 označte niektorý prvok z galérie obrázkov k videám a kliknite na tlačidlo OnSelect. Implicitne je definovaná akcia navigácie na obrazovku Screen2.

Navigate(Screen2, ScreenTransition!Fade)

Pridajte do volania procedúry Navigate tretí voliteľný (nepovinný) parameter pre nastavenie premennej VideoPaused na hodnotu false.

Navigate(Screen2, ScreenTransition!Fade, {VideoPaused: false})

Všimnite si malý žltý výstražný trojuholník, ktorý indikuje problém – nastavili ste hodnotu premennej, ktorú zatiaľ nevyužívate.

Obrazovku Screen2 na ktorej sa prehráva video zatiaľ môžete opustiť jediným spôsobom pomocou šipky v ľavom hornom rohu. Pre toto tlačidlo definujte príkaz pre aktualizáciu kontextu, kde nastavíte hodnotu premennej VideoPaused na hodnotu true. Príkaz UpdateContext bude pred príkazom Navigate. Príkazy sú oddelené stredníkom.

UpdateContext({VideoPaused: true});

Navigate(Screen1, ScreenTransition!Fade)

Keď už riešime navigáciu z obrazovky Screen2, pridajte pod galériu s ponukou produktov tlačidlo s vhodným označením napríklad nákupný košík. Pomocou tlačidla OnSelect definujte akciu – navigáciu na obrazovku Screen3.

Pridajte aj príkaz UpdateContext, rovnaký ako u tlačidla v ľavom hornom rohu.

UpdateContext({VideoPaused: true});

Navigate(Screen3, ScreenTransition!Fade)

Zostáva definovať správanie pre prvok VideoPlayer na obrazovke Screen2, aby sa prehrávanie / zastavovanie prehrávania videa riadilo podľa kontextovej premennej VideoPaused.

Teraz môžete aplikáciu vyskúšať pomocou tlačidla Preview na hornej aplikačnej lište.

Vo štvrtom zatiaľ poslednom príspevku venovanom návrhovému prostrediu Siena ukážeme inštaláciu vytvorenej aplikácie a jej publikovanie do Windows obchodu

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: