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

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

Praktické užití Silverlight 2.0: DataGrid

Články Různé

Jednou z hlavních věcí vyžadovanou u informačních systémů, které jsou založené na práci s daty, je prezentování těchto dat vhodným a přehledným způsobem. Silverlight 2.0 poskytuje pro tuto oblast velice silný nástroj DataGrid. V tomto článku si ukážeme několik možností, jak DataGrid prakticky využít.

Dnes bude naším cílem rozšíření jednoduchého adresáře, na kterém jsme si v minulém dílu demonstrovali Data Binding, o lepší prezentování námi vložených dat. Také si výrazněji rozšíříme počet atributů, které budeme u každého kontaktu zaznamenávat a na závěr si ukážeme první ze dvou způsobů, jak vytvořit detail ke kontaktu. Ve výsledku by naše aplikace měla vypadat takto:

Hotová aplikace Můj Adresář

Přidání atributů

Abychom mohli v závěru vytvářet detail kontaktu, musíme do stávající aplikace přidat několik atributů, které se nám v detailu budou zobrazovat. V prvé řadě nás bude zajímat adresa, na které náš kontakt bydlí, dále přidáme přezdívku a datum narození (ukážeme si práci s ovládacím prvkem DatePicker) a několik checkboxů s činnostmi, které náš kontakt vykonává.

Layout formuláře z předchozího článku rozšíříme o další řádek. Do něj vložíme TextBox pro adresu, CheckBoxy pro činnosti a DatePicker pro vložení data narození.

Checkboxy je vhodné vložit do kontejneru zvaného StackPanel. Jelikož následně dle vlastností tohoto kontejneru můžeme jednoduše zarovnávat skupinu checkboxů. Tato varianta nemá žádný vliv na funkčnost, je zde pouze z estetických důvodů.

StackPanel

Nyní vložíme DatePicker pro vkládání data narození našeho kontaktu. Nejjednodušší varianta vložení tohoto ovládacího prvku je, že si ho přetáhneme z levého menu ToolBox a vložíme do našeho kódu.

Přidání DatePicker

Tím také zajistíme, že nám automaticky Visual Studio vloží do hlavičky našeho XAML dokumentu použití jmenného prostoru System.Window­s.Controls.

Controls Namespace

Nyní se vrátíme k našemu DatePickeru a doplníme mu jméno a stylování.

DatePicker

Poslední věcí, kterou musíme pro tuto chvíli udělat, je odstranění ListBoxu, který jsme zde měli pro původní vypisování kontaktů. V pozdější části článku se sem vrátíme a vložíme místo něj náš DataGrid. Pokud nyní spustíme naší aplikaci, měl by základní formulář vypadat takto:

Náhled konstry aplikace

Rozšíření logické části aplikace

Rozšíření logické vrstvy naší aplikace se bude týkat pouze přidání nových atributů do třídy Kontakt. Následně pak musíme rozšířit všechny metody, které pracují s atributy této třídy. Nejprve tedy přidáme atributy do třídy Kontakt.cs. Těmi atributy budou přezdívka a adresa (string) dále logické atributy (studuje, pracuje, plave) a datum narození (typ DateTime).

Třída Kontakt

Dále rozšíříme vlastní konstruktor této třídy.

Třída Kontakt

Poté musíme také rozšířit metodu PridejKontakt ve třídě Adresar.cs…

PridejKontakt

…a stejně tak metodu tlacitko_uloz_Click ve třídě Page.xaml.cs, která obsluhuje uživatelské rozhraní.

Tlačíto Ulož

Zobrazení dat v DataGridu

Doposud to byla celkem nuda. Vlastně jsme nedělali nic moc nového oproti prvnímu dílu. Teď se ale začneme věnovat něčemu zajímavějšímu. Konečně si vytvoříme DataGrid, ve kterém si budeme námi vložená data prezentovat.

Pokud chceme používat DataGrid, je nutné do naší aplikace přidat jmenný prostor System.Window­s.Controls s prvky System.Window­s.Controls.Da­ta. To můžeme udělat buď ručně nebo stejně jako v případě DatePickeru – přetažením z levého menu ToolBox. Což zajistí, že se nám jmenný prostor přidá do hlavičky automaticky.

V tuto chvíli už je přidání DataGridu maličkostí. Přetáhneme tedy DataGrid z ToolBoxu a pro začátek definujeme pouze jméno, umístění a zdroj, odkud si má náš DataGrid brát data a to, že chceme aby si náš DataGrid vygeneroval sloupce sám.

Datagrid

Pokud v tuto chvíli spustíme naši aplikaci, vidíme prázdný DataGrid s již vygenerovanými sloupci. Názvy těchto sloupců jsou převzaty z názvu atributů třídy Kontakt. Pokud začneme plnit náš seznam kontaktů, uvidíme, že se sloupce automaticky rozšiřují. Bez jakéhokoli přesnějšího nastavení totiž DataGrid umožňuje sloupce libovolně zvětšovat či zmenšovat, měnit jejich pořadí nebo řadit vzestupně či sestupně. Další vlastností, kterou DataGrid má v základním nastavení, je možnost editace všech atributů. Tuto funkci lze zrušit nastavením IsReadOnly na hodnotu  True.

Aplikace po spuštění

Nyní si pojďme ukázat, jak definovat sloupce, které chceme v našem DataGridu vypsat. Pro náš adresář nám bude stačit, když si vypíšeme pouze jméno, přezdívku, příjmení a e-mail. Ostatní atributy budeme zobrazovat následně v detailu kontaktu. Pro definování sloupců použijeme DataGrid.Columns a pro vypisování sloupců si vystačíme s textovými DataGridTextColumn. U vypisování si definujeme hlavičku sloupce a zdroj vypisovaných dat. Nakonec nesmíme zapomenout na změnu hodnoty u vlastnosti AutoGenerateColumns na False, jelikož jsme si již sloupce definovali sami.

Datagrid se sloupci

Pokud v tuto chvíli aplikaci spustíme, jediný rozdíl mezi aplikací, kterou jsme měli před definováním sloupců a tou, kterou vidíme teď, je opravdu jen v počtu vypsaných sloupců a v názvech těchto sloupců.

Detail v DataGridu

Tuto zajímavou funkci DataGridu tu již částečně popisoval Štěpán Bechynský ve svém článku . Jedná se o funkci, která nám umožňuje zobrazovat několik přidaných informací ke každému řádku v DataGridu. Typicky se tato informace využívá k zobrazení právě detailu či ovládacích prvků.

Abychom mohli detail využívat, vytvoříme si předlohu určující, jaká data (či prvky) a v jaké formě se mají v tomto detailu zobrazovat. Tuto definici provedeme pomocí DataGrid.RowDetailTemplate. Uvnitř tohoto tagu si následně můžeme nadefinovat téměř vše, co nás napadne. Od vypsání dat přes zobrazení galerie až po spuštění videa. V našem případě si vystačíme s vypsáním doplňujících dat k našemu kontaktu a jako bonus si můžeme přidat tlačítko na smazání kontaktu.

Šablona datagridu

Ještě nesmíme zapomenout na definování toho, jak se náš detail bude chovat. Definujeme to pomocí RowDetailVisibilityMode. V našem případě si zvolíme možnost, kdy se detail zobrazí až ve chvíli, kdy uživatel označí daný kontakt.

Datagrid s RowDetailVisibilityMode

K dokonalosti nám chybí jen zprovoznit tlačítko pro smazání kontaktu. Na to budeme potřebovat přidat metodu do třídy Adresar.cs.

Smaz kontakt

A ještě přidání obslužné metody do třídy Page.xaml.cs, která zavolá naši metodu na smazání kontaktu po stisknutí tlačítka.

Smaz kontakt

V tuto chvíli můžeme naši aplikaci spustit. Nic by nemělo bránit tomu, aby vypadala po naplnění kontakty podobně jako na našem screenshotu.

Hotová aplikace Můj Adresář

Kompletní zdrojový kód aplikace je k dispozici ke stažení: MujSiverlightA­dresar (ZIP 1321950 bytů).

Co nás čeká příště?

Příště si ukážeme práci s UserControl. Budeme mezi nimi přepínat a vnořovat je do sebe. Do adresáře implementujeme druhý způsob zobrazení detailních dat, vyhledávání a vkládání nového kontaktu na separátní stránce.

Zdroje

Použili jste někdy datagrid?

Komentáře

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

Kterého inteligenta napadlo, že bude fajn vkládat zdrojové kódy ve formě obrázků? To je řešení, za které si zaslouží dekapitaci zvlášť nešikovným katem…

Martin Hassman

Zdrojové kódy v textové podobě jsou k nalezení v příloze.

Anonymní

No dobře, to je jedině dobře, ale pořád to neospravedlňuje používání obrázků ve formě ukázek v článku (ke všemu téměř nečitelných – bez zvětšení). Není možnost si při čtení řádky označovat, není možné v tom hledat. Zkuste to udělat ve stejném stylu, jako je to na Programujte.

Anonymní

Ba co hure, ty obrazky jsou v JPG a ne alespon v PNG, coz ukazuje na hrube diletantstvi toho, kdo screenshoty delal.

Proste jakmile zabredneme do MS technologii, ukazuje se, ze jejich uzivatele nemaji zakladni pocitacovou gramotnost a aplikace zacinaji psat klikanim pruvodcu. Podle toho potom vypadaji vysledky, celkem dobra technologie je otresne zprasena implementatory a ve vysledku je MS ten, kdo ma nefunkcni reseni a na koho se nadava.

Izza

Ste banda nevdecnych nevycvalanych nul

Anonymní

… a ukazovat datagrid bez napojení na data je k ničemu. Tedy by mě jako začátečníka zajímalo, jak zobrazit data z db nebo obecně z externího zdroje.

Štěpán Bechynský

Silverlight se z principu věci neumí napojit na db "přímo". Na straně serveru si musíte vytvořit webovou službu nebo něco podobného, co vám bude data vracet typicky ve formátu XML nebo JSON. Příklad najdete v článku http://zdrojak.root.cz/clanky/silverlight-2-vytvarime-ukazkovou-aplikaci/.

none_

Mam takovej rejpavej dotaz. Tesne pred Vanoci jsem do testovaciho provozu uvedl aplikaci, ktera mimo jine zobrazuje data take v datagridu. Pouzil jsem k tomu Adobe Flex http://www.adobe.com/products/flex/ a jeho komponentu DataGrid. A jak jsem zbezne prohlizel ty zdrojovy kody, tak mi prisly v podstate shodne. Az temer prekvapive shodne. Kombinace XML + .NET (mozna neceho jineho, neznam Silverlight…) tady a proti tomu kombinace XML + actionscriptu u Flexu. Na prvni pohled podobne jak vejce vejci… Obcas jsem mel pocit, ze by stacilo search+replace a tento zdrojovy kod by fungoval ve Flexu.

A ted ten dotaz… Nevite nekdo, kdo od koho opisoval? A je nejaka vyhoda vyuzivat Silverlight oproti Flexu? (jednu mozna vim. Flex potrebuje flash player. Otazka do diskuze je, jestli je to bug nebo feature.) Umi tyto komponenty neco samy o sobe? (U Flexu se mi libilo, ze napr komponenta datagrid umi uz sama o sobe radit, presouvat sloupce a ma spoustu vyuzitelnych Event) Jak je to se skinovanim komponent? Musi se tvrde definovat napr pomoci css, aby to nejak vypadalo? (Flex uz v zakladu obsahuje par vymazlenych vzhledu + spousty tvorenych komunitou + moznost vlastniho stylovani cehokoliv jak pomoci definic, tak pomoci css.)

Proste je to taky tak hezky vymazleny? (Na Flexu me fascinovala promakanost kazdy komponenty (napr this.password.restrict = "a-zA-Z0-9"; ktere omezi vkladatelne znaky do text input na tyto vyjmenovane))

PS: Neberte tento komentar jako kritiku Silverlightu. Tuto technologii neznam, a tak me zajima porovnani. Nejlepsi by bylo kdyby odpovedel nekdo, kdo ma zkusenosti s obema technologiema.

none_

dekuju za vycerpavajici odpoved…:)

Anonymní

Nevýhoda flex je že tato supertechnologie ve spojení s flashplayerem > 9.0.48 neumí tak elementární věci, jako je zadání vstupních údajů s diakritikou :) http://bugs.adobe.com/jira/browse/FP-40 V tom se doufám Silverlight lyší.

none_

njn toho jsem si nevsiml. flashplayer mam 9.0.124 a vsechno bezi jak ma, tak to vypada, ze minimalne cestinu jiz vyresili.

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.