Tvorba internetových aplikací pomocí technologie Microsoft Silverlight
Bakalá Tská práce
Ji Tí Kolda
Vedoucí bakalá Tské práce: PaedDr. Petr Pexa Jiho 6eská univerzita v 5eských Bud Djovicích
Pedagogická fakulta
Katedra informatiky
2009 Prohlášení Prohlašuji, že svoji bakalá Tskou práci jsem vypracoval/-a samostatn D pouze s použitím pramen \ a literatury uvedených v seznamu citované literatury.
Prohlašuji, že v souladu s § 47b zákona 6. 111/1998 Sb. v platném zn Dní souhlasím se zve Tejn Dním své bakalá Tské práce, a to v nezkrácené podob D elektronickou cestou ve ve Tejn D p Tístupné 6ásti databáze STAG provozované Jiho 6eskou univerzitou v 5eských Bud Djovicích na jejích internetových stránkách.
V 5eských Bud Djovicích dne Anotace Úkolem této práce je vytvo Tit první kompletní 6esky psanou referen 6ní pTíru 6ku k internetové technologii Microsoft Silverlight. Ve výkladu je vysv Dtlována sou 6asná verze Silverlight 2.0 ve spojení s programovacím jazykem Visual C# v Microsoft .NET Framework 3.5. Sou 6ástí práce je stru 6né porovnání technologie Microsoft Silverlight s technologií Adobe Flash a otestování této technologie v nejrozší Ten Djších webových prohlíže 6ích.
Abstract A goal of this work is to present the first complete refence manual for Microsoft Silverlight technology written in czech language. This essay is displaying the present-day version of Silverlight - Silverlight 2.0 along with programming language Visual C# in Microsoft.Net Framework 3.5. This paper includes a brief comparison of Microsoft Silverlight and Adobe Flash and a functionality test of the technology using the most wide-spreaded web browsers. Pod Dkování Rád bych pod Dkoval vedoucímu mé bakalá Tské práce PaedDr. Petru Pexovi za to, že mi umožnil zabývat se touto problematikou, za jeho odborné vedení a za jeho cenné rady a p Tipomínky b Dhem konzultací. Také bych rád pod Dkoval své p Títelkyni a rodin D za podporu a pomoc se zpracováním mé práce. Obsah
1. ÚVOD ...... 6
2. CÍLE PRÁCE ...... 6
3. SOU 5ASNÝ STAV PROBLEMATIKY ...... 7
4. METODIKA ZPRACOVÁNÍ PRÁCE ...... 8
5. TEORETICKÝ ÚVOD ...... 10
6. VÝSLEDKY PRÁCE ...... 11
7. POPIS PRAKTICKÉHO SEŠENÍ ...... 12
7.1. CHARAKTERISTIKA APLIKACÍ ...... 12
7.2. POUŽITÉ TECHNOLOGIE ...... 13
7.3. VEKTOROVÁ GRAFIKA A JAZYK XAML...... 13
7.4. KOMPONENTY ZAJIŠ YUJÍCÍ ROZVRŽENÍ OBJEKT [ NA SCÉN C...... 17
7.5. STYLY A ŠABLONY ...... 19
7.6. ANIMACE ...... 22
7.7. NAPOJENÍ NA DATABÁZI POMOCÍ LINQ...... 27
7.8. PROBLÉMY P SI VÝVOJI ...... 33
8. ZÁV CRE 5NÉ SHRNUTÍ ...... 34
9. PSEHLED POUŽITÉ LITERATURY ...... 35
10. SEZNAM P SÍLOH ...... 36
- 5 - 1 Úvod K výb Dru tohoto tématu jsem m Dl n Dkolik d \vod \. Prvním a myslím že nejzásadn Djším d \vodem pro m D byla skute 6nost, že technologie Silverlight je prezentována jako konkurence technologii Adobe Flash. Jelikož se technologií Flash již dlouhou dobu zabývám, zajímalo m D, zda má Silverlight jako konkurent co nabídnout. Druhou v Dcí, která m D velmi motivovala k výb Dru této práce, byl fakt, že Silverlight je .NET technologií. Platforma .NET je v dnešní dob D velmi rozší Tená a hojn D používaná z d \vodu své velmi dob Te propracované a detailní dokumentace a také možnosti výb Dru jednoho z hned n Dkolika programovacích jazyk \, z nichž já osobn D jednozna 6nD volím jazyk C# p Tedevším kv \li jeho pTehlednosti.
2 Cíle práce Hlavním cílem mé práce je bylo sestavit první 6esky psanou referen 6ní pTíru 6ku popisující vytvá Tení webových aplikací pomocí technologie Silverlight. Samoz Tejm D se nejedná o kompletní dokumentaci této technologie, jelikož ta je již p Tístupná na internetových stránkách MSDN spole 6nosti Microsoft. Tato publikace si dává za cíl p Tedevším vysv Dtlit základní principy, na kterých je technologie Silverlight postavena a popsat d \ležité prvky, které se ve spojení s touto technologii nej 6ast Dji používají. Sou 6ástí práce je také p Dt ukázkových projekt \, na kterých jsou názorn D ukázány možnosti technologie a postupy p Ti Tešení nej 6ast Djších problém \, na které za 6ínající programátor narazí. Tyto projekty jsou volnD p Tístupné na webových stránkách vytvo Tených práv D za ú 6elem prezentace technologie Silverlight.
- 6 - 3 Sou 6asný stav problematiky O technologii Silverlight již byla sepsána celá Tada publikací, 6lánk \, online návod \ a na oficiálních stránkách technologie se nachází také celá Tada screencast \ popisujících mnoho jejích funkcí. Bohužel však kromD jedné výjimky [13] (která se ovšem nezabývá p Tímo touto technologií a uvádí ji pouze v záv Dre 6né kapitole) nevyšla na trh žádná 6esky psaná publikace zabývající se touto problematikou. P Ti tvorb D této publikace jsem vycházel práv D z anglicky psaných návod \ a screencast \ p Tístupných na webu. P Te6etl jsem celou Tadu návod \ jak pro za 6áte 6níky, tak pro pokro 6ilejší programátory, seznámil jsem se velmi podrobn D s programovacím jazykem XAML a technologiemi Windows Presentation Foundation (WPF) a Windows Communication Foundation (WCF) a prostudoval jsem velkou 6ást dokumentace na internetových stránkách MSDN. Spole 6nost Microsoft tvrdí, že technologii Silverlight používá již asi 300 tis. uživatel \ na celém sv DtD. Pravdou je, že po 6et Silverlight aplikací velmi rychle roste, objevilo se již i n Dkolik her, otázkou však z \stává, kolik vývojá T\ na tuto technologii již definitivn D p Tešlo a pracuje v ní a kolik jich Silverlight pouze zkusilo a vrátilo se zp Dt k tomu co d Dlali d Tíve. Objevují se také názory, že k tak rychlému rozší Tení technologie Silverlight došlo jen díky obrovské reklamní kampaní ze strany Microsoft a že si Silverlight takovou popularitu nezaslouží. Osobn D si myslím, že tato technologie má zcela jist D co nabídnout, ale rozhodn D to v konkuren 6ním boji se zab Dhlou technologií Adobe Flash nebude mít lehké.
- 7 - 4 Metodika zpracování práce Abych byl v \bec schopen tuto práci sepsat, bylo nejprve t Teba se pln D seznámit s celou technologií Silverlight, jejími principy a možnostmi, které nabízí. Za tímto ú 6elem jsem p Te6etl celou Tadu návod \, 6lánk \ a publikací, shlédl jsem mnoho screencast \ popisujících jednotlivá vzorová Tešení a nastudoval jsem velkou 6ást dokumentace na webu MSDN spole 6nosti Microsoft. Po nastudování všech pot Tebných nových znalostí jsem za 6al vytvá Tet jednoduché aplikace, které mi posloužily k pochopení zákonitostí a princip \, na kterých je technologie postavena. V t Dchto aplikacích jsem experimentoval s jednotlivými ovládacími prvky, jejich grafickými a logickými možnostmi a postupn D jsem tak získal p Tehled o tom, k 6emu jednotlivé prvky slouží, jak je s nimi možné manipulovat a kterými cestami je asi nejprakti 6tDjší Tešit r \zné problémy. Po této sérii experiment \ jsem za 6al vytvá Tet praktickou 6ást této práce. Vytvo Til jsem p Dt vzorových projekt \, z nichž každý názorn D ukazuje ur 6itou schopnost technologie Silverlight, a Z už se jedná o grafické prvky, animaci 6i na 6ítaní dat z databáze. P Ti výb Dru jednotlivých vzorových Tešení jsem dbal na to, aby v nich byly obsaženy ty nejzákladn Djší principy, se kterými se za 6ínající programátor setká nej 6ast Dji. Všechny projekty jsem konzultoval s vedoucím mé práce PaedDr. Petrem Pexou a shodli jsme se na jejich výb Dru. Stejná kritéria jsem posléze aplikoval p Ti výb Dru jednotlivých element \ jazyka XAML popisovaných v písemné 6ásti této práce. Ke tvorb D praktického Tešení a pro ukázky zdrojových kód \ jsem použil nástroj Visual Studio Team System 2008 spole 6nosti Microsoft. V práci je také popisován nástroj Microsoft Blend 2, který jsem rovnDž b Dhem vypracovávání práce vyzkoušel. Technologii Silverlight jsem otestoval v n Dkolika nejrozší Ten Djších prohlíže 6ích. P Ti výb Dru jednotlivých prohlíže 6\ jsem postupoval následujícím
- 8 - zp \sobem. Na internetu jsem vyhledal servery zabývající se recenzemi softwarových produkt \ a na základ D hodnocení a statistických údaj \ o roz- ší Tenosti a kvalit D r \zných prohlíže 6\ jsem vybral šest aplikací, o kterých jsem bu ? p Tedpokládal, že v nich Silverlight bude podporován, nebo jsem m Dl v úmyslu to zjistit. K výb Dru také p Tisp Dly oficiální informace spole 6nosti Microsoft o podpo Te Silverlight.
- 9 - 5 Teoretický úvod Spole 6nost Microsoft je poslední dobou stále více spojována s inter- netovými technologiemi. Až donedávna se p Tedevším jednalo o technologii ASP.NET, jakožto rozší Tený a silný nástroj pro tvorbu webových aplikací. S p Tíchodem nových technologií použitých ve Windows Vista, jako jsou Windows Presentation Foundation nebo Windows Communication Foundation, se na trhu objevila nová technologie funk 6nD vycházející práv D z první jmenované. Touto technologií je Microsoft Silverlight. Technologie Silverlight je spole 6ností Microsoft prezentována jako p Tímý konkurent pro technologii Adobe Flash a jejím hlavním cílem je zaujmout pTední místa v použití na webu vedle technologií Flash 6i AJAX. Silverlight nabízí použití vektorové grafiky, animaci, umož Nuje p Tehrávat videa v HD kvalit D a p Tedevším vyniká možností volby použitého programovacího jazyka. Toto se týká verze 2.0 a p Típadných dalších verzí, ve verzi 1.0 byla funkcionalita zajišt Dna jedin D Javascriptem. K zobrazení Silverlight aplikací je t Teba mít nainstalovaný malý (asi 4 MB) plugin, který obstarává jeho podporu ve v Dtšin D nej 6ast Dji používaných prohlíže 6ích. Pracuje se i na verzích pluginu do mobilních zaTízení (pro Windows Mobile a Symbian) a existuje také voln D ši Titelná implementace pro unixové opera 6ní systémy s názvem Moonlight. Velmi pozitivní skute6ností je, že k zobrazení Silverlight aplikací není nutné mít nainstalovaný p Tíslušný .NET Framework. Výhodou technologie je možnost propojení Silverlight aplikace s HTML stránkou, na níž je umíst Dna. Díky tomu je možné ovládacími prvky v aplikaci mDnit obsah HTML stránky a naopak. K vývoji Silverlight aplikací slouží nej 6ast Dji prost Tedí MS Visual Studio 2008 ve spojení s .Net Framework 3.5, alternativou je pak Microsoft Blend 2. Oba tyto nástroje jsou v této práci popsány a ukázány.
- 10 - 6 Výsledky práce Sou 6ástí této práce (viz. p Tíloha) je první 6esky psaná ucelená p Tíru 6ka pro za 6ínající programátory v technologii Silverlight. V této publikaci jsou popsány základní mechanizmy a principy technologie, vysv Dtleny mnohé problémy, se kterými se programáto Ti setkají a je zde uvedeno i stru 6né porovnání technologie Silverlight s konkuren 6ní technologií Adobe Flash. Hlavním výstupem mé bakalá Tské práce je tato publikace. Sou 6ástí mé práce je také otestování technologie v n Dkolika nejrozší Ten Djších prohlíže 6ích. Tomuto výzkumu se v Dnuje první kapitola publikace, v níž je p Tehledným zp \sobem zobrazena podpora Silverlight 2.0. Praktickou 6ást mé bakalá Tské práce p Tedstavuje p Dtice projekt \ poukazujících na jednotlivé aspekty technologie Silverlight. Na t Dchto vzorových projektech jsou názorn D ukázány následující prvky používané v této technologii: Vektorová grafika a jazyk XAML Komponenty umož Nující rozvržení objekt \ na scén D Styly a šablony Animace Napojení na databázi pomocí LINQ
Následující 6ást práce popisuje vzorové projekty, jejich principy a funkcionalitu zdrojových kód \. P Ted jejím 6tením doporu 6uji prostudovat druhou a t Tetí kapitolu publikace popisující jazyk XAML a propojení s jazykem C#.
- 11 - 7 Popis praktického Tešení
7.1 Charakteristika aplikací 1. Vektorová grafika a XAML • Tento projekt ukazuje použití základních grafických prvk \ jazyka XAML a jejich možnosti. Na t Dchto prvcích je názorn D p Tedvedeno nDkolik zp \sob \ manipulace s výpln Dmi 6i okraji.
2. Komponenty umož Nující rozvržení objekt \ na scén D • V tomto projektu je 6tená T seznámen s n Dkolika elementy zajiš Zujícími rozvržení objekt \ na scén D. Tyto elementy mohou Tadit objekty pod sebou nebo vedle sebe, rozd Dlovat scénu na 6ásti apod.
3. Styly a šablony • Tato vzorová aplikace p Tedstavuje využití styl \ a šablon pro jednoduchou parametrizaci objekt \ a definování jejich vizuální podoby.
4. Animace • Zde se 6tená T seznámí s n Dkolika zp \soby animace v Silverlight a získá p Tehled o tom, jaké parametry je možné u XAML element\ animovat.
5. Napojení na databázi pomocí LINQ • Tento projekt názorn D ukazuje propojení Silverlight aplikace s SQL databází pomocí technologie WCF a jazyka LINQ a zobrazení na 6tených dat v tabulce.
- 12 - 7.2 Použité technologie Všechny ukázkové aplikace byly vytvo Teny s pomocí technologie Silverlight 2.0. Jako vývojové prost Tedí jsem použil MS Visual Studio Team System 2008 SP1 pod platformou .NET Framework 3.5. Kompletní zdrojové kódy jsou p Tiloženy jako p Tílohy a zdrojové soubory se nacházejí na pTiloženém CD.
7.3 Vektorová grafika a jazyk XAML
Tento projekt slouží k ukázání základních grafických možností jazyka XAML. Jsou v n Dm použity základní grafické elementy jazyka XAML, jako jsou
- 13 - Nejvýše na scén D se nacházejí dva velmi jednoduché elementy objekty
Z ukázky zdrojového kódu vidíme, že použití oba elementy pot Tebují k tomuto zobrazení totožné parametry. Oba elementy mají nastavenou výšku a ší Tku, barvu výpln D a umíst Dní na scén D. Pod t Dmito dv Dma objekty jsou již složit Djší prvky. Op Dt se jedná o elementy
Narozdíl od výše zmi Novaného obdélníku má tento objekt definovánu lineárn D interpolovanou výpl N a obrys. Na této ukázce je d \ležité p Tedstavení elementu
- 14 - Na elipse nacházející se vedle tohoto obdélníka je p Tedstaven další možný styl výpln D -
Element
Na zdrojovém kódu vidíme, že parametry elementu
- 15 - World!". Z celé struktury je patrná funkce elementu
- 16 - 7.4 Komponenty zajiš Zující rozvržení objekt \ na scén D
V tomto projektu se blíže zabývám tzv. Layout komponenty, což jsou prvky jazyka XAML, které umož Nují rozmis Zovat a uspo Tádávat objekty na scén D. Scéna je rozd Dlena na n Dkolik 6ástí dv Dma elementy
< Grid x :Name ="cols" ShowGridLines ="False" Grid.Row ="1">
- 17 - Ze struktury kódu je patrné, že element "cols" je uvnit T elementu "rows", a vidíme, že jeho parametr "Grid.Row" má hodnotu 1, což znamená, že je ve druhém Tádku (indexy Tádk \ a sloupc \ vždy za 6ínají nulou). Stejným principem, tedy zadáním p Tíslušné hodnoty parametru "Grid.Row" 6i "Grid.Column", je možné každému objektu na scén D ur 6it, kde p Tesn D se bude nacházet.
V prvním Tádku, tedy naho Te na scén D, se nachází jakási hlavi 6ka aplikace. Jde pouze o element
Naprosto stejn D jako hlavi 6ka je definována i spodní lišta. Op Dt jde o pat Ti6nD naformátovaný objekt
Jak jsem již uvedl, druhý (prost Tední) Tádek je rozd Dlen na dva sloupce. V prvním z nich, tedy na levé stran D, se nachází objekt
- 18 - obsahující p Dt tla 6ítek. Tento element slouží k umis Zování objekt \ pod sebou nebo vedle sebe. V našem p Típad D jsou rozmíst Dny svisle (hodnota "Vertical" parametru "Orientation"), což vytvá Tí jakýsi seznam, který je možno považovat za menu. Jednotlivá tla 6ítka mají pomocí parametru "Margin" definovány rozestupy, popisky jsou udávány hodnotami parametru "Content". Ve druhém sloupci se pak nachází pouze objekt
7.5 Styly a šablony
Tento t Tetí ukázkový projekt se zabývá - jak již jeho název napovídá - styly a šablonami v jazyce XAML. Použití styl \ velmi usnad Nuje a urychluje práci v p Típadech, kdy se na scén D nachází více objekt \ stejného vzez Tení. Jedná se
- 19 - o jakousi analogii k technologii CSS, ve které jsou grafické definice uchovávány na ur 6itém míst D a objekty se na n D odkazují. Šablony jsou velmi užite 6ným nástrojem pro navrhování grafického vzhledu jednotlivých komponent. S jejich pomocí lze od základu zm Dnit vzhled jakéhokoli XAML prvku. Jelikož jsou styly i šablony velmi detailn D popisovány v samotné p Tíru 6ce, ukáži a vysv Dtlím zde pouze jejich použití v tomto projektu a nebudu se dále zabývat teorií dopodrobna. Rozvržení objekt \ na scén D je naprosto stejné jako v p Tedchozím projektu. Jelikož je zde n Dkolik graficky shodných objekt \, nabízí se využití styl \. První styl je definovány následovn D: