Praktické užití Silverlight 2.0: Data Binding

Jednou z nejsilnějších zbraní nového Silverlightu 2.0 je Data Binding. Ten slouží k datovému propojení uživatelského rozhraní s logikou aplikace. Jedná se o jednoduchou a užitečnou vlastnost, kterou jsme doposud znali jen z WPF. Pojďme si zde názorně, krok za krokem, projít, jak Data Binding jednoduše použít.

Seriál: Praktické užití Silverlight 2.0 (12 dílů)

  1. Praktické užití Silverlight 2.0: Data Binding 15.12.2008
  2. Praktické užití Silverlight 2.0: DataGrid 22.12.2008
  3. Praktické užití Silverlight 2.0: UserControl 29.12.2008
  4. Co zajímavého přínáší Silverlight toolkit 5.1.2009
  5. Silverlight toolkit a vizualizace dat 12.1.2009
  6. Jak na komponenty AutoCompleteBox a TreeView ze Silverlight toolkitu 19.1.2009
  7. Nástroje pro tvorbu layoutu v Silverlightu 2.0 a Silverlight toolkitu 26.1.2009
  8. Design se styly a šablonami v Silverlightu 2.0 2.2.2009
  9. Základy 2D grafiky v Silverlightu 2.0 16.2.2009
  10. Dynamicky generované komponenty v Silverlightu 2.0 3.3.2009
  11. Úvod do streamování médií v Silverlightu 2.0 16.3.2009
  12. Práce s videem v Silverlightu 2.0 1.6.2009

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:

Aplikace Můj adresář

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.

Založení nového projektu

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.

Page.xaml

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.

MujAdresar.Page

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

Prázdná spuštěná aplikace

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.

Třída Kontakt

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:

Interface InotifyPropertyChanged

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

Třída Page

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:

Hotová aplikace

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.

DataTemplate

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.

Aplikace Můj adresář

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

Autor pracuje ve společnosti Sprinx Systems a.s. jako Project Manager ve „webařské“ skupině.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 6

Přehled komentářů

m. sl
Martin Hassman Re: sl
Anonym Re: sl
Petr RE: Praktické užití Silverlight 2.0: Data Binding
Jindra Díky
mirec tak som to skusil ale
Zdroj: https://www.zdrojak.cz/?p=2894