Lekce 2 - První .NET MAUI aplikace Nové

V minulé lekci, Úvod do .NET MAUI, jsme si představili .NET MAUI a připravili jsme si Visual Studio.

V dnešním .NET MAUI tutoriálu si vytvoříme svou první multiplatformní aplikaci. Mimo jiné si ukážeme, jak tuto aplikaci spustit na platformách Android, iOS a Windows, a seznámíme se s výchozí strukturou .NET MAUI projektu.

Založení první multiplatformní aplikace

Jako první .NET MAUI aplikaci si vytvoříme klasickou "Hello world" aplikaci, jejímž jediným účelem bude vypsání textu. Otevřeme si Visual Studio a založíme si nový projekt typu .NET MAUI App:

Jako název zadáme třeba HelloMaui:

Framework vybereme ten nejnovější možný a potvrdíme vytvoření projektu:

Vygeneroval se nám .NET MAUI projekt s poměrně jednoduchou ukázkovou aplikací.

Spuštění aplikace

Tím, že tuto aplikaci vyvíjíme na Windows, můžeme ji sestavit a spustit na následujících platformách:

• Android – v emulátoru nebo na fyzickém zařízení,
• iOS – pokud máme k dispozici zařízení s macOS nebo iOS,
• Windows.

Níže jsou uvedeny postupy přípravy prostředí a spuštění aplikace na těchto platformách. Aplikace se vždy sestavuje samostatně pro konkrétní platformu, tedy bez závislosti na ostatních platformách. Aplikaci tak můžeme vyvíjet jen pro ty platformy, které nás zajímají.

Pro spuštění aplikace na macOS musíme vyvíjet přímo na macOS.

.NET MAUI je poměrně složitou technologií. Snaží se totiž propojit množství různých komponent, které jsou vyvíjeny nezávisle na sobě různými společnostmi. Není proto překvapením, že se jednou začas mohou objevit nějaké chyby a problémy. Vždy aktuální postup sestavení a spuštění .NET MAUI aplikace nalezneme v oficiální dokumentaci. Pokud máme s čímkoli problém, nahlédneme nejprve tam. Mimo jiné se tam nachází i přehled nejčastěji se vyskytujících problémů a jejich řešení. Přehled uživateli nahlášených chyb a potenciálních řešení nalezneme případně v GitHub repozitáři .NET MAUI.

Struktura .NET MAUI projektu

Když už víme, jak projekt sestavit a spustit, můžeme se podívat, jakými adresáři a soubory je ve výchozím stavu tvořen:

Pro nás jsou nejzajímavější:

• Platforms/ – Adresář pro soubory s kódem specifickým pro konkrétní platformu.
• Resources/ – Adresář pro obrázky, ikony, fonty, styly a další soubory, které chceme v aplikaci používat.
• App.xaml a App.xaml.cs – Soubory, jejichž obsah reprezentuje celou aplikaci.
• AppShell.xaml a AppShell.xaml.cs – Soubory, jejichž obsah reprezentuje navigaci aplikace.
• MainPage.xaml a MainPage.xaml.cs – Soubory, jejichž obsah reprezentuje hlavní stránku aplikace.
• MauiProgram.cs – Vstupní bod aplikace.

Hlavní stránka MainPage

V .NET MAUI jsou všechny komponenty aplikace typicky tvořeny dvěma soubory:

• XAML souborem popisujícím vzhled a obsah komponenty pomocí značkovacího jazyka XAML. Tento soubor tedy představuje prezentační část dané komponenty.
• C# souborem obsahujícím třídu s logikou komponenty – tato třída a její kód se též označují jako code behind.

Každá komponenta je vždy tvořena C# třídou a případně nepovinně ještě jedním XAML souborem.

Code behind

Podívejme se do souboru MainPage.xaml.cs, tedy na code behind hlavní stránky aplikace:

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ódu je hlavní stránka aplikace reprezentována třídou MainPage, která dědí od třídy ContentPage. S code behind budeme pracovat až v budoucích lekcích. Zatím zde pouze smažeme metodu OnCounterClicked() a atribut count obsahující počet kliknutí:

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

Metoda OnCounterClicked() řeší změnu obsahu tlačítka při kliknutí. Tlačítko ani tuto metodu však nebudeme potřebovat.

XAML

Nyní si otevřeme soubor MainPage.xaml s XAML kódem 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 zde elementy:

• <ContentPage> – samotná stránka,
• <ScrollView> – umožňuje scrollovat svým obsahem,
• <VerticalStackLayout> – slouží ke vkládání obsahu pod sebe,
• <Image> – obrázek,
• <Label> – textový popisek,
• <Button> – tlačítko.

XAML a tyto elementy si blíže popíšeme dále v kurzu. Jak již bylo řečeno, v naší jednoduché "Hello world" aplikaci budeme chtít vypsat pouze krátký text Pozdrav z .NET MAUI aplikace. Využijeme k tomu element <Label>, jímž nahradíme výchozí 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ýsledek

Aplikaci spusťme, bude vypadat následovně:

Máme hotovou svou první .NET MAUI aplikaci, gratulujeme! Zdrojové kódy této aplikace máte případně k dispozici níže ke stažení.

V příští lekci, Jazyk XAML v .NET MAUI, se blíže podíváme na jazyk XAML, který se používá k návrhu komponent v .NET MAUI. Zmíníme elementy, jmenné prostory a entity.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.