Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - Jazyk XAML v VB.NET WPF

V minulém dílu našeho seriálu, Úvod do WPF (Windows Presentation Foundation), jsme si uvedli základní informace o této technologii a vytvořili první jednoduchý formulář, který obsahoval pouze TextBlock. Také jsme si říkali, že možnosti grafického návrháře Visual Studia jdou dosti slabé a že proto budeme k návrhu formulářů používat zejména XAML kód.

Právě na ten se zaměříme v dnešním dílu.

XAML

Již víme, že jazyk XAML slouží ke kódování prezentační vrstvy aplikace, laicky řečeno v XAMLu zapisujeme jak má okno aplikace vypadat. 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 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í jazyky. XAML potom označuje eXtensible Application Markup Language, tedy jednoduše řečeno XML se značkami pro tvorbu aplikací.

Základní charakteristiky

XAML jsme již měli možnost vidět při tvorbě minulého příkladu, i když ho za nás vygeneroval grafický návrhář Visual Studia. Pro okno s jedním TextBoxem by XAML kód vypadal 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"/></TextBlock>

    </Grid>
</Window>

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

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 Window (okno), v něm je dále vložený element Grid (chápejme ho jako panel na kontrolky) a v tomto panelu je vložený element TextBlock, což je nám již známý textový popisek.

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

Elementy

Elementy (někdy také tagy = značky) se zapisují 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í dobrovolné). Elementy ukončujeme podle toho, zda jsou párové nebo nepárové. Nepárové elementy zapíšeme takto:

<TextBlock />

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

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 formuláře" a říkáme, že se jedná o TextBlock.

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

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 do to uvozovek za název atributu a rovnítko:

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

Vidíte, že element TextBlock 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 XAMLu. V dalších dílech seriálu 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ý seriál o programování v VB.NET do konce, víte, že ve Visual Basicu existují tzv. jmenné prostory. Jedná se vlastně o balíčky, které v sobě obsahují jednotlivé třídy. Byly uvedeny z toho důvodu, že je v .NET frameworku 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 VB.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, 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 XAMLu nastavují v elementu Window a to pomocí atributu xmlns (jako XML Name Space). Designer nám ve vygenerovaném kódu připravil k použití dva "balíčky značek":

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

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

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 Window má parametr x:Class. Ten určuje název třídy s Visual Basic kódem, který formulář obsluhuje (tzv. Code-Behind), o tom si řekneme více dále v seriálu.

Jmenné prostory se také využívají pro vkládání vlastních komponent, ale o tom až někdy dále.

Mimochodem, všimněte si, že element Window obsahuje několik parametrů, které nastavují text jeho titulku a šířku a výšku okna.

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:

&lt;
&gt;
&amp;
&quot;

Text 5 > 6 by tedy v TextBlocku vypadal takto:

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

lt je zkratka Less Than (menší než), gt označuje Greather Than (větší než), ampersand a uvozovka by měly být jasné :)

Příští díl, Pozicování v VB.NET WPF, bude zas čistě praktický, naučíme se používat různé atributy elementů a také začneme tvořit zajímavější aplikace.


 

Předchozí článek
Úvod do WPF (Windows Presentation Foundation)
Všechny články v sekci
Okenní aplikace ve VB.NET WPF
Přeskočit článek
(nedoporučujeme)
Pozicování v VB.NET WPF
Článek pro vás napsal Michal Žůrek - misaz
Avatar
Uživatelské hodnocení:
7 hlasů
Autor se věnuje tvorbě aplikací pro počítače, mobilní telefony, mikroprocesory a tvorbě webových stránek a webových aplikací. Nejraději programuje ve Visual Basicu a TypeScript. Ovládá HTML, CSS, JavaScript, TypeScript, C# a Visual Basic.
Aktivity