Přejít k navigační liště

Zdroják » Různé » Praktické užití Silverlight 2.0: Data Binding

Praktické užití Silverlight 2.0: Data Binding

Články Různé

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.

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

Komentáře

Subscribe
Upozornit na
guest
6 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
m.

Bohuzial mi to nefunguje aj ked mam nainstalovanu najnovsiu verziu Moonlightu a stale to ukazuje, nainstlaujte si Silverlight.

Martin Hassman

Ukázka funguje se Silverlight 2. Ten byl vydaný před pár týdny, nevím, jak to stíhá dohánět Monnlight.

Anonymní

Moonlight 2 je momentálně alfa, beta bude v dubnu, plánovaný release je září 2009.

Petr

Jenom bych upozornil na to, že pokud se událost PropertChanged volá z jiného vlákna, než dispatcherského (tj. toho, které kreslí UI), tak se vyvolá výjimka. Tuto možnost je třeba explicitně ošetřit.

Jindra

Hezký článek!

mirec

ale ked chcem projekt spustit, vyhodi mi to chybu Zdrojovy soubor Adresar.cs nebyl nalezen. Uz som to cele parkrat kontroloval tak neviem kde je chyba

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.