BLACK FRIDAY! Slevy až 80 % jsou všude. Tak je nepropásni a přejdi do rostoucího IT oboru!
The real BF 2020

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 a vybereme New Project -> 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. Ve Visual Studiu vybereme Tools -> Android -> Android device manager. V nově otevřeném okně klikneme na "Nový" a nastavíme si parametry jaké chceme. Na začátek nám postačí Přednastavený základ zařízení Nexus 5 X. Profil emulátoru si pojmenujeme dle libosti a vybereme API. Já si zvolil Android 9.0 API 28. Klikneme na vytvořit, 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ůžete 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í.

Instalace součásti Platforma hypervisor Windows

Podrobný návod na různé situace při potížích s Hypervisorem naleznete v oficiální dokumentaci na adrese https://docs.microsoft.com/…-for-android?…

C# DialogApp

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

Soubory sdíleného kódu multiplatformní Xamarin aplikace

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"
             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>

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 proměnné 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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Defaultní kód Visual Studia nedělá nic jiného, než že zobrazí uprostřed obrazovky uvítací nápis: "Welcome to Xamarin.Forms!" 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í <Label> proto vymažeme a přidáme si do kódu svůj vlastní. Přidáme také ovládací prvek <Entry> a tlačítko <Button>. Kód bude vypadat následovně:

<StackLayout>
        <Label Text="Vítejte, zadejte své oslovení" />
        <Entry x:Name="osloveniEntry" />
        <Button x:Name="button" Text="Pozdravit!" />
</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.

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ý.

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
{
    // 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
        }
    }
}

Jako první si projekt uložíme, aby se změny provedené v XAML souboru projevily v celém projektu. Přesuneme se do metody MainPage() a pod InitializeComponent(); inicializujeme naše tlačítko:

button.Clicked += Button_Clicked;

Po napsání += nám Visual Studio nabídne, že nám po stisku Tab vygeneruje novou metodu pro naše tlačítko. Toho samozřejmě využijeme. Její kód by měl vypadat nějak takto:

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

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() můžeme klidně vymazat 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. V Solution Exploreru klikneme pravým tlačítkem myši na název projektu a vybereme Build. Po dokončení zhruba uprostřed horní lišty ve Visual Studio klikneme na zelené tlačítko připomínající Play. Výsledek by měl vypadat nějak takto.

Oslovení Android aplikace v C# .NET a Xamarin

A po kliknutí na tlačítko "POZDRAVIT!":

Dialogové okno v Android aplikace v C# .NET a Xamarin

Ten, kdo má spárované iOS zařízení, může aplikaci otestovat i na něm. 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 příští lekci, Pozicování v Xamarin.Forms, se naučíme pozicování v XAML.


 

Stáhnout

Staženo 236x (1.54 MB)

 

Předchozí článek
Jazyk XAML v Xamarin.Forms
Všechny články v sekci
Xamarin - Mobilní aplikace v C# .NET
Článek pro vás napsal Jaroslav Smrž
Avatar
Jak se ti líbí článek?
6 hlasů
Autor se věnuje primárně vývoji webových aplikací v .NET Core. Zajímá se také o vývoj her v Unreal Engine 4 a mobilních aplikací v Xamarin.
Aktivity (8)

 

 

Komentáře
Zobrazit starší komentáře (1)

Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:13.7.2019 21:17

Ahoj, další články určitě vyjdou. Hned v následujícím týdnu se můžeš těšit na další 2 články a budou zdarma, jakož i zbytek seriálu. Teď k dotazům.

Je možné, že nelze spustit emulátor ve W10 Home? Pokud je tomu tak, lze aplikaci spouštět přímo na připojeném zařízení, např. v nějakém debug módu?

  • Nikoliv. Android emulator v pohodě běhá na Windows 10 Home
  • Ano, telefon lze připojit v debug módu a aplikaci na něm spustit, ale samotné nastavení je poměrně obsáhlejší a vyjde o něm samostatný článek. Pokusím se ho vydat také v následujícím týdnu. Pokud chceš prozatím experimentovat, tak důležité je mít v nastavení telefonu aktivované možnosti pro vývojáře. Ty aktivuješ tak, že cca 10x klikneš na položku "číslo sestavení" v Menu -> Nastavení -> Systém -> O telefonu. Po úspěšné aktivaci budeš mít v menu "Systém" zmíněnou kartu "Možnosti pro vývojáře".

Co se týče tvého problému, tak někde vzniká konflikt. Nevypadá to na chybu emulatoru. Přepni si Visual Studio do angličtiny a chybovou hlášku vygoogli. Je dost pravděpodobné, že tento problém již někdo vyřešil na StackOverflow a nenech se odradit tímto problémem. První spouštění bývají provázena vždy nějakou komplikací :)

Editováno 13.7.2019 21:17
Odpovědět
13.7.2019 21:17
/* Life runs on code */
Avatar
Jaroslav Smrž
Redaktor
Avatar
Jaroslav Smrž:14.7.2019 15:16

Podrobný postup pro spuštění a ladění aplikace přímo v telefonu jsem nakonec zakomponoval již do následujícího 4. dílu seriálu. Článek je již dokončen a odeslán ke schválení, takže je otázkou několika hodin než se zde zobrazí.

Odpovědět
14.7.2019 15:16
/* Life runs on code */
Avatar
Petr Doleček
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Petr Doleček:14.7.2019 15:30

Díky moc, s chutí si článek přečtu. Teď budu týden mimo, tak na to bude čas až příští týden.

 
Odpovědět
14.7.2019 15:30
Avatar
Cyril Šebek
Redaktor
Avatar
Cyril Šebek:29.7.2019 6:02

No řekl bych že android emulátor ve W10 home úplně v pohodě neběhá je dost pomalý a zasekaný, ale nevím jak je to ve W10 Pro.

Odpovědět
29.7.2019 6:02
Chytrý člověk řeší problém. Moudrý člověk se problému vyhýbá. -Albert Einstein
Avatar
Cyril Šebek
Redaktor
Avatar
Cyril Šebek:29.7.2019 6:38

Dokonce bych řekl, že se na W10 Home sotva sputsí i po zapnutí Hypervisoru my hází chybu s Akcelerací, protože W10 Home nemají Hyper-V a nedá se nijak doinstalovat, jediným řešením je, stáhnout a nainstalovat HAXM od intelu podle dokumentace platformy WHPX a nebo si koupit W10 Pro nebo Enterprise, tam je totiž Hyper-V.

Odpovědět
29.7.2019 6:38
Chytrý člověk řeší problém. Moudrý člověk se problému vyhýbá. -Albert Einstein
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Cyril Šebek
Jaroslav Smrž:29.7.2019 7:15

Ano, W10 Home nemaji přímo Hyper-V, ale pouze Hypervisor. Nicméně by měl fungovat normálně, pouze být trochu pomalejší, jak zmiňuješ. Nejlepším pro android je použití vlastního telefonu. Postup, jak na to jsem popsal ve 4. lekci.

Odpovědět
29.7.2019 7:15
/* Life runs on code */
Avatar
Jan Voženílek
Redaktor
Avatar
Jan Voženílek:18.8.2019 21:20

Mě se to děje také. Co mám dělat? Díky za radu.

 
Odpovědět
18.8.2019 21:20
Avatar
gigi_l
Člen
Avatar
gigi_l:9.10.2019 7:45

Zajimave navody take naleznete zde

 
Odpovědět
9.10.2019 7:45
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Jan Voženílek
Jaroslav Smrž:9.10.2019 10:37

Co konkrétně se ti děje? Doporučuji přečíst další lekci, kde je popsaný postup pro ladění přímo na telefonu bez použití emulátoru.

Odpovědět
9.10.2019 10:37
/* Life runs on code */
Avatar
Jan Voženílek
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Jan Voženílek:14.10.2019 7:40

Díky, vyzkouším.

 
Odpovědět
14.10.2019 7:40
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 11. Zobrazit vše