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