2. diel - Jazyk XAML v C # .NET WPF

V minulej lekcii, Úvod do WPF (Windows Presentation Foundation) , sme si uviedli základné informácie o technológii WPF a vytvorili prvý jednoduchý formulár, ktorý obsahoval iba TextBlock. Tiež sme si hovorili, že možnosti grafického návrhára Visual Studia idú dosť slabé a že preto budeme k návrhu formulárov používať najmä XAML kód. Práve na ten sa zameriame v dnešnom C# .NET tutoriálu.

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

XAML sme už mali možnosť vidieť pri tvorbe minulého príkladu, aj keď ho za nás vygeneroval grafický návrhár Visual Studia. Pre okno s jedným TextBox em by XAML kód vyzeral asi takto:

<Window x:Class="HelloWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Pozdrav" Height="150" Width="285">
    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="120,77,0,0" TextWrapping="Wrap" Text="Pozdrav z formuláře" VerticalAlignment="Top"/>

    </Grid>
</Window>

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 <Window> (okno), v ňom je ďalej vložený element <Grid> (chápte ho ako panel na ovládacie prvky) a v tomto paneli je vložený element <TextBlock>, čo je nám už známy textový popis.

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 nepovinné). Elementy ukončujeme podľa toho, či sú párové alebo nepárové. Nepárové elementy zapíšeme takto:

<TextBlock />

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

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 formuláře" a hovoríme, že sa jedná o obsah TextBlock u.

<TextBlock>Pozdrav z formuláře</TextBlock>

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 do to úvodzoviek za názov atribútu a znamienko rovnosti:

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

Vidíte, že element <TextBlock> 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 frameworku 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 elemente <Window> 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" (líši sa podľa verzie WPF):

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HelloWPF"

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 WPF 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 <Window> alebo <TextBlock>).

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 <Window> má parameter x:Class. Ten určuje názov triedy s C# kódom, ktorý formulár obsluhuje (tzv. Code-Behind), o tom si povieme viac ďalej v kurze.

Menné priestory sa tiež využívajú pre vkladanie vlastných komponentov, ale o tom až niekedy ďalej.

Mimochodom, všimnite si, že element Window obsahuje niekoľko parametrov, ktoré nastavujú text jeho titulku a šírku a výšku okna.

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 TextBlock u vyzeral takto:

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

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

Budúci lekcie, Pozíciovanie v C # .NET WPF , bude zas čisto praktická, naučíme sa používať rôzne atribúty elementov a tiež začneme tvoriť zaujímavejšie aplikácie.