TP

Avalon - Okna a panely v XAML

Co to je XAML?

Odpověď na poměrně jednoduchou otázku je trochu složitá, protože kolem XAML vzniká celkem dost zmatků. Přesná, ale docela nicneříkající definice [1] je: "XAML je jazyk založený na XML, který definuje objektový model." Je možné říct, že tento jayzk slouží hlavně k popisu uživatelského rozhraní (ale XAML lze použít i pro vytváření objektů které nemají s uživatelským rozhraním nic společného). Tvrzení, že XAML slouží k popisu uživatelského rozhraní v nadcházející verzi Windows je jesště nepřesnější (existují projekty, které umožňují používat XAML již dnes viz [2]), ale na druhou stranu podle mě nejvíce vystihuje to, k čemu vlastně XAML je a bude.

Ještě je dobré pochopit jeden rozdíl mezi XAML a HTML. Ač by se mohlo na první pohled zdát, že se jedná o jazyk založený na podobném principu je tu myslím jeden základní rozdíl. HTML je jazyk, který popisuje uživatelské rozhraní (ikdyž je zaměřený hlavně na formátování textu) a má předem určenou strukturu a tagy. Je založený na tom, že tam jsou nějaké tagy a neskrývá se za nimi nic hlubšího (ikdyž o XHTML, které je rozšiřitelné to už tak úplně neplatí). Narozdíl od toho XAML popisuje objektový model. Za každým jeho tagem se skrývá objekt a hlavním účelem XAML je tedy ne popisovat vzhled, ale zjednodušit vytváření objektů, které tvoří uživatelské rozhraní. To tedy znamená, že XAML vůbec není nutné používat, a že je možné celé uživatelské rozhraní vytvářet přímo z kódu (ikdyž je to pěkná hloupost :-)).

Co lze použít jako základ pro aplikaci

V Avalonu je možné vytvářet buď 'normálně' vypadající aplikace, které jsou spuštěny v okně a nebo aplikace, které mají navigační panel (tlačítko zpět a vpřed) a člověk se může pohybovat mezi jednotlivými XAML stránkami. Navigace mezi jednotlivými stránkami neotevírá, pokud to není v XAML stránce určeno nové okno, tekže při procházení člověk zůstává pořád v jednom okně. Tyto aplikace je také možné upravit tak, aby byly spustitelné v Internet Exploreru. Oba dva přístupy je možné kombinovat, takže aplikace s navigačním panelem může otevírat okna a naopak. To jak se bude XAML stránka chovat (tedy jestli se otevře jako okno, nebo jako stránka v okně s navigačním panelem) je určeno typem objektu od kterého je odvozená. Toto se pozná podle kořenového tagu v XAML souboru.

Podobně jako v Asp.Net je zde možné ke XAML stránce připojit nějaký CodeBehind soubor se zdrojovým kódem. Pokud tomu tak je, tak v tomto CodeBehind souboru musí být partitial třída (odvozená od třídy určené kořenovým tagem v XAML souboru), jejíž druhá část vznikne při kompilaci z XAML souboru (není to ale tak, že by XAML soubor zpracoval kompilátor, jenom z něj vygeneruje druhou část třídy aby bylo možné pracovat s ovládacími prvky na stránce pomocí jejich ID).

Následující obrázky ukazují jak vypadá Avalon aplikace s vlasním oknem a aplikace spuštěná v okně s navigačním panelem (zdrojový kód této ukázkové aplikace naleznete na konci článku):

Okno s navigačním panelemNormální okno

(Klikněte pro původní velikost)

Už pomalu nadešel čas pro nějaký zdrojový kód, takže zde je ukázka XAML souborů, které stojí za výše uvedenými screenshoty. CodeBehind soubor zatím vynechám a ukážu pouze to co je potřeba pro vytvoření uživatelského rozhraní.

<-- jako korenovy tag je zde pouzit Canvas -->
<Canvas xmlns="http://schemas.microsoft.com/2003/xaml">

  <-- a nekolik ovladacich prvku.. -->
  <Text Canvas.Top="25" Canvas.Left="20">Click this button -&gt; </Text>
  <Button Canvas.Top="10" Canvas.Left="120" Height="30px" Width="100px">
    Click Me
  </Button>
  <HyperLink Canvas.Top="50" Canvas.Left="120">
    What is your name?
  </HyperLink>
  
</Canvas>

Z tohoto XAML souboru vznikne aplikaci na obrázku vlevo (tedy s navigačním panelem). Jako bázová třída je zde použita třída Canvas. Možností je poměrně dost a několika z nich se ještě budu věnovat. Pokud chcete kód upravit tak, aby vznikla aplikace běžící v normálním okně stačí kód upravit takto:

<-- zde je objekt Canvas vlozeny do okna (Window) -->
<Window xmlns="http://schemas.microsoft.com/2003/xaml">
<Canvas>
        
  <-- a nekolik ovladacich prvku.. -->
  <Text Canvas.Top="25" Canvas.Left="20">Click this button -&gt; </Text>
  <Button Canvas.Top="10" Canvas.Left="120" Height="30px" Width="100px">
    Click Me
  </Button>
  <HyperLink Canvas.Top="50" Canvas.Left="120">
    What is your name?
  </HyperLink>
  
</Canvas>
</Window>

Možné bázové třídy

Jako bázovou třídu lze použít v podstatě cokoliv :-) a následující ukázka je (teoreticky) použítelný XAML soubor (při spuštění se otevře okno s navigačním panelem a v něm jeden veliký button):

<Button xmlns="http://schemas.microsoft.com/2003/xaml" />

Toto má však použití pouze výjmečně. Existuje však několik tříd, které jsou velmi vhodné jako bázové třídy a jsou k tomu určené.

Panely, panely, panely...

Podobně jako v Jave je v Avalonu poměrně komplikovaný systém na tvorbu layoutu. Ač jsem s Javou nikdy pořádně nepracoval, tak o jejích panelech pomocí kterých by mělo vytvořit rozumné uspořádání ovládacích prvků jsem slyšel mnoho (a nejednalo se zrovna o slova chvály). Po chvíli hraní s Avalonem jsem nabyl dojmu, že ani v Avalonu nejsou panely vymyšlené tak, aby tvorba UI byla snadná a výsledek krásně funkční. Dobrá zpráva ale je, že existuje panel, který umožňuje zadávat pozice objektů ve starých dobrých pixelech.

Hlavním důvodem ke změně fungujícího systému z WinForms je pravděpodobně to, že uživatelské rozhraní v Avalonu je poměrně razantně obohaceno a současný systém by neumožňoval vše potřebné. Nicméně panely jsou pravděpodobně jednou z věcí, které se do finální verze úplně změní, protože v uvolněné verzi jsou některé panely, které zatím nelze použít s odkazem na "new layout model" [^]. Zatím tedy jenom takový krátký přehled těch panelů, které zatím v Avalonu jsou a podařilo se mi pochopit k čemu jsou:

Attached properties

Attached properties je označení pro vlastnosti, které k ovládacím prvkům přidává panel do kterého jsou vkládány. V předchozím příkladu je názorně vidět jak se tyto vlastnosti dají zapsat v XAML (jedná se například o Canvas.Left="120"). Stačí před název vlastnost přidat typ panelu ke kterému se tato vlastnost vztahuje. Pokud budete objekty vytvářet z kódu bude nastavení pozice prvku vypadat takto:

// Lehce zjednoduseny priklad z dokumentace k Avalonu [3]
// Vytvori Canvas a nastavi mu velikost 100%
Canvas canvas = new Canvas();
canvas.Width = new Length(100f,UnitType.Percent);
canvas.Height = new Length(100f,UnitType.Percent);

// Pridani textoveho elementu
Text hello = new System.Windows.Controls.Text();
hello.TextContent = "Hello World!";

// Nastaveni pozice vuci objektu Canvas
System.Windows.Controls.Canvas.SetTop(hello,new System.Windows.Length(10));
System.Windows.Controls.Canvas.SetLeft(hello,new System.Windows.Length(40));
canvas.Children.Add(hello);

Navigace

Navigace mezi stránkami je v aplikaci založené na XAML velmi důležitá. Navigovat je možné za prvé na adresu xaml souboru a za druhé na objekt uživatelského rozhraní (UIElement), což je například stránka nebo okno. Co se týká stránek, které vracejí hodnotu, tak na ty se provádí navigace úplně stejným způsobem jako na ostatní a objekt vrácený po zavření stránky se předává pomocí události Return.

Navigaci mezi stránkami umožňují objekty implementující rozhraní INavigator. Takovým objektem je NavigationWindow [4], který lze získat vždy když je aktuálně otevřené okno v aplikaci okno s navigačním panelem. Navigaci na nějakou XAML stránku lze tedy provést pomocí následujícího kódu:

// Ziska objekt okna ktery umoznuje navigaci..
NavigationWindow win=(NavigationWindow)
  System.Windows.Application.Current.MainWindow;

// .. a navigace na XAML stranku
win.Navigate(new Uri(true,"about.xaml"));

Demo aplikace

Vše co jsem tu sepsal demonstruje jednoduchá (a jak je na ukázkovou aplikaci zvykem naprosto nesmyslná) aplikace, kterou si samozřejmě můžete prohlédnout. Pro spuštění aplikace je potřeba mít nainstalovaný Avalon [5], což může být vzhledem k fázi vývoje v které se nachází poměrně riskantní. Já osobně jsem ho neinstaloval ve VirtualPC, ale na notebooka na kterém už je pochybných betaverzí plno a funguje celkem v pořádku, ale rozhodně to nelze doporučit!

Všemožné dojmy

Uživatelské rozhraní v Avalonu je tedy celkem razantně předělané a je to jedna z mála věcí kolem Windows Longhorn, která začíná nabývat jasné podoby. Rozhodně se tu k Avalonu ještě vrátím, protože objevování nových věcí mě baví :-). Řekl bych, že Avalon tvorbu uživatelského rozhraní zjednodušuje a některé často potřebné úkony lze provést mnohem pohodlněji než dříve (hezky udělaný se mi zdá DataBinding, ale o tom až příště). Na druhou stranu nové uživatelské rozhraní a jeho definování pomocí XAML je trošku obtížné (ale hodně záleží na tom jaké k němu budou ve vývojovém prostředí nástroje). Některé věci jako možnost definovat vzhled různých ovládacích prvků jednotně pro celou aplikaci (tj. něco jako CSS) jsou sice pěkné, ale z dosavadních zkušeností mi to přijde nepraktické (ale možností to skrývá hodně, takže se to možná po důvěrnějším seznámení zlepší).

Celkem by mě zajímalo jak je to myšlené s aplikacemi založenými na navigaci mezi XAML stránkami, protože takových "wizard-like" aplikací zase tolik neznám a ani mě nenapadá moc případů, kde by toto bylo vhodné použít. Jednou z vyjímek by mohly být front-end aplikace komunikující s nějakým databázovým systémem. To že by taková aplikace mohla fungovat zároveň i na různých mobilních zařízeních, nebo přes web bez nějakých zásadních úprav mi ale zatím přijde hodně nepravděpodobné.

Ještě si neodpustím jednu menší poznámku k organizaci tříd. Nové avaloní třídy jsou ve jmenných prostorech System.Windows a System.Windows.* (za hvězdičku se dá dosadit docela dost věcí např.: Controls, Shapes). Podmnožinou jsou tedy i System.Windows.Forms (a v Avalonu lze i nadále používat WinForms ovládací prvky). Nepříjemné je, že pokud zadáte do indexu v dokumentaci třeba "Panel" vylezou již čtyři různé třídy (System.­Web.­UI.­MobileControls, System.­Web.­UI.­WebControls, System.­Windows.­Controls a System.­Windows.­Forms), což může člověka, který se v MSDN příliš nevyzná docela solidně poplést.

Odkazy na související stránky

Published: Tuesday, 22 March 2005, 1:53 AM
Author: Tomas Petricek
Typos: Send me a pull request!
Tags: