2. diel - Programujeme pre Windows 8 - Prvá aplikácia

V minulej lekcii, Programujeme pre Windows 8 - Úvod do nového prostredia , sme si popísali základné fungovanie nového prostredia ako je knižnica WinRT, typy pohľadov aplikácií a životný cyklus aplikácií. Od minula ste si mali pripraviť Windows 8 a Visual štúdio 2012, ak nemáte, napravte to. Dnes sa pozrieme na základné šablóny pre aplikácie, ktoré ponúka samotné Visual Studio. Popíšeme si ich štruktúru a využitie.

Šablóny aplikácií

Visual štúdio ponúka 3 základné šablóny pre Metro aplikácie. Poďme si ich popísať.

Blank app - Prázdna šablóna. Možno to prirovnať k základnému vzhľadu Win Formu. Táto šablóna sa používa najčastejšie, ale pozor! Pre mňa z nepochopiteľného dôvodu, musíte mierne celú šablónu poupraviť. K problému sa dostaneme v neskoršej fáze dnešného dielu.

Grid app - Najkomplexnejšie šablóna. Štruktúra aplikácie je nasledujúci. Máme skupinu položiek, ktoré je možné otvoriť a majú vlastný popis. Zároveň je možné otvoriť celá skupina, kde nasleduje opis skupiny a výpis jednotlivých položiek. Táto šablóna sa používa pre rôzne databázy filmov, RSS čítačky a pod.

Split app - Aplikácia má hlavné náhľad na kategórie, ktoré možno rozkliknúť. Nasleduje výpis jednotlivých položiek. Opäť vhodné pre rôzne čítačky kníh, RSS, novinky, apod.

Za domácu úlohu si prejdite a vyskúšajte všetky typy šablón.

Prvej aplikácie

Založte si nový projekt, pomenujte a vyberte Blank app. Mala by na vás vyskočiť obrazovka, ktorá bude rozdelená na náhľad aplikácie a štruktúra aplikácie (XAML). Než sa pustíme do štruktúry, poďme urobiť jednu nutnú vec. V prvom diele sme si povedali, že je potrebné, aby aplikácie podporovali plne Snap view, Fill view a aspoň Landscape. Ďalej musí aplikácia vedieť obstarávať Suspend režim a celý cyklus aplikácie. Pokiaľ si založíte Grid app alebo Split app, Visual štúdio vám pripraví ďalšie pomocné triedy (SuspensionManager, LayoutAweragePage, BindableBase, ...). Tieto triedy nám pomáhajú a uľahčujú prácu s životným cyklom aplikácií, uľahčujú navigáciu medzi stránkami, uľahčujú Binding v XAML (o ňom neskôr) a mnoho ďalšieho. Pokiaľ si založíte Blank app, nič také nemáte. Majstri si všetko môžu napísať sami, my si tieto triedy pridáme.

Poďme sa pozrieť na Solution Explorer.

Ako pri každej inej aplikácie máme tu Properties a Referencie. Nasleduje popis ďalších súborov.

• Assets - Obsahuje povinnú grafiku aplikácie (Logo, SplashScreen, ...).
• Common - Obsahuje súbor StandardStyles­.xaml. Tento súbor obsahuje desiatky štýlov pre rôzne komponenty. Aplikácia by mali dodržiavať základné dizajn. Celému dizajnu aplikácií, certifikáciu si v budúcnosti povieme viac.
• App.xaml - Základná kostra aplikácie. Obsahuje názov aplikácie a cestu k štýlom.
• App.xaml.cs - Zdrojový kód od App.xaml. Obsahuje zavádzajúce metódy pre Spustenie aplikácie, Suspend režim. Pozor! Nejedná sa o obsluhu životného cyklu.
• App2_Temporary­Key.pfx - Kľúč aplikácie
• MainPage.xaml - Naša prvá stránka aplikácie.
• MainPage.xaml.cs - Zdrojový kód. Obsahuje inicializácii komponentov, metódy LoadState a SaveState. O tých neskôr. Tu budeme písať všetok kód vzťahujúce sa k tejto stránke.
• Package.appxma­nifest - Dôležitý súbor ak hodláte aplikáciu umiestniť na Windows Store. Obsahuje informácie o aplikácii, požiadavky aplikácie (prístup k internetu, používanie mikrofónu), informácie o verzii programu a mnoho ďalšieho. Niekedy v budúcnosti si tento súbor rozoberieme zblízka.

Ako som už písal, Blank App nám nepridá pomocné triedy, ktoré nám nesmierne uľahčí prácu. Poďme si ich pridať. Tento postup budete musieť robiť pri každom novom projekte. Kliknite pravým tlačidlom myši na MainPage.xaml a kompletne odstráňte. Pravdepodobne sa vám zobrazí niekoľko + errorov, nevšímajte si ich. Pravým tlačidlom kliknite na názov vášho projektu a dajte pridať existujúci predmet (Add / New item). Nájdite si predmet Basic Page a pomenujte ho MainPage.xaml. Spýta sa vás, ak chcete pridať chýbajúce súbory (sú to naše pomocné triedy), dajte áno!. Po pridaní by mali zmiznúť staré error, ale pribudnú pravdepodobne dva nové. Dajte záložku Build a Build Solution alebo svetiel stlačte F6. Prvá časť je za nami, gratulujem .

Štruktúra aplikácie

Visual štúdio umožňuje živý náhľad na aplikáciu a zároveň na štruktúru (XAML). Živý náhľad je vo forme aplikácie spustené na tabletu. Teraz odbočíme od našej aplikácie a mierne sa pozrieme na dôležité dizajnové požiadavky aplikácií.

Celá aplikácia musí byť dynamická, teda musí podprovat rozlíšenie od 1024x768 až 2560x1440. Možno to znie desivo, ale nebojte sa. Aplikácia teda musíme tvoriť rovno dynamicky, Zabudnite teda na absolútny pozicovanie komponentov. Občas budeme zadávať pevnú šírku komponentov, ale nie vždy to je optimálny.

Malý tip, skúste si zvyknúť na pridávanie komponentov cez kód (XAML) a nie cez toolbox. Toolbox vám zadáva absolútnu pozicovanie, ktoré je absolútne zle. Preto v seriáli budem popisovať písania XAML.

Späť k našej aplikácii. Ak rozkliknite zložku Commons v Solution Exploreri, vidíme že nám to pridalo ďalšie triedy.

• BindableBase.cs - Trieda pre Binding v XAML (o ňom niekedy v budúcnosti)
• LayoutAweragePage - Trieda slúžiace pre navigáciu medzi stránkami aplikácie, ukladá stav aplikácie, obsluha pohľadov a mnoho ďalšieho.
• SuspensionManager - Trieda pre registráciu životného cyklu (Life cycle)

Pridalo to ešte niekoľko ďalších tried, tých si zatiaľ nemusíme všímať. Než sa pustíme do štruktúry, skúste si aplikácie zapnúť.

Aplikáciu pustíme kliknutím na Local Machine. Uvidíte na chvíľu úvodný obrázok (SplashScreen). Aplikácia má zatiaľ iba nadpis. Skúste si aplikácie prepnúť do Snap View a potom aj do Fill view (vysvetľovať ovládanie Windows 8 nebudem). Aplikáciu vypnite stiahnutím dolu na okraj obrazovky. Neklikajte vo Visual Studiu na Stop Debugging. Keď aplikáciu vypnete stiahnutím dolu, nechajte Visual Studio bežať. Zhruba po 10 sekundách si VS debug vypne. Prečo to? Práve ste videli životný cyklus aplikácie. Aplikácia sa pri zatvorení prepla do Suspend režimu, ktorá sa následne po 10 sekunách vypla. Ak tvoríte aplikáciu, kde nie je potrebné ukladať dáta, kľudne vypnite aplikácii cez VS. Ak niečo ukladáte, nechajte dokončiť Suspend režim.

Skúste si teraz pustiť aplikáciu v Simulátore. Rozkliknite šípku vedľa Local Machine a dajte Simulator. Simulátor sa vám snažia simulovať dotykové zariadenie (tablet). Jeho najväčšou výhodou je zmena rozlíšenia. Napravo "tabletu" máte znak obrazovky. Skúste si prepínať rozlíšenie. Ďalej "tablet" umožňuje rôzne natočenie a mnoho ďalšieho. Keď bude odskúšané, vráťte sa do VS.

Poďme sa už konečne pozrieť na samotný kód. Rozkliknite si App.xaml. Tento súbor obsahuje iba Resources, teda spoločné zdroje celej aplikácie. V našom prípade len link na StandardStyles­.xaml. Rozkliknite si App.xaml.cs. Vidíme tu niekoľko metód, ktoré nás budú zaujímať.

• App () - Kontrusktor, volá sa tu Inicializácia komponentov a registrujeme udalosť, ktorá zachytí, ak aplikácia prechádza do Suspend režimu.
• OnLaunched () - Zachytáva spôsob otvorenia aplikácie. Môžeme podľa toho aplikáciu prispôsobiť.
• OnSuspending () - Metóda pre Suspend režim. Tu by malo dôjsť k všetkým potrebným uloženie.

Teraz sa pozrieme na MainPage.xaml. Tu je celá kostra našej aplikácie. Nemôžem tu opísať celú štruktúru, ale pokúsim sa opísať hlavné časti.

<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="App2.MainPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:common="using:App2.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

Tu dochádza k pomenovaniu menných priestorov a deklaráciu zdrojov pre konkrétnu stránku. V našom prípade len premenná typu String s názvom aplikácie.

<Grid Style="{StaticResource LayoutRootStyle}">
       <Grid.RowDefinitions>
           <RowDefinition Height="140"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>

       <!-- Back button and page title -->
       <Grid>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto"/>
               <ColumnDefinition Width="*"/>
           </Grid.ColumnDefinitions>
           <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
           <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
       </Grid>

Hlavná časť aplikácie. Všimnite si že najviac sa používa komponent Grid. Aplikácia v Metru sa doslova krája na kúsky gridov, stĺpcov, riadkov apod. Ako bolo povedané, je to kvôli dynamickosti. Ďalej si všimnite, že "najhornejšej" grid nie je uzavretý. Druhý vnorený Grid obsahuje definície stĺpcov a ďalej tlačidlo pre navigáciu späť a TextBlock. TextBlock je náš nadpis aplikácie a zdroj textu berie zo zdrojov, ktoré sme popísali vyššie. Samozrejme môžeme rovno napísať do vlastnosti Text, čo potrebujeme. Teda napísať Text = "Nadpis aplikácie", ale tu máme skôr ukážku ako využívať zdroje. Zdroje sa používajú hlavne pre ďalšie štýly alebo pre šablónu ListView pod.

<VisualStateManager.VisualStateGroups>

           <!-- Visual states reflect the application's view state -->
           <VisualStateGroup x:Name="ApplicationViewStates">
               <VisualState x:Name="FullScreenLandscape"/>
               <VisualState x:Name="Filled"/>

               <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
               <VisualState x:Name="FullScreenPortrait">
                   <Storyboard>
                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                       </ObjectAnimationUsingKeyFrames>
                   </Storyboard>
               </VisualState>

               <!-- The back button and title have different styles when snapped -->
               <VisualState x:Name="Snapped">
                   <Storyboard>
                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                       </ObjectAnimationUsingKeyFrames>
                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                       </ObjectAnimationUsingKeyFrames>
                   </Storyboard>
               </VisualState>
           </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
   </Grid>

Tretia časť zachytáva stav aplikácie, resp pohľadu. Celá problematika zmeny pohľadu (Snap view, Fill view, ...) spočíva akurát v menenie veľkosti, odsadenie, umiestnenie komponentov. Avšak za tým všetkým, máme hromadu kódu, ktoré práve nám obstarávajú naše pomocné triedy, ktoré sme pridali. Posledný riadok je uzavretie Nash hlavného Gridu.

Ako vidíte, článok už je celkom dlhý a napriek tomu sme nestihli všetko, čo sme chceli. Budeme si to musieť nechať na nabudúce. Snáď sa vám tento diel zapáčil. Popísali sme si základné šablóny aplikácií, ukázali ako pripraviť prázdnu aplikáciu a trochu načali samotný XAML. Dali sme si okolo, možno nudnú, ale nutnú omáčku a verte, že tej omáčky bude ešte oveľa viac. Nabudúce si teda skúsime urobiť prvej aplikácii a začneme sa učiť ako tvoriť aplikácie čo najviac dynamické.

Privítam akékoľvek pripomienky či otázky. V budúcej lekcii, Programujeme pre Windows 8 - Dokončenie prvej aplikácie , sa budeme konečne zaoberať programovaním.