Archive for júl, 2014

Príprava Windows Phone 8.1 aplikácie na publikovanie

31. júla 2014

Keď máte vytvorený a odladený čiastkový projekt pre Windows Phone, podobne ako pre Windows 8.1 je potrebné aplikáciu pripraviť na publikovanie, čiže nastaviť pre aplikáciu dôležité parametre v aplikačnom manifeste a doplniť projekt o grafiku.

Aplikačný manifest Windows Phone 8.1 projektu je podobný ako u aplikácie pre Windows 8.1. Odporúčame skontrolovať nastavenie parametrov vo všetkých záložkách

Prvky grafického dizajnu

Ak použijete len odporúčané mierky, pre Windows Phone 8.1 aplikáciu je potrebné pripraviť tieto obrázky

  • Logo.scale240.png (360 x 360 pixelov)
  • SmallLogo.scale240.png (106 x 106 pixelov)
  • SplashScreen.scale240.png (1152 x 1920 pixelov)
  • Square71x71Logo.scale240.png (170 x 170 pixelov)
  • StoreLogo.scale240.png (120 x 120 pixelov)
  • WideLogo.scale240.png (744 x 360 pixelov)

Implicitne sú tieto obrázky umiestnené v adresári <názov projektu>.WindowsPhone/Assets

Ak chcete použiť všetky mierky, potrebujete obrázky

Štvorcová dlaždica

  • Logo.scale100.png (150 x 150 pixelov)
  • Logo.scale140.png (210 x 210 pixelov)
  • Logo.scale240.png (360 x 360 pixelov)

Malá dlaždica

  • SmallLogo.scale100.png (44 x 44 pixelov)
  • SmallLogo.scale140.png (62 x 62 pixelov)
  • SmallLogo.scale240.png (106 x 106 pixelov)

Obrázok pre úvodnú obrazovku

  • SplashScreen.scale100.png – rozmer 480 x 800 pixelov
  • SplashScreen.scale140.png – rozmer 672 x 1120 pixelov
  • SplashScreen.scale240.png – rozmer 1142 x 1920 pixelov

Stredná štvorcová dlaždica

  • Square71x71Logo.scale100.png (71 x 71 pixelov)
  • Square71x71Logo.scale140.png (99 x 99 pixelov)
  • Square71x71Logo.scale180.png (170 x 170 pixelov)

Logo pre Windows Phone Store

  • StoreLogo.scale100.png (50 x 50 pixelov)
  • StoreLogo.scale140.png (70 x 70 pixelov)
  • StoreLogo.scale240.png (120 x 120 pixelov)

Obdĺžniková dlaždica

  • WideLogo.scale-100.png (310 x 150 pixelov)
  • WideLogo.scale-140.png (434 x 210 pixelov)
  • WideLogo.scale-240.png (744 x 360 pixelov)

 

V adresári <názov projektu>.WindowsPhone/Assets sú aj obrázky pozadia pre jednotlivé témy (dark a light).

  • HubBackground.theme-dark.png (1536 x 1280 pixelov)
  • HubBackground.theme-light.png (1536 x 1280 pixelov)

Odporúčame tieto obrázky zosúladiť s dizajnovým zámerom aplikácie.

Aby ste pochopili význam jednotlivých obrázkov, sledujme proces spustenia aplikácie. Bezprostredne po spustení aplikácia načítava údaje potrebné pre jej prácu, či už z webu, alebo zo statického JSON súboru. Počas tohto procesu sa používateľovi zobrazuje na celú obrazovku obrázok SplashScreen.

Počas inicializácie sa zobrazí obrazovka SplashScreen

Ak tlačidlom so symbolom Windows aplikáciu prerušíte, zobrazí sa domovská obrazovka. My sme na ňu už predtým zo zoznamu aplikácií pripli dlaždicu aplikácie Prísady v potravinách.

Dlaždica aplikácie na domovskej obrazovke zariadenia

Keď sme spomenuli obrazovku zo zoznamom aplikácií (zobrazí sa vodorovným gestom na domovskej obrazovke sprava doľava), všimnite si implicitný názov aplikácie, ktorý korešponduje s názvom projektu. Určite nechceme aby sa aplikácia volala PrisadyPotraviny.WindowsPhone, preto je potrebné v aplikačnom manifeste zmeniť v položke Display name názov aplikácie tak ako sa má zobraziť používateľovi

Vaša aplikácia v zozname aplikácii zariadenia Windows Phone 8.1. Všimnite si, že názov aplikácie korešponduje s názvom projektu.

Úprava zobraziteľného názvu aplikácie v aplikačnom manifeste

 

Vytvorenie balíčka pre Windows Phone Store

Finálnym krokom prípravnej fázy pred samotným publikovaním aplikácie do Windows Phone Store je vytvorenie distribučného balíčka, ktorý sa bude uploadovať do Store. Rovnakým postupom, ako pri vytváraní balíčka pre Windows 8.1 aktivujte položku menu Project – Store – Create App Package.

Ďalší postup je prakticky analogický ako keď pripravujete distribučný balíček Windows 8.1 aplikácie, vrátane testovania. Aplikáciu pre Windows Phone môžete priradiť k už existujúcemu názvu, ktorý ste registrovali pre Windows 8.1 aplikáciu.

Priradenie aplikácie k názvu

 

Publikovanie Windows 8.1 aplikácie do aplikačného obchodu

30. júla 2014

Dosiaľ sa dej vývoja, testovania aplikácie a vytvárania distribučného balíčka odohrával vo vývojovom prostredí Visual Studio 2013. Ak ste na návrh dizajnu svojej aplikácie využili nástroj Blend for Visual Studio 2013 máte naše uznanie :-). Samotné publikovanie aplikácie do Windows Store prebieha cez webové rozhranie.

Na webovú stránky Windows Store pre publikovanie sa dostanete buď priamo cez http://msdn.microsoft.com/sk-sk/windows/apps/ záložka Řídíci panel (Dashboard) alebo z Visual studia cez menu Project – Store – Upload App Package.

Stránka obsahujúca postup krokov publikovania aplikácie do Windows Store

Postup publikovania aplikácie je rozdelený do niekoľkých krokov, počnúc rezervovaním originálneho jedinečného názvu a stanovením ceny, alebo výberu možnosti že aplikáciu budete ponúkať zdarma. Názov pre aplikáciu si môžete rezervovať vopred. Aplikáciu musíte publikovať do jedného roku, potom rezervovanie názvu zanikne.

Nedávajte aplikáciám názvy začínajúce písmenom s diakritikou. Cvičnú aplikáciu sme skúšali publikovať pod názvom Éčka v potravinách, teda názvom začínajúcim písmenom s diakritikou. Aplikácia bola schválená a daná do Store, ale používateľom sa nezobrazila. Preto sme projekt publikovali znovu pod názvom Prísady v potravinách. Ak sa nejedná o prvé písmeno, diakritika v názvoch aplikácií nevadí.

Ak chcete aplikáciu predávať, odporúča sa vytvoriť aj časovo, alebo funkčne obmedzenú trial verziu. O jej výhodách a nevýhodách sa dočítate v statiach Skúšobná verzia a Odporúčaná stratégia. V kroku Selling Details vyberáte aj krajiny v ktorých sa aplikácia bude distribuovať. Podľa toho by ste mali voliť aj jazyky používateľského rozhrania.

Jazyk aplikácie a trh spolu nesúvisia, takže aplikáciu v Slovenčine môžete ponúkať bez problémov na Českom, prípadne aj iných trhoch. Ak zvolíte pre aplikáciu globálnu distribúciu, a nechcete ju lokalizovať do všetkých jazykov odporúčame, aby všetky texty používateľského rozhrania boli v angličtine.

Aplikáciu musíte zaradiť do vhodnej kategórie. V dobe pásania publikácie obsahoval Windows Store tieto kategórie (sú uvedení v slovenčine tak ako sa zobrazia slovenskému používateľovi):

  • Správy a počasie
  • Hry
  • Sociálne médiá a siete
  • Zábava
  • Podnikanie
  • Vzdelávanie
  • Knihy a referenčné materiály
  • Nástroje
  • Fotografie
  • Hudba a video
  • Športy
  • Zdravie a kondícia
  • Jedlo a pitie
  • Životný štýl
  • Nakupovanie
  • Cestovanie
  • Financie
  • Produktivita
  • Zabezpečenie
  • Verejná správa

 

