Jste připravení na vývoj aplikací pro Windows 10?

Základní koncepce Windows 10 – jeden operační systém pro všechna zařízení – znamená velkou výzvu pro vývojáře, aby jejich aplikace běžela na co nejvíce typech zařízení.

Chcete-li se pustit do praktických příkladů vývoje pro Windows 10, potřebujete mít vhodně nakonfigurován vývojářský počítač s Windows 10. Může to být fyzický, nebo virtuální počítač a vývojové prostředí Visual Studio 2015 buď v komerční, nebo volně šiřitelné verzi Community Editon.

Abyste mohli aplikace spouštět a ladit včetně mobilních telefonů, potřebujete Windows 10 SDK a Windows 10 Mobile Emulator. Tyto komponenty lze nainstalovat při instalaci Visual Studia. Pro emulátory je třeba mít v BIOSU vývojářského počítače povolenou podporu virtualizace.

Universal Windows Platform

Windows 10 využívá nový aplikační model Universal Windows Platform (UWP), který zpřístupňuje API vrstvy napříč zařízeními. Je unifikovaný pro všechny podporované platformy od mikrokontrolérů v rámci IoT (internetu věcí) přes smartphony, tablety, PC, herní konzoli Xbox, nástěnné zařízení s velkoplošnou obrazovkou Surface Hub až po holografické brýle HoloLens.

Klepněte pro větší obrázek 
Jeden aplikační model pro všechny platformy

V praxi to znamená, že vytvoříte jediný balíček pro distribuci aplikace, která může být instalována na užším, nebo širokém spektru zařízení. Přesněji řečeno, pro jednotlivé produktové rodiny, které se liší velikostí displeje a různou filozofií uživatelského rozhraní.

Rodina zařízení je množina API rozhraní pro konkrétní konstrukční faktor zařízení (smartphone, tablet ...), které mají název a číslo verze. Dědí vlastnosti od API rozhraní univerzální rodiny zařízení a rozšiřuje je. To zaručuje, že API univerzálního zařízení bude dostupné na každém přístroji.

Klepněte pro větší obrázek 
Princip dědění vlastností od API rozhraní univerzální rodiny zařízení

Každý potomek, tedy rodina konkrétních zařízení, přidává k zděděným vlastnostem a funkcím své specifické. Přitom je zaručeno, že tyto vlastnosti a funkce budou dostupné na jakémkoli zařízení příslušné rodiny. Výhodou takovéto hierarchie rodin zařízení je, že vaše aplikace může běžet na jakékoli, případně všech rodinách zařízení. Adaptivní kód dynamicky detekuje a používá funkce konkrétního zařízení.

Základní principy flexibilního designu

Designéři a vývojáři jsou postaveni před nelehký úkol navrhnout a vytvořit uživatelské rozhraní, které bude možné používat na zařízeních s různými velikostmi displeje. Základním designovým principem pro Windows 10 aplikace je flexibilita.

Pokud byste aplikaci navrženou "natvrdo" pro telefony spustili na velkém displeji, většina obrazovky by byla nevyužitá. Opačně, pokud byste aplikaci navrhli primárně pro tablet, nebo PC, na menších displejích telefonů by uživatelské rozhraní aplikace bylo nečitelné, nebo by se vůbec nedalo zobrazit.

Aby vaše aplikace fungovala bez úprav na široké škále zařízení s různými úhlopříčkami displeje a různým rozlišením, Windows 10 používá algoritmus pro změnu měřítka, který normalizuje způsob zobrazování prvků uživatelského rozhraní a fontů. Algoritmus zohledňuje pozorovací vzdálenost a rozlišení obrazovky pro optimalizaci vnímání velikosti prvků.

Klepněte pro větší obrázek 
Změna měřítka podle velikosti displeje

Vzhledem k fungování algoritmu změny měřítka budete při navrhování prvků uživatelského rozhraní používat namísto skutečných pixelů, takzvané efektivní pixely. Umožní vám soustředit se na skutečné vnímané velikosti prvku, aniž by jste se museli starat o hustotu pixelů nebo vzdálenost, ze které se uživatel dívá na displej.

Například při návrhu prvku s rozměrem 1'' se bude tento prvek zdát velký přibližně 1'' na všech zařízeních. Na menších zařízeních přitom může mít 100 × 100 fyzických pixelů a na velké obrazovce s vysokou hustotou pixelů, může mít 200 × 200 fyzických pixelů.

 

Windows 10 využívá nový aplikační model Universal Windows Platform (UWP), který zpřístupňuje API vrstvy napříč zařízeními

 

Díky efektivním pixelům můžete při návrhu uživatelského rozhraní ignorovat hustotu pixelů a aktuální rozlišení obrazovky. Samozřejmě velikosti a v neposlední řadě orientaci obrazovky musíte přizpůsobit i zobrazovaný obsah.

Na menších displejích můžete na základní obrazovce zobrazit pouze nejpoužívanější prvky a další si uživatel zobrazí například posunutím. Případně na větší obrazovce zobrazíte najednou více prvků pro vyšší variabilitu ovládání.

V případě zobrazování informací typu seznam (mailů, kontaktů, položek...) na malé obrazovce se vypíše seznam objektů a po kliknutí na vybraný objekt se vypíší detailní informace. Velké obrazovce PC či tabletu se detaily o vybraném objektu zobrazí zpravidla vedle seznamu objektů.

Klepněte pro větší obrázek 
Zobrazování seznamu objektů na zařízeních s různou šířkou displeje

Pro lepší přehlednost doporučujeme umisťovat ovládací prvky do sekcí. Významnější prvky je třeba umístit v horní části obrazovky, aby byly dostupné bez nutnosti rolování.

Pro Windows 10 UWP aplikace přibyl nový kontejnerový prvek RelativePanel, který implementuje rozložení prvků definováno relativními vazbami (vpravo, vlevo, nad, pod...), takže se díky možnosti přeskupení prvků dokáže lépe přizpůsobit změnám v rozlišení obrazovky. Ukážeme jednoduchý příklad využívající jeden prvek typu TextBox a dvě tlačítka:

<RelativePanel>
   <TextBox x:Name="textBox1" Text="textbox" Margin="15"/>
   <Button x:Name="blueButton" Margin="15" Background="LightBlue" 
      Content="Tlačidlo vpravo"
      RelativePanel.RightOf="textBox1"/>
   <Button x:Name="orangeButton" Margin="15" Background="Orange"
      Content="Tlačidlo pod modrým" RelativePanel.RightOf="textBox1"
      RelativePanel.Below="blueButton"/>
</RelativePanel>

Životní cyklus UWP aplikace

UWP Aplikace může být v jednom s tří stavů:

  • Running
  • Suspended
  • NotRunning

V první fázi spouštění aplikace se během zobrazení úvodní obrazovky inicializují hlavní úkoly, které tvoří aplikaci. Úvodní obrazovka by měla být zobrazena na co nejkratší dobu, nezbytně potřebnou k inicializaci aplikace. V případě aplikace, která potřebuje data ze sítě nebo velké množství dat z disku, by měly být tyto činnosti realizovány mimo aktivaci, například postupně na pozadí uživatelského rozhraní.

 

Díky efektivním pixelům můžete při návrhu uživatelského rozhraní ignorovat hustotu pixelů a aktuální rozlišení obrazovky

 

Když uživatel přesune aplikaci na pozadí, nebo zařízení, na kterém aplikace běží, přejde do úsporného stavu, aplikace se sama pozastaví. Přejde do stavu „Suspended“. Mezi stavem „Running“ a „Suspended“ nastane přechodový stav, kdy je aplikace již na pozadí, ale Windows ještě deset vteřin čeká, aby se ujistil, že uživatel nechce přejít zpět do aplikace.

Stává se to při přepínání mezi aplikacemi a je určitá pravděpodobnost, že uživatel se z jiného programu, případně domovské obrazovky, přepne znovu na vaši aplikaci. V této fázi je aplikace na pozadí systémem vnímá jako běžící, nedochází k jejímu pozastavení a po přepnutí je náběh okamžitý.

Po uplynutí tohoto časového intervalu systém automaticky přesune aplikaci do úsporného režimu. Aplikace ve stavu „Suspended“ je sice zavedena v paměti, ale v tomto stavu nemůže vykonávat žádnou činnost. Během přechodu může aplikace například uložit neuložená data do úložného zařízení. Na toto uložení dat má maximálně pět sekund. V případě, že vaše operace ukládání dat trvá déle, máte možnost vyžádat prodloužené provádění. V případě, že systém má dostupný dostatek prostředků, umožní vám provést i déletrvající operaci.

Lepší jednou zkusit než desetkrát číst

Ve Visual Studio 2015 vytvořte ve svém preferovaném programovacím jazyce C#, Visual Basic, C ++, nebo JavaScript projekt typu Blank App v složce Windows Universal.

Klepněte pro větší obrázek 
Vytvoření projektu aplikace

Projekt obsahuje pouze jedinou stránku uživatelského rozhraní v souboru MainPage.xaml. Jiné stránky požadovaného typu můžete přidávat během vývoje. Ve fázi vytváření projektu vás vývojové prostředí upozorní, abyste v nastavení Windows 10 v sekci Update and Security ve složce For developers povolili vývojářský mód, abyste mohli spouštět nejen aplikace z Windows obchodu, ale i vlastní, které vyvíjíte a ladíte a které ještě nebyly do obchodu publikovány.

Aby byla první aplikace co nejjednodušší, umístěte na plochu v souboru MaiPage.xaml nějaké jednoduché prvky, například DatePicker a TimePicker na nastavování data a času. Můžete si porozhlédnout, jak bude uživatelské rozhraní aplikace zobrazené na různých velikostech displeje při horizontální i vertikální orientaci. A samozřejmě můžete aplikaci spustit. Pokud se to podaří, je vše OK.

Klepněte pro větší obrázek 
Návrh designu aplikace ve Visual Studiu 2015

Nicméně někdy budete nuceni psát kód, který běží pouze v rámci specifické rodiny zařízení, například na smartphonech. Typickým případem je obsluha pravého tlačítka pod displejem (hardwarového nebo virtuálního zobrazeného na displeji) s významem "zpět". Takové tlačítko je k dispozici pouze na platformě Windows 10 mobile. Na desktopech a tabletech byste ho hledali marně. Nejdříve musíte přidat referenci. Otevřete dialogové okno Reference Manager a vyberte buď Microsoft Desktop Extension SDK for Universal App Platform nebo Microsoft Mobile Extension SDK for Universal App Platform.

V aplikaci použijte metodu Windows.Foundation.Metadata.ApiInformation.IsTypePresent pomocí které aplikace zjistí, zda právě běží na zařízení, které má k dispozici objekt typu Windows.Phone.UI.Input.HardwareButtons. Pokud ano, pak aplikace běží na mobilním zařízení a příslušný kód se provede:

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent ("Windows.Phone.UI.Input.HardwareButtons")) Windows.Phone.UI.Input.HardwareButtons.BackPressed

+= HardwareButtons_BackPressed;

Na webu dev.microsoft.com najdete dostatek příkladů i tutoriálů, takže si snadno najdete takový, který se nejvíce podobá aplikaci, kterou se chystáte vytvořit.

71 komentářů

Nejnovější komentáře

  • rkrama 18. 1. 2016 8:44:03
    MS by sa mal zamysliet nad tym preco prichadza o developerov... nepomoze...
  • PetrCBR 17. 1. 2016 17:32:48
    Znate osobne nekoho, kdo na desktopu pouziva tyto UApps ? Ja nikoho. Znate...
  • Petr Vesely 16. 1. 2016 23:13:15
    Dnes je problémem optimalizace.Ale i přesto se najde pár borcu co dovedou...

Určitě si přečtěte


Deset tipů, jak ovládnout Google: Vyhledávejte jako mistři

Deset tipů, jak ovládnout Google: Vyhledávejte jako mistři

** Vyhledávače jsou natolik dobré, že si poradí i s frází v běžné češtině ** Pokud to ale nebude stačit, můžete vyzkoušet pokročilé funkce ** Vybrali jsme ty nejzajímavější

25.  9.  2016 | Jakub Čížek | 19

9 nejlepších programů na úpravu fotek. Placené i zdarma

9 nejlepších programů na úpravu fotek. Placené i zdarma

** Pro běžné úpravy fotek nemusíte pirátit Photoshop, vystačíte si s levnějšími programy ** Ceny pokročilých editorů se většinou vejdou do dvou tisíc korun ** Mnohdy stačí i bezplatné nástroje

26.  9.  2016 | Stanislav Janů | 50

Aby byl signál a internet všude: jak fungují a kde jsou schované antény operátorů

Aby byl signál a internet všude: jak fungují a kde jsou schované antény operátorů

** Základnové stanice BTS mobilních operátorů zdaleka nejsou jen typické kovové stožáry ** Podívejte se na některé nevšední instalace ** Dozvíte se, z čeho se moderní BTS skládá a jak funguje

28.  9.  2016 | David Polesný | 32

Pojďme programovat elektroniku: Vyrobím si z drobných součástek vlastní mikropočítač za pár kaček

Pojďme programovat elektroniku: Vyrobím si z drobných součástek vlastní mikropočítač za pár kaček

** Můžete si koupit třeba desku Arduino Uno ** Anebo si složíte celý mikropočítač sami ** Je to snadné jako facka

27.  9.  2016 | Jakub Čížek | 27

Týden Živě: Zvyknou si Češi platit paušál za software?

Týden Živě: Zvyknou si Češi platit paušál za software?

** Zoner vypustil do světa nové Photo Studio. Je za paušál. ** HP nechce neoficiální inkoust ** Koutek časopisu Computer

25.  9.  2016 | Časopis Computer | 65


Aktuální číslo časopisu Computer

Srovnání výhodných 27" monitorů

Velký test levných rychlých routerů

Jak nastavit Android, aby vás nesledoval

45 podrobných testů a recenzí