Používateľské rozhranie Windows 8 aplikácie podľa šablóny Grid App

Šablóna je určená pre aplikácie, ktoré prezentujú trojúrovňovú hierarchia. Ako príklad uvediem publikačný portál. Na najvyššej úrovni sú články rozdelené do kategórií, ma nižšej úrovni hierarchie sa zobrazujú články vo vybranej kategórii a na najnižšej úrovni sa zobrazí kontext článku.

Po spustení aplikácie sa zobrazí domovská stránka, na ktoré sa zobrazuje zoznam skupín. Vo všeobecnosti je skupina pomenovaná množina, ktorá zapuzdruje objekty rovnakého typu. U publikačného portálu to môžu byť správy z domova, zo zahraničia, športové správy, kultúrna rubrika, inzeráty a podobne. Ak užívateľ niektorú skupinu vyberie, aplikácia otvorí stránku na ktorej je zobrazená vľavo charakteristika skupiny, či už slovne, obrázkom, alebo kombináciou textu a obrázku. Zoznam položiek sa zobrazí na pravej strane. Konkrétnu položku môže používateľ vybrať buď na domovskej stránke, alebo na stránke skupiny. V oboch prípadoch sa otvorí celostránkové zobrazenie s podrobnosťami o položke. V prípade publikačného portálu sa zobrazí text článku



Šablóna Grid App obsahuje XAML stránky:

  • App.xaml – stránka ktorá sa načíta ako prvá po spustení aplikácie, obsahuje definície štýlov, resourceov a podobne. Táto stránka neobsahuje žiadny vizuálny obsah a preto sa znej nič nezobrazí.
  • GroupedItemsPage.xaml – domovská stránka aplikácie, ktorá sa zobrazí po spustení. Umožňuje používateľovi zobraziť skupiny a položky a buď výberom položky prejsť na jej celostránkové zobrazenie, alebo výberom skupiny (kliknutím na názov skupiny v hornej časti stránky) prejsť na stránku podrobností skupiny. Táto stránka zobrazuje len niekoľko položiek z každej skupiny. Implicitne sa zobrazuje 6 položiek
  • GroupDetailPage.xaml – stránka zobrazuje podrobnosti o skupine vľavo a zoznam položiek vpravo. Výberom položky sa používateľ naviguje na jej celostránkové zobrazenie.
  • ItemDetailPage.xaml – celostránkové zobrazenie vybranej položky.

Ku XAML stránkam sú priradené súbory s kódom aplikačnej logiky

  • App.xaml.cs |. Vb |. Cpp |. H – definuje správanie aplikácie po spustení.
  • GroupedItemsPage.xaml.cs |. Vb |. Cpp |. H – definuje správanie domovskej stránky.
  • GroupDetailPage.xaml.cs |. Vb |. Cpp |. H – definuje správanie stránky podrobností skupiny.
  • ItemDetailPage.xaml.cs |. Vb |. Cpp |. H – definuje správanie celostránkového zobrazenia položky.
  • SampleDataSource.cs |. Vb |. Cpp |. H – objekt zdroja údajov na ktorý sú napojené vizuálne prvky na XAML stránkach.

Väčšiu vypovedaciu hodnotu než podrobný popis prvkov budú mať pre niekoho komentované obrázky novej aplikácie vytvorenej podľa príslušnej šablóny.



Zatiaľ čo v aplikácii typu publikačný portál na predchádzajúcom obrázku poznáte pôvod v šablóne Grid App na prvý pohľad, nasledujúca aplikácia taktiež profituje z možností zobrazovania hierarchicky štruktúrovaných objektov, no dizajn šablóny Grid App je prispôsobený námetu. Námetom je prezentovanie slovenských aplikácií vo Windows Obchode a aplikácie sú podobne ako v obchode rozdelené do kategórií



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: