3. diel - Prvý multiplatformový aplikácie v Xamarin a C # .NET

Vitajte u ďalšieho pokračovania kurzu o vývoji multiplatformových aplikácií v Xamarin. V minulej lekcii, Štruktúra Xamarin projektu a životný cyklus aplikácie , sme si ukázali a opísali jednotlivé časti súborov a zložiek a vysvetlili, čo sa v aplikácii deje od jej spustenia, cez pauzu, až po ukončenie. Dnes konečne opustíme teoretické kruhy a napíšeme si našu prvú multiplatformový aplikáciu v Xamarin, ktorá bude reagovať na vstup od užívateľa.

Úvodom

Ako už býva zvykom, prvá aplikácia je väčšinou typu "Hello World!". Ani v tomto prípade tomu nebude inak, iba s tým rozdielom, že nebudeme písať oslovenie priamo do kódu. Napíšeme ho do textového poľa priamo v aplikácii, ktorá ho uloží do premennej, ktorú vypíšeme v dialógovom okne.

Založenie nového Xamarin projektu

Ak už máte založený projekt z minulých lekcií, môžete ho použiť. Ak nie, tak spustíme Visual Studio a vyberieme New Project -> Mobile App (Xamarin.Forms). Projekt pomenujeme DialogApp.

Konfigurácia Android emulátora

Ešte než sa pustíme do programovania, nastavíme si Android emulátor. Vo Visual Studiu vyberieme Tools -> Android -> Android device manager. V novo otvorenom okne klikneme na "Nový" a nastavíme si parametre aké chceme. Na začiatok nám postačí Prednastavený základ zariadení Nexus 5 X. Profil emulátora si pomenujeme podľa ľubovôle a vyberieme API. Ja si zvolil Android 9.0 API 28. Klikneme na vytvoriť, odsúhlasíme licenčné podmienky a počkáme, kým sa nám stiahnu a nainštalujú nové súčiastky. Emulátor si môžete skúšobni spustiť.

Ak narazíte na chybovú či výstražnou hlášku ohľadom Hyper-V či hypervisor, je nutné ho aktivovať vo funkciách Windows nasledujúcim spôsobom. Vo vyhľadávania Windows zadajte: "Funkcia systému Windows" a otvorte. Zaškrtnite "Platforma hypervisora Windows" a aplikujte. Počítač bude vyžadovať reštartovanie.

Podrobný návod na rôzne situácie pri problémoch s hypervisor nájdete v oficiálnej dokumentácii na adrese https://docs.microsoft.com/...-for-android...

C # DialogApp

Presuňme sa do roztoku Explorer, kde si v sekcii C# DialogApp otvoríme súbory MainPage.xaml a MainPage.xaml.cs.

MainPage.xaml

Ako prvý sa pozrieme do súboru MainPage.xaml. Z predchádzajúcich lekcií už vieme, že slúži na rozloženie komponentov v našej aplikácii a zapisujeme do neho pomocou jazyka XML s rozšírenou syntaxou. Visual Studio nám pri založení projektu vygenerovalo nasledujúci kód:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="DialogApp.MainPage">

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!"
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

Už pri prvom pohľade je jasné, akým spôsobom budeme zapisovať kód a tiež kam. Ak si myslíte, že do bloku <StackLayout></StackLayout>, máte pravdu. Defaultný kód Visual Studia nerobí nič iné, než že zobrazí uprostred obrazovky uvítací nápis: "Welcome to Xamarin.Forms!". Iste už chápete, že tvoriť klasické Hello World! by nám nedalo moc práce Stačilo by prepísať text a aplikáciu spustiť.

Pre začiatočníkov kód vysvetlím, skúsenejší môžu túto časť pokojne preskočiť. Ako vidíte, každá komponenta sa zapisuje do tagov zo špicatých zátvoriek < .... />, podobne ako napr. V jazyku HTML. Medzi nimi sa nachádza okrem iného pozicovanie. Ako príklad nám poslúži tento <Label>. V podstate sa jedná len o značku pre textový popis, ktoré nastavíme požadované parametre a im zas hodnoty. Syntax je veľmi jednoduchá: parametr="hodnota". Jednotlivé parametre pre prehľadnosť píšeme na samostatný riadok. Je však možné ich písať aj do jedného riadku. Konkrétne pre <Label> zadávame parametre:

• Text - Hodnotou je textový reťazec, ktorý sa má zobraziť
• HorizontalOptions - Horizontálna pozícia elementu
• VerticalOptions - Vertikálna pozícia elementu

Tieto parametre ani hodnoty sa nemusíte učiť naspamäť, pretože Visual Studio nám ponúka ToolBox a okno Properties, kde si všetko môžeme jednoducho naklikať. Pre skúsenejších je však rýchlejšia písať rovno kód. ToolBox nájdeme v ľavej vertikálnej lište Visual Studia, skúste si ho otvoriť a pozrieť sa na jednotlivé komponenty. Ďalej si skúsme v kóde kliknúť na <Label>, pod Sulution Explorerom sa nám otvorilo okno Properties pre označený element. Opäť odporúčam si okno prejsť riadok po riadku, nech máte predstavu, čo všetko sa dá s ovládacími prvkami robiť.

Teraz už ale späť k našej aplikácii. Defaultný <Label> vymastíme a napíšeme si svoj vlastný. Pridáme ovládací prvok <Entry> a tlačidlo <Button>. Kód bude vyzerať nasledovne.

<StackLayout>
        <Label Text="Vítejte, zadejte své oslovení" />
        <Entry x:Name="osloveni" />
        <Button x:Name="button" Text="Pozdravit!" />
</StackLayout>

Novo sa tu stretávame s ovládacími prvkami <Entry> a <Button>. <Entry> slúži k užívateľskému vstupu (niečo ako formulárové pole na webe, do ktorého môžeme písať) a <Button> je tlačidlo. x: nám značí model frameworku, podľa ktorého sa potom konštruuje. Je to akýsi ekvivalent premenné. Bližšie sa k tejto téme dostaneme v ďalších lekciách, kde budeme hlbšie preberať pozadia fungovanie aplikácie a objekty. Týmto máme v XAML súbore hotovo a formulár aplikácie je pripravený.

MainPage.xaml.cs

Presunuli sme sa do tzv. Code Behind súboru MainPage.xaml.cs. Tu sa už stretneme len s jazykom C# .NET, pomocou ktorého budeme navrhnutý formulár obsluhovať. Opäť si ukážme vygenerovanú štruktúru, ktorá obsahuje potrebné using, namespace našej aplikácie a triedu s metódou MainPage():

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace DialogApp
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        //sem budeme psát náš kód
        }
    }
}

Ako prvý si projekt uložíme, aby sa zmeny vykonané v XAML súboru prejavili v celom projekte. Presunieme sa do metódy MainPage() a pod InitializeComponent(); inicializujeme naše tlačidlo:

button.Clicked += Button_Clicked;

Po napísaní += nám Visual Studio ponúkne, že nám po stlačení Tab vygeneruje novú metódu pre naše tlačidlo. Toho samozrejme využijeme. Jej kód by mal vyzerať nejako takto:

private void Button_Clicked(object sender, EventArgs e)
{
    throw new NotImplementedException();
}

Keďže budeme chcieť, aby sa dialógové okno otvorilo až po spracovanie, budeme potrebovať použiť kľúčové slovo await. Aby sme ho mohli použiť, metódu si prepíšeme na asynchrónne. Asynchrónne postupy sa používajú, keď chceme v aplikácii vykonať nejakú akciu a chceme, aby aplikácia naďalej reagovala, než sa táto akcia dokončí.

Teraz musíme povedať, čo sa má stať po stlačení tlačidla. Keďže chceme, aby na nás vyskočilo dialógové okno s pozdravom a oslovením, ktoré zapíšeme do <Entry>, tak musíme začať práve u <Entry>. Riadok s NotImplementedException() môžeme pokojne vymazať a nahradíme ho našim kódom:

private async void Button_Clicked(object sender, EventArgs e)
{
    string VypisOsloveni = osloveni.Text;
    await DisplayAlert($"Ahoj {VypisOsloveni}!", "Vítej v první multiplatformní aplikaci.", "OK");
}

Prvý riadok nám hovorí, že obsah <Entry>, ktoré sme pomenovali ako osloveni, sa uloží ako string (textový reťazec) do premennej VypisOsloveni. Na druhom riadku zavoláme DisplayAlert() (dialógové okno), do ktorého vypíšeme našu premennú, uvítanie a OK pre zatvorenie. Všimnite si, že metóda DisplayAlert() má fixne nastavené 3 hodnoty v úvodzovkách, oddelené čiarkou - "Titulok", "Obsah", "Päta". Pri nabehnutí myšou na DisplayAlert() nám Visual Studio opäť napovedá, ako máme dáta zapisovať. Ďalej si všimnite znaku $. Ak by sme ho nenapísali, nemohli by sme premennú VypisOsloveni do reťazca takto jednoducho vložiť. $ Sa zapisuje ešte pred úvodzovky ovplyvneného reťazca.

Spustení aplikácie

Máme hotovo, nezostáva než naši aplikáciu otestovať v emulátora. V Solution Exploreri klikneme pravým tlačidlom myši na názov projektu a vyberieme Build. Po dokončení zhruba uprostred hornej lišty vo Visual Studio klikneme na zelené tlačidlo pripomínajúce Play. Výsledok by mal vyzerať nejako takto.

A po kliknutí na tlačidlo "pozdraviť!":

Ten, kto má spárované iOS zariadenia, môže aplikáciu otestovať aj na ňom. Samozrejme aplikácii môžeme spustiť aj v Universal Windows Platform.

Dúfam, že sa vám prvá aplikácia páči a všetkému rozumiete. V budúcej lekcii, Kvíz - Životný cyklus aplikácie, XAML v C# .NET Xamarin , sa zameriame na štýlovanie a ďalšie komponenty .NET.

V nasledujúcom kvíze, Kvíz - Životný cyklus aplikácie, XAML v C# .NET Xamarin, si vyskúšame nadobudnuté skúsenosti z predchádzajúcich lekcií.