3. diel - Jazyk XAML v Xamarin.Forms

V dnešnom tutoriále si popíšeme základy jazyka XAML, ktorý sa používa k návrhu aplikácií v Xamarin.Forms. Spomenieme elementy, menné priestory a entity.

XAML

Už vieme, že jazyk XAML slúži na kódovanie prezentačnej vrstvy aplikácie, laicky povedané v XAML zapisujeme ako má okno aplikácie vyzerať. Možno ho už poznáte z technológie WPF, kde sa používa na tvorbu formulárov desktopových aplikácií.

XAML vychádza z XML, čo je značkovací jazyk navrhnutý tak, aby si do neho každý mohol pridať svoje vlastné značky a používať ho úplne k čomukoľvek. XML je veľmi rozšírené a veľa z vás ho iste pozná napr. Ako XHTML, čo je jeho podoba sa značkami pre tvorbu webových stránok. Kto viete HTML, máte veľkú výhodu, aj keď narazíme na pár odlišností od XML.

Skratka XML označuje e X tensible M arkup L Anguage, teda rozšíriteľný značkovací jazyk. XAML potom označuje e X tensible A pplication M arkup L Anguage, teda jednoducho povedané XML so značkami pre tvorbu aplikácií.

Základné charakteristiky

V Xamarin.Forms budeme pracovať so stránkami ContentPage, ktoré obsahujú zobrazovaný obsah. Pre stránku s jedným prvkom Label (textový popis) by XAML kód mohol vyzerať 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 jednoduchom príklade si vysvetlíme základné charakteristiky jazyka XML a teda i XAML.

Stromová štruktúra

XML dokument sa skladá z elementov. Štruktúra dokumentu je stromová. To znamená, že elementy v sebe môžu obsahovať ľubovoľné množstvo ďalších elementov a tie zas ďalšie elementy a tak ďalej. Každý XML dokument však obsahuje práve jeden koreňový element, v tom sú ďalej umiestnené ďalšie podelementy. Vkladanie elementov do seba sa hovorí nesting, čo by sa dalo preložiť ako hniezdenia.

Dokument vyššie obsahuje koreňový element <ContentPage> (stránka), v ňom je ďalej vložený element <StackLayout> (chápte ho ako kontajner na ovládacie prvky, ktoré sa skladajú za seba) a v tomto kontajnera je vložený element <Label>, čo je prvok pre zobrazenie textu. Pomocou kontajnerov (layoutov) definujeme, ako sa prvky na stránke majú skladať.

XML väčšinou obsahuje aj hlavičku, ale tá sa v XAML nepíše.

Elementy

Elementy (niekedy tiež tagy = značky) zapisujeme do lomených zátvoriek, v ktorých je vždy názov elementu. Každý element je v XML nutné ukončiť (to je rozdiel oproti HTML, kde je ukončenie niekedy nepovinné). Elementy ukončujeme podľa toho, či sú párové alebo nepárové.

Nepárové elementy

Nepárové elementy zapisujeme len pomocou jednej značky:

<Label />

K ukončeniu nepárového elementu použijeme lomka pred zatváracou lomenou zátvorkou.

Párové elementy

Párové elementy ukončíme umiestnením ďalšie značky s názvom elementu, kde je po ľavej lomené zátvorke lomeno. Dovnútra párových elementov sa vkladá obsah alebo ďalšie elementy. Obsah elementom vlastne označíme a pridelíme mu nejaký význam, od toho skratka XML. Nižšie označujeme text "Pozdrav z Xamarin.Forms!" a hovoríme, že sa jedná o obsah elementu Label:

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

Obsah môžeme rovnako dobre vložiť i do atribútu. Tie sa zapisujú rovnako u párových aj nepárových elementov a to do úvodzoviek za názov atribútu a znamienko rovnosti:

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

Vidíme, že element <Label> môžeme zapísať ako párový aj nepárový element a jeho obsah vložiť buď pomocou atribútu alebo ako obsah elementu. Aké sú názvy elementov, ich párovost a atribúty samozrejme určuje špecifikácie konkrétneho jazyka, tu XAML. V ďalších lekciách kurze si popíšeme tie najzákladnejšie elementy.

Atribútov môže mať každý element ľubovoľné množstvo, jedná sa o vlastnosti daného elementu. Do atribútov nie je možné vložiť ďalšie element, len textovú hodnotu.

Menné priestory

Ak ste dočítali tunajšie objektový kurz o programovaní v C# .NET do konca, viete, že v C# existujú tzv. Menné priestory. Jedná sa vlastne o balíčky, ktoré v sebe obsahujú jednotlivé triedy alebo ďalšie balíčky. Boli uvedené z toho dôvodu, že je v .NET naozaj obrovské množstvo tried. Bez menných priestorov by musela mať každá trieda unikátny názov a tiež by sme nemohli vytvoriť svoju triedu, ktorá sa volá ako nejaká trieda z .net. Tomuto problému sa hovorí kolízie názvov.

Ak používame menné priestory, uvedieme na začiatku dokumentu ktoré komponenty z ktorých menných priestorov budeme používať. Môžeme tak mať niekoľko komponentov s rovnakým názvom, čo ničomu nevadí, ak používame v jeden čas len jednu z jedného menného priestoru. Pomocou tzv. Aliasov môžeme komponent pre daný dokument dospecifikovat a tak používať viac komponentov s rovnakým názvom v jednej chvíli pod iným označením.

V odseku vyššie som hovoril všeobecne o komponentoch, v C# .NET menné priestory obsahovali najmä triedy, v XML menné priestory samozrejme obsahujú elementy. Mennými priestory teda hovoríme, ktoré "balíčky sa značkami" budeme v dokumente potrebovať. Často sa uvádza príklad XML dokumentu, kde je element <table> jednou zo menného priestoru web, kde označuje tabuľku, a jednou zo menného priestoru shop, kde označuje stôl.

Menné priestory, s ktorými budeme pracovať, sa v XAML nastavujú v koreňovom elementu (pre nás v elementu <ContentPage>) a to pomocou atribútu xmlns (ako XML N ame S pace). Designer nám vo vygenerovanom kóde pripravil na použitie niekoľko "balíčkov značiek":

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

Aj keď sú menné priestory označované pomocou URL, nie je to skutočná webová adresa, jedná sa len o názov. Prvý menný priestor obsahuje základné elementy pre tvorbu Xamarin.Forms aplikácií. Ide o predvolený menný priestor. Akonáhle napíšeme nejakú značku, bude sa automaticky brať práve z tohto priestoru (napr. Element <ContentPage> alebo <Label>).

Druhý menný priestor má už pridelený alias x a ak budeme chcieť používať značky z neho, musíme pred ich názov vložiť x:. V tomto mennom priestore sú obsiahnuté definície rozširujúcich parametrov. V príklade kóde vyššie vidíme, že element <ContentPage> má parameter x:Class. Ten určuje názov triedy s C# kódom, ktorý stránka obsluhuje (tzv. Code-Behind), o tom si povieme viac ďalej v kurze.

Menné priestory sa tiež využívajú pre vkladanie vlastných komponentov. V takom prípade musíme pridať odkaz na náš projekt, v ktorom sa komponenty nachádzajú:

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

Ako vidíte, tak za xmlns sme napísali alias local, nasledovaný cestou ku jmennému priestoru (nášmu projektu). Za clr-namespace: píšeme názov menného priestoru a za assembly= názov knižnice, v ktorej sa menný priestor nachádza. V našom prípade sa oboje volá MyFirstApp podľa názvu projektu.

Vďaka Visual Studiu a jeho IntelliSense si môžeme pridanie menného priestoru veľmi zjednodušiť. Stačí napísať xmlns:nazev= a začať písať meno menného priestoru, pre nás teda MyFirstApp. IntelliSense nám už začne ponúkať všetky možnosti. Keď vyberieme MyFirstApp, VS všetko dopíše za nás.

Entity

Možno vás napadlo, čo sa stane, keď do obsahu elementu alebo atribútu vložíte lomenou zátvorku, úvodzovky alebo iný znak, ktorý sa v syntaxi XML používa. Dokument prestane byť validné a niekedy to aj môže zapríčiniť chybu pri behu aplikácie. Preto boli zavedené tzv. Entity, čo sú náhrady najmä za znaky <, >, &, ".

Zapisujú sa týmto spôsobom:

<
>
&
"

Text "5> 6" by teda v <Label> vyzeral takto:

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

< je skratka L ess T han (menšie ako), > označuje G reater T han (väčšie ako), ampersand a úvodzovky určujú, že sa jedná o entitu.