Image
26.10.2015 0 Comments

Vývoj pre Windows 10 – Migrujeme aplikácie pre Windows 8.1 a Windows Phone / 5. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

Ak máte vytvorené aplikácie pre niektorú z uvedených platforiem, prípadne univerzálnu aplikáciu pre Windows a Windows Phone 8.1, ich migrácia na univerzálnu Windows Platform (UWP) aplikáciu pre Windows 10 je jednoduchá a bezproblémová.

Univerzálnosť 8.1 verzus univerzálnosť 10

Univerzálne aplikácie pre Windows 8.1 a Windows Phone 8.1 vychádzali zo spoločného projektu a mali spoločný kód aplikačnej logiky, ale používateľské rozhranie bolo treba pre každú z platforiem navrhnúť osobitne. Naproti tomu aplikácia UWP môže byť spoločná pre všetky zariadenia s Windows 10 a záujemcovia si ju môžu nainštalovať na akúkoľvek podporovanú rodinu zariadení.

Pri adaptovaní existujúcej aplikácie vytvorenej pre Windows 8, 8.1, prípadne Windows Phone alebo univerzálnej aplikácie 8.1 pre Windows 10 zistíte, že nový operačný systém podporuje väčšinu API z predchádzajúcich platforiem, ako aj značkovací jazyk XAML na návrh používateľského rozhrania. Rovnako ako predtým môžete voliť medzi programovacími jazykmi C#, C++ a Visual Basic.

Migrácia univerzálnej aplikácie 8.1

Predpokladajme, že máte projekt MojaAplikacia_81. Projekt takejto aplikácie zapuzdruje tri čiastkové projekty:

• MojaAplikacia_81. Windows. Z tohto projektu, ktorý obsahuje návrh používateľského rozhrania pre veľké obrazovky PC, notebookov a tabletov, sa vytvoril balíček aplikácie pre Windows 8.1.
• MojaAplikacia_81. WindowsPhone. Tento projekt zapuzdruje návrh používateľského rozhrania pre obrazovky telefónov a vytvorí balíček aplikácie pre mobilnú platformu Windows Phone 8.1.
• MojaAplikacia_81.Shared – tento projekt obsahuje zdrojové kódy aplikačnej logiky, návrhy spoločných častí používateľského rozhrania a ostatné náležitosti, ako sú grafické návrhy dynamických dlaždíc a podobne, ktoré využívajú čiastkové projekty pre Windows 8.1 a Windows Phone 8.1.

Takáto univerzálna aplikácia je ideálny kandidát na portovanie do projektu aplikácie Windows 10, ktorú môžete nainštalovať na širokú škálu podporovaných zariadení. Využijete prakticky všetko zo zdieľaného projektu a podľa konkrétnej aplikácie priamo bez úprav len veľmi málo (alebo dokonca vôbec nič) z kódu návrhu používateľského rozhrania zo zvyšných dvoch platformovo závislých projektov, ktoré obsahujú časti využívajúce jedinečné vlastnosti Windows 8.1 a Windows Phone 8.1.

Používateľské rozhranie aplikácie UWP prispôsobíte podľa toho, na ktorých rodinách zariadení má fungovať. Môžete aplikáciu zacieliť len na desktopy a tablety, prípadne mobilné zariadenia, ale najčastejšie sa budete snažiť pokryť obidve skupiny. Paradoxne mnohé mobilné telefóny strednej a vyššej triedy majú rozlíšenie displeja full HD (1920 × 1080 pixelov) a vyššie, zatiaľ čo v predajniach ešte stále nájdete veľa notebookov a tabletov s rozlíšením HD (1366 × 768 pixelov), rozdiel je, samozrejme, aj vo veľkosti displeja a filozofii ovládania. Preto budete pravdepodobne využívať a upravovať iba fragmenty návrhu používateľského rozhrania jedného alebo obidvoch platformovo závislých projektov. Poďme si zosumarizovať, čo môžete zo spomínanej trojice čiastkových projektov využiť:

Shared - časti kódu z tohto zdieľaného projektu využijete buď priamo, alebo podmienečne na zariadení, na ktorom bude aplikácia aktuálne nainštalovaná a spustená.
WindowsPhone - časti používateľského rozhrania adaptované na ovládanie dotykom, bude ich však treba upraviť, aby boli adaptívne, teda aby sa prispôsobovali rozlíšeniu a veľkosti obrazovky.
Windows - časti používateľského rozhrania, ktoré bude treba adaptovať tak, aby boli nielen použiteľné, ale aj používateľsky príjemné aj na displejoch telefónov.

Prispôsobenie architektonických vrstiev aplikácie

Pri migrácii projektu na Windows 10 majte na pamäti nielen prispôsobenie používateľského rozhrania, ale predovšetkým to, že takáto migrácia je vynikajúca príležitosť na modernizáciu aplikácie. Pozrite si v aplikačnom obchode pripomienky používateľov a tie, ktoré sú relevantné, akceptujte a zapracujte. Takisto si položte otázku, či vaša aplikácia dostatočne využíva moderné vymoženosti IT, napríklad cloudové služby, možnosť zdieľania obsahu na sociálnych sieťach a podobne. Skúste byť aj trochu prezieraví, napríklad digitálna asistentka Cortana zatiaľ v našich končinách podporovaná nie je, ale veľmi pravdepodobne raz bude, preto si môžete pripraviť rozhranie aj pre tento moderný spôsob interakcie s používateľom, prípadne môžete zapracovať jeden z podporovaných jazykov, vo väčšine prípadov angličtinu už teraz. Podporované jazyky v čase písania tohto príspevku boli: čínština, britská/americká angličtina, nemčina, španielčina, francúzština, taliančina. Ak vaša aplikácia nebola budovaná koncepčne, pri migrácii je príležitosť to napraviť. Odporúčame dôsledne oddeliť prezentačnú vrstvu, teda to, ako aplikácia zobrazuje údaje, s ktorými pracuje, od týchto údajov. V praxi sa osvedčil oddelený dátový model a vrstva na flexibilné zobrazovanie údajov. Pouvažujte nad tým, či by sa niektoré bloky kódu nedali realizovať ako mobilná služba, napríklad na platforme Microsoft Azure Mobile Services. Typický príklad je rebríček najlepších skóre pri hrách, možnosť aktualizácie dynamických dlaždíc a podobne. Na jednoduchšie ladenie a prípadné úpravy je vhodné bloky kódu s podobným účelom, ktoré sú v migrovanej aplikácii viac alebo menej náhodne rozptýlené, zoskupiť vo vrstvách. Môžete vyskúšať, či sa vám nebude hodiť architektúra Model-View-ViewModel (MVVM), ktorá dôsledne oddeľuje „obchodnú logiku" a používateľské rozhranie vašej aplikácie. S MVVM môžete dátovú vrstvu a obchodnú logiku vytvoriť len raz a použiť ju na všetkých zariadeniach bez ohľadu na používateľské rozhranie. Takéto aplikácie sa aj vynikajúco portujú na iné platformy (Android, iOS, Mac OS...).

Príklad

Budeme konvertovať jednoduchú univerzálnu cvičnú aplikáciu pre Windows 8.1, ktorá obsahuje zoznam prečítaných kníh. Môžete si ju stiahnuť z http://go.microsoft.com/fwlink/?LinkId=532946&clcid=0x409.

Vo Visual Studiu 2015 vytvorte nový projekt aplikácie UWP podľa šablóny Blank App. Do nového projektu začneme prenášať bloky kódu z pôvodnej aplikácie. Zo zložky projektu Shared skopírujte adresár s obrázkami zo zložky Assets do rovnomennej zložky nového projektu a pomocou voľby kontextového menu Include In Project ich zahrňte do projektu. Uistite sa, že v záhlaví okna Solution Explorer je označená voľba Show All Files. Rovnako postupujte aj so zložkou ViewModel, kde sú v súbore BookstoreViewModel.cs cvičné údaje pre aplikáciu. Do nového projektu prekopírujte aj súbor MainPage.xaml.

Z projektu Windows prekopírujte do zložky nového projektu súbor BookstoreStyles.xaml. V tomto prípade bude lepšie vychádzať z návrhu používateľského rozhrania Windows a upraviť ho, aby bolo flexibilné, než z používateľského rozhrania Windows Phone. Ak ste menili názov projektu, zmeňte v súboroch zo starého projektu všetky referencie, ktoré obsahujú názov projektu.

Aplikácia po prenose bez úprav – vľavo na PC alebo tablete, vpravo na telefóne

Po spustení aplikácie na vývojárskom počítači, prípadne tablete zistíte, že aplikácia nemá žiadny problém, azda len ten, že na displeji je veľa voľného miesta a vpravo od zoznamu by sa dali zobraziť detailné informácie o vybranej knihe. V mobilnom telefóne alebo v emulátore sú však údaje zobrazené neúplne. Preto bude treba používateľské rozhranie upraviť tak, aby bolo flexibilné a aby sa údaje zobrazovali správne na akomkoľvek podporovanom rozmere a rozlíšení obrazovky.

Z definície vizuálneho kontajnera Grid v sekcii šablóny BookTemplate vymažte definíciu okrajov Margin="0,0,0,8". Štýly pre názov knihy a meno autora nahraďte odporúčanými štýlmi TitleTextBlockStyle a SubtitleTextBlockStyle. V prvku Grid s názvom LayoutRoot zmeňte pozadie, teda hodnotu parametra Background z "Transparent" na "{ThemeResource ApplicationPageBackgroundThemeBrush}". Názov aplikácie a názov kategórie, v našom prípade „klasika", zaberajú veľa miesta. Na paneli TitlePanel zmeňte referenciu TitleTextBlockStyle na CaptionTextBlockStyle. Referenciu PageTitleTextBlockStyle zmeňte na HeaderTextBlockStyle.

Zoznam sa zobrazuje pomocou prvku ListBox. Z jeho definície odstráňte atribúty Background, Style, nor ItemContainerStyle, ktoré pri flexibilnom zobrazení prvku nie sú potrebné. Na úsporu miesta bude účelné nezobrazovať okraj, preto do definície prvku ListBox pridajte atribút BorderBrush="{x:Null}".

VyvojW10_2.png

Aplikácia po úpravách na PC a telefóne

Po spustení na PC aj emulátore telefónu si overíte, že používateľské rozhranie aplikácie sa zobrazuje správne na obidvoch typoch zariadení. Čo sa týka názvu diela, urobili sme kompromis medzi veľkosťou písma a dĺžkou reťazca, ktorý sa zmestí na obrazovku telefónu. Keby to prekážalo, môžete veľkosť písma nastavovať v závislosti od rozlíšenia displeja pomocou sekcie

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
...
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Kľúčový moment životného cyklu aplikácie je jej publikovanie do aplikačného obchodu. Je to vyvrcholenie snahy vývojára alebo tímu tvorcov. Aby sme vás čo najviac motivovali na tvorbu vlastných aplikácií, zaradíme do budúceho pokračovania túto tému.

 

Zobrazit Galériu

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Ako na to 2

Tipy a triky: Ako vypnúť uzamykaciu obrazovku vo Windows 10?

29.11.2016 00:10

Rozčuľuje vás, že pred každým prihlásením doúčtu vášho počítača musíte prejsť uzamykacou obrazovkou? Windows 10 na tejto obrazovke ukazuje čas,dátum anejakú zaujímavú fotografiu zrôznych kútov sveta. ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá