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

Návrh používateľského rozhrania aplikácie

Nakoľko sa jedná o nástroj určený aj ľuďom, ktorí dosiaľ neprogramovali, návod pre návrh používateľského rozhrania bude podrobný, krok za krokom. Kliknutím na tlačidlo so symbolom “+” v krúžku v pravom hornom rohu obrazovky sa zobrazí ponuka vizuálnych prvkov, pomocou ktorých môžete vytvárať používateľské rozhranie aplikácie.

Názov aplikácie

Začneme názvom aplikácie. Po spustení aplikácie by malo byť používateľovi okamžite jasné, ako sa aplikácie ovláda a čo je jej účelom. Preto odporúčame na úvodnú obrazovku aplikácie umiestniť návrh veľkým fontom. Pridajte prvok typu Label, do ktorého vložíte text – návrh aplikácie.

Všimnite si v dolnej časti na nástrojovej lište tlačidlo “Design” (symbol ceruzky v krúžku). Kliknutím na tlačidlo sa zobrazí ponuka funkcií pre úpravu dizajnu vybraného prvku. V prípade textového poľa môžete meniť typ písma, jeho veľkosť, farbu, zarovnanie, výplň a podobne.

Hlavná ponuka aplikácie

Pre hlavnú ponuku aplikácie, v tomto prípade kategorizáciu tovaru s výhodou využijeme tematické videá, ktoré sa viažu k jednotlivým kategóriám. Ponuku vizuálnych prvkov zobrazíte tlačidlom so symbolom “+” v krúžku, ktoré je pravom hornom rohu. Všimnite si, že ponuka vizuálnych prvkov využíva dva typy dlaždíc. Štvorcové pre samotné prvky a obdĺžnikové pre kategórie prvkov. V aktuálnej verzii Sieny sú dve obdĺžnikové dlaždice – Galleries, pre zobrazovanie kolekcie obrázkov a Shapes s ponukou geometrických a iných tvarov. Z ponuky vyberte Galleries. Zobrazí sa vám rozšírená ponuka pre zobrazenie kolekcie entít

Pre videá použijeme typ ImageGallery, ktorá zobrazuje obrázky priradené k videám. Prvým krokom bude napojenie vizuálneho prvku ImageGallery na zdroj údajov. Automaticky sa zobrazí dialóg v ktorom môžete vybrať tabuľku, na ktorú bude zdroj údajov napojený. V našom prípade je to tabuľka AWVideos. Upravte rozmery prvku ImageGallery, aby vyplnil na obrazovke čo najviac priestoru.

Obrazovka s konkrétnou ponukou

Kliknutím na tematický obrázok s motívom športu pre ktorý chce používateľ zobraziť ponuku tovaru by sa mal navigovať na samostatnú obrazovku aplikácie, ktorá bude ponúkať produkty určené pre vybraný typ športu. Preto vytvoríme ďalšiu obrazovku, V aplikačnom menu aktivujte funkciu Add Screen. Všimnite si, že na aplikačnej lište pribudla pre túto, zatiaľ prázdnu obrazovku sekundárna dlaždica.

Skôr než navrhneme pre túto obrazovku dizajn, je potrebné vrátiť sa na úvodnú obrazovku a nadefinovať správanie sa aplikácie po zatlačení niektorej z dlaždíc. Pomocou tlačidla On Select na spodnej aplikačnej lište definujete akciu po zatlačení prvku. K dispozícii sú tri typy akcií: Navigate, Collect a Remove. Zvoľte možnosť Navigate a definujte, že navigovať sa bude na druhú obrazovku (Screen2). Všimnite si v dolnej časti možnosť voľby prechodového animovaného efektu pri prechode na inú obrazovku.

Fungovanie navigácie si môžete interaktívne vyskúšať tak, že na úvodnej obrazovke aplikácie kliknete na prvú dlaždicu. Zobrazí sa vám zatiaľ prázdna druhá obrazovka.

Na druhú obrazovku (Screen2) umiestnite prvok Video Player. Roztiahnite ho tak, aby pokrýval celú plochu obrazovky. Na ploche prehrávača je obrázok (poster) s tyrkysovo modrým pozadím, ktorý vám pomôže pri vizuálnom zakomponovaní prvku. Aby však pri prechode na druhú obrazovku tento poster na chvíľu nepreblikal, odporúčame ho odstrániť. Na aplikačnej lište aktivujte tlačidlo Image a vymažte implicitný poster Sample!PosterImage.

Následne definujte kľúčovú funkcionalitu prvku VideoPlayer, teda video, ktoré sa bude prehrávať. Na aplikačnej lište aktivujte tlačidlo Media. Vyberte voľbu Gallery1!Selected. Táto voľba definuje, že sa bude prehrávať video priradené cez zdroj údajov (excelovský dokument) k príslušnému obrázku v galérii. Ešte je potrebné zvoliť atribút VideoURL. Všimnite si, že týmto postupným označovaním volieb sme definovali cestu k zdrojovému videosúboru, ktorý sa bude prehrávať. Je v tvare Gallery1!Selected!VideoURL. Je to reťazec, ktorého jednotlivé čiastkové atribúty sú oddelené znakom výkričník.

Pre základnú funkcionalitu stránky, zatiaľ bez ponuky produktov musíte v ľavom hornom rohu definovať tlačidlo pre návrat na úvodnú obrazovku aplikácie. Bude to tlačidlo so symbolom šípky smerujúcej vpravo v krúžku. V ponuke vizuálnych prvkov vyberte položku Shapes. Následne sa zobrazí rozšírená ponuka tvarov. Vyberte prvok Back Arrow a umiestnite ho do ľavého horného rohu obrazovky Screen2. Pomocou tlačidla On Select na spodnej aplikačnej lište definujte akciu – v tomto prípade navigáciu na úvodnú obrazovku aplikácie Screen1

Po prípravných fázach na obrazovke Screen2 v ktorých sme definovali tematické video, ktoré sa bude prehrávať na pozadí a tlačidla pre navigáciu na úvodnú obrazovku vstupujeme do z hľadiska funkcionality najdôležitejšej fázy – zobrazenia ponuky produktov pre vybraný šport. Z ponuky Galleries vyberte položku Image Gallery with Caption. Všimnite si, že k dispozícii sú dva prvky s týmto názvom. Líšia sa usporiadaním obrázkov. V tomto prípade bude výhodnejší prvok s vertikálnym usporiadaním obrázkov. Napojte ho na zdroj údajov – v tomto prípade na tabuľku AWProducts. Premiestnite prvok k pravému zvislému okraju obrazovky, nakoľko vľavo by sa jednak musel deliť o priestor s tlačidlom pre navigáciu na úvodnú obrazovku, ale hlavne by prekrýval ústredný motív videa – postavu ktorá športuje v ľavej časti obrazovky.

Môžete upraviť šablónu, podľa ktorej sa budú obrázky projektov v galérii zobrazovať. V našom prípade budeme potrebovať upraviť výšku. Obrázkov aby sa nám ich na obrazovku vošlo viac. Vyberte galériu ako celok a na spodnej lište kliknite na tlačidlo Template Size. Zmeňte výšku šablóny napríklad na 200 pixelov. Obrázky by sa zobrazili neproporcionálne. Preto je potrebné vybrať ľubovoľný obrázok v galérii a nastaviť parameter Image Position, ktorý je implicitne nastavený na Fill na hodnotu Fit, aby sa zachovala horizontálna aj vertikálna mierka obrázkov. Následne môžete zúžiť šírku celého prvku Image Gallery with Caption.

Zdalo by sa, že aplikácia je hotová, ale zatiaľ je tu jeden problém. Bez ohľadu na vybraný druh športu sa zobrazí kompletná ponuka produktov, čiže lyžiarovi sa zobrazia aj horolezecké laná a potreby pre surfistov. Preto musíte medzi zdroj údajov, v tomto prípade tabuľku AWProducts a prvok Image Gallery zaradiť filter, ktorý vyberie len relevantné produkty.

Označte prvok Image Gallery a na spodnej lište kliknite na tlačidlo Data (úplne vľavo). Následne aktivujte tlačidlo Items a názov tabuľky v editačnom okne AWProducts nahradíme definíciou podmienky pre filter.

V našom prípade vyberieme produkty podľa vybraného športu a budú sa zobrazovať postupne počas prehrávania videa podľa atribútu ShowTime. Definícia filtra bude:

Filter(AWProducts, Sport = Gallery1!Selected!Sport && ShowTime < VideoPlayer1!Time)

Pri tvorbe filtra vám pomôže interaktívna inteligentná nápoveda, ktorá ponúka atribúty a operátory.

Zobrazovanie produktov môžete ešte vylepšiť pridaním utriedenia.

Sort(Filter(AWProducts, Sport = Gallery1!Selected!Sport && ShowTime < VideoPlayer1!Time), ShowTime, Descending)

Teraz môžete aplikáciu vyskúšať. Počas prehrávania videa sa budú postupne zobrazovať produkty.

Týmto krokom je prezentačná časť aplikácie zavŕšená. K funkcionalite e-shopu však ešte chýba ďalšia kľúčová funkcionalita – možnosť výberu produktov. To bude námetom ďalšieho príspevku.

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: