WP. Vývoj univerzálních Windows Store aplikací. Mgr. David Gešvindr MCSD: Windows Store MCSE: Data Platform MCT MSP

PV239/WP Vývoj univerzálních Windows Store aplikací

Mgr. David Gešvindr MCSD: Windows Store | MCSE: Data Platform | MCT | MSP [email protected]

Osnova kurzu 1. Seznámení s platformou a nástroji pro vývoj aplikací 2. Základy návrhu UI, implementace UI, úvod do práce s daty 3. Návrhový vzor MVVM, lokální uložení dat 4. Implementace klienta webových služeb

Modul 2 Návrh uživatelského rozhraní

Návrh aplikace  Kde začít? Představte si svého uživatele  Jak bude aplikaci používat? Proč? K čemu?  Najděte klíčové scénáře použití a udělejte je co nejjednodušší  Nebojte se použít papír, neprogramujte hned

Základní struktura aplikace  Každá aplikace je tvořena stránkami  Stránka je reprezentována třídou dědící z třídy Page  Každé stránce odpovídá separátní XAML soubor a s ním související codebehind (C#)

Application (App.xaml) Frame Page MainPage (MainPage.xaml, MainPage.xaml.cs)

Možnosti zobrazení aplikace

Celá obrazovka (horizontálně) Celá obrazovka (vertikálně)

Možnosti zobrazení aplikace

Více aplikací vedle sebe (dle rozlišení, až 4)

Možnosti zobrazení aplikace

Snap-view (dle konfigurace šířka 500 px nebo 320px)

Různé rozměry aplikace  Nezáleží na orientaci zařízení, ale na rozměrech aplikace

Na výšku

Čtverec

Na šířku

Podporované velikosti obrazovek 4”

10”

6”

8”

14”

18”

24”

30”

40”

Efektivní rozlišení  Určuje rozměry použitelné pro zobrazení obsahu v aplikaci

~4” telefon z 50 cm X × Y efektivních pixelů

Stejný pozorovací úhel

Stejné efektivní rozlišení

~40” televize z5m X × Y efektivních pixelů

Efektivní rozlišení  Efektivní rozlišení určuje rozměry použitelné pro zobrazení obsahu

384 x 683

450 x 800

1366 x 768

1920 x 1080

2560 x 1440

Podpora různých rozlišení obrazovky  Aplikace musí podporovat běh na obrazovkách od 4” do 40+”  Systém detekuje fyzickou velikost obrazovky a podle toho aplikuje zvětšení (scale) ovládacích prvků • Zaručuje, že i na tabletu s 10” obrazovkou s rozlišením 1920x1080px je aplikace dobře čitelná a použitelná • Při vyšší jemnosti displeje je vhodné použít kvalitnější rastrové obrázky

 Visual Studio umožňuje simulovat různé varianty rozlišení obrazovky a míry zvětšení

Aplikační dlaždice  Ikona aplikace v nabídce Start  Zobrazuje aktuální informace z aplikace  Je možné ji aktualizovat na pozadí nebo vzdáleně  Různé šablony  Uživatel si vybírá velikost

Aplikační kontrakty  Sdílení • Uživatel může rychle sdílet obsah z aplikace s ostatními aplikacemi, které jej umí zpracovat

 Hledání • Windows 8 podporovaly hledání napříč aplikacemi • Windows 8.1 zavádí podporu pro vyhledávácí pole v aplikaci

 Nastavení • Aplikace by neměla obsahovat obrazovky s nastavením • Nastavení by měla být přístupná skrze tlačítko Settings

Aplikační kontrakty na Windows Phone  Není přítomen Charms Bar  Sdílení • Implementuje se často jako položka v Application Baru

 Hledání • Vyhledávácí pole v aplikaci, často zobrazované až po stisku tlačítka hledat v Application Baru

 Nastavení • Obrazovka s nastaveními je přístupná často z Application Baru • Je vhodné nastavení zahrnout do plánovaní aplikaci a navigace v aplikaci

Základní elementy UI Windows Phone Status Bar  Obsah neovlivnitelný  Lze jej skrýt  Lze zobrazit indikátor průběhu

Application Space  Prostor pro ovládací prvky aplikace  Zcela v rukou vývojáře

Application Bar  Prostor pro další ovládací tlačítka  Možnost vysunutí celé nabídky

Modely navigace v aplikaci Hierarchický model  Hub • Vstupní stránka do aplikace • Horizontálním posunem uživatel získá přehled o tom jaký obsah je v jednotlivých sekcích dostupný

 Sekce • Druhá úroveň stránek • Zobrazení individuálních položek s obsahem včetně odkazů na detaily

 Detail • Stránka zobrazující konkrétní obsahovou položku

Modely navigace v aplikaci Plochý model

 Všechny obrazovky mají stejnou úroveň  Uživatel mezi nimi přechází např. s pomocí navigační lišty (horní App Bar)

Modely navigace v aplikaci

1. Do aplikací se umísťuje tlačítko zpět 2. Názvy sekcí mohou vést na detail sekce 3. Aplikace může obsahovat další navigační elementy

Modely navigace v aplikaci

Modely navigace v aplikaci

 Horní aplikační panel se využívá pro zobrazení navigace  Uživatel může rychle přecházet mezi různými částmi aplikace

Modely navigace v aplikaci

Semantic Zoom  „Oddálení zobrazené stránky“  Vede k zobrazení obsahu v agregované podobě za účelem rychlejší navigace

Modely navigace v aplikaci  Windows Phone používá podobné modely navigace 1. 2. 3. 4.

Centrální hub s hlavním menu (Hub Control) Centrální hub (Hub Control) Záložky (Pivot Control) Seznam položek s jejich detailem

Centrální hub s hlavním menu  Funkcionalita aplikace je rozdělena do několika hodně oddělených oblastí  Je třeba efektivní navigace mezi různými oblastmi  Panely vpravo od hlavního menu mohou nabízet výběr obsahu z některých oblastí

Centrální hub  Funkcionalita aplikace není rozdělena na izolované podoblasti  Jednotlivé panely hubu prezentují kompletní obsah, ne jen výběr

Centrální hub (Panorama Control)  Graficky velkolepý  Vybízí k prozkoumávání obsahu

Záložky (Pivot Control)  Používají se na organizaci obsahu sekce  Záložky by měly mít stejné položky • Např.: Filtrování obsahu podle různých kritérií

 Efektivní, zaměřený na obsah

Seznam položek s jejich detailem  Používá se pro zobrazení seznamu položek a následného detailu položky

Rozmístění příkazů v aplikaci  Příkazy spojené s danou stránkou se umísťují do spodního aplikačního panelu (App Bar)

 Vlevo se umísťují příkazy související s vybranými položkami

Rozmístění příkazů v aplikaci  Další doporučení k aplikačnímu panelu  Doporučené pořadí tlačítek:

 Je možné využít menu:

Rozmístění příkazů v aplikaci  Application Bar • Umístění tlačítek relevantních k celé stránce • Po vysunutí se u tlačítek ukáží popisky a zobrazí dodatečné možnosti

Ovládací prvek Flyout  Flyout • Miniaturní okno zobrazené za účelem sběru informací nebo potvrzení operace hned u tlačítka, které operaci vyvolalo • Uživatel může jednoduše zrušit

Ovládací prvek Message Dialog  Zpráva, která blokuje interakci s aplikací, dokud uživatel nezvolí některou z možností  Používat jen velmi zřídka, kde je to nezbytné

Rozložení ovládacích prvků na stránce  Rozdělte si stránku pomocí mřížky  Čtverec 20x20px, případně 5x5px

Rozložení ovládacích prvků na stránce  Umístění hlavičky stránky

Rozložení ovládacích prvků na stránce  Umístění obsahu stránky

Rozložení ovládacích prvků na stránce  Horizontální mezery na oddělení ovládacích prvků

10px

40px

10px

Rozložení ovládacích prvků na stránce  Vertikální mezery na oddělení ovládací prvků

20px 10px

Rozložení ovládacích prvků na stránce  Mezery mezi skupinami

80px

Shrnutí  Při návrhu uživatelského rozhraní se inspirujte systémovými aplikacemi  Uživatelské rozhraní by mělo být praktické, rychlé a přehledné  Dodržujte doporučení uvedená ve Windows 8 User experience guidelines abyste vytvořili konzistentní aplikaci, která se chová stejně jako systém a další aplikace

Modul 3 Implementace uživatelského rozhraní

Seznámení s XAML  Extensible Application Markup Language (XAML) je deklarativní jazyk který umí vyjádřit jakýkoliv strom CLR objektů  XML element v XAML odpovídá .net třídě  XML atributy jsou mapovány na vlastnosti objektu  Zanoření elementů reprezentuje hierarchii objektů  Každý XAML dokument má jen jeden ROOT element

Zápis XAML vs. C# Zápis v XAML

Identický zápis v C#

Ovládací prvky 1. Společné 2. Stejné API, upravené chování dle platformy 3. Specifické pro platformu

Základní společné ovládací prvky Button

Slider

ToggleSwitch ProgressBar

CheckBox

TextBlock Text

RadioButton

TextBox

Ovládací prvky pro rozložení obsahu  Ovládací prvek StackPanel • Zobrazí zanořené ovládací prvky zarovnané do řady buď vertikálně nebo horizontálně

 Ovládací prvek Grid • Definuje řádky a sloupce do kterých se rozmísťují jednotlivé ovládací prvky

 Ovládací prvek VariableSizedWrapGrid • Ovládací prvky umísťovány do řádku/sloupce a pokud je dosaženo max. počtu objektů, vznikne nový řádek/sloupec

Ovládací prvky s odlišným chováním     

Hub AppBar/CommandBar ComboBox Date/Time Pickers ListView • Multi-select; containers, swipe selection

Specifické ovládací prvky  Windows • SearchBox • SettingsFlyout

 Windows Phone • • • • •

Pivot AutoSuggestBox ContentDialog Maps System Chrome

Hlavní vlastnosti      

Width (MinWidth, MaxWidth) Height (MinHeight, MaxHeight) Margin Padding HorizontalAligment, VerticalAligment HorizontalContentAligment, VerticalContentAligment

Zobrazení položek  GridView • GridView umístí položky do mřížky odshora dolů, zleva do prava • Pokud se nevejdou na obrazovku, povolí horizontální posuvník

 FlipView • Zobrazuje vždy jednu položku současně • Umožňuje mezi nimi přecházet

 ListView • Zobrazí seznam položek s možností vertikálního posuvníku

Implementace aplikační lišty  S pomocí ovládacího prvku AppBar

 Prvky nutné uspořádat pomocí StackPanelu  Podporované ovládací prvky: • • • • •

AppBarButton AppBarToggleButton AppBarSeparator Nastavují se atributy Label a Icon Možnost využít Flyout

Implementace aplikační lišty  Z ovládacího prvku AppBar dědí prvek CommandBar, který rozšiřuje jeho funkcionalitu  Může obsahovat jen ovládací prvky implementující ICommandBarElement  Automaticky řeší layout (netřeba StackPanel)  Obsahuje • Primární seznam příkazů (vpravo) • Sekundární seznam příkazů (vlevo)

Změny rozložení uživatelského rozhraní  Pro změny rozložení stránky, kde nepostačuje pouze změna velikosti ovládacích prvků se využívá VisualStateManager  Přechody mezi vizuálními stavy jsou popsány pomocí Storyboardů, které definují s pomocí animací změny vlastností ovládacích prvků (např. viditelnost)  Ve Windows 8 se aktuální zobrazení odvozovalo od: • ApplicationView.Value  ApplicationViewState.FullScreenLandscape  ApplicationViewState.FullScreenPortrait  ApplicationViewState.Filled  ApplicationViewState.Snapped

Změny rozložení uživatelského rozhraní  Ve Windows 8.1 by se rozložení UI mělo měnit jako reakce na událost dle šířky a orientace aplikace

VisualStateManager

Aktivace přechodu v C#:

Shrnutí  Uživatelské rozhraní se definuje v jazyce XAML  WinRT obsahuje známé ovládací prvky z WPF/Silverlightu  Je důležité zvolit vhodný ovládací prvek pro tvorbu layoutu  Jsou ovládací prvky, které podporují výpis položek  Hromadné změny rozložení ovládacích prvků je výhodné realizovat přes VisualStateManager

Modul 4 Práce s daty v aplikaci

Práce s daty v jazyce XAML  Pro zobrazení dat se využívá data bindingu v jazyce XAML • Data jsou oddělena od samotné definice UI • Je vytvořena vazba mezi objektem UI a business objektem

 DataContext (DataSource) • Objekt, který je zdrojem dat • Ovládací prvky jej dědí

Datové zdroje  Hlavní druhy zdrojů dat • Data načtená z lokálních souborů  Rychlý přístup k datům  Možnost uložit veliké množství dat

 Není možná synchronizace

• Data načtená z webové služby  Rychlost přístupu k datům závisí na rychlosti linky  Data nemusí být vždy dostupná  Data mohou být sdílena mezi více uživateli

Datové zdroje  Datový zdroj je běžný C# objekt • Měl by implementovat INotifyPropertyChanged nebo INotifyCollectionChanged

 Využívá se ObservableCollection  V XAML se využívá CollectionViewSource • Podporuje řazení, filtrování a seskupování • C# objekt binduje data na CollectionViewSource • CollectionViewSource binduje data na ovládací prvek

Ovládací prvky pro zobrazení dat  GridView • Zobrazení dat v tabulkovém rozložení včetně možnosti horizontálního posunu • Možnost data seskupovat do skupin

 ListView • Zobrazení vertikálního seznamu položek s možností vertikálního posuvníku • Využívá se pokud je aplikace zmenšena na malou šířku

 FlipView • Zobrazuje vždy jednu datovou položku současně • Umožňuje mezi nimi přecházet

Data Binding v XAML  Směr toku dat • OneTime • OneWay • TwoWay

 Notifikace o změnách • Zdroj musí implementovat INotifyPropertyChanged nebo INotifyCollectionChanged • V případě kolekcí se využívá ObservableCollection

Data Binding v XAML  Konvertory • Transformují data načtená ze zdroje, než jsou předána cíli • Konvertor tvoří třída implementující rozhraní IValueConverter  Implementace metod Convert a ConvertBack

Data Binding kolekcí  Zobrazovaná kolekce je načtena do atributu ItemsSource ovládacího prvku  Ovládací prvek pro každou položku kolekce vytvoří instanci šablony a nastaví danou položku jako její data source  V šabloně se využije klasický data binding v XAML

Data Binding příkazů  Vybrané ovládací prvky obsahují atribut Command, do kterého je možné navázat instanci třídy implementující rozhraní ICommand  ICommand předepisuje:

Data Binding příkazů  Vzorový projekt obsahuje implementaci třídy RelayCommand  Zjednodušuje implementaci samotného příkazu

Shrnutí  Použití Data Bindingu je vyžadováno při použití návrhového vzoru MVVM  Podstatně zjednodušuje zobrazení a získání dat z uživatelského rozhraní  Minimalizuje množství událostí, které by jinak musely být v uživatelském rozhraní obsluhovány kvůli práci s daty