Universal Windows Platform je technológia, ktorá umožňuje vytváranie aplikácií pre systém Windows a ich následné použitie na zariadeniach rôzneho typu (PC, telefón, tablet, Xbox, HoloLens, a pod.) Článok sa zaoberá stručnou charakteristikou technológie, poskytuje postup na rozbehnutie technológie, a pomocou jednoduchého príkladu demonštruje vývoj aplikácie pre Universal Windows Platform.
Úvod do technológie
Universal Windows Platform predstavuje univerzálnu platformu, slúžiacu na vývoj aplikácií pre rôzne typy zariadení využívajúcich operačný systém Windows 8 alebo modernejší Windows 10. Vytvorením tejto univerzálnej platformy v spojení s Windows 10 sa podľa oficiálnej dokumentácie proces tvorby, spúšťania, prispôsobovania a udržiavania Windows aplikácií značne zjednodušil, konkrétne tým, že celý vývoj aplikácie využíva jednu sadu API, aplikácia je distribuovaná medzi rôznymi Windows zariadeniami (PC, telefónmi, tabletmi, Xbox, HoloLens, a pod.) vo forme jedného univerzálneho aplikačného balíka AppX, čím je zabezpečená dôveryhodná inštalácia, aktualizácia a údržba. Veľkou devízou je flexibilné správanie sa aplikácie, čiže aplikácia sa vie adaptovať na rôzne rozlíšenie obrazovky a umožňuje rozmanité formy ovládania konkrétne cez klávesnicu a myš, dotykom, perom alebo hernými ovládačmi.
Pri distribúcii aplikácie je možné špecifikovať cieľovú rodinu zariadení, pre ktoré je aplikácia určená na základe systémových vlastností alebo funkcionality, ktorú od zariadenia očakávame a tiež je možné definovať spôsob očakávanej platby za aplikáciu.
Programovací jazyk
Universal Windows Platform (UWP) podporuje vývoj aplikácií vo viacerých programovacích jazykoch, čo predstavuje výhodu pre programátora, pretože mu umožňuje pracovať v jazyku, ktorý ovláda. Podľa dokumentácie UWP podporuje jazyk C# alebo Visual Basic v spojení s XAML (Extensible Application Markup Language), JavaScript v spojení s HTML alebo C++ v spojení s DirectX alebo XAML. V rámci UWP je dovolené vytvárať jednotlivé komponenty aplikácie v jednom jazyku a následne ich použiť v aplikácii, ktorej základ je tvorený v inom jazyku.
Vývojové prostredie
Odporúčané vývojové prostredie pre Universal Windows Platform je Microsoft Visual Studio. Toto prostredie je maximálne optimalizované pre danú platformu, konkrétne tým, že poskytuje šablóny pre vytvorenie UWP aplikácie pre každý z podporovaných jazykov, ako všetky moderné vývojové prostredia podporuje pokročilé zvýrazňovanie textu, inteligentné dopĺňanie kódu a navigáciu v kóde, refaktorizáciu kódu spojenú s odstraňovaním duplicitných výskytov kódu, taktiež obsahuje nástroj pre tvorbu XAML dizajnu aplikácie, poskytuje jednoduchú integráciu s cloudovými službami ako napr. Azure Mobile Services, obsahuje nástroje na debuggovanie XAML, kontrolovanie vykonávania kódu, a informuje o využití procesora, pamäte a grafického procesora.
Ako začať
Rozbehnutie technológie je podľa dokumentácie UWP veľmi jednoduché, na inštaláciu jednotlivých súčastí postačia základné informatické znalosti.
-
Stiahnite si alebo aktualizujte Windows 10 — pre vývoj v rámci Universal Windows Platform sa odporúča najnovšia verzia operačného systému Windows. Môžete si ju stiahnuť z oficiálnej stránky alebo cez MSDN ak máte vytvorený účet.
-
Stiahnite si alebo aktualizujte Microsoft Visual Studio — v ponuke je viacero verzií, pre Universal Windows Platform úplne postačuje verzia Community. Túto verziu spolu aj so simulátormi pre zariadenia na testovanie je možné stiahnuť z oficiálnej stránky, alebo taktiež cez MSDN.
-
Povoľte vývojársky mód na PC — je to potrebné k testovaniu aplikácie na reálnom zariadení. Postup je nasledovný: V ponuke Štart vyberte
a zvoľte ponuku Aktualizácia a Zabezpečenie:
Následne vyberte možnosť Pre vývojárov:
Kliknite na položku Režim vývojára, ktorá na rozdiel od položky Skúšobné načítanie aplikácie pred predajom umožní nie len spustenie vytvorenej aplikácie ešte pred jej umiestnením do Windows Store ale aj debuggovanie vytvorenej aplikácie. Po kliknutí sa zobrazí overovacia informácia, ktorú je potrebné potvrdiť kliknutím na tlačidlo Áno.
- Zaregistrujte sa ako vývojár – nie je to nevyhnutné pre vytváranie aplikácií, bez registrácie je možné neobmedzene pracovať na vývojom procese aplikácie, avšak ak chcete pridať vytvorenú aplikáciu do Windows Store, potrebujete zaregistrovať vlastný vývojársky účet. Bližšie informácie o tvorbe účtu sú dostupné na stránkach spoločnosti Microsoft.
Príklad — výpočet ceny pohonných hmôt
Na tomto ilustračnom príklade demonštrujeme jednotlivé kroky vývoja funkčnej aplikácie pomocou technológie Universal Windows Platform. Aplikáciu vytvoríme v jazyku C# s využitím XAML vo vývojovom prostredí Microsoft Visual Studio 2015 Community Edition. Podstatou aplikácie je výpočet ceny pohonných hmôt (PHM) pre jedného pasažiera v dopravnom prostriedku na základe vstupných parametrov. Aplikáciu je možné využiť na PC pri dohadovaní ceny s pasažiermi alebo na mobilnom zariadení, ak šofér potrebuje prepočítať cenu pre jedného pasažiera. Z tohto dôvodu je vhodné aplikáciu vytvoriť pomocou Universal Windows Platform.
Pre tých, ktorí uprednostňujú video pred čítaním textu je tento návod dostupný aj ako video tutoriál.
Vytvorenie projektu
Na začiatku je potrebné vytvoriť projekt vo vývojovom prostredí. Zrealizujte to pomocou nasledujúcich krokov:
-
Spustite vývojové prostredie Microsoft Visual Studio.
-
Prejdite na File → New → Project…
-
Zobrazí sa okno, na ktorom prejdite cez položky Templates → Visual C# → Windows → Universal. Ak sa zobrazí okno s položkou Install Universal Windows Tools kliknite na tlačidlo OK.
-
Následne sa nainštalujú potrebné nástroje pre Universal Windows. Ak už máte nástroje nainštalované alebo používate verziu, ktorá tieto nástroje obsahuje zobrazí sa ponuka, kde si môžete vybrať z niekoľkých možnosti šablón. My si vyberieme šablónu Blank App, zadáme názov projektu a klikneme na tlačidlo OK.
-
Zobrazí sa okno v ktorom je možné vybrať si cieľovú a minimálnu podporovanú verziu platformy a vytváranie projektu ukončíme kliknutím na tlačidlo OK.
Po vytvorení projektu sa v časti Solution Explorer zobrazí kostra projektu, ktorá obsahuje časť Properties a References, kde sa nachádzajú vygenerované vlastnosti projektu a závislosti, priečinok Assets obsahujúci loga rôznych veľkostí, využité pri zobrazení aplikácie na zariadení, App.xaml je súbor, v ktorom sú definované zdroje používané v aplikácii, App.xaml.cs obsahuje zdrojový kód, definujúci správanie a prepojenie jednotlivých zdrojov definovaných v App.xaml a tiež spúšťanie a ukončovanie aplikácie, MainPage.xaml obsahuje definíciu vzhľadu používateľského rozhrania, v tomto súbore definujeme jednotlivé komponenty buď priamo pomocou XAML alebo cez ponúkaný nástroj na dizajnovanie používateľskeho rozhrania, MainPage.xaml.cs obsahuje zdrojový kód, ktorý obsahuje logiku aplikácie a zabezpečuje požadované správanie sa jednotlivých komponentov definovaných v MainPage.xaml a Package.appxmanifest slúži ako manifest súbor, kde sú definované všeobecné informácie o aplikácii (orientácia obrazovky, meno aplikácie, jazyk), vizuálne obmedzenia, prístup k službám a senzorom zariadenia a nastavenia zbaľovania aplikácie.
Spustenie aplikácie
Po kliknutí na šípku rozbaľovacej ponuky tlačidla spustenia sa zobrazia možnosti spustenia aplikácie na Simulátore, na práve používanom stroji (Local Machine), na vzdialenom stroji (Remote Machine) a na inom zariadení (Device) čo zahŕňa napríklad mobilné zariadenia, a pod.
Pre spustenie na lokálnom zariadení klikneme na Local Machine a vytvorená aplikácia sa spustí v novom okne. Zobrazí sa úvodné logo uložené v priečinku Assets a definované v súbore Package.appxmanifest s farbou pozadia definovanou v tom istom súbore. Spustená aplikácia je prázdna, nakoľko sme ju zatiaľ žiadnym spôsobom nemodifikovali.
Ak chceme spustiť aplikáciu na mobilnom zariadení pripojenom k počítaču klikneme na Device. Ak nie je podpora pre zariadenie nainštalovaná, vývojové prostredie nás informuje o potrebe inštalácie emulátora, ktorú potvrdíme kliknutím na tlačidlo Install.
Ak nemáme poruke reálne zariadenie a chceme aplikáciu otestovať na emulátore klikneme na Download New Emulators… Z otvorenej stránky stiahneme emulátor v najvyššej verzii a klasicky nainštalujeme. Po inštalácii sa v ponuke spustenia objavia emulátory mobilných zariadení:
Vyberieme si ľubovoľný emulátor a spustíme aplikáciu. Ak systém vypíše chybovú hlášku súvisiacu s neschopnosťou aktivovania Hyper-V technológie potrebnej pre spustenie emulátora skúste reštartovať počítač.
Úprava vzhľadu aplikácie
Vzhľad aplikácie je možné upravovať zásahom do súboru MainPage.xaml dvoma spôsobmi: pomocou pridávania komponentov na plochu predstavujúcu obrazovku priamo alebo zmenou zdrojového kódu súboru. Po dvojitom kliknutí na tento súbor v sekcii Solution Explorer sa zobrazí v hornej polovici hlavného okna vzhľad/dizajn aplikácie. V hornej časti si môžeme vybrať niektorú z rôznych veľkostí obrazovky:
Na plochu zastupujúcu obrazovku môžeme následne umiestňovať potrebné komponenty z bohatej ponuky, ktorá sa zobrazí po kliknutí na sekciu Toolbox v ľavej hornej časti obrazovky. S každou zmenou sa automaticky aktualizuje aj zdrojový kód súboru v dolnej polovici hlavného okna. Ak vytvárame vzhľad aplikácie priamo zmenou zdrojového kódu všetky zmeny sa prejavia vo viditeľnej forme na ploche predstavujúcej obrazovku v hornej polovici hlavného okna.
Pre vytvorenie našej aplikácie použijeme druhú možnosť, čiže doplnenie zdrojového kódu v súbore MainPage.xaml. Na výpočet ceny PHM potrebujeme niekoľko vstupných údajov: dĺžku trasy, spotrebu auta na 100km, cenu PHM za 1l a počet pasažierov. Pre zadanie vstupných údajov si zvolíme komponent s názvom TextBox, názvy jednotlivých vstupných údajov, chybové výpisy a výsledné výpisy budú reprezentované cez komponent s názvom TextBlock a na uskutočnenie výpočtu použijeme komponent tlačidla Button. Jednotlivým komponentom nastavíme názvy, veľkosť, umiestnenie, farbu písma, veľkosť a štýl písma, a pod. Všetky tieto komponenty budú zahrnuté v komponente s názvom StackPanel. Kód umiestňujeme do sekcie Grid v súbore MainPage.xaml. Vytvorený kód bude vyzerať nasledovne:
<StackPanel x:Name="contentPanel" Margin="15,32,15,32">
<TextBlock x:Name="title" Text="Výpočet ceny PHM" Margin="15,0,0,10"
FontSize="40" FontFamily="Century gothic" FontWeight="ExtraBold" />
<TextBlock Text="Dĺžka trasy v km:" Margin="15,0,0,10"/>
<TextBox x:Name="dlzkaInput" Width="150" HorizontalAlignment="Left" Margin="25,0,0,0"/>
<TextBlock x:Name="dlzkaAlert" Margin="15,5,0,0" Foreground="Red"/>
<TextBlock Text="Spotreba na 100 km v l:" Margin="15,10,0,10"/>
<TextBox x:Name="spotrebaInput" Width="150" HorizontalAlignment="Left" Margin="25,0,0,0"/>
<TextBlock x:Name="spotrebaAlert" Margin="15,5,0,0" Foreground="Red"/>
<TextBlock Text="Cena PHM za 1l:" Margin="15,10,0,10"/>
<TextBox x:Name="literInput" Width="150" HorizontalAlignment="Left" Margin="25,0,0,0"/>
<TextBlock x:Name="literAlert" Margin="15,5,0,0" Foreground="Red"/>
<TextBlock Text="Počet pasažierov:" Margin="15,10,0,10"/>
<TextBox x:Name="pocetInput" Width="150" HorizontalAlignment="Left" Margin="25,0,0,0"/>
<TextBlock x:Name="pocetAlert" Margin="15,5,0,0" Foreground="Red"/>
<Button x:Name="inputButton" FontSize="22" FontWeight="Bold"
Background="GreenYellow" Foreground="OrangeRed" BorderBrush="Green"
Content="Vypočítaj cenu PHM" Margin="25,10,0,10" />
<TextBlock x:Name="totalOutput" Margin="15,20,0,0"/>
<TextBlock x:Name="oneOutput" Margin="15,10,0,0"/>
</StackPanel>
Vytvorenie funkcionality
Ak chceme aby aplikácia bola schopná vykonávať očakávaný výpočet, potrebujeme zabezpečiť, aby po kliknutí na tlačidlo výpočtu prebehol výpočet a zobrazil sa výsledok. Klikneme na časť kódu kde je definované tlačidlo Button a v pravom dolnom rohu v sekcii Properties klikneme na tlačidlo 
. Do sekcie Click vpíšeme ľubovoľný názov metódy, ktorá sa bude starať o vykonanie funkcionality a potvrdíme stlačením tlačidla Enter na klávesnici. Následne sa automaticky otvorí zdrojový kód súboru MainPage.xaml.cs kde je už vytvorená kostra metódy, ktorú potrebujeme implementovať a tým zabezpečiť požadovanú funkcionalitu.
Implementáciu vytvárame tak, že najprv zadefinujeme premenné, ktoré budeme potrebovať pre uloženie vstupných údajov a pre uloženie vypočítaných údajov, na začiatku zabezpečíme vymazanie všetkých chybových výpisov a výpisov výsledku, čo je potrebné z toho dôvodu, aby po opakovanom stláčaní tlačidla výpočtu boli chybové výpisy a výsledky vždy aktuálne. Postupne získame vstupné údaje a ak je to možné prekonvertujeme ich do požadovaného typu. Ak to možné nie je, napr. ak používateľ zadal namiesto číselných údajov reťazec znakov, zabezpečíme zobrazenie chybového výpisu. Ak chceme aby používateľ mohol desatinnú časť čísla oddeľovať znakom bodky alebo čiarky vytvoríme si pomocnú metódu, ktorá bude meniť čiarku na bodku ak je to potrebné. Zdrojový kód tejto pomocnej metódy je zobrazený v nasledujúcom bloku kódu:
private string replaceCommaToDot(String text)
{
string inputStr = "";
if (text.Contains(","))
inputStr = text.Replace(',', '.');
else
inputStr = text;
return inputStr;
}
Nakoniec ak hodnoty vstupných údajov predstavujú kladné čísla vykonáme požadovaný výpočet a vypíšeme výsledok, v opačnom prípade program vypíše chybovú hlášku. V nasledujúcom bloku kódu je výsledná implementácia udalosti po kliknutí na tlačidlo výpočtu.
private void On_Button_Click(object sender, RoutedEventArgs e)
{
double totalPrice, onePersonPrice;
double spotreba, dlzka, liter, pocet;
spotrebaAlert.Text = dlzkaAlert.Text = literAlert.Text = pocetAlert.Text = "";
totalOutput.Text = oneOutput.Text = "";
totalOutput.Foreground = new SolidColorBrush(Colors.Black);
if (!double.TryParse(replaceCommaToDot(dlzkaInput.Text), out dlzka))
dlzkaAlert.Text = "Hodnota dĺžky musí predstavovať kladné číslo!";
if (!double.TryParse(replaceCommaToDot(spotrebaInput.Text), out spotreba))
spotrebaAlert.Text = "Hodnota spotreby musí predstavovať kladné číslo!";
if (!double.TryParse(replaceCommaToDot(literInput.Text), out liter))
literAlert.Text = "Hodnota ceny za liter musí predstavovať kladné číslo!";
if (!double.TryParse(replaceCommaToDot(pocetInput.Text), out pocet))
pocetAlert.Text = "Hodnota počtu pasažierov musí predstavovať kladné číslo!";
if (spotreba > 0 && dlzka > 0 && liter > 0 && pocet > 0)
{
totalPrice = spotreba / 100 * liter * dlzka;
onePersonPrice = totalPrice / pocet;
totalOutput.Text = "Celková cena za cestu je: " + totalPrice + "€.";
oneOutput.Text = "Jeden pasažier zaplatí: " + onePersonPrice + "€.";
}
else
{
totalOutput.Foreground = new SolidColorBrush(Colors.Red);
totalOutput.Text = "Každé poličko musí obsahovať hodnotu väčšiu ako 0!";
}
}
Úprava vzhľadu úvodnej „splash“ obrazovky
Nastavenie úvodnej obrazovky sa uskutočňuje po dvojitom kliknutí na manifest súbor s názvom Package.appxmanifest v sekcii Solution explorer:
V hlavnej časti obrazovky kliknite na Visual Assets v ľavej časti na Splash Screen a následne môžete nastavovať farbu pozadia a vyberať úvodné logo, ktoré sa zobrazí po spustení aplikácie:
Prispôsobenie zobrazovania pre menšie obrazovky
Obrazovky niektorých starších mobilných zariadení majú nižšie rozlíšenie a obsah aplikácie by mohol presahovať viditeľnú časť displeja. Z toho dôvodu je potrebné umožniť rolovanie aplikácia vertikálne a horizontálne pomocou komponentu ScrollViewer, do ktorého zahrnieme celý StackPanel:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
...
</ScrollViewer>
V súbore MainPage.xaml môžeme aj priamo definovať ako sa ma vzhľad aplikácie meniť v závislosti od veľkosti obrazovky. V našej aplikácii nastavíme pomocou XAML kódu ako sa bude zobrazovať aplikácia na displejoch so šírkou menšou ako 641px. Kód umiestnime do sekcie Grid.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="641" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="title.HorizontalAlignment" Value="Center"/>
<Setter Target="title.FontSize" Value="30"/>
<Setter Target="inputButton.Margin" Value="0,0,0,0"/>
<Setter Target="inputButton.HorizontalAlignment" Value="Center"/>
<Setter Target="dlzkaInput.Margin" Value="0,0,0,0"/>
<Setter Target="dlzkaInput.HorizontalAlignment" Value="Center"/>
<Setter Target="spotrebaInput.Margin" Value="0,0,0,0"/>
<Setter Target="spotrebaInput.HorizontalAlignment" Value="Center"/>
<Setter Target="literInput.Margin" Value="0,0,0,0"/>
<Setter Target="literInput.HorizontalAlignment" Value="Center"/>
<Setter Target="pocetInput.Margin" Value="0,0,0,0"/>
<Setter Target="pocetInput.HorizontalAlignment" Value="Center"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Z kódu je možné vidieť, že ak je veľkosť obrazovky väčšia ako 640px tak sa aplikácia zobrazuje klasicky ako je definovaná, ak je veľkosť obrazovky od 0 do 640px tak pomocou Setter komponentov je nastavené špeciálne zobrazovanie.
Na obrázku obrázkoch nižšie je zobrazená výsledná aplikácia bežiaca na počítači a na emulátore mobilného zariadenia.
Vytvorenie inštalačného súboru a inštalácia aplikácie
Z vytvorenej aplikácie umožňuje Visual Studio vygenerovať balík so všetkými súbormi potrebnými pre inštaláciu aplikácie na inom počítači s operačným systémom Windows 10 alebo na mobilných zariadeniach. Kliknite v hornej časti na Project → Store → Create App Packages…:
Zobrazí sa sprievodca vytvorením balíka, ak chcete aplikáciu umiestniť na Windows Store kliknite na Yes ak chcete vytvoriť balík pre vlastnú potrebu vyberte možnosť No. My sme si zvolili druhu možnosť:
Zobrazí sa okno, v ktorom je možné nastaviť cestu uloženia vytvoreného balíka, názov verzie, a tiež ďalšie možnosti vytvorenia balíka. Po kliknutí na Create sa začne balik vytvárať.
Keď je vytváranie balíka ukončené, je možné certifikovať vytvorenú aplikáciu. Nie je to nevyhnutné ak vytvárame aplikáciu pre vlastnú potrebu.
Vytvorený balík obsahuje okrem iných súborov aj inštalačný súbor s názvom Add-AppDevPackage:
Ak chcete aplikáciu nainštalovať kliknite pravým tlačidlom na tento súbor a vyberte možnosť Run with PowerShell. Operačný systém nainštaluje aplikáciu, ktorú môžete následne nájsť v počítači medzi nainštalovanými programami:
Zhrnutie a vlastný názor na technológiu
Vytváranie aplikácií v rámci Universal Windows Platform je veľmi prínosné v oblasti kompatibility vytvorenej aplikácie so zariadeniami využívajúcimi operačný systém Windows 10 príp. 8. Prácu s touto platformou uľahčuje vo veľkej miere vývojové prostredie Visual Studio a tiež možnosť práce vo viacerých programovacích jazykoch.
Technológia ja jednoduchá na pochopenie aj vďaka dostatočnej dokumentácii na internete. Vývojové prostredie a práca v ňom je podobná ako vo vývojovom prostredí Android Studio, určenom na vývoj pre systém Android, s ktorým už mám predchádzajúce skúsenosti. Konkrétne mám na mysli podobnosť pri úprave vzhľadu aplikácie, dopĺňaní chýbajúcich súčastí, podpore pri písaní zdrojového kódu a generovaní výstupného balíka, spúšťaní a debugovaní aplikácie a aj celkový vzhľad prostredia je podobný a dostatočne intuitívny.
Oceňujem tiež automatické navádzanie na inštaláciu potrebných súčastí, ktoré v jednoduchšej verzii Visual Studia nie sú prítomné konkrétne emulátory pre testovanie aplikácie na mobilnom zariadení a tiež šablóny pre vytváranie projektu. Prostredie podporuje aj vygenerovanie balíka s aplikáciou, ktorý je prenositeľný, čiže môžeme ho preniesť do ľubovoľného zariadenia so systémom Windows 10 prípadne 8 a aplikáciu nainštalovať.
Jedinou nevýhodou prostredia Visual Studio je dĺžka inštalácie či už samotného prostredia alebo doplnkov. Súvisí to zrejme aj s rýchlosťou internetového pripojenia a tiež s tým že sťahované a inštalované súbory sú pomerne veľké. Táto nevýhoda je však zanedbateľná oproti všetkým výhodám, ktoré toto prostredie ponúka.