Lekce 4 - První multiplatformní aplikace v Xamarin a C# .NET

V minulé lekci, Jazyk XAML v Xamarin.Forms, jsme si popsali základy jazyka XAML pro tvorbu uživatelského rozhraní v Xamarin aplikacích.

Dnes konečně opustíme teoretické kruhy a napíšeme si naši první multiplatformní aplikaci v Xamarin, která bude reagovat na vstup od uživatele.

Úvodem

Jak již bývá zvykem, první aplikace je většinou typu "Hello World!". Ani v tomto případě tomu nebude jinak, pouze s tím rozdílem, že nebudeme psát oslovení přímo do kódu. Napíšeme ho do textového pole přímo v aplikaci, která jej uloží do proměnné, kterou vypíšeme v dialogovém okně.

Založení nového Xamarin.Forms projektu

Pokud již máte založený projekt z minulých lekcí, můžete ho použít. Pokud ne, tak spustíme Visual Studio, vybereme New Project a poté Mobile App (Xamarin.Forms). Projekt pojmenujeme DialogApp.

Konfigurace Android emulátoru

Ještě než se pustíme do programování, nastavíme si Android emulátor. Emulátor nám umožňuje spouštět systém Android v rámci Windows (nebo klidně i macOS), daný systém se pak zvenčí chová jako by běžel samostatně na fyzickém zařízení.

Ve Visual Studiu vybereme Tools, poté Android a Android Device Manager.... V nově otevřeném okně klikneme na Nový a nastavíme si parametry jaké chceme. Já jsem si např. vybral jako základ Pixel 3. Profil emulátoru si pojmenujeme dle libosti a vybereme API. Já si zvolil Android 10.0 API 29. Potvrdíme vytvoření, odsouhlasíme licenční podmínky a počkáme, než se nám stáhnou a nainstalují nové součásti. Emulátor si můžeme zkušebně spustit.

Pokud narazíte na chybovou či výstražnou hlášku ohledně Hyper-V či Hypervisoru, je nutné jej aktivovat ve funkcích Windows následujícím způsobem. Ve vyhledávání Windows zadejte: Funkce systému Windows a otevřete. Zaškrtněte Platforma hypervisoru Windows a aplikujte. Počítač bude vyžadovat restartování.

Podrobný návod na různé situace při potížích s Hypervisorem jsou k dispozici v oficiální dokumentaci.

Konfigurace iOS simulátoru

Ekvivalentem emulátorů jsou pro iOS simulátory, ty však mohou běžet pouze v macOS. Zde nemusíme nic konfigurovat. Stačí abychom si spárovali Visual Studio a náš MAC podle postupu v úvodní lekci. Xcode se pak sám postará o nakonfigurování simulátorů při jejich spouštění.

Jediné, co můžeme změnit, je, možnost zrcadlení simulátoru z macOS na Windows. Tuto funkci nalezneme v nastavení (v horním menu kliknout na Tools a poté zvolit Options...) v kategorii Xamarin a iOS Settings:

Zde však upozorním, že toto zrcadlení stejně jako samotné párování nemusí být vždy stoprocentně spolehlivé a může vypadávat. Možná řešení nejčastějších problémů naleznete v oficiální dokumentaci.

Samozřejmě lze připojit i fyzické iOS zařízení pomocí technologie Xamarin Hot Restart.

C# DialogApp

Přesuňme se do Solution Explorer, kde si v sekci C# DialogApp otevřeme soubory MainPage.xaml a MainPage.xaml.cs.

MainPage.xaml

Jako první se podíváme do souboru MainPage.xaml. Z předchozích lekcí již víme, že slouží k rozložení komponent v naší aplikaci a zapisujeme do něj pomocí jazyka XML s rozšířenou syntaxí. Visual Studio nám při založení projektu vygenerovalo následující 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"
             x:Class="DialogApp.MainPage">

    <StackLayout>
        <Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0">
            <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
        </Frame>
        <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10"/>
        <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0"/>
        <Label FontSize="16" Padding="30,24,30,0">
            <Label.FormattedText>
                <FormattedString>
                    <FormattedString.Spans>
                        <Span Text="Learn more at "/>
                        <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold"/>
                    </FormattedString.Spans>
                </FormattedString>
            </Label.FormattedText>
        </Label>
    </StackLayout>

</ContentPage>

Již při prvním pohledu je jasné, jakým způsobem budeme zapisovat kód a také kam. Budeme ho psát do těla elementu <ContentPage>. Vše, co do něj napíšeme, se vnitřně ukládá do vlastnosti Content, která může obsahovat jen jeden element. Když tedy chceme používat více komponent, tak je musíme vkládat do nějakého kontejneru. V našem případě to je kontejner StackLayout, který jednoduše skládá ovládací prvky za sebe.

Defaultní kód Visual Studia nedělá nic jiného, než že zobrazí uvítací nápis: "Welcome to Xamarin.Forms!" a rady, jak postupovat, pomocí prvku <Label>. Tento prvek je v podstatě pouze textový popisek, který má vlastnost Text, jejíž hodnotou je textový řetězec, který se má zobrazit. Tomuto popisku můžeme taktéž nastavit horizontální a vertikální pozici pomocí atributů HorizontalOptions a VerticalOptions. O pozicování si ale více povíme až dále v kurzu.

Všechny ovládací prvky a jejich atributy se nemusíte učit nazpamět, protože Visual Studio nám nabízí ToolBox a okno Properties, kde si vše můžeme jednoduše naklikat. Pro zkušenější je však rychlejší psát rovnou kód. ToolBox nalezneme v levé vertikální liště Visual Studia, zkuste si ho otevřít a podívat se na jednotlivé komponenty. Dále si zkusme v kódu kliknout na <Label>, pod Solution Explorer se nám otevřelo okno Properties pro označený element. Opět doporučuji si okno projít řádek po řádku, ať máte představu, co vše lze s ovládacími prvky dělat.

Jistě již chápete, že tvořit klasické Hello World! by nám nedalo moc práce Stačilo by přepsat text a aplikaci spustit.

Úprava XAML

Defaultní obsah proto vymažeme a necháme si pouze prázdný element <StackLayout>. Tomu nastavíme vlastnost Margin na 25,50. Této vlastnosti se budeme věnovat podrobněji dále v kurzu. Teď nám stačí vědět, že nastaví odsazení obsahu elementu <StackLayout> zprava a zleva na 25 jednotek a shora a zdola na 50. Nastavujeme ji především proto, aby obsah nezasahoval do vrchní informační lišty (status baru) na iOS.

Do <StackLayout> poté přidáme ovládací prvek <Entry> a tlačítko <Button>. Kód bude vypadat následovně:

<StackLayout Margin="25,50">
    <Label Text="Vítejte, zadejte své oslovení" />
    <Entry x:Name="osloveniEntry" />
    <Button x:Name="button" Text="Pozdravit!" Clicked="Button_Clicked"/>
</StackLayout>

Nově se zde setkáváme s ovládacími prvky <Entry> a <Button>:

• <Entry> slouží k uživatelskému vstupu (něco jako formulářové pole na webu, do kterého můžeme psát) a
• <Button> je tlačítko.

Tlačítku jsme v atributu Clicked přiřadili metodu, která se má vyvolat po jeho stisknutí. Tuto metodu si můžeme nechat vygenerovat automaticky Visual Studiem. Po napsání Clicked=" nám Visual Studio nabídne, že nám po stisku Tab vygeneruje novou metodu. Toho samozřejmě využijeme. Atribut Clicked je ve skutečnosti událost.

Z minulé lekce si jistě pamatujete, že x: nám značí alias pro jmenný prostor s definicemi rozšiřujících parametrů. V tomto případě používáme parametr Name. Pomocí něj přiřazujeme jednotlivým prvkům jména, díky kterým poté můžeme k daným prvkům přistupovat v Code Behind.

Tímto máme v XAML souboru hotovo a formulář aplikace je připravený. Projekt uložíme, aby se změny provedené v XAML souboru projevily v celém projektu.

MainPage.xaml.cs

Přesunuli jsme se do tzv. Code Behind souboru MainPage.xaml.cs. Zde se již setkáme pouze s jazykem C# .NET, pomocí kterého budeme navržený formulář obsluhovat. Opět si ukažme vygenerovanou strukturu, která obsahuje potřebné using, namespace naší aplikace a třídu s metodou 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
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

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

Jak můžeme vidět, tak zde již máme vygenerovanou naši metodu z XAML. Metodu události tlačítka můžeme přiřadit i v C#, např. v konstruktoru MainPage():

button.Clicked += Button_Clicked;

Po napsání += nám Visual Studio stejně jako v XAML nabídne, že nám po stisku Tab vygeneruje novou metodu pro naše tlačítko.

Jelikož budeme chtít, aby dialogové okno nezaseknulo vlákno s formulářem, budeme potřebovat použít klíčové slovo await. Abychom ho mohli použít, hlavičku metody si přepíšeme na asynchronní. Asynchronní postupy se používají, když chceme v aplikaci provést nějakou akci a chceme, aby aplikace nadále reagovala, než se tato akce dokončí.

Nyní musíme říci, co se má stát po stisknutí tlačítka. Jelikož chceme, aby na nás vyskočilo dialogové okno s pozdravem a oslovením, které zapíšeme do <Entry>, tak musíme začít právě u <Entry>. Řádek s NotImplementedException() vymažeme a nahradíme ho našim kódem:

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

První řádek nám říká, že obsah <Entry>, které jsme pojmenovali jako osloveniEntry, se uloží jako string (textový řetězec) do proměnné osloveni. Na druhém řádku zavoláme DisplayAlert() (dialogové okno), do kterého vypíšeme naši proměnnou, uvítání a OK pro zavření. Všimněte si, že metoda DisplayAlert() má fixně nastavené 3 hodnoty v uvozovkách, oddělené čárkou - "Titulek", "Obsah", "Patička". Při najetí myší na DisplayAlert() nám Visual Studio opět napovídá, jak máme data zapisovat. Dále si všimněte znaku $. Pokud bychom ho nenapsali, nemohli bychom proměnnou osloveni do řetězce takto jednoduše vložit. $ se zapisuje ještě před uvozovky ovlivněného řetězce.

Spuštění aplikace

Máme hotovo, nezbývá než naši aplikaci otestovat v emulátoru nebo simulátoru.

Spuštění na Android

V Solution Exploreru klikneme pravým tlačítkem na Android projekt a zvolíme Properties. Zde se v záložce Application ujistíme, že aplikaci kompilujeme ideálně pomocí nejnovější verze Android. Tato verze musí být stejná nebo větší než verze, na které aplikaci spouštíme:

Minimální požadovanou verzi můžeme změnit v záložce Android Manifest.

Poté nastavíme Android projekt jako spouštěcí projekt, v menu nahoře si vybereme náš emulátor a spustíme jej:

Aplikace se sama sestaví, nainstaluje na emulátor a spustí. Výsledek by měl vypadat nějak takto:

Spuštění na iOS

Ten, kdo má spárované Visual Studio a MAC nebo připojené iOS zařízení, může aplikaci otestovat i na něm. Postup je obdobný, nastavíme iOS projekt jako spouštěcí projekt, v menu nahoře si vybereme náš simulátor a spustíme jej:

Aplikace se sama sestaví, nainstaluje na simulátor a spustí. V případě nastaveného zrcadlení se nám otevře nové okno s aplikací:

Na MACu se automaticky otevře simulátor:

Samozřejmě aplikaci můžeme spustit i v Universal Windows Platform.

Doufám, že se vám první aplikace líbí a všemu rozumíte.

V následujícím kvízu, Kvíz - Životní cyklus aplikace, XAML v C# .NET Xamarin, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.