Praktické užití Silverlight 2.0: DataGrid
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.
Seriál: Praktické užití Silverlight 2.0 (12 dílů)
- Praktické užití Silverlight 2.0: Data Binding 15. 12. 2008
- Praktické užití Silverlight 2.0: DataGrid 22. 12. 2008
- Praktické užití Silverlight 2.0: UserControl 29. 12. 2008
- Co zajímavého přínáší Silverlight toolkit 5. 1. 2009
- Silverlight toolkit a vizualizace dat 12. 1. 2009
- Jak na komponenty AutoCompleteBox a TreeView ze Silverlight toolkitu 19. 1. 2009
- Nástroje pro tvorbu layoutu v Silverlightu 2.0 a Silverlight toolkitu 26. 1. 2009
- Design se styly a šablonami v Silverlightu 2.0 2. 2. 2009
- Základy 2D grafiky v Silverlightu 2.0 16. 2. 2009
- Dynamicky generované komponenty v Silverlightu 2.0 3. 3. 2009
- Úvod do streamování médií v Silverlightu 2.0 16. 3. 2009
- Práce s videem v Silverlightu 2.0 1. 6. 2009
Nálepky:
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:
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ů.
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.
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.Windows.Controls.
Nyní se vrátíme k našemu DatePickeru a doplníme mu jméno a stylování.
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:
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).
Dále rozšíříme vlastní konstruktor této třídy.
Poté musíme také rozšířit metodu PridejKontakt ve třídě Adresar.cs…
…a stejně tak metodu tlacitko_uloz_Click ve třídě Page.xaml.cs, která obsluhuje uživatelské rozhraní.
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.Windows.Controls s prvky System.Windows.Controls.Data. 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.
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.
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.
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.
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.
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.
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.
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.
Kompletní zdrojový kód aplikace je k dispozici ke stažení: MujSiverlightAdresar (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
Jan Jelínek
Autor pracuje ve společnosti Sprinx Systems a.s. jako Project Manager ve „webařské“ skupině.
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…
Zdrojové kódy v textové podobě jsou k nalezení v příloze.
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.
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.
Ste banda nevdecnych nevycvalanych nul
… 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.
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/.
U této ukázky nešlo ani tak o napojení na DataGridu na db nebo xml zdroj. Přesto není tato věc zase tak obtížná. Jak zde již psal Štěpán Bechynský v podstatě to pracuje tak, že vytvoří webová služba, která si bude natahovat data ve formátu XML nebo JSON. Nad těmito daty si následně pracujete pomocí technologie LINQ.
V podstatě se jedná o pseodo-přímé napojení na db, jelikož LINQ vám umožňu psát kód jako by jste se přímo dotazovali do db.
Jinak tutoriál, na který jste se dotazoval naleznete přímo na stránkách Silverlightu : http://silverlight.net/learn/tutorials/sqldatagrid.aspx , kde Jesse Liberty popisuje jak zobrazit data z db právě do DataGridu.
A pokud si počkáte, tak tomuto napojení bych se zde rád věnoval v jednom z příštích článků tady.
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.
To že se Vám zdají tyto dvě technologie (SL a Flex) podobné rozhodně není náhoda. Hlavní rozdíli mezi Silverlightem a Flexem se nanacházejí v syntaxi popisných jazyků pro GUI, ale v technologii řešení některých věcí.
Teď kdo od koho opisoval. To je dobrá otázka. Je poměrně zřejmé, že MS se nechal v mnoha ohledech inspirovat. V podstatě vyzobal to nejlepší a slabé stránky vyřešil jinak. (tím ale nechci zase říct že to MS okopčil).
Co se týče výhod a nevýhod, tak o tom se samozřejmě na rúzných fórech a podobně vedou rozsáhlé diskuse. V podstatě ani jedna technologie neumí nic co by ta druhá zvládala, jen je pravidlem, že některé věci zvládá jedna technologie lépe než ta druhá.
U flexu jednou z nejdiskutovanějších nevýhod je jeho zapouzdření. Stejně jako Flash se totiž celá aplikace zapouzdří do souboru, který se následně přehrává ve FlashPlayeru. U SL tomu je podobně, jenže celá SL aplikace je přístupná z vnějšku (tudíž například čitelná pro prohlížeče, atd…). Nicméně při nynaložení menšího úsilí dokáže Flex toto také již smazat (sic kostrbatě, ale dokáže).
Další výhoda SL je v tom, že za ním stojí celý .NET. Což umožňuje vývojáři si zvolit hned z několika jazyků pro tvorbu logiky. Toto byl také důvod pro mě proč jsem šel cestou SL.
Obrovskou nevýhodou SL je jeho krátké trvání a užší uživatelská základna. Pokud si projdete základy narazíte na velký problém. Je zde velký nedostatek ukázek rozsáhlých řešení. Takže kolikrát jste v tom trochcu sami.
Poslední – co se týče vymakanosti rozných komponent ve FLexu či SL, jsou na tom velice podobně. Jak již jsem psal ve svém článku o DataGridu, tak aniž by jste museli cokoli nastavovat, tak DataGrid umožňuje měnit pořadí sloupců a radit podle jednotlivých sloupců.
Co se týče stylů – Silverlight Toolkit nabízí komponentu pro skinování vašich aplikací. Tím se budu zabývat v jednom z příštích článků. Dále je samozřejmě možnost si jakoukoli komponentu nastylovat sám.
dekuju za vycerpavajici odpoved…:)
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ší.
Ano, alespoň co já vím tak Silverlight žádné problémy se zobrazování textu s diakritikou nemá. Zde je ukázka: http://kalimevole.blogspot.com/2009/01/jak-je-na-tom-silverlight-s-na.html
njn toho jsem si nevsiml. flashplayer mam 9.0.124 a vsechno bezi jak ma, tak to vypada, ze minimalne cestinu jiz vyresili.