Niektoré kategórie majú aj podkategórie, ktoré musíte taktiež vhodne nastaviť

Vzhľadom na charakter aplikácie zadajte vekové obmedzenie. Ak nastavíte obmedzenie nesprávne, aplikácia nebude schválená. Napríklad aplikácia umožňujúca neriadený prístup na internet musí mať vekové obmedzenie 12+. Na publikovanie hier pre niektoré krajiny potrebujete uploadnúť aj Age rating certifikáty. Postup získania certifikátov je popísaný v stati Ako získať Age rating certifikát pre hru.

Ak vaša aplikácia využíva šifrovanie vyplníte v ďalšom kroku príslušný formulár, v opačnom prípade ho len potvrdíte. V sekcii Packages uploadnite predtým vytvorený distribučný balíček.

V sekcii Description je potrebné opísať funkcionalitu aplikácie, zoznam funkcionality v odrážkach a kľúčové slová pre prípadné vyhľadávanie.

Nakoľko používateľovi sa vo Windows Store musí zobraziť aspoň jeden obrázok obrazovky vašej aplikácie, musíte minimálne jeden takýto obrázok aj s povinným popisom, čo na obrázku je uploadovať v sekcii Description. Obrázky musia byť vo formáte png o rozmeroch 1366 x 768 alebo 768 x 1366. Ak má vaše zariadenie iné rozmery obrazovky najjednoduchšie získate obrázky v požadovanom rozlíšení pomocou ikony so symbolom fotoaparátu v emulátore.

Odporúčame nasnímať a uploadovať všetky kľúčové obrazovky vašej aplikácie a ako prvú v poradí uploadovať najzaujímavejší obrázok.

Je to proste výkladná skriňa vašej aplikácie vo Windows Obchode a na základe obrázkov a popisu sa používateľ rozhodne, či si vašu aplikáciu stiahne, alebo nie.

 

Sekcia Description – prvá časť.

V sekcii Description musíte zadať informácie o autorských právach a taktiež aj mailovú adresu, alebo webovú stránku s kontaktnou adresou na ktorej môžu používatelia riešiť s autorom prípadné problémy. Povinnou položkou je aj odkaz na webovú stránku kde sú definované pravidlá ochrany osobných údajov.

Sekcia Description – druhá časť.

Proces schválenia aplikácie trvá typicky dva až 5 dní. O schválení, alebo neschválení aplikácie budete informovaní mailom. Môžete taktiež definovať, či sa má aplikácia publikovať ihneď po schválení alebo k stanovenému dátumu.

Informácia o procese schvaľovania aplikácie.

Ak aplikácia nemá nedostatky, ktoré by bránili jej zverejneniu, bude po schválení dostupná vo Windows Store. Touto fázou sa životný cyklus aplikácie nekončí, aplikáciu budete určite ďalej vylepšovať a rozširovať jej funkcionalitu, či už z vlastného popudu, alebo na základe pripomienok používateľov.

FINÁLE, aplikácia pre Windows 8.1 je vo Windows store

Príprava Windows 8.1 aplikácie na publikovanie

29. júla 2014

Aby ste mohli aplikáciu publikovať do aplikačného obchodu Windows Store, je potrebné správne nastaviť parametre v aplikačnom manifeste a doplniť aplikáciu o nevyhnutnú grafiku, teda o návrhy dynamických dlaždíc a úvodnej obrazovky.

Aplikačný manifest

V aplikačnom manifeste (súbor Package.appxmanifest ) sú informácie potrebné pre zostavenie aplikácie, aby ju bolo možné distribuovať cez pre Windows Obchod. Manifest je fyzicky XML dokument, no údaje v ňom budete vo väčšine prípadov editovať pomocou vizuálneho nástroja.

Aplikačný manifest – záložka Application

Údaje v aplikačnom manifeste sú vo vizuálnom editore rozdelené do záložiek. V záložke Application je potrebné definovať jazyk používateľského rozhrania. Pre slovenčinu odporúčame nastaviť jazyk priamo v XML kóde

<Resources>

<Resource Language=”sk-sk” />

</Resources>

 

V záložke môžete taktiež označiť orientácie zariadenia, ktoré aplikácia podporuje, prípadne minimálnu šírku okna aplikácie, ak je menšia ako 500 pixelov. Windows 8.1 umožňuje pre aplikácie u ktorých to má význam nastaviť minimálnu šírku na 320 pixelov a v takomto úzkom páse vypisovať prijaté maily, tweety…

Pozornosť venujte záložke Capabilities, ktorá zobrazuje zoznam funkcionalít, ktoré môže aplikácia využívať. Implicitne pri vytváraní projektu je označená voľba Internet, čo v praxi znamená, že aplikácia môže využívať údaje z webu. Niektoré funkcie, deklarované v tejto záložke, ktoré by mohli zasiahnuť do súkromia používateľa ako napríklad lokalizačné služby, mikrofón, či kamera sa odblokujú až po súhlase používateľa.

Aplikačný manifest – záložka Capabilities.

 

Prvky grafického dizajnu

Obrázky pre dlaždice, ikony a splash screen pre aplikáciu Prísady v potravinách

Ak chcete iba základnú mierku 100 %, potrebujete nasledovné obrázky

  • Úvodná obrazovka: SplashScreen.scale-100.png ( 620 x 300 pixelov)
  • Malá štvorcová dlaždica: SmallSquareLogo70x70.scale-100.png
  • Stredná štvorcová dlaždica: SquareLogo150x150.scale-100.png
  • Veľká štvorcová dlaždica: BigSquareLogo310x310.scale-100.png
  • Obdĺžniková dlaždica: WideLogo310x150.scale-100.png
  • Malá ikona: SmalLogo.scale-100.png (30 x 30 pixelov)
  • Logo pre obchod: StoreLogo.scale-100.png (50 x 50 pixelov)

Jednotlivé grafické prvky umiestnené spravidla v zložke Assets, ktorá je vnorená v zložke Windows 8.1 projektu (nie v spoločnej zložke Assets, ktorá slúži pre grafiku vo vnútri aplikácie) sa priraďujú v aplikačnom manifeste. Vo vizuálnom editore aplikačného manifestu otvorte záložku Visual Assets

Priradenie dynamických dlaždíc a úvodnej obrázky Splash screen vo vizuálnom editore aplikačného manifestu

Ak chcete použiť všetky mierky, potrebujete obrázky

Obrázok pre úvodnú obrazovku

  • SplashScreen.scale-100.png – rozmer 620 x 300 pixelov
  • SplashScreen.scale-140.png – rozmer 868 x 420 pixelov
  • SplashScreen.scale-180.png – rozmer 1116 x 540 pixelov

Malá dlaždica (ikona)

  • SmallLogo.scale-80.png (24 x 24 pixelov)
  • SmallLogo.scale-100.png (30 x 30 pixelov)
  • SmallLogo.scale-140.png (42 x 42 pixelov)
  • SmallLogo.scale-180.png (54 x 54 pixelov)

Malá štvorcová dlaždica

  • SmallSquareLogo70x70.scale-80.png (56 x 56 pixelov)
  • SmallSquareLogo70x70.scale-100.png (70 x 70 pixelov)
  • SmallSquareLogo70x70.scale-140.png (98 x 98 pixelov)
  • SmallSquareLogo70x70.scale-180.png (126 x 126 pixelov)

Stredná štvorcová dlaždica

  • SquareLogo150x150.scale-80.png (120 x 120 pixelov)
  • SquareLogo150x150.scale-100.png (150 x 150 pixelov)
  • SquareLogo150x150.scale-140.png (210 x 210 pixelov)
  • SquareLogo150x150.scale-180.png (270 x 270 pixelov)

Veľká štvorcová dlaždica

  • BigSquareLogo310x310.scale-80.png (248 x 248 pixelov)
  • BigSquareLogo310x310.scale-100.png (310 x 310 pixelov)
  • BigSquareLogo310x310.scale-140.png (434 x 434 pixelov)
  • BigSquareLogo310x310.scale-180.png (558 x 558 pixelov)

 

Obdĺžniková dlaždica

  • WideLogo.scale-80.png (248 x 120 pixelov)
  • WideLogo.scale-100.png (310 x 150 pixelov)
  • WideLogo.scale-140.png (434 x 210 pixelov)
  • WideLogo.scale-180.png (558 x 270 pixelov)

Logo pre Windows obchod

  • StoreLogo.scale-100.png (50 x 50 pixelov)
  • StoreLogo.scale-140.png (70 x 70 pixelov)
  • StoreLogo.scale-180.png (90 x 90 pixelov)

Keď už riešime obrázky ako súčasť grafického vizuálu aplikácie, v prípravnej fáze pred publikovaním by ste sa mali zaoberať aj promovaním aplikácie. Aby mohol Microsoft promovať vašu aplikáciu v Store tak pri jej publikovaní budete môcť uploadovať štyri promo obrázky. Obrázky môžu mať ľubovoľný názov, predpísané sú len rozlíšenia:

  • 846×468
  • 558×756
  • 414×468
  • 414×180

Veľký obrázok v ľavom hornom rohu je jedným zo spôsobov, ako môže Microsoft promovať vašu aplikáciu

Vytvorenie balíčka pre Windows Store

Finálnym krokom prípravnej fázy pred samotným publikovaním aplikácie do Windows Store je vytvorenie balíčka, ktorý sa bude uploadovať do Store.

Najskôr prepnite spúšťanie aplikácie na lokálnom počítača a prepnite sa z módu Debug do módu Release. Následne v menu Project – Store – Create App Package aktivujte vytvorenie distribučného balíčka.

Menu pre vytvorenie balíčka pre Windows Phone Store

Zobrazí sa dialóg na prihlásenie sa do vášho vývojárskeho účtu. Následne po úspešnom prihlásení je potrebné priradiť vytváraný balíček k vášmu vývojárskemu kontu, cez ktoré bude aplikácia publikovaná. Názov pre aplikáciu si môžete rezervovať cez dialóg Create AppPackages, alebo si ho môžete zaregistrovať vopred a v tejto fáze aplikáciu len k názvu priradiť.

Priradenie projektu k rezervovanému názvu

konfigurácia vytváraného balíčka, čiže výber podporovaných procesorových platforiem, čísla verzie a podverzie

Po potvrdení sa vytvorí balíček pre publikovanie aplikácie. V adresári projektu vznikne podadresár AppPackages a v ňom budú postupne vytvárané podadresáre podľa čísla aktuálnej verzie. Publikovať budete súbor s príponou APPX.

V záverečnom dialógu vytvárania balíčka si všimnite tlačidlo Launch Windows App Certification Kit. Pomocou neho aplikáciu otestujete. Počas testovania sa aplikácia niekoľkokrát spustí. V žiadnom prípade neinteragujte s aplikáciami ani operačným systémom. Ak aplikácia neprejde testom, nemá zmysel ju publikovať do Windows Obchodu, nakoľko tam prejde rovnakým testovacím procesom a po neúspešnom testovaní vám ju vrátia aby ste ju opravili.

Záverečný dialóg sprievodcu vytvorením distribučného balíka aplikácie

Zoznam testov integrovaných v Windows App Certification Kite

 

Upgrade existujúceho projektu na univerzálnu aplikáciu

25. júla 2014

Ak už máte vytvorené a publikované aplikácie pre niektorú z platforiem Windows 8, Windows 8.1, či Windows Phone 7, alebo 8, prípadne máte vytvorenú aplikáciu pre viac platforiem na báze samostatných projektov, odporúčame zamyslieť sa nad tým, či by nebolo účelne zlúčiť takéto aplikácie. Samozrejme iba vtedy ak taká aplikácia má pre prístroj sesterskej platformy, či už je to tablet, alebo chytrý telefón zmysel a prinesie používateľovi pridanú hodnotu.

Veľmi častý bude v súčasnosti scenár konverzie aplikácií určených pre Windows 8 na Windows 8.1 aby mohla aplikácia využiť všetky možnosti novej platformy, hlavne flexibilné zobrazovanie pri obrazovke rozdelenej pre viac aplikácií. Zamyslite sa, či konverziu na Windows 8.1 nespojiť aj s portovaním aplikácie pre Windows Phone 8.1 a vytvoriť projekt univerzálnej aplikácie.

Rovnako sa zamyslite o prípadnej konverzii starých aplikácií pre Windows Phone 7 na aplikácie univerzálne.

Konverzia aplikácie pre Windows Phone 7 a 8

Konverzia Windows Phone 8 aplikácie na univerzálnu a teda jej portovanie na Windows 8.1 môže vašej aplikácii priniesť nové možnosti, hlavne čo sa týka zobrazovania. Aj na zariadeniach s WP 8.1 bude môcť aplikácia využívať možnosti novej verzie, hlavne notifikačné centrum.

Konverzia aplikácie pre Windows 8 a 8.1

Konverzia existujúcej W8 a W8.1 aplikácie na univerzálnu je veľkou príležitosťou sprístupniť aplikáciu širšiemu okruhu používateľov a umožniť aplikáciu používať aj v mobilných scenároch. Zdieľanie kódu medzi aplikáciami v rámci jedného projektu univerzálnej aplikácie vám umožní sústrediť sa na používateľský zážitok.

V predchádzajúcom príklade sme ukázali vytvorenie nového projektu univerzálnej aplikácie spoločnej pre platformy Windows 8.1 a Windows Phone 8.1 doslova na zelenej lúke. Čo však v prípade, ak máte už hotový projekt pre niektorú zo spomínaných platforiem a chcete ho konvertovať na univerzálnu aplikáciu. Žiadny problém. Stačí v okne Solution Explorer aktivovať na názov projektu kontextové menu a vybrať položku Add Windows Phone 8.1, to v prípade ak konvertujete Windows 8.1 aplikáciu, prípadne položku menu Add Windows 8.1, to v prípade ak konvertujete Windows Phone 8 aplikáciu. Samozrejme potom musíte pre pridanú platformu vhodne zvoliť zdieľané bloky kódu a prispôsobiť používateľské rozhranie.

Pridanie projektu pre Windows Phone do predtým realizovaného projektu pre Windows 8.1

Pri vytváraní projektu univerzálnej aplikácie máte k dispozícii iba šablónu Blank App a Hub App. Pokiaľ ste vytvárali v minulosti projekt W8.1, alebo WP8.1 aplikácie, mali ste k dispozícii viac možností. Prinášame ich prehľad aby ste si urobili názor na možnosti prispôsobenia sesterskej platforme

Šablóny pre Windows 8.1 aplikácie

Okrem základnej šablóny “prázdnej” aplikácie majú vývojári a dizajnéri k dispozícii tri sofistikované šablóny Grid App, Split App a Hub App. Sú koncipované tak, aby čo najviac pokryli typické scenáre Windows 8.1 aplikácií s používateľským rozhraním “Modern UI”. Samozrejmosťou je optimalizácia aplikácií vytvorených podľa týchto šablón pre dotykové ovládanie

Grid App – zobrazuje skupiny dát vo formáte mriežky. Šablóna poskytuje výborný počiatočný bod pre vytvorenie aplikácie, ktorá používateľom umožní prechádzať kategóriami a hľadať obsah, ktorý ich zaujíma. Typickými príkladmi pre aplikovanie šablóny GridApp sú publikačné a informačné portály, čítačky RSS agregujúce údaje z viacerých zdrojov, aplikácie pre e-nákup, aplikácie na prezentovanie a spracovanie fotiek alebo videa a podobne.

Split App – zobrazuje zoznam hlavných a podrobných položiek. Hodí sa napríklad pre čítačky správ, aplikácie so športovými výsledkami, e-mailové aplikácie …

Pri podrobnejšom skúmaní šablón Grid App a Split App objavíte veľa podobností, či už vo filozofii ovládania, prezentovaní hierarchických štruktúr typu master – detail, dátových modeloch a ich napojení na prezentačnú vrstvu.

Pre ilustráciu možností zobrazenia obsahu podľa šablóny Grid App uvádzame reálnu aplikáciu Múzeum PC od autora publikácie, ktorú nájdete vo Windows Store.

Najvyššia úroveň hierarchie Windows 8.1 aplikácie vytvorenej podľa šablóny Grid App pre Windows 8.1

Šablóna Grid App – nižšia úroveň hierarchie, zobrazuje objekty vo vybranej kategórii, v tomto prípade zoznamy článkov

Šablóna Grid App – najnižšia úroveň hierarchie, zobrazuje vybraný článok, alebo video

Šablóny pre Windows Phone 8.1 aplikácie

Pokiaľ vytvárate aplikáciu pre Windows Phone 8.1 máte k dispozícii niekoľko šablón. Zaujímavá je napríklad šablóna projektu typu Panorama Application podobne ako projekt typu Hub Application umožňuje aplikácii využiť virtuálnu plochu, ktorá je na šírku podstatne väčšia, viacnásobná, než je šírka displeja. Displej je potom akýmsi oknom, ktoré sa posúva po virtuálnej ploche. Využíva sa prvok Panorama, ktorý je rozčlenený na viac častí, ktoré sa nazývajú PanaramaItem.

Ponuka šablón Windows 8.1 aplikácií

Projekt typu Panorama Application

Projekt typu Pivot Application umožňuje pracovať so zoznamami a agregovanými údajmi. Môže byť použitá pre stránkované zobrazovanie a filtrovanie veľkých množín údajov.

Reálny príklad aplikácie Slovenské zastupiteľstvá vytvorenej podľa šablóny Panarama Application

Univerzálna aplikácia – používateľské rozhranie pre Windows Phone

23. júla 2014

Pokračujeme druhou vetvou vytvárania univerzálnej aplikácie – návrhom používateľského rozhrania aplikácie pre mobilnú platformu Windows Phone 8.1. Dielčí projekt pre túto platformu je v zložke PrisadyPotraviny.Windows Phone (Windows Phone 8.1). Bude využívať spoločný dátový model s Windows 8.1 aplikáciou.

Skúste pre zaujímavosť spustiť projekt v simulátore platformy Windows Phone 8.1 (alebo na reálnom zariadení) po nahradení cvičných údajov v lokálnom JSON súbore reálnymi a po úprave dátového modelu. Tieto úpravy sú popísané v stati Spoločný dátový model. Po spustení aplikácie sa vyrolujte do sekcie 2, ktorá obsahuje údaje z dátového modelu vypísané formou dlaždíc. Bez úprav to v obmedzenom rozsahu funguje vďaka zhodnému názvu atribútu Title v pôvodnom cvičnom aj novom reálnom dátovom modeli.

Spustenie aplikácie na platforme Windows Phone 8.1 po výmene dátového modelu

Poznámka, obrázky sú z emulátora a čísla v čiernych poliach vľavo sú ladiace informácie o procesoch, vláknach a podobne.

Návrhový kód XAML aplikácie je podobne ako v čiastkovom projekte pre Windows 8.1 v súbore HubPage.xaml. Na zobrazenie zoznamu prísad v potravinách využijeme len Sekciu 2, ktorá je napojená na zdroj údajov. Aby sa naplno využila plocha obrazovky, odstráňte aj návrhový kód pre výpis názvu sekcie – máme len jednu sekciu. Môžete zároveň odstrániť aj šablónu HubSectionHeaderTemplate pre výpis záhlavia sekcie.

Najskôr vymažte návrhový kód týkajúci sa ostatných sekcii a ponechajte len kód Sekcie 2. V elemente Page.Resources môžete odstrániť kódy šablón StandardTripleLineItemTemplate a StandardDoubleLineItemTemplate.

Podobne ako vo Windows 8 aplikácii, aj v tomto prípade potrebujete zmeniť spôsob zobrazenia, aby bol zoznam chemických prísad na obrazovke čo najprehľadnejší. Šablónu Standard200x180TileItemTemplate premenujeme na Moja60x30TileItemTemplate a upravíme.

Kompletný kód hlavnej stránky v súbore HubPage.xaml bude

<Page

x:Class=”PrisadyPotraviny.HubPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:PrisadyPotraviny”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

DataContext=”{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}”

d:DataContext=”{Binding Source={d:DesignData

Source=../PrisadyPotraviny.Shared/DataModel/SampleData.json,

Type=data:SampleDataSource}}”

xmlns:data=”using:PrisadyPotraviny.Data”

mc:Ignorable=”d”>

 

<Page.Resources>

<ResourceDictionary>

<ResourceDictionary.ThemeDictionaries>

<ResourceDictionary x:Key=”Default”>

<ImageBrush x:Key=”HubBackgroundImageBrush”

ImageSource=”Assets/HubBackground.png”/>

</ResourceDictionary>

<ResourceDictionary x:Key=”HighContrast”>

<ImageBrush x:Key=”HubBackgroundImageBrush” ImageSource=”{x:Null}”/>

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

 

<!– Sablona–>

<DataTemplate x:Key=”Moja60x30TileItemTemplate”>

<Grid Margin=”0,0,9.5,9.5″ Background=”{Binding Farba}”

Width=”60″ Height=”30″ >

<TextBlock Text=”{Binding UniqueId}” VerticalAlignment=”Bottom”

Margin=”9.5,0,0,6.5″ Style=”{ThemeResource

BaseTextBlockStyle}”/>

</Grid>

</DataTemplate>

</ResourceDictionary>

</Page.Resources>

 

<Grid x:Name=”LayoutRoot”>

<Hub x:Name=”Hub” x:Uid=”Hub” Header=”application name”

Background=”{ThemeResource HubBackgroundImageBrush}”>

<HubSection Width=”Auto” DataContext=”{Binding Groups[0]}” >

<DataTemplate>

<GridView

Margin=”0,-20,0,0″

ItemsSource=”{Binding Items}”

AutomationProperties.AutomationId=”ItemGridView”

AutomationProperties.Name=”Items In Group”

ItemTemplate=”{StaticResource Moja60x30TileItemTemplate}”

SelectionMode=”None”

IsItemClickEnabled=”True”

ItemClick=”ItemView_ItemClick”

ContinuumNavigationTransitionInfo.ExitElementContainer=”True”>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<ItemsWrapGrid />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

</GridView>

</DataTemplate>

</HubSection>

</Hub>

</Grid>

</Page>

 

Návrh používateľského rozhrania Windows Phone 8.1 aplikácie vo vývojovom prostredí Visual Studio

Teraz môžete aplikáciu znovu spustiť a pozrieť si výsledný dizajn hlavnej stránky aplikácie

Spustenie aplikácie – hlavná stránka

Zdôrazňujeme, že hlavná stránka aplikácia funguje, bez toho aby ste museli robiť akékoľvek úpravy kódu v súbore HubPage.xaml.cs.

Po odladení dizajnu a fungovania hlavnej stránky aplikácie HubPage.xaml sa zameriame na úpravy stránky ItemPage.xaml, ktorá slúži na zobrazenie detailov o vybranej položke. Upravte kód stránky aby sa vo vhodnom usporiadaní zobrazili všetky atribúty.

<Grid x:Name=”LayoutRoot”>

<Grid.ChildrenTransitions>

<TransitionCollection>

<EntranceThemeTransition/>

</TransitionCollection>

</Grid.ChildrenTransitions>

 

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

 

<!– Title Panel –>

<StackPanel Grid.Row=”0″ Margin=”19,0,0,0″>

<TextBlock x:Uid=”Header” Text=”application name”

Style=”{ThemeResource TitleTextBlockStyle}” Margin=”0,12,0,0″ />

<TextBlock Text=”{Binding UniqueId}”

Style=”{ThemeResource HeaderTextBlockStyle}” Margin=”0,-6.5,0,26.5″ />

<TextBlock Text=”{Binding Title}”

Style=”{ThemeResource BaseTextBlockStyle}” Margin=”0,10,0,0″ />

<TextBlock Text=”{Binding Skodlivost}”

Style=”{ThemeResource BaseTextBlockStyle}” Margin=”0,10,0,0″

TextWrapping=”WrapWholeWords”/>

</StackPanel>

 

<Grid Grid.Row=”1″ x:Name=”ContentRoot” Margin=”19,9.5,19,0″>

 

</Grid>

</Grid>

Spustenie aplikácie – stránka na zobrazenie detailov

Ak porovnáte spôsob zobrazenia detailov o vybranej položke vo Windows 8.1 cez okno MessageDialog a vo Windows Phone 8.1 cez samostatnú stránku ItemPage.xaml, je to v súlade s účelom. Detailných informácií o položke je v tejto aplikácii pomerne málo, takže na ich zobrazenie stačí dialógové okno. Na klasickom okne aplikácie by informácia na dva riadky pôsobila trochu osamelo. Naproti tomu na menšom displeji chytrého telefónu je zobrazenie detailných informácií primerané. Aplikáciu môžete ďalej vylepšovať, napríklad nastaviť farbu pozadia stránky pre zobrazenie detailov podľa stupňa nebezpečnosti prísady a podobne.

Dokončenie projektu univerzálnej aplikácie, časti pre Windows 8.1

22. júla 2014

Zdalo by sa, že aplikácia je pripravená na publikovanie do Windows Store, ale ešte predtým je potrebné doplniť obrázky dlaždíc, obrazovky splash screen, ktorá sa zobrazí počas inicializácie aplikácie. Nechcete predsa aplikáciu publikovať do aplikačného obchodu s implicitnou ikonou preškrtnutého štvorčeka na sivom pozadí. Tejto téme sa venuje kapitola Príprava Windows 8.1 aplikácie na publikovanie.

Ani po doplnení grafických by však vaša Windows 8.1 aplikácia neprešla schvaľovacím procesom do českého, ani slovenského Windows Store, kým nebude mať v nastavení deklaráciu pravidiel ochrany osobných údajov používateľa. Je to dané legislatívou cieľovej krajiny

Nastavenie parametrov Windows 8.1 aplikácie

Aj v jednoduchých aplikáciách, ktoré nepotrebujú nič nastavovať musíte pridať panel nastavenia a naň položku Ochrana osobných údajov, v ktorej informujete používateľa, či aplikácia od neho nejaké údaje zbiera a ak áno, tak ako s nimi bude aplikácia a autor, alebo firma, ktorá aplikáciu distribuovala pracovať.

Nastavenie sa aktivuje na lište kľúčových tlačidiel. Keď používateľ aktivuje nastavenie, v pravej časti sa zobrazí panel nastavenia operačného systému, do ktorého si aktuálne bežiaca aplikácia pridá svoje položky.

Doplňte do aplikácie komponentu SettingsFlyout. V okne Solution Explorer, kliknite pravým tlačidlom myši na zložku Windows 8.1 projektu a v kontextovom menu aktivujte funkciu Add > New Item. Vyberte šablónu Settings Flyout a stránku pomenujte napríklad SettingsFlyout1.xaml.

Pridanie komponenty SettingsFlyout do projektu Windows 8.1 aplikácie

Do XAML kódu v súbore SettingsFlyout1.xaml pridajte deklaráciu pravidiel ochrany osobných údajov pre konkrétnu aplikáciu. V našej aplikácii Prísady v potravinách, aplikácia nezbiera od používateľa žiadne osobné, ani iné údaje, dokonca vôbec nepotrebuje pripojenie k internetu

<SettingsFlyout

x:Class=”PrisadyPotraviny.SettingsFlyout1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:PrisadyPotraviny”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

IconSource=”Assets/SmallLogo.png”

Title=”Deklarácia”

d:DesignWidth=”346″>

 

<StackPanel VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” >

<!– Content Section 1–>

<StackPanel Style=”{StaticResource SettingsFlyoutSectionStyle}”>

<!– Section 1 header –>

<TextBlock Style=”{StaticResource TitleTextBlockStyle}”

Text=”Ochrana osobných údajov” FontSize=”22″/>

<!– Section 1 body –>

<RichTextBlock FontSize=”18″>

<Paragraph></Paragraph>

<Paragraph>Aplikácia Prísady v potravinách nevyužíva pripojenie

na internet.</Paragraph>

<Paragraph>Aplikácia nezbiera od používateľa žiadne údaje.</Paragraph>

<Paragraph></Paragraph>

<Paragraph>

<Hyperlink NavigateUri=”https://novywindows.wordpress.com/xx”&gt;

Ochrana osobných údajov</Hyperlink>

</Paragraph>

<Paragraph></Paragraph>

<Paragraph>Autor: Luboslav Lacko.</Paragraph>

<Paragraph>llacko@outlook.com</Paragraph>

</RichTextBlock>

</StackPanel>

</StackPanel>

</SettingsFlyout>

 

Na paneli je aj odkaz na webovú stránku vývojára, alebo firmy, ktorá aplikáciu publikovala kde je podrobne popísaná politika ochrany osobných údajov. V dobe písania publikácie sa to pre český a slovenský Windows obchod striktne vyžadovalo. Odkaz na túto stránku bude aj vo Windows obchode ako súčasť popisu vašej aplikácie.

Aby sa prvok SettingsFlyout zobrazil, musíte ho v App.xaml.cs pridružiť k objektu SettingsPane aplikácie v udalosti SettingsPane.CommandsRequested a pridaním objektu triedy SettingsCommand do kolekcie ApplicationCommands .

Nakoľko prvok SettingsFlyout aj mechanizmus jeho zapuzdrenia do aplikácie, konkrétne do súboru App.xaml.cs je k dispozícii len pre Windows 8.1 všetok nasledujúci kód je zapuzdrený v blokoch #ifdef

#if WINDOWS_APP


#endif

Pri zostavovaní projektu pre Windows Phone 8.1 sa tieto bloky v spoločnom súbore App.xaml.cs nebudú brať do úvahy.

Pridajte odkaz na menný priestor

#if WINDOWS_APP

using Windows.UI.ApplicationSettings;

#endif

 

V metóde OnLaunched pred blok kódu

// Place the frame in the current Window

Window.Current.Content = rootFrame;

 

pridajte riadok

#if WINDOWS_APP

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

#endif

 

Telo metódy v ktorej vytvoríte inštanciu ovládacieho prvku SettingsFlyout a zobrazíte ho bude:

#if WINDOWS_APP

void OnCommandsRequested(SettingsPane sender,

SettingsPaneCommandsRequestedEventArgs args)

{

Windows.UI.ApplicationSettings.SettingsCommand updateSetting =

new Windows.UI.ApplicationSettings.SettingsCommand(“Ochrana

osobných údajov”, “Ochrana osobných údajov”, (handler) =>

{

SettingsFlyout1 setFlyout = new SettingsFlyout1();

setFlyout.Show();

});

 

args.Request.ApplicationCommands.Add(updateSetting);

}

#endif

 

 

Teraz môžete aplikáciu spustiť a vyskúšať zobrazenie informácii o pravidlách ochrany osobných údajov používateľa.

Ponuka na paneli nastavenia aplikácie

Panel zobrazujúci pravidlá ochrany osobných údajov používateľa

Skontrolujte aj fungovanie odkazu na webovú stránku deklarácie vašej politiky, nakoľko tieto záležitosti budú pri schvaľovaní vašej aplikácie do Windows Store veľmi pravdepodobne testovať. Ak kliknete na hyperlink v texte, zobrazí sa príslušná stránka v prehliadači, pričom aplikácia si s prehliadačom rozdelia obrazovky pol na pol.

Univerzálna aplikácia – Používateľské rozhranie pre Windows 8.1

21. júla 2014

Zatiaľ čo dátový model bol spoločný pre obidve cieľové platformy na ktorých sa bude aplikácia spúšťať, používateľské rozhranie, ktoré sprostredkuje zobrazenie údajov bude pre rôzne pre W8.1 a WP8.1 V tomto príspevku budeme riešiť zobrazenie pre Windows 8.1. Zameriame sa preto na zložku PrisadyPotraviny.Windows (Windows 8.1).

Návrhový kód XAML aplikácie je v súbore HubPage.xaml. Na zobrazenie zoznamu prísad v potravinách využijeme len sekciu 3, ktorá je napojená na zdroj údajov.

Sekcia 3 v šablóne Hub App

Ako prvý krok odstráňte z XAML kódu v súbore HubPage.xaml ostatné sekcie a ponechajte len sekciu 3. Zatiaľ nebudeme riešiť formu zobrazenia, ponecháme veľké dlaždice suplované obrázkami DarkGray.png, MediumGray.png a LightGray.png zo zložky Asets v zložke projektu Shared. Aby ste sa presvedčili, že váš dátový model funguje správne, v bloku kódu <Page.Resources> zmeňte atribúty Title a Description na atribúty UniqueId aTitle v týchto dvoch riadkoch

<TextBlock Text=”{Binding UniqueId}” Style=”{StaticResource TitleTextBlockStyle}”

TextWrapping=”NoWrap”/>

<TextBlock Text=”{Binding Title}” Style=”{StaticResource BodyTextBlockStyle}”

MaxHeight=”60″ />

Prvý náhľad zatiaľ neprispôsobeného zobrazenia údajov. Na obrázku je len výrez z hlavnej obrazovky aplikácie

Našim cieľom je zobraziť údaje čo najprehľadnejšie, preto budeme musieť realizovať v bloku kódu <Page.Resources> rozsiahlejšie úpravy. Šablónu na zobrazovanie údajov Standard310x260ItemTemplate premenujeme na Sablona60x30. Potrebujeme, aby sa každá prísada zobrazila ako malý obdĺžnik s tým, že v ňom bude názov prísady. Farba obdĺžnika má signalizovať nebezpečnosť prísady. Preto parameter Background prepojíme s atribútom Farba. Popis prísady sa zobrazí ako bublinová nápoveda – ToolTip. Parameter ToolTipService.ToolTip prepojíme s atribútom Bublina v ktorom je text bublinovej nápovedy.

Kompletný XAML kód sekcie Page.Resources:

<Page.Resources>

<DataTemplate x:Key=”Sablona60x30″>

<Grid HorizontalAlignment=”Left” Width=”60″ Height=”30″

ToolTipService.ToolTip=”{Binding Bublina}”

Background=”{Binding Farba}”>

<TextBlock Text=”{Binding UniqueId}” Foreground=”Black”

Style=”{StaticResource TitleTextBlockStyle}” Margin=”5,0,0,0″/>

</Grid>

</DataTemplate>

</Page.Resources>

 

Napokon ešte kozmetické úpravy. Nakoľko využívame len jednu sekciu a jej nadpis len zaberá miesto, odstráňte zobrazenie názvu sekcie.

Kompletný XAML kód stránky HubPage.xaml (bez sekcie Page.Resources) bude:

<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

<Grid.ChildrenTransitions>

<TransitionCollection>

<EntranceThemeTransition/>

</TransitionCollection>

</Grid.ChildrenTransitions>

<Hub>

<Hub.Header>

<!– Back button and page title –>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”80″/>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<Button x:Name=”backButton” Style=”{StaticResource NavigationBackButtonNormalStyle}”

Margin=”0,0,39,0″

VerticalAlignment=”Top”

Command=”{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}”

AutomationProperties.Name=”Back”

AutomationProperties.AutomationId=”BackButton”

AutomationProperties.ItemType=”Navigation Button”/>

<TextBlock x:Name=”pageTitle” x:Uid=”Header”

Text=”Prísady v potravinách”

Style=”{StaticResource HeaderTextBlockStyle}” Grid.Column=”1″

VerticalAlignment=”Top” IsHitTestVisible=”false” TextWrapping=”NoWrap” />

</Grid>

</Hub.Header>

 

<HubSection IsHeaderInteractive=”True” DataContext=”{Binding Section3Items}”

d:DataContext=”{Binding Groups[3], Source={d:DesignData

Source=../PrisadyPotraviny.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}”

Padding=”40,40,40,32″>

<DataTemplate>

<GridView

x:Name=”itemGridView”

ItemsSource=”{Binding Items}”

Margin=”-9,-14,0,0″

AutomationProperties.AutomationId=”ItemGridView”

AutomationProperties.Name=”Items In Group”

ItemTemplate=”{StaticResource Sablona60x30}”

SelectionMode=”None”

IsSwipeEnabled=”false”

IsItemClickEnabled=”True”

ItemClick=”ItemView_ItemClick”>

</GridView>

</DataTemplate>

</HubSection>

 

</Hub>

</Grid>

 

V tomto štádiu môžete aplikáciu pre Windows 8.1 priebežne otestovať

Test aplikácie

Zostávajú posledné úpravy. Všimnite si, že až teraz, keď už aplikácia celkom uspokojivo funguje sme sa dostali k úpravám aplikačného kódu v súbore HupPage.xaml.cs. Našim cieľom bude, aby aplikácia po ťuknutí na položku vypísala okne oznamu podrobnejšie údaje o predmentnej prísade.

Všimnite si metódu LoadState v ktorej sa volá metóda GetGroupAsync triedy SampleDataSource pre načítanie údajov, či už z webu, alebo z lokálneho JSON súboru.

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)

{

var sampleDataGroup = await SampleDataSource.GetGroupAsync(“Group-4”);

this.DefaultViewModel[“Section3Items”] = sampleDataGroup;

}

 

Nakoľko sme odstránili záhlavia sekcií, môžeme odstrániť aj kód metódy Hub_SectionHeaderClick pre obsluhu udalosti ťuknutia na záhlavie.

Aby sme mohli podrobnejšie vypísať údaje o vybranej prísade, využijeme metódu ItemView_ItemClick, ktorá obsluhuje udalosť ťuknutia na položku. Na výpis údajov využijeme objekt MessageDialog.

Do súboru pridajte referenciu na menný priestor

using Windows.UI.Popups;

V kóde metódy zostavíme textový reťazec a vypíšeme ho

async void ItemView_ItemClick(object sender, ItemClickEventArgs e)

{

string sKod = ((SampleDataItem)e.ClickedItem).UniqueId;

string sNazov = ((SampleDataItem)e.ClickedItem).Title;

string sSkodlivost = ((SampleDataItem)e.ClickedItem).Skodlivost;

String sVysledok = sNazov + ” – ” + sSkodlivost;

var dialog = new MessageDialog(sVysledok);

dialog.Title = sKod;

await dialog.ShowAsync();

}

Výpis pomocou objektu MessageDialog je asynchrónna operácia, preto je celá metóda asynchrónna.

Týmto krokom je aplikácia pre Windows 8.1 prakticky hotová a môžete ju vyskúšať.

Výpis informácií o vybranej prísade

Anatómia univerzálneho projektu pre Windows 8.1 a Windows Phone 8.1

11. júla 2014

Anatómia projektu

V okne Solution Explorer zistíte, že projekt univerzálnej aplikácie (solution) vlastne pozostáva z troch čiastkových projektov.

  • Windows projekt.
  • Windows Phone projekt.
  • Shared projekt.

Typ čiastkového projektu je v názve jeho zložky za bodkou, napríklad PrisadyPotraviny.WindowsPhone.

Projekt univerzálnej aplikácie vo Visual Studiu 2013.

Čiastkové projekty sú v samostatných zložkách.

Súbor App.xaml je spoločný pre obidve platformové projekty

<Application

x:Class=”PrisadyPotraviny.App”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:PrisadyPotraviny” RequestedTheme=”Light”>

</Application>

Zaujímavý je atribút RequestedTheme, pomocou ktorého určíte motív pre Windows 8.1 – či bude zobrazený tmavý text na svetlom pozadí, alebo naopak

Rovnako spoločný je aj súbor App.xaml.cs je spoločný pre obidve platformové projekty. Sekcie kódu pre konkrétnu platformu sú riešené pomocou direktívy #ifdef a preddefinovaných konštánt WINDOWS_APP a WINDOWS_PHONE_APP

#if WINDOWS_PHONE_APP


#endif

 

#if WINDOWS_APP


#endif

Aby vývojové prostredie mohlo ponúkať interaktívnu nápoveď počas tvorby kódu – Intellisense, je potrebné nastaviť pre ktorú platformu momentálne píšete kód v súbore App.xaml.cs, prípadne v ďalších súboroch s kódom spoločných pre obidve platformy.

Výber platformy pre editor kódu a Intellisense

Spoločné pre obidva platformové zapuzdrené projekty sú aj zložky Assets, Common, DataModelStrings.

Grafika a multimédia v zložke Assets

Predovšetkým je potrebné rozlišovať zložku Assets umiestnenú v zložke <nazov projektu>.Shared a v zložkách projektov pre Windows 8.1 a Windows Phone 8.1.

Assets zložka v spoločnej sekcii obsahuje obrázky a iné multimediálne súbory, ktoré využíva aplikácia pre obidve platformy. Napríklad aplikácia s kuchárskymi receptami má v spoločnej zložke obrázky jedál a ingrediencie, ktoré zobrazuje tak aplikácia pre W8.1 ako aj pre WP8.1, aplikácia s testami pre autoškolu má v tejto zložke obrázky dopravných značiek a križovatiek…. Projekt univerzálnej aplikácie vytvorenej podľa šablóny HubApp má v tejto zložke obrázky DarkGray.png, MediumGray.png a LightGray.png, ktoré sa zobrazujú ako ilustračné obrázky položkám cvičných údajov

Zložky Assets vnorené v zložkách pre Windows 8.1 a Windows Phone 8.1, obsahujú platformovo závislú grafiku, teda obrázky dlaždíc, splash screen a podobne.

Projekt pre Windows 8.1 vytvorený podľa šablóny HubApp obsahuje v zložke pre Windows 8.1 súbory

  • Logo.scale-100.png (150 x 150 pixelov),
  • SmallLogo.scale-100.png (30 x 30 pixelov),
  • StoreLogo.scale-100.png (50 x 50 pixelov),
  • WideLogo.scale-100.png (150 x 150 pixelov),
  • SplashScreen.scale-100.png (620 x 300 pixelov.

Aby sa aplikácia dokázala prispôsobiť rôznym rozmerom a rozlíšeniam môžu byť obrázky v zložke Assets v rôznych veľkostiach, ktorých mierka je vyjadrená percentuálne. Môžete použiť obrázky v mierke 80, 100, 140 a 180 percent základného rozmeru.

Projekt pre Windows Phone 8.1 obsahuje v zložke Assets dva súbory s obrázkami pozadia

  • HubBackground.theme-dark.png
  • HubBackground.theme-light.png

a súbory s grafikou dlaždíc

  • Logo.scale240.png
  • SmallLogo.scale240.png
  • SplashScreen.scale240.png
  • Square71x71Logo.scale240.png
  • StoreLogo.scale240.png
  • WideLogo.scale240.png

Zložka Common

Zložka obsahuje základné triedy potrebné pre fungovanie aplikácie, napríklad NavigationHelper.cs, ObservableDictionary.cs, RelayCommand a SuspensionManager.cs.

Zložka Strings

V zložke Strings sú definície textových reťazcov spoločné pre obidva projekty. Definície sú v súboroch Resources.resw. Tieto súbory sú v zložkách podľa jazykovej lokalizácie. Po vytvorení projektu je vytvorená zložka en-US pre angličtinu a región USA.

Dôrazne odporúčame vytvárať definície textov v resourceoch. Uľahčí to nielen lokalizáciu ale aj úpravy aplikácie. Zmenou textu v spoločnom definičnom súbore sa automaticky zmení text v obidvoch projektoch ktoré ho využívajú.

V našej aplikácii pre jednoduchosť nebudeme vytvárať českú a slovenskú lokalizáciu. Preto zmeňte názov aplikácie priamo v súbore umiestnenom v zložke en-US.

Reťazce v resourceoch môžete komfortne editovať pomocou integrovaného editora

Spoločný dátový model.

V adresári DataModel nájdete súbor SampleData.json, v ktorom sú uložené statické cvičné údaje, ktoré aplikácia využíva na demonštráciu možností zobrazovania dátových štruktúr. Údaje sú vo formáte JSON (JavaScript Object Notation), ktorý využíva veľa webových služieb poskytujúcich údaje pre aplikácie. JSON údaje sú prehľadne štruktúrované, takže sú dobre čitateľné počítač aj človeka. Údaje vo formáte JSON môžu obsahovať atribúty typu String, Boolean, Array, Object, Number a Null

Ukážka údajov v súbore SampleData.json po vytvorení projektu typu Hub App

{“Groups”:[

{

“UniqueId”: “Group-1”,

“Title”: “Group Title: 1”,

“Subtitle”: “Group subtitle: 1”,

“ImagePath”: “Assets/DarkGray.png”,

“Description” : “Group Description: Lorem ipsum dolor sit amet…”,

“Items”:

[

{

“UniqueId”: “Group-1-Item-1”,

“Title”: “Item Title: 1”,

“Subtitle”: “Item Subtitle: 1”,

“ImagePath”: “Assets/LightGray.png”,

“Description” : “Item Description: Pellentesque porta, mauris …”,

“Content” : “Curabitur class aliquam ..”

},

 

Atribút ImagePath odkazuje na obrázky priradené k jednotlivým záznamom. Obrázky sú uložené v adresári Assets

Naša aplikácia, ktorú budujete nad šablónou projektu Hub App môže podobne ako šablóna využívať statické údaje, alebo môžete aplikáciu pripojiť ku zdroju údajov na webe. Naša aplikácia bude pre jednoduchosť využívať statický zoznam prísad. Ocenia to aj používatelia, nakoľko aplikácia bude fungovať aj v režime off line bez pripojenia na internet. Nové prísady sa samozrejme sporadicky objavia, takže aplikáciu bude potrebné niekoľko krát do roka aktualizovať formou upgrade.

Dátový model v súbore SampleDataSource.cs po vytvorení projektu obsahuje dve triedy pre prístup aplikácie k údajom s hierarchickou štruktúrou

public class SampleDataItem

{

}

 

public class SampleDataGroup

{

}

 

Trieda SampleDataSource vytvára kolekciu skupín položiek buď s pevne daným statickým obsahom, alebo dynamickými údajmi.

Údaje sú po načítaní umiestnené v objektoch typu ObservableCollection

private ObservableCollection<SampleDataGroup> _groups =

new ObservableCollection<SampleDataGroup>();

 

public ObservableCollection<SampleDataGroup> Groups

{

get { return this._groups; }

}

 

Aplikácia Prísady potravín bude pracovať s údajmi v tvare

{“Groups”:[

{

“UniqueId”: “Group-4”,

“Title”: “Group Title: 4”,

“Items”:

[

{“Kód”: “E100″,”Názov”: “Kurkumin”,”Škodlivosť”: “1”},

{“Kód”: “E101″,”Názov”: “Riboflavin”,”Škodlivosť”: “1”},


Použili sme súbor SampleData.json. Aby sme mali s úpravou šablóny, čo najmenej práce, ponechali sme aj hierarchickú štruktúru, v našom prípade sú údaje začlenené do jedinej skupiny s názvom Group-4, nakoľko práve táto skupina sa zobrazuje v Sekcii 3.

Povzbudzujeme vás, aby ste si vytvorili aplikáciu so svojim vlastným námetom a svojími vlastnými údajmi.

Trieda SampleDataItem obsahuje atribúty položiek pre jednotlivé záznamy, v tomto prípade údaje o jednotlivých prísadách. Aby sme vám uľahčili orientáciu pri adaptovaní vzorového dátového modelu, ponechali sme aj názvy jeho tried. Atribúty UniqueID (Kód), Title (Názov), a Skodlivosť (Škodlivosť) budú načítané z JSON súboru. Atribúty Farba a Bublina budú doplnené počas načítavania údajov. Pomocou farby sa indikuje škodlivosť prísady a atribút Bublina obsahuje text bublinovej nápovede (Too tip)

public class SampleDataItem

{

public SampleDataItem(String uniqueId, String title, String skodlivost, String

Farba, String bublina)

{

this.UniqueId = uniqueId; //kod

this.Title = title; //Nazov

this.Skodlivost = skodlivost; //Skodlivost

this.Farba = Farba;

this.Bublina = bublina;

}

 

public string UniqueId { get; private set; }

public string Title { get; private set; }

public string Skodlivost { get; private set; }

public string Farba { get; private set; }

public string Bublina { get; private set; }

 

 

public override string ToString()

{

return this.Title;

}

}

 

Trieda SampleDataGroup obsahuje údaje o skupinách, či kategóriách objektov. V tomto príklade sa využíva iba jediná skupina. Hierarchickú štruktúru sme ponechali pre vašu lepšiu orientáciu pri adaptovaní šablóny projektu.

public class SampleDataGroup

{

public SampleDataGroup(String uniqueId, String title)

{

this.UniqueId = uniqueId;

this.Title = title;

this.Items = new ObservableCollection<SampleDataItem>();

}

 

public string UniqueId { get; private set; }

public string Title { get; private set; }

public ObservableCollection<SampleDataItem> Items { get; private set; }

 

public override string ToString()

{

return this.Title;

}

}

 

Trieda SampleDataSource zapuzdrujúca kolekciu skupín položiek v metóde GetSampleDataAsync obsahuje aj kód pre predspracovanie údajov. Doplní atribúty Farba a Bublina.

private async Task GetSampleDataAsync()

{

String sKod = “”, sNazov = “”, sSkodlivost = “”, sFarba = “Gray”, sBublina = “”, sSkod = “”;

 

if (this._groups.Count != 0) return;

 

Uri dataUri = new Uri(“ms-appx:///DataModel/SampleData.json”);

 

StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(dataUri);

string jsonText = await FileIO.ReadTextAsync(file);

JsonObject jsonObject = JsonObject.Parse(jsonText);

JsonArray jsonArray = jsonObject[“Groups”].GetArray();

 

foreach (JsonValue groupValue in jsonArray)

{

JsonObject groupObject = groupValue.GetObject();

SampleDataGroup group = new SampleDataGroup(groupObject[“UniqueId”].GetString(),

groupObject[“Title”].GetString());

 

foreach (JsonValue itemValue in groupObject[“Items”].GetArray())

{

JsonObject itemObject = itemValue.GetObject();

sKod = itemObject[“Kód”].GetString();

sNazov = itemObject[“Názov”].GetString();

sSkodlivost = itemObject[“Škodlivosť”].GetString();

 

//farba podla skodlivosti

switch (sSkodlivost)

{

case “0”: sFarba = “LimeGreen”; sSkod = “Prírodná látka”; break;


case “7”: sFarba = “Red”; sSkod = “Nebezpečná prísada”; break;

default: break;

}

 

sBublina = sKod + “: ” + sNazov + ” – ” + sSkod;

 

group.Items.Add(new SampleDataItem(sKod, sNazov, sSkod, sFarba, sBublina));

}

this.Groups.Add(group);

}

}

 

Ak by ste vytvárali aplikáciu, ktorá zobrazuje údaje získané vo formáte JSON z webu, použili by ste v metóde GetSampleDataAsync kód

string sJSON;

var clientk = new HttpClient(); //kategorie

clientk.MaxResponseContentBufferSize = 1024 * 1024;

var response = await clientk.GetAsync(new Uri(“http…”));

var result = await response.Content.ReadAsStringAsync();

sJSON = result.Substring(0, result.Length);

var jsonZoznam = JsonArray.Parse(sJSON);

Projekt univerzálnej aplikácie – praktický príklad

10. júla 2014

Námetom pre projekt univerzálnej aplikácie budú chemické prísady v potravinách. Takáto aplikácia nájde uplatnenie na telefóne aj tablete, či domácom počítači. Na telefóne si môžete skontrolovať, čo obsahujú potraviny priamo v predajni ešte predtým, než ich vložíte do nákupného košíka. Aplikáciu na tablete využijete doma na pohodlnejšie a komfortnejšie overenie prísad v potravinách, ktoré vás zaujímajú.

Vytvorenie projektu

Vo vývojovom prostredí Visual Studio 2013 vytvorte nový projekt pomocou menu File > New Project. Z ponuky šablón pre vami vybraný programovací jazyk vyberte zložku Store Apps a v nej zložku Universal Apps. V zložke nájdete šablóny pre projekty aplikácií Blank App a Hub App. Pre projekt Prísady v potravinách sa oveľa lepšie hodí komplexná šablóna Hub App. Projekt vytvorený podľa šablóny Blank App by pre obidve platformy obsahoval len prázdnu hlavnú stránku. Zobrazovanie, ovládacie prvky a celú navigačnú štruktúru aplikácie by ste museli vytvoriť sami.

Vytvorenie projektu univerzálnej aplikácie podľa šablóny Hub App

Šablóna Hub App umožňuje vytvárať dizajnovo pútavé aplikácie umožňujúce zobrazovať kombinovaný obsah vo viacerých horizontálne oddelených sekciách, ktoré je možné vodorovne rolovať, takže vzniká dojem, že obrazovka je akýmsi virtuálnym oknom do oveľa širšieho kontextu, ktorý sa rolovaním dá postupne zobrazovať.

Spustenie projektu pre obidve platformy

Nakoľko projekt vytvorený podľa šablóny Hub App obsahuje vzorovú navigačnú štruktúru vrátane dátového modelu a cvičných údajov, môžete aplikáciu prvý krát spustiť hneď po vytvorení a preskúmať jej možnosti. Platformu (W8.1, alebo WP8.1) pre ktorú chcete projekt spustiť vyberiete vo Visual Studiu buď v ponuke ktorá sa aktivuje kliknutím na čiernu šípku smerujúcu nadol vedľa ikony zelenej šípky na paneli nástrojov (viď obrázok), alebo v kontextovom menu príslušného čiastkového projektu v okne Solution Explorer, položka Set as Startup Project.

Menu pre spustenie aplikácií pre obidve platformy

Výber projektu pre príslušnú platformu, ktorý chcete spustiť cez kontextové menu

Pre Windows 8.1 sa možnosti spustenia nezmenili – lokálny počítač, emulátor, alebo vzdialený počítač pripojený v sieti. Pre Windows Phone 8.1 môžete použiť širokú paletu emulátorov s rôznym rozlíšením displeja a taktiež aj reálne zariadenie

Ponuka simulátorov pre spustenie Windows Phone 8.1 aplikácie. Aplikáciu môžete spustiť aj na reálnom zariadení.

Visual Studio 2013 Update 2 s nainštalovaným SDK pre Windows Phone 8.1 obsahuje aj veľmi realistický emulátor platformy Windows Phone 8.1 bežiaci pod hypervízorom Hyper-V. Emulátor umožňuje testovať funkcionalitu lokalizačných služieb, akcelerometra, kamery a v obmedzenom rozsahu aj GSM komunikáciu. Emulátor pri spúšťaní umožňuje nastaviť uhlopriečky displeja 4, 4.5, 4.7, 5.5 a 6 palcov a rozlíšenia WVGA, WXGA, 720P a 1080P.

 

Simulátor platformy Windows Phone 8.1

Vedľa okna emulátora sa zobrazuje zvislý pásik s tlačidlami, ktoré umožňujú zmenu orientácie emulovaného prístroja, prípadne zväčšenie, či zmenšenie zobrazenia displeja. Najzaujímavejšie funkcie pre simulovanie funkcie akcelerometra a určovania polohy sa dajú aktivovať pomocou spodného tlačidla v tvare dvojitej šípky smerujúcej doľava. Aktivovaním tlačidla sa zobrazí samostatné okno Additional Tools s niekoľkými záložkami v ktorých je možné nastavovať senzory, sieťové nastavenie, lokalizačné služby, SD kartu, či notifikačné služby.

Pre spustenie aplikácie na reálnom zariadení je potrebné konkrétny prístroj zaregistrovať ako vývojársky telefón – priradiť ho k vášmu vývojárskemu účtu. Pripojte telefón cez USB k vývojárskemu počítaču. Telefón musí byť odomknutý, čiže musíte vysunúť obrazovú roletu nahor. Na vývojárskom počítači nástroj Windows Phone Developer Registration. Tlačidlom Register telefón zaregistrujete k svojmu vývojárskemu kontu.

Registrácia telefónu do vývojárskeho konta

 

Používateľské rozhranie projektu pre Windows 8.1

Po spustení aplikácie sa zobrazí hlavná obrazovka aplikácie rozdelená do viacerých sekcii. Všimnite si podrobnejšie sekciu 3, ktorú použijeme na zobrazovanie údajov. Vedľa názvu sekcie je ikona šípky smerujúcej vpravo, ktorá naznačuje, že kliknutím na záhlavie sa zobrazí obrazovka s detailným zobrazením údajov

Hlavná obrazovka aplikácie pre Windows 8.1

 

Podrobné zobrazenie údajov v Sekcii 3

Používateľské rozhranie projektu pre Windows Phone 8.1

Po spustení projektu pre platformu Windows Phone 8.1, či už na emulátore, alebo na reálnom zariadení, môžete postupným rolovaním preskúmať všetky sekcie Hub aplikácie. Ak ste postupne spustili projekt v tomto úvodnom štádiu pre obidve platformy, získali ste názor o možnostiach a spôsobe zobrazovania informácií.

Obrazovky aplikácie pre Windows Phone 8.1

 

Je dostupné Visual Studio 14 CTP2

10. júla 2014

Dostupné je na MSDN ajna

http://www.visualstudio.com/en-us/downloads/visual-studio-14-ctp-vs.aspx

Môžete si ho vyskúšať aj ako virtuálny stroj v Azure

http://blogs.msdn.com/b/visualstudioalm/archive/2014/06/04/visual-studio-14-ctp-now-available-in-the-virtual-machine-azure-gallery.aspx

Viac na Somasegarovom blogu

http://blogs.msdn.com/b/somasegar/archive/2014/06/03/first-preview-of-visual-studio-quot-14-quot-available-now.aspx