Lekce 3 - Jazyk XAML v Xamarin.Forms

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

V dnešním tutoriálu si popíšeme základy jazyka XAML, který se používá k návrhu aplikací v Xamarin.Forms. Zmíníme elementy, jmenné prostory a entity.

XAML

Již víme, že jazyk XAML slouží ke kódování prezentační vrstvy aplikace, laicky řečeno v XAML zapisujeme jak má okno aplikace vypadat. Možná jej již znáte z technologie WPF, kde se používá na tvorbu formulářů desktopových aplikací.

XAML vychází z XML, což je značkovací jazyk navržený tak, aby si do něj každý mohl přidat své vlastní značky a používat ho úplně k čemukoli. XML je velmi rozšířené a mnoho z vás ho jistě zná např. jako XHTML, což je jeho podoba se značkami pro tvorbu webových stránek. Kdo umíte HTML, máte velkou výhodu, i když narazíme na pár odlišností od XML.

Zkratka XML označuje eXtensible Markup Language, tedy rozšiřitelný značkovací jazyk. XAML potom označuje eXtensible Application Markup Language, tedy jednoduše řečeno XML se značkami pro tvorbu aplikací.

Základní charakteristiky

V Xamarin.Forms budeme pracovat se stránkami ContentPage, které obsahují zobrazovaný obsah. Pro stránku s jedním prvkem Label (textový popisek) by XAML kód mohl vypadat asi takto:

<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="MyFirstApp.MainPage">
        <StackLayout>
            <Label Text="Pozdrav z Xamarin.Forms!"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand" />
        </StackLayout>
</ContentPage>

Na tomto jednoduchém příkladu si vysvětlíme základní charakteristiky jazyka XML a tedy i XAML.

Stromová struktura

XML dokument se skládá z elementů. Struktura dokumentu je stromová. To znamená, že elementy v sobě mohou obsahovat libovolné množství dalších elementů a ty zas další elementy a tak dále. Každý XML dokument však obsahuje právě jeden kořenový element, v tom jsou dále umístěny další podelementy. Vkládání elementů do sebe se říká nesting, což by se dalo přeložit jako hnízdění.

Dokument výše obsahuje kořenový element <ContentPage> (stránka), v něm je dále vložený element <StackLayout> (chápejme ho jako kontejner na ovládací prvky, které se skládají za sebe) a v tomto kontejneru je vložený element <Label>, což je prvek pro zobrazení textu. Pomocí kontejnerů (layoutů) definujeme, jak se prvky na stránce mají skládat.

XML většinou obsahuje i hlavičku, ale ta se v XAML nepíše.

Elementy

Elementy (někdy také tagy = značky) zapisujeme do lomených závorek, ve kterých je vždy název elementu. Každý element je v XML nutné ukončit (to je rozdíl oproti HTML, kde je ukončení někdy nepovinné). Elementy ukončujeme podle toho, zda jsou párové nebo nepárové.

Nepárové elementy

Nepárové elementy zapisujeme jen pomocí jedné značky:

<Label />

K ukončení nepárového elementu použijeme lomítko před zavírací lomenou závorkou.

Párové elementy

Párové elementy ukončíme umístěním další značky s názvem elementu, kde je po levé lomené závorce lomeno. Dovnitř párových elementů se vkládá obsah nebo další elementy. Obsah elementem vlastně označíme a přidělíme mu nějaký význam, od toho zkratka XML. Níže označujeme text "Pozdrav z Xamarin.Forms!" a říkáme, že se jedná o obsah elementu Label:

<Label>Pozdrav z Xamarin.Forms!</Label>

Obsah můžeme stejně dobře vložit i do atributu. Ty se zapisují stejně u párových i nepárových elementů a to do uvozovek za název atributu a rovnítko:

<Label Text="Pozdrav z formuláře" />

Vidíme, že element <Label> můžeme zapsat jako párový i nepárový element a jeho obsah vložit buď pomocí atributu nebo jako obsah elementu. Jaké jsou názvy elementů, jejich párovost a atributy samozřejmě určuje specifikace konkrétního jazyka, zde XAML. V dalších lekcích kurzu si popíšeme ty nejzákladnější elementy.

Atributů může mít každý element libovolné množství, jedná se o vlastnosti daného elementu. Do atributů nelze vložit další element, pouze textovou hodnotu.

Jmenné prostory

Pokud jste dočetli zdejší objektový kurz o programování v C# .NET do konce, víte, že v C# existují tzv. jmenné prostory. Jedná se vlastně o balíčky, které v sobě obsahují jednotlivé třídy nebo další balíčky. Byly uvedeny z toho důvodu, že je v .NET opravdu obrovské množství tříd. Bez jmenných prostorů by musela mít každá třída unikátní název a také bychom nemohli vytvořit svou třídu, která se jmenuje jako nějaká třída z .NETu. Tomuto problému se říká kolize názvů.

Pokud používáme jmenné prostory, uvedeme na začátku dokumentu které komponenty z kterých jmenných prostorů budeme používat. Můžeme tak mít několik komponent se stejným názvem, což ničemu nevadí, pokud používáme v jeden čas jen jednu z jednoho jmenného prostoru. Pomocí tzv. aliasů můžeme komponentu pro daný dokument dospecifikovat a tak používat více komponent se stejným názvem v jednu chvíli pod jiným označením.

V odstavci výše jsem mluvil obecně o komponentách, v C# .NET jmenné prostory obsahovaly zejména třídy, v XML jmenné prostory samozřejmě obsahují elementy. Jmennými prostory tedy říkáme, které "balíčky se značkami" budeme v dokumentu potřebovat. Často se uvádí příklad XML dokumentu, kde je element <table> jednou ze jmenného prostoru web, kde označuje tabulku, a jednou ze jmenného prostoru shop, kde označuje stůl.

Jmenné prostory, se kterými budeme pracovat, se v XAML nastavují v kořenovém elementu (pro nás v elementu <ContentPage>) a to pomocí atributu xmlns (jako XML Name Space). Designer nám ve vygenerovaném kódu připravil k použití několik "balíčků značek":

<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="MyFirstApp.MainPage">

I když jsou jmenné prostory označovány pomocí URL, není to skutečná webová adresa, jedná se pouze o název. První jmenný prostor obsahuje základní elementy pro tvorbu Xamarin.Forms aplikací. Jedná se o výchozí jmenný prostor. Jakmile napíšeme nějakou značku, bude se automaticky brát právě z tohoto prostoru (např. element <ContentPage> nebo <Label>).

Druhý jmenný prostor má již přidělený alias x a pokud budeme chtít používat značky z něj, musíme před jejich název vložit x:. V tomto jmenném prostoru jsou obsažené definice rozšiřujících parametrů. V příkladu kódu výše vidíme, že element <ContentPage> má parametr x:Class. Ten určuje název třídy s C# kódem, který stránka obsluhuje (tzv. Code-Behind), o tom si řekneme více dále v kurzu.

Jmenné prostory se také využívají pro vkládání vlastních komponent. V takovém případě musíme přidat odkaz na náš projekt, ve kterém se komponenty nacházejí:

xmlns:local="clr-namespace:MyFirstApp;assembly=MyFirstApp"

Jak vidíte, tak za xmlns jsme napsali alias local, následovaný cestou ke jmennému prostoru (našemu projektu). Za clr-namespace: píšeme název jmenného prostoru a za assembly= název knihovny, ve které se jmenný prostor nachází. V našem případě se obojí jmenuje MyFirstApp podle názvu projektu.

Díky Visual Studiu a jeho IntelliSense si můžeme přidání jmenného prostoru velmi zjednodušit. Stačí napsat xmlns:nazev= a začít psát jméno jmenného prostoru, pro nás tedy MyFirstApp. IntelliSense nám už začne nabízet všechny možnosti. Když vybereme MyFirstApp, VS vše dopíše za nás.

Entity

Možná vás napadlo, co se stane, když do obsahu elementu nebo atributu vložíte lomenou závorku, uvozovku nebo jiný znak, který se v syntaxi XML používá. Dokument přestane být validní a někdy to i může zapříčinit chybu při běhu aplikace. Proto byly zavedeny tzv. entity, což jsou náhrady zejména za znaky <, >, &, ".

Zapisují se tímto způsobem:

<
>
&
"

Text "5 > 6" by tedy v <Label> vypadal takto:

<Label>5 &gt; 6</Label>

< je zkratka Less Than (menší než), > označuje Greater Than (větší než), ampersand a uvozovka určují, že se jedná o entitu.

V příští lekci, První multiplatformní aplikace v Xamarin a C# .NET, již konečně opustíme teorii a naprogramujeme si jednoduchou aplikaci, která bude reagovat na vstup od uživatele a zobrazí nám dialogové okno s pozdravem. Máte se tedy na co těšit!