PHP týden Letní akce
Pouze tento týden sleva až 80 % na kurzy PHP. Lze kombinovat s akcí Letní slevy na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte u dalšího pokračování kurzu o vývoji multiplatformních aplikací v Xamarin. V minulé lekci, Struktura Xamarin projektu a životní cyklus aplikace, jsme si ukázali a popsali jednotlivé části souborů a složek a vysvětlili, co se v aplikaci děje od jejího spuštění, přes pauzu, až po ukončení. 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 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. Pokud si myslíte, že do bloku <StackLayout></StackLayout>, máte pravdu. Defaultní kód Visual Studia nedělá nic jiného, než že zobrazí uprostřed obrazovky uvítací nápis: "Welcome to Xamarin.Forms!". 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.

Pro začátečníky kód vysvětlím, zkušenější mohou tuto část klidně přeskočit. Jak vidíte, každá komponenta se zapisuje do tagů ze špičatých závorek < .... />, podobně jako např. v jazyce HTML. Mezi nimi se nachází mimo jiné pozicování. Jako příklad nám poslouží tento <Label>. V podstatě se jedná pouze o značku pro textový popisek, které nastavíme požadované parametry a jim zas hodnoty. Syntaxe je velmi jednoduchá: parametr="hodnota". Jednotlivé parametry pro přehlednost píšeme na samostatný řádek. Je však možné je psát i do jednoho řádku. Konkrétně pro <Label> zadáváme parametry:

  • Text - Hodnotou je textový řetězec, který se má zobrazit
  • HorizontalOptions - Horizontální pozice elementu
  • VerticalOptions - Vertikální pozice elementu

Tyto parametry ani hodnoty 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 Sulution Explorerem 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.

Teď již ale zpět k naší aplikaci. Defaultní <Label> vymažeme a napíšeme si svůj vlastní. Přidáme 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="osloveni" />
        <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. x: nám značí model frameworku, podle kterého se pak konstruuje. Je to jakýsi ekvivalent proměnné. Blíže se k tomuto tématu dostaneme v dalších lekcích, kde budeme hlouběji probírat pozadí fungování aplikace a objekty. 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 se dialogové okno otevřelo až po zpracování, budeme potřebovat použít klíčové slovo await. Abychom ho mohli použít, metodu 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 VypisOsloveni = osloveni.Text;
    await DisplayAlert($"Ahoj {VypisOsloveni}!", "Vítej v první multiplatformní aplikaci.", "OK");
}

První řádek nám říká, že obsah <Entry>, které jsme pojmenovali jako osloveni, se uloží jako string (textový řetězec) do proměnné VypisOsloveni. 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 VypisOsloveni 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, Debug Xamarin aplikace na Android zařízení a stylovaní, se zaměříme na stylování a další komponenty .NETu.


 

Stáhnout

Staženo 14x (68.43 MB)

 

 

Článek pro vás napsal Jaroslav Smrž
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje primárně vývoji webových aplikací v ASP.NET a PHP. Když je čas, tak tvoří i webové stránky a mobilní aplikace.
Předchozí článek
Struktura Xamarin projektu a životní cyklus aplikace
Všechny články v sekci
Tvorba mobilních aplikací v Xamarin a C# .NET
Miniatura
Následující článek
Debug Xamarin aplikace na Android zařízení a stylovaní
Aktivity (2)

 

 

Komentáře

Avatar
Petr Doleček
Redaktor
Avatar
Petr Doleček:13. července 17:17

Zajímavý článek, doufám, že budou vycházet další části, klidně i placené... Nicméně měl bych dotaz. Zkoušel jsem vytvořit ukázkovou aplikaci a nejde mi spustit emulátor. Načte se telefon s černou obrazovkou, případně s bílou obrazovkou s nápisem Google (to se stalo pouze několikrát).

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?

Toto je výstup při spuštění.

Spouští se emulátor nexus...
C:\Program Files (x86)\Android\android-sdk\emulator\emulator.EXE -no-boot-anim -avd nexus -prop monodroid.avdname=nexus
1>------ Sestavování zahájeno: Projekt: XamatinTest2.Android, Konfigurace: Debug Any CPU ------
Windows Hypervisor Platform accelerator is operational
1>C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Xamarin\Android\Xamarin.Android.Common.Debugging.targets(417,2): warning : Došlo k jedné nebo více chybám.
1>  XamatinTest2.Android -> C:\Users\Petr\source\repos\XamatinTest2\XamatinTest2.Android\bin\Debug\XamatinTest2.Android.dll
1>  Neexistuje způsob, jak vyřešit konflikt mezi sestaveními mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 a mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e. Bude zvolena jedna z možností: mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089.
2>Čeká se na dokončení kontrol za běhu.
 
Odpovědět 13. července 17:17
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Petr Doleček
Jaroslav Smrž:13. července 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. července 21:17
Odpovědět 13. července 21:17
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Petr Doleček
Jaroslav Smrž:14. července 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  +1 14. července 15:16
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Petr Doleček
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Petr Doleček:14. července 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. července 15:30
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 4 zpráv z 4.