Tvorba internetových aplikací pomocí technologie 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 . 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 , a . Tyto elementy mají nastavené r \zné hodnoty "barevných" parametr \ (výpl N, okraj) a jsou rozmíst Dny na plochu pomocí pevných sou Tadnic.

- 13 - Nejvýše na scén D se nacházejí dva velmi jednoduché elementy objekty a , tedy obdélník a elipsa.

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 a , tentokrát však mají definovanou složit Djší grafickou podobu. Následující zdrojový kód popisuje 6tverec nalevo.

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 , který zajiš Zuje lineární interpolaci barev. St Džejními parametry tohoto elementu jsou "po 6áte 6ní" a "koncový" bod, jejichž hodnoty jsou vždy dvojice reálných 6ísel vyjad Tujících relativní pozici na vodorovné a svislé ose v rozmezí od nuly do jedné. Jednotlivé barvy jsou definovány jako subelementy s parametry "Color" a "Offset", jejichž hodnoty udávají p Tíslušnou barvu a pozici na spojnici po 6áte 6ního a koncového bodu. Pozice na spojnici bod \ je op Dt definována jako reálné 6íslo v rozmezí od nuly do jedné.

- 14 - Na elipse nacházející se vedle tohoto obdélníka je p Tedstaven další možný styl výpln D - .

Element obstarává radiální interpolaci barev a od výše zmi Novaného elementu pro lineární interpolaci se liší svými parametry. ZTejmé jsou jist D parametry "RadiusX" a "RadiusY" p Tedstavující zplošt Dní 6i zúžení gradientu. Hodnota parametru "GradientOrigin" p Tedstavuje bod, ze kterého gradient vychází a parametr "Center" uchovává bod, k n Dmuž gradient sm DT uje. Jednotlivé barvy jsou op Dt definovány subelementy . Na 6tvrtém subelementu je ukázáno použití hexadecimálního zápisu barvy ve formátu RGBA. Posledním grafickým prvkem na scén D je objekt . Ten je zde nadefinován tak, že jeho výpl N je polopr \hledná a jeho plocha 6áste 6nD pTekrývá poslední zmi Novanou elipsu.

Na zdrojovém kódu vidíme, že parametry elementu jsou podobné element \m a . Je zde také použit parametr "CornerRadius", který udává zaoblení roh \. Pr \hlednost pozadí je definována pomocí elementu a jeho parametru "Opacity", který je nastaven na hodnotu 0.5. Uvnit T elementu se nachází ješt D objekt p Tedstavující statické textové pole a zobrazující nápis "Hello

- 15 - World!". Z celé struktury je patrná funkce elementu jako "ohrani 6ení", které m \že obsahovat další objekty.

- 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 . První (s názvem "rows") rozd Dluje scénu na t Ti Tádky a v jeho druhém Tádku se nachází další ("cols"), vytvá Tející v tomto Tádku dva sloupce:

< 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 s definovanou barvou pozadí a okraj \ obsahující objekt s nápisem "Hlavi 6ka" a nastaveným formátem a barvou písma. Vidíme zde, že element má op Dt nastaven parametr "Grid.Row", tentokrát na hodnotu 0.

Naprosto stejn D jako hlavi 6ka je definována i spodní lišta. Op Dt jde o pat Ti6nD naformátovaný objekt obsahující objekt . Hodnota 2 parametru "Grid.Row" vyjad Tuje umíst Dní prvku ve t Tetím, tedy spodním Tádku.