2. diel - Prvý .NET MAUI aplikácie Nové

V minulej lekcii, Úvod do .NET MAUI , sme si predstavili .NET MAUI a pripravili Visual Studio.

V dnešnom .NET MAUI tutoriále si vytvoríme svoju prvú multiplatformnú aplikáciu. Okrem iného si ukážeme, ako túto aplikáciu spustiť na platformách Android, iOS a Windows, a zoznámime sa s predvolenou štruktúrou.NET MAUI projektu.

Založenie prvej multiplatformnej aplikácie

Ako prvú .NET MAUI aplikáciu si vytvoríme klasickú "Hello world" aplikáciu, ktorej jediným účelom bude vypísanie textu. Otvoríme si Visual Studio a založíme si nový projekt typu .NET MAUI App:

Ako názov zadáme napríklad HelloMaui:

Framework vyberieme ten najnovší možný a potvrdíme vytvorenie projektu:

Vygeneroval sa nám .NET MAUI projekt s pomerne jednoduchou ukážkovou aplikáciou.

Spustenie aplikácie

Tým, že vyvíjame na Windows, tak túto aplikáciu môžeme zostaviť a spustiť na nasledujúcich platformách:

• Android – v emulátore alebo na fyzickom zariadení,
• iOS – ak máme k dispozícii zariadenia s macOS alebo iOS,
• Windows.

Nižšie sú uvedené postupy prípravy prostredia a spustenie aplikácie na týchto platformách. Aplikácia sa vždy zostavuje samostatne pre konkrétnu platformu, teda bez závislosti na ostatných platformách. Aplikáciu tak môžeme vyvíjať iba pre tie platformy, ktoré nás zaujímajú.

Na spustenie aplikácie na macOS musíme vyvíjať priamo na macOS.

.NET MAUI je pomerne zložitou technológiou. Snaží sa totiž prepojiť množstvo rôznych komponentov, ktoré sú vyvíjané nezávisle na sebe rôznymi spoločnosťami. Nie je preto prekvapením, že sa raz za čas môžu objaviť nejaké chyby a problémy. Vždy aktuálny postup zostavenia a spustenia .NET MAUI aplikácie nájdeme v oficiálnej dokumentácii. Ak máme s čímkoľvek problém, nahliadneme najprv tam. Okrem iného sa tam nachádza aj prehľad najčastejšie sa vyskytujúcich problémov a ich riešení. Prehľad užívateľovi nahlásených chýb a potenciálnych riešení nájdeme prípadne v GitHub repositári .NET MAUI.

Štruktúra .NET MAUI projektu

Keď už vieme, ako projekt zostaviť a spustiť, tak sa môžeme pozrieť akými adresármi a súbormi je v predvolenom stave tvorený:

Pre nás sú najzaujímavejšie:

• Platforms/ – Adresár pre súbory s kódom špecifickým pre konkrétnu platformu.
• Resources/ – Adresár pre obrázky, ikony, fonty, štýly a ďalšie súbory, ktoré chceme v aplikácii používať.
• App.xaml a App.xaml.cs – Súbory, ktorých obsah reprezentuje celú aplikáciu.
• AppShell.xaml a AppShell.xaml.cs – Súbory, ktorých obsah reprezentuje navigáciu aplikácie.
• MainPage.xaml a MainPage.xaml.cs – Súbory, ktorých obsah reprezentuje hlavnú stránku aplikácie.
• MauiProgram.cs – Vstupný bod aplikácie.

Hlavná stránka MainPage

V .NET MAUI sú všetky komponenty aplikácie typicky tvorené dvoma súbormi:

• XAML súborom popisujúcim vzhľad a obsah komponentu pomocou značkovacieho jazyka XAML. Tento súbor teda predstavuje prezentačnú časť daného komponentu.
• C# súborom obsahujúcim triedu s logikou komponentu – táto trieda a jej kód sa tiež označujú ako code behind.

Každý komponent je vždy tvorený C# triedou a prípadne nepovinne ešte jedným XAML súborom.

Code behind

Pozrime sa do súboru MainPage.xaml.cs, teda na code behind hlavnej stránky aplikácie:

namespace HelloMaui
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            count++;

            if (count == 1)
                CounterBtn.Text = $"Clicked {count} time";
            else
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }
    }
}

Vidíme, že v C# kóde je hlavná stránka aplikácie reprezentovaná triedou MainPage, ktorá dedí od triedy ContentPage. S code behind budeme pracovať až v budúcich lekciách. Zatiaľ tu iba vymažeme metódu OnCounterClicked() a atribút count obsahujúci počet kliknutí:

namespace HelloMaui
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Metóda OnCounterClicked() rieši zmenu obsahu tlačidla pri kliknutí. Tlačidlo ani túto metódu však nebudeme potrebovať.

XAML

Teraz si otvoríme súbor MainWindow.xaml so XAML kódom stránky:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloMaui.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me"
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Vidíme tu elementy:

• <ContentPage> – samotná stránka,
• <ScrollView> – umožňuje scrollovať svojim obsahom,
• <VerticalStackLayout> – slúži na vkladanie obsahu pod seba,
• <Image> – obrázok,
• <Label> – textový popisok,
• <Button> – tlačidlo.

XAML a tieto elementy si bližšie popíšeme ďalej v kurze. Ako už bolo povedané, v našej jednoduchej "Hello world" aplikácii budeme chcieť vypísať iba krátky text Pozdrav z .NET MAUI aplikácie. Využijeme na to element <Label>, ktorým nahradíme východiskový obsah stránky:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="HelloMaui.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Label>
                Pozdrav z .NET MAUI aplikace
            </Label>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Výsledok

Aplikáciu spustíme, bude vyzerať nasledovne:

Máme hotovú svoju prvú .NET MAUI aplikáciu, gratulujeme! Zdrojové kódy tejto aplikácie máte prípadne k dispozícii nižšie na stiahnutie.

V budúcej lekcii, Pozíciovanie v .NET MAUI , sa naučíme pozíciovať ovládacie prvky na stránke. Spomenieme layouty, absolútnu a relatívnu pozíciu, vonkajšie a vnútorné okraje a veľkosť.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.