Cvičení – vytvoření a spuštění hybridní aplikace Blazor

8 min

Začněme vytvořením první webové aplikace Blazor.

Tento modul používá Visual Studio 2022 pro místní vývoj. Po dokončení tohoto modulu můžete použít jeho koncepty pomocí vývojového prostředí, jako je Visual Studio Code.

Požadavky na vývoj pro .NET MAUI

Pokud chcete vytvářet aplikace .NET MAUI s .NET 8, musíte nainstalovat Visual Studio verze 17.8 nebo novější s nainstalovanou následující úlohou:

Vývoj uživatelského rozhraní pro více platforem .NET

Pokud navíc chcete vytvářet aplikace .NET MAUI Blazor, musíte nainstalovat ASP.NET a úlohu vývoje pro web.

Návod k nastavení najdete v dokumentaci .

Vývoj pomocí editoru Visual Studio Code

Pokud vyvíjíte v systému macOS nebo Linux, budete muset nainstalovat Visual Studio Code a rozšíření .NET MAUI spolu se sadou .NET SDK a úlohou .NET MAUI. Návod k nastavení najdete v dokumentaci .

Vytvoření nové hybridní aplikace Blazor

K nastavení hybridního projektu Blazor pro práci používáme Visual Studio 2022.

V sadě Visual Studio 2022 vyberte Soubor>nový projekt nebo ve spouštěči vyberte Vytvořit nový projekt.
Do vyhledávacího pole v horní části dialogového okna Vytvořit nový projekt zadejte .NET MAUI Blazor, vyberte hybridní aplikaci .NET MAUI Blazor a vyberte Další.
Na následující obrazovce pojmenujte projekt BlazorHybridApp a zadejte umístění v počítači pro uložení projektu. Zaškrtněte políčko vedle možnosti Umístit řešení a projekt do stejného adresáře a pak vyberte Další.
Na obrazovce Další informace vyberte v rozevíracím seznamu Rozhraní .NET 8.0 (dlouhodobá podpora) a pak vyberte Vytvořit.
Tento příkaz vytvoří základní hybridní projekt Blazor využívající .NET MAUI se všemi požadovanými soubory a stránkami.

Teď byste měli mít přístup k těmto souborům a váš Průzkumník řešení v sadě Visual Studio 2022 vypadá podobně jako v následujícím příkladu:

K nastavení hybridního projektu Blazor pro práci s nástrojem Visual Studio Code.

V editoru Visual Studio Code otevřete Průzkumníka a vyberte Vytvořit projekt .NET.
V rozevíracím seznamu vyberte hybridní aplikaci .NET MAUI Blazor.
V automaticky otevírané nabídce s názvem BlazorHybridApp vytvořte novou složku a vyberte Vybrat složku.
Pojmenujte projekt BlazorHybridApp a potvrďte stisknutím klávesy Enter .
Tím se vytvoří základní hybridní projekt Blazor využívající .NET MAUI se všemi požadovanými soubory a stránkami.

Teď byste měli mít přístup k těmto souborům a průzkumník řešení v editoru Visual Studio Code vypadá nějak takto:

Blazor Hybrid se strukturou projektu .NET MAUI a spuštěním

Projekt je normální projekt .NET MAUI s dalším obsahem souvisejícím s Blazorem.

Soubory projektu Blazor

wwwroot: Tato složka zahrnuje statické webové prostředky, které Blazor používá, včetně souborů HTML, CSS, JavaScriptu a obrázků.
Komponenty: Tato složka kontejneruje několik podsložek a komponent razor pro aplikaci.
- Rozložení: Tato složka obsahuje sdílené komponenty Razor, včetně hlavního rozložení a navigační nabídky aplikace.
- Pages: Tato složka obsahuje tři komponenty Razor –Counter.razorHome.razor a Weather.razor– definují tři stránky, které tvoří uživatelské rozhraní Blazor.
- _Imports.razor: Tento soubor definuje obory názvů importované do každé komponenty Razor.
- Routes.razor: Kořenová komponenta Razor pro aplikaci, která nastaví směrovač Blazor pro zpracování navigace na stránce ve webovém zobrazení.

Soubory projektu .NET MAUI

App.xaml: Tento soubor definuje prostředky aplikace, které aplikace používá v rozložení XAML. Výchozí prostředky se nacházejí ve Resources složce a definují barvy a výchozí styly pro celou aplikaci pro každý integrovaný ovládací prvek .NET MAUI.
App.xaml.cs: Kód souboru App.xaml je za sebou. Tento soubor definuje třídu aplikace. Tato třída představuje vaši aplikaci za běhu. Konstruktor v této třídě vytvoří počáteční okno a přiřadí jej k MainPage vlastnosti; tato vlastnost určuje, která stránka se zobrazí při spuštění aplikace. Kromě toho tato třída umožňuje přepsat běžné obslužné rutiny událostí životního cyklu aplikace neutrální pro platformu. Události zahrnují OnStart, OnResumea OnSleep.

MainPage.xaml: Tento soubor obsahuje definici uživatelského rozhraní. Ukázková aplikace, kterou šablona aplikace .NET MAUI Blazor vygeneruje, se skládá z BlazorWebView toho, že komponentu načte Components.Routes na zadané stránce HTML hostitele (wwwroot/index.html) do umístění určeného selektorem css (#app).

<?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"
            xmlns:local="clr-namespace:BlazorHybridApp"
            x:Class="BlazorHybridApp.MainPage"
            BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

MainPage.xaml.cs: Kód stránky je za sebou. V tomto souboru definujete logiku pro různé obslužné rutiny událostí a další akce ovládacích prvků .NET MAUI na triggeru stránky. Ukázkový kód v šabloně má pouze výchozí konstruktor, protože všechny uživatelské rozhraní a události jsou umístěny v komponentách Blazor.
```
namespace BlazorHybridApp;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}
```
MauiProgram.cs: Každá nativní platforma má jiný výchozí bod, který vytvoří a inicializuje aplikaci. Tento kód najdete ve složce Platformy v projektu. Tento kód je specifický pro platformu, ale na konci volá CreateMauiApp metodu statické MauiProgramtřídy. Tuto metodu CreateMauiApp použijete ke konfiguraci aplikace vytvořením objektu tvůrce aplikací. Minimálně musíte určit, která třída popisuje vaši aplikaci. Můžete to provést pomocí UseMauiApp obecné metody objektu tvůrce aplikací; parametr typu určuje třídu aplikace. Tvůrce aplikací také poskytuje metody pro úlohy, jako je registrace písem, konfigurace služeb pro injektáž závislostí, registrace vlastních obslužných rutin pro ovládací prvky a další. Následující kód ukazuje příklad použití Tvůrce aplikací k registraci písma, registraci služby weather a přidání podpory pro Blazor Hybrid pomocí AddMauiBlazorWebView metody:
```
using Microsoft.AspNetCore.Components.WebView.Maui;
using BlazorHybridApp.Data;

namespace BlazorHybridApp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        });

        builder.Services.AddMauiBlazorWebView();

        #if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
        builder.Logging.AddDebug();
        #endif

        return builder.Build();
    }
}
```

Spustit aplikaci

V sadě Visual Studio vyberte >Spustit ladění.

V editoru Visual Studio Code vyberte spustit>ladění. V rozevíracím seznamu vyberte ladicí program .NET MAUI a spusťte aplikaci.

Tím se aplikace sestaví a spustí ve Windows a pak aplikaci znovu sestaví a restartuje pokaždé, když provedete změny kódu. Aplikace by se měla automaticky otevřít ve Windows. Cíl nasazení můžete také změnit pomocí rozevírací nabídky ladění a nasadit ho na Android nebo na jiné platformy.

Snímek obrazovky s výchozí hybridní aplikací Blazor spuštěnou ve Windows a Androidu

Tuto hybridní aplikaci Blazor použijete v několika dalších cvičeních.