Praktické užití Silverlight 2.0: Data Binding

Cílem našeho snažení bude vytvoření jednoduchého adresáře, který má za úkol zaznamenávat jména a e-mailové adresy. Údaje budeme vkládat pomocí formuláře, zadaná data budeme zobrazovat pomocí ListBoxu. Ve výsledku by měla naše hotová aplikace vypadat přibližně takto:

V případě, že jste úplní začátečníci a o Silverlightu nevíte dočista nic, přečtěte si článek vytváříme ukázkovou aplikaci v Siverlight 2 nebo můžete navštívit oficiální stránky Silverlightu, kde v sekci Get Started naleznete popis potřebného programového vybavení. Programy jsou plně zdarma či v expresních verzích. Doporučuji stáhnout i Expression Blend 2, který vám v budoucnu ušetří mnoho času a práce při tvorbě uživatelského rozhraní. Expression Blend 2 je placený program, ale studenti si ho mohou zdarma stáhnout na stránkách www.dreamspar­k.com, ostatní mohou využít zkušební verze po dobu 90 dnů.

Uživatelské rozhraní

Pojďme se tedy vrhnout na naši malou aplikaci. Začneme nejprve s tvorbou uživatelského rozhraní. V tomto velice jednoduchém případě nemusíme ani používat Expression Blend, ale napíšeme si uživatelského rozhraní sami ručně. Jediné, co budeme v našem UI potřebovat, jsou tři pole pro zadávání dat (jméno, příjmení a e-mail), tlačítko na uložení informací a ListBox pro výpis uložených kontaktů.

Spustíme si tedy Visual Studio, kde zvolíme Silverlight Application. Aplikaci si pojmenujeme  MujAdresar.

Otevřeme si stránku Page.xaml, což je stránka, která je standardně nastavená jako výchozí a bude tou první po spuštění aplikace, kterou uživatel uvidí. Do ní můžeme začít psát náš XAML kód. Ještě před vytvářením samotných prvků odstraňte z hlavičky nastavení výšky a šířky stránky. Po odstranění se bude stránka zvětšovat a zmenšovat podle velikosti prohlížeče.

Jako první si navrhneme rozložení stránky. K tomu použijeme prvek Grid, který se chová velice podobně jako tabulky v HTML. Definujeme si dva řádky; do horního umístíme formulář pro vkládání dat společně s tlačítkem Ulož a v dolním bude umístěn ListBox, který bude data vypisovat. Ten si prozatím necháme prázdný a vrátíme se k němu později.

Pokud si v tuto chvíli aplikaci spustíme, uvidíme následující:

Logika aplikace

V tuto chvíli máme téměř hotové uživatelské rozhraní a zbývá nám jen zajistit, aby „něco dělala“. Jednou z věcí, která dělá Silverlight velice zajímavým, je možnost vybrat si z několika programovacích jazyků pro tvorbu tzv. business vrstvy. Těmi jazyky jsou C#, VisualBasic a nově také open source IronRuby a IronPython. Já jsem si pro svůj projekt zvolil C#.

Nejprve si vytvoříme novou třídu a nazveme ji Kontakt. Zvolíme v horním menu Project → Add class a pojmenujeme ji Kontakt.cs. Tělem celé třídy bude pouze deklarace atributů a její konstruktor.

Následně si vytvoříme další třídu, kterou nazveme Adresar.cs. Tato třída je v celé naší aplikaci naprosto zásadní (a nejzajímavější). Pokud chceme provádět Data Binding do ListBoxu, mohli bychom použít klasický List<>. My ovšem použijeme vhodnější řešení. Použijeme specifický list s názvem ObservableCollection<>, který je přímo určený pro Binding dat. Největším rozdílem mezi klasickým List<> aObservableCollection<> je v tom, že druhý jmenovaný upozorňuje na změny, které v něm nastaly – přidání, změna, odebrání položky.

Abychom mohli použít ObservableCollection<>, musíme přidat do referencí jmenný prostor System.Collections.ObjectModel . Dále musíme ještě do referencí přidat jmenný prostor System.ComponentModel , ze kterého použijeme interface InotifyPropertyChanged, jehož metoda PropertyChanged zajistí aby se „vědělo“ o tom, že nastala v našem seznamu kontaktů změna. Naše třída nyní vypadá takto:

Dále musíme zajistit, aby naše tlačítko přidalo nový kontakt do našeho seznamu. To provedeme v souboru Page.xaml.cs. Třída Page obsluhuje grafické rozhraní aplikace. V první řadě musíme inicializovat náš seznam. To uděláme hned při načtení stránky. Dále už jen v metodě tlacitko_uloz_Click zavoláme metodu pro přiřazení položky do seznamu a následně vyčistíme formulář.

Data Binding

Teď už jen zbývá říci našemu ListBoxu v UI, která data má zobrazovat. To uděláme velice jednoduše tak, že přidáme do jeho syntaxe ItemSource=“{Binding Kontakty}“. Pokud totiž již v této chvíli aplikaci spustíme a začneme přidávat nové kontakty, tak nám sice začnou v ListBoxu  vyskakovat nové řádky, ale místo námi zadaných dat se zobrazí  MujAdresar.Kontakt:

Důvodem tohoto zobrazování je, že provádíme v tuto chvíli Binding na celý objekt. Proto abychom zobrazili data tak, jak si přejeme, musíme v ListBoxu  definovat jaké atributy z daného objektu má vypsat. My budeme chtít vypsat všechny. Pro tento účel musíme použít DataTemplate. Do něj poté vložíme pro každý vypsaný atribut jeden TextBlock. Velkou výhodou oproti variantě, kdy by se nemusely definovat atributy, které chceme vypsat, je, že si můžeme vybrat jen některé atributy k vypsání. Kdybychom měli v objektu Kontakty ještě například atribut ID, tak bychom ho uživateli asi nechtěli vypisovat.

Pokud si v tuto chvíli spustíme naši aplikaci, nic by již nemělo bránit tomu, aby se naše kontakty vypisovaly přesně tak, jak jsme to určili.

Zdrojové kódy a online ukázka

Můžete si stáhnout zdrojové kódy aplikace nebo zobrazit online ukázku.

Pokračování příště

V dalším dílu se budeme věnovat hlavně práci s DataGridem  a náš adresář dále rozšíříme:

• Rozšíříme počet evidovaných atributů.
• Naše kontakty místo v ListBoxu budeme zobrazovat v DataGridu, který je pro vypisování dat daleko vhodnější než ListBox.
• Ukážeme si dva způsoby jak vytvořit detail kontaktu.

Zdroje

• Silverlight 2 Learning Resources
• Silverlight Geek
• ScottGu's Blog
• Mining the Web for Silverlight so YOU don't have to