Tvorba internetových aplikací pomocí technologie Microsoft Silverlight
BakaláĜská práce JiĜí Kolda
Vedoucí bakaláĜské práce: PaedDr. Petr Pexa Jihoþeská univerzita v ýeských BudČjovicích Pedagogická fakulta Katedra informatiky 2009
Prohlášení Prohlašuji, že svoji bakaláĜskou práci jsem vypracoval/-a samostatnČ pouze s použitím pramenĤ a literatury uvedených v seznamu citované literatury. Prohlašuji, že v souladu s § 47b zákona þ. 111/1998 Sb. v platném znČní souhlasím se zveĜejnČním své bakaláĜské práce, a to v nezkrácené podobČ elektronickou cestou ve veĜejnČ pĜístupné þásti databáze STAG provozované Jihoþeskou univerzitou v ýeských BudČjovicích na jejích internetových stránkách.
V ýeských BudČjovicích dne
Anotace Úkolem této práce je vytvoĜit první kompletní þesky psanou referenþní pĜíruþku k internetové technologii Microsoft Silverlight. Ve výkladu je vysvČtlována souþasná verze Silverlight 2.0 ve spojení s programovacím jazykem Visual C# v Microsoft .NET Framework 3.5. Souþástí práce je struþné porovnání technologie Microsoft Silverlight s technologií Adobe Flash a otestování této technologie v nejrozšíĜenČjších webových prohlížeþí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Čkování Rád bych podČkoval vedoucímu mé bakaláĜské 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Ĝipomínky bČhem konzultací. Také bych rád podČkoval své pĜítelkyni a rodinČ za podporu a pomoc se zpracováním mé práce.
Obsah 1.
ÚVOD........................................................................................................6
2.
CÍLE PRÁCE............................................................................................. 6
3.
SOUýASNÝ STAV PROBLEMATIKY........................................................... 7
4.
METODIKA ZPRACOVÁNÍ PRÁCE............................................................. 8
5.
TEORETICKÝ ÚVOD................................................................................. 10
6.
VÝSLEDKY PRÁCE.................................................................................... 11
7.
POPIS PRAKTICKÉHO ěEŠ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ŠġUJÍCÍ ROZVRŽENÍ OBJEKTģ NA SCÉNċ............. 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ěI VÝVOJI..................................................................... 33
8.
ZÁVċREýNÉ SHRNUTÍ.............................................................................. 34
9.
PěEHLED POUŽITÉ LITERATURY............................................................. 35
10. SEZNAM PěÍLOH...................................................................................... 36
-5-
1
Úvod K výbČru tohoto tématu jsem mČl nČkolik dĤvodĤ. Prvním a myslím že
nejzásadnČjším dĤvodem pro mČ byla skuteþnost, že technologie Silverlight je prezentována jako konkurence technologii Adobe Flash. Jelikož se technologií Flash již dlouhou dobu zabývám, zajímalo mČ, zda má Silverlight jako konkurent co nabídnout. Druhou vČcí, která mČ velmi motivovala k výbČru této práce, byl fakt, že Silverlight je .NET technologií. Platforma .NET je v dnešní dobČ velmi rozšíĜená a hojnČ používaná z dĤvodu své velmi dobĜe propracované a detailní dokumentace a také možnosti výbČru jednoho z hned nČkolika programovacích jazykĤ, z nichž já osobnČ jednoznaþnČ volím jazyk C# pĜedevším kvĤli jeho pĜehlednosti.
2
Cíle práce Hlavním cílem mé práce je bylo sestavit první þesky psanou referenþní
pĜíruþku popisující vytváĜení webových aplikací pomocí technologie Silverlight. SamozĜejmČ se nejedná o kompletní dokumentaci této technologie, jelikož ta je již pĜístupná na internetových stránkách MSDN spoleþnosti Microsoft. Tato publikace si dává za cíl pĜedevším vysvČtlit základní principy, na kterých je technologie Silverlight postavena a popsat dĤležité prvky, které se ve spojení s touto technologii nejþastČji používají. Souþástí práce je také pČt ukázkových projektĤ, na kterých jsou názornČ ukázány možnosti technologie a postupy pĜi Ĝešení nejþastČjších problémĤ, na které zaþínající programátor narazí. Tyto projekty jsou volnČ pĜístupné na webových stránkách vytvoĜených právČ za úþelem prezentace technologie Silverlight.
-6-
3
Souþasný stav problematiky O technologii Silverlight již byla sepsána celá Ĝada publikací, þlánkĤ,
online návodĤ a na oficiálních stránkách technologie se nachází také celá Ĝada screencastĤ popisujících mnoho jejích funkcí. Bohužel však kromČ jedné výjimky[13] (která se ovšem nezabývá pĜímo touto technologií a uvádí ji pouze v závČreþné kapitole) nevyšla na trh žádná þesky psaná publikace zabývající se touto problematikou. PĜi tvorbČ této publikace jsem vycházel právČ z anglicky psaných návodĤ a screencastĤ pĜístupných na webu. PĜeþetl jsem celou Ĝadu návodĤ jak pro zaþáteþníky, tak pro pokroþilejší programátory, seznámil jsem se velmi podrobnČ s programovacím jazykem XAML a technologiemi Windows Presentation Foundation (WPF) a Windows Communication Foundation (WCF) a prostudoval jsem velkou þást dokumentace na internetových stránkách MSDN. Spoleþnost Microsoft tvrdí, že technologii Silverlight používá již asi 300 tis. uživatelĤ na celém svČtČ. Pravdou je, že poþet Silverlight aplikací velmi rychle roste, objevilo se již i nČkolik her, otázkou však zĤstává, kolik vývojáĜĤ na tuto technologii již definitivnČ pĜešlo a pracuje v ní a kolik jich Silverlight pouze zkusilo a vrátilo se zpČt k tomu co dČlali dĜíve. Objevují se také názory, že k tak rychlému rozšíĜení technologie Silverlight došlo jen díky obrovské reklamní kampaní ze strany Microsoft a že si Silverlight takovou popularitu nezaslouží. OsobnČ si myslím, že tato technologie má zcela jistČ co nabídnout, ale rozhodnČ to v konkurenþním boji se zabČhlou 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Ĝeba se plnČ
seznámit s celou technologií Silverlight, jejími principy a možnostmi, které nabízí. Za tímto úþelem jsem pĜeþetl celou Ĝadu návodĤ, þlánkĤ a publikací, shlédl jsem mnoho screencastĤ popisujících jednotlivá vzorová Ĝešení a nastudoval jsem velkou þást dokumentace na webu MSDN spoleþnosti Microsoft. Po nastudování všech potĜebných nových znalostí jsem zaþal vytváĜet jednoduché aplikace, které mi posloužily k pochopení zákonitostí a principĤ, na kterých je technologie postavena. V tČchto aplikacích jsem experimentoval s jednotlivými ovládacími prvky, jejich grafickými a logickými možnostmi a postupnČ jsem tak získal pĜehled o tom, k þemu jednotlivé prvky slouží, jak je s nimi možné manipulovat a kterými cestami je asi nejpraktiþtČjší Ĝešit rĤzné problémy. Po této sérii experimentĤ jsem zaþal vytváĜet praktickou þást této práce. VytvoĜil jsem pČt vzorových projektĤ, z nichž každý názornČ ukazuje urþitou schopnost technologie Silverlight, aĢ už se jedná o grafické prvky, animaci þi naþítaní dat z databáze. PĜi výbČru jednotlivých vzorových Ĝešení jsem dbal na to, aby v nich byly obsaženy ty nejzákladnČjší principy, se kterými se zaþínající programátor setká nejþastČji. Všechny projekty jsem konzultoval s vedoucím mé práce PaedDr. Petrem Pexou a shodli jsme se na jejich výbČru. Stejná kritéria jsem posléze aplikoval pĜi výbČru jednotlivých elementĤ jazyka XAML popisovaných v písemné þásti této práce. Ke tvorbČ praktického Ĝešení a pro ukázky zdrojových kódĤ jsem použil nástroj Visual Studio Team System 2008 spoleþnosti Microsoft. V práci je také popisován nástroj Microsoft Blend 2, který jsem rovnČž bČhem vypracovávání práce vyzkoušel. Technologii Silverlight jsem otestoval v nČkolika nejrozšíĜenČjších prohlížeþích. PĜi výbČru jednotlivých prohlížeþĤ 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Č hodnocení a statistických údajĤ o rozšíĜenosti a kvalitČ rĤzných prohlížeþĤ jsem vybral šest aplikací, o kterých jsem buć pĜedpokládal, že v nich Silverlight bude podporován, nebo jsem mČl v úmyslu to zjistit. K výbČru také pĜispČly oficiální informace spoleþnosti Microsoft o podpoĜe Silverlight.
-9-
5
Teoretický úvod Spoleþnost Microsoft je poslední dobou stále více spojována s inter-
netovými technologiemi. Až donedávna se pĜedevším jednalo o technologii ASP.NET, jakožto rozšíĜený a silný nástroj pro tvorbu webových aplikací. S pĜí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þnČ vycházející právČ z první jmenované. Touto technologií je Microsoft Silverlight. Technologie Silverlight je spoleþností Microsoft prezentována jako pĜímý konkurent pro technologii Adobe Flash a jejím hlavním cílem je zaujmout pĜední místa v použití na webu vedle technologií Flash þi AJAX. Silverlight nabízí použití vektorové grafiky, animaci, umožĖuje pĜehrávat videa v HD kvalitČ a pĜedevším vyniká možností volby použitého programovacího jazyka. Toto se týká verze 2.0 a pĜípadných dalších verzí, ve verzi 1.0 byla funkcionalita zajištČna jedinČ Javascriptem. K zobrazení Silverlight aplikací je tĜeba mít nainstalovaný malý (asi 4 MB) plugin, který obstarává jeho podporu ve vČtšinČ nejþastČji používaných prohlížeþích. Pracuje se i na verzích pluginu do mobilních zaĜízení (pro Windows Mobile a Symbian) a existuje také volnČ šiĜitelná implementace pro unixové operaþní systémy s názvem Moonlight. Velmi pozitivní skuteþností je, že k zobrazení Silverlight aplikací není nutné mít nainstalovaný pĜíslušný .NET Framework. Výhodou technologie je možnost propojení Silverlight aplikace s HTML stránkou, na níž je umístČna. Díky tomu je možné ovládacími prvky v aplikaci mČnit obsah HTML stránky a naopak. K vývoji Silverlight aplikací slouží nejþastČji prostĜedí 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þástí této práce (viz. pĜíloha) je první þesky psaná ucelená pĜíruþka pro
zaþínající programátory v technologii Silverlight. V této publikaci jsou popsány základní mechanizmy a principy technologie, vysvČtleny mnohé problémy, se kterými se programátoĜi setkají a je zde uvedeno i struþné porovnání technologie Silverlight s konkurenþní technologií Adobe Flash. Hlavním výstupem mé bakaláĜské práce je tato publikace. Souþástí
mé
práce
je
také
otestování
technologie
v
nČkolika
nejrozšíĜenČjších prohlížeþích. Tomuto výzkumu se vČnuje první kapitola publikace, v níž je pĜehledným zpĤsobem zobrazena podpora Silverlight 2.0. Praktickou þást mé bakaláĜské práce pĜedstavuje pČtice projektĤ poukazujících na jednotlivé aspekty technologie Silverlight. Na tČchto vzorových projektech jsou názornČ ukázány následující prvky používané v této technologii:
Vektorová grafika a jazyk XAML
Komponenty umožĖující rozvržení objektĤ na scénČ
Styly a šablony
Animace
Napojení na databázi pomocí LINQ
Následující þást práce popisuje vzorové projekty, jejich principy a funkcionalitu zdrojových kódĤ. PĜed jejím þtením doporuþuji prostudovat druhou a tĜetí kapitolu publikace popisující jazyk XAML a propojení s jazykem C#.
- 11 -
7
Popis praktického Ĝeš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Čchto prvcích je názornČ pĜedvedeno nČkolik zpĤsobĤ manipulace s výplnČmi þi okraji.
2. Komponenty umožĖující rozvržení objektĤ na scénČ •
V tomto projektu je þtenáĜ seznámen s nČkolika elementy zajišĢujícími rozvržení objektĤ na scénČ. Tyto elementy mohou Ĝadit objekty pod sebou nebo vedle sebe, rozdČlovat scénu na þásti apod.
3. Styly a šablony •
Tato vzorová aplikace pĜedstavuje využití stylĤ a šablon pro jednoduchou parametrizaci objektĤ a definování jejich vizuální podoby.
4. Animace •
Zde se þtenáĜ seznámí s nČkolika zpĤsoby animace v Silverlight a získá pĜehled o tom, jaké parametry je možné u XAML elementĤ animovat.
5. Napojení na databázi pomocí LINQ •
Tento projekt názornČ ukazuje propojení Silverlight aplikace s SQL databází pomocí technologie WCF a jazyka LINQ a zobrazení naþtených dat v tabulce.
- 12 -
7.2 Použité technologie Všechny ukázkové aplikace byly vytvoĜeny s pomocí technologie Silverlight 2.0. Jako vývojové prostĜedí jsem použil MS Visual Studio Team System 2008 SP1 pod platformou .NET Framework 3.5. Kompletní zdrojové kódy jsou pĜiloženy jako pĜílohy a zdrojové soubory se nacházejí na pĜilož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Čm použity základní grafické elementy jazyka XAML, jako jsou
, <Ellipse> a . Tyto elementy mají nastavené rĤzné hodnoty "barevných" parametrĤ (výplĖ, okraj) a jsou rozmístČny na plochu pomocí pevných souĜadnic.
- 13 -
Nejvýše na scénČ se nacházejí dva velmi jednoduché elementy objekty a <Ellipse>, tedy obdélník a elipsa. <Ellipse Height="30" Width="50" Fill="Blue" Canvas.Left="50" Canvas.Top="10" />
Z ukázky zdrojového kódu vidíme, že použití oba elementy potĜebují k tomuto zobrazení totožné parametry. Oba elementy mají nastavenou výšku a šíĜku, barvu výplnČ a umístČní na scénČ. Pod tČmito dvČma objekty jsou již složitČjší prvky. OpČt se jedná o elementy a <Ellipse>, tentokrát však mají definovanou složitČjší grafickou podobu. Následující zdrojový kód popisuje þtverec nalevo.
Narozdíl od výše zmiĖovaného obdélníku má tento objekt definovánu lineárnČ interpolovanou výplĖ a obrys. Na této ukázce je dĤležité pĜedstavení elementu , který zajišĢuje lineární interpolaci barev. StČžejními parametry tohoto elementu jsou "poþáteþní" a "koncový" bod, jejichž hodnoty jsou vždy dvojice reálných þísel vyjadĜují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Ĝíslušnou barvu a pozici na spojnici poþáteþního a koncového bodu. Pozice na spojnici bodĤ je opČt definována jako reálné þíslo v rozmezí od nuly do jedné.
- 14 -
Na elipse nacházející se vedle tohoto obdélníka je pĜedstaven další možný styl výplnČ - . <Ellipse Height="100" Width="100" Canvas.Left="120" Canvas.Top="50" > <Ellipse.Fill>
Element obstarává radiální interpolaci barev a od výše zmiĖovaného elementu pro lineární interpolaci se liší svými parametry. ZĜejmé jsou jistČ parametry "RadiusX" a "RadiusY" pĜedstavující zploštČní þi zúžení gradientu. Hodnota parametru "GradientOrigin" pĜedstavuje bod, ze kterého gradient vychází a parametr "Center" uchovává bod, k nČmuž gradient smČĜuje. Jednotlivé barvy jsou opČt definovány subelementy . Na þtvrté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Č je objekt . Ten je zde nadefinován tak, že jeho výplĖ je poloprĤhledná a jeho plocha þásteþnČ pĜekrývá poslední zmiĖovanou elipsu. <SolidColorBrush Color="White" Opacity="0.5" />
Na zdrojovém kódu vidíme, že parametry elementu jsou podobné elementĤm a <Ellipse>. Je zde také použit parametr "CornerRadius", který udává zaoblení rohĤ. PrĤhlednost pozadí je definována pomocí elementu <SolidColorBrush> a jeho parametru "Opacity", který je nastaven na hodnotu 0.5. UvnitĜ elementu se nachází ještČ objekt pĜedstavující statické textové pole a zobrazující nápis "Hello
- 15 -
World!". Z celé struktury je patrná funkce elementu jako "ohraniþení", které mĤže obsahovat další objekty.
- 16 -
7.4 Komponenty zajišĢující rozvržení objektĤ na scénČ
V tomto projektu se blíže zabývám tzv. Layout komponenty, což jsou prvky jazyka XAML, které umožĖují rozmisĢovat a uspoĜádávat objekty na scénČ. Scéna je rozdČlena na nČkolik þástí dvČma elementy . První (s názvem "rows") rozdČluje scénu na tĜi Ĝádky a v jeho druhém Ĝádku se nachází další ("cols"), vytváĜející v tomto Ĝádku dva sloupce:
- 17 -
Ze struktury kódu je patrné, že element "cols" je uvnitĜ elementu "rows", a vidíme, že jeho parametr "Grid.Row" má hodnotu 1, což znamená, že je ve druhém Ĝádku (indexy ĜádkĤ a sloupcĤ vždy zaþínají nulou). Stejným principem, tedy zadáním pĜíslušné hodnoty parametru "Grid.Row" þi "Grid.Column", je možné každému objektu na scénČ urþit, kde pĜesnČ se bude nacházet.
V prvním Ĝádku, tedy nahoĜe na scénČ, se nachází jakási hlaviþka aplikace. Jde pouze o element s definovanou barvou pozadí a okrajĤ obsahující objekt s nápisem "Hlaviþka" a nastaveným formátem a barvou písma. Vidíme zde, že element má opČt nastaven parametr "Grid.Row", tentokrát na hodnotu 0.
Naprosto stejnČ jako hlaviþka je definována i spodní lišta. OpČt jde o patĜiþnČ naformátovaný objekt obsahující objekt . Hodnota 2 parametru "Grid.Row" vyjadĜuje umístČní prvku ve tĜetím, tedy spodním Ĝádku. <StackPanel Grid.Column="0" Orientation="Vertical"> <Button Content="tlaþítko 0" Height="30" Width="80" <Button Content="tlaþítko 1" Height="30" Width="80" <Button Content="tlaþítko 2" Height="30" Width="80" <Button Content="tlaþítko 3" Height="30" Width="80" <Button Content="tlaþítko 4" Height="30" Width="80"
Margin="0,5,0,0"/> Margin="0,5,0,0"/> Margin="0,5,0,0"/> Margin="0,5,0,0"/> Margin="0,5,0,0"/>
Jak jsem již uvedl, druhý (prostĜední) Ĝádek je rozdČlen na dva sloupce. V prvním z nich, tedy na levé stranČ, se nachází objekt <StackPanel>
- 18 -
obsahující pČt tlaþítek. Tento element slouží k umisĢování objektĤ pod sebou nebo vedle sebe. V našem pĜípadČ jsou rozmístČny svisle (hodnota "Vertical" parametru "Orientation"), což vytváĜí jakýsi seznam, který je možno považovat za menu. Jednotlivá tlaþí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 , vyplĖující celou plochu vymezenou sloupcem. Místo tohoto objektu by zde mohl být jakýkoli jiný obsah. Element slouží jako textové pole, do kterého uživatel mĤže zadat nČjaký text. Je zde použit pouze za úþelem vyplnČní volného prostoru a nemá žádnou zvláštní funkcionalitu.
7.5 Styly a šablony
Tento tĜetí ukázkový projekt se zabývá - jak již jeho název napovídá - styly a šablonami v jazyce XAML. Použití stylĤ velmi usnadĖuje a urychluje práci v pĜípadech, kdy se na scénČ nachází více objektĤ stejného vzezĜení. Jedná se
- 19 -
o jakousi analogii k technologii CSS, ve které jsou grafické definice uchovávány na urþitém místČ a objekty se na nČ odkazují. Šablony jsou velmi užiteþným nástrojem pro navrhování grafického vzhledu jednotlivých komponent. S jejich pomocí lze od základu zmČnit vzhled jakéhokoli XAML prvku. Jelikož jsou styly i šablony velmi detailnČ popisovány v samotné pĜíruþce, ukáži a vysvČtlím zde pouze jejich použití v tomto projektu a nebudu se dále zabývat teorií dopodrobna. Rozvržení objektĤ na scénČ je naprosto stejné jako v pĜedchozím projektu. Jelikož je zde nČkolik graficky shodných objektĤ, nabízí se využití stylĤ. První styl je definovány následovnČ: <Style x:Key="borderStyle" TargetType="Border"> <Setter Property="Background" Value="Beige"/> <Setter Property="Margin" Value="10,0"/> <Setter Property="BorderBrush" Value="SteelBlue"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="CornerRadius" Value="3"/>
Jedná se o definici grafického vzezĜení objektu (jehož název vidíme jako hodnotu parametru "TargetType" elementu <Style>) a je zde definováno pČt parametrĤ - barva pozadí, odstup od ostatních objektĤ, barva a tloušĢka okraje a zaoblení rohĤ. Stylu je pĜiĜazen název "borderStyle" a jak vidíme na následujícím zápisu, objekty na scénČ se pomocí klíþového slova "StaticResource" odkazují. ...
Následující þást zdrojového kódu ukazuje definici šablony pro tlaþítko.
- 20 -
<Style x:Key="buttonTemplate" TargetType="Button"> <Setter Property="Height" Value="30"/> <Setter Property="Width" Value="80"/> <Setter Property="Margin" Value="0,5,0,0"/> <Setter Property="Template"> <Setter.Value>
Šablony jsou vytváĜeny naprosto stejným zpĤsobem jako styly, pouze je do jejich tČla pĜidána definice hodnoty parametru "Template". V tomto pĜípadČ je jako tČlo tlaþítka použit objekt se zaoblenými rohy a pozadím s lineární interpolací barev béžové a modré. UvnitĜ tohoto prvku je objekt , jehož úþelem je zobrazovat popisek na tlaþítku. PĜíslušný popisek je do šablony naþítán z hodnoty parametru "Content" pĜíslušného tlaþítka pomocí klíþového slova "TemplateBinding".
- 21 -
7.6 Animace
Tento projekt názornČ ukazuje rĤzné zpĤsoby animování objektĤ na scénČ. Jsou zde použity všechny základní animaþní techniky, které technologie Silverlight umožĖuje. Scéna je zde rozdČlena na tĜi sloupce podle zpĤsobu animace objektĤ v nich obsažených. V prvním sloupci se nacházejí tĜi animované objekty. Jedná se shora o elipsu, obdélník a komponentu <Slider>. Animace na tČchto tĜech objektech je spuštČna ihned po naþtení aplikace a opakuje se neustále. <Ellipse x:Name="eli1" Width="100" Height="60" Margin="10"> <Ellipse.Fill> <SolidColorBrush x:Name="backGr" Color="Red"/> <Storyboard x:Name="anim_eli1">
Elipsa má definovánu šíĜku, výšku a barvu pozadí. Barva je jednolitá a objekt <SolidColorBrush>, který pozadí obstarává má název "backGr".
- 22 -
Na tento název se odkazuje element parametrem "StoryBoard.TargetName", který slouží k definici samotné animace. Ve zdrojovém kódu vidíme použití hexadecimálního barevného formátu u hodnot parametrĤ "From" a "To", které urþují poþáteþní a koncovou hodnotu barvy pozadí. Animace trvá jednu sekundu, opakuje se neustále a je reverzní (po dosažení koncové hodnoty probČhne zpČtná animace na hodnotu poþáteþní). <Storyboard x:Name="anim_rec1">
V pĜípadČ obdélníka slouží animace k jeho plynulému rozšíĜení a opČtovnému zúžení. Tato animace je definována pomocí elementu , jehož úþelem je animovat libovolnou hodnotu typu "Double", tedy reálné þíslo. Ve zdrojovém kódu vidíme, že obdélník je pojmenován "rec1" a na tento jeho název se opČt animace odkazuje. Jeho šíĜka osciluje mezi hodnotami 100 a 150 pixelĤ a každá tato zmČna trvá 1.5 sekundy. Animace je opČt jako v prvním (a jako i v následujícím) pĜípadČ reverzní a opakuje se neustále. Posledním objektem nacházejícím se v tomto sloupci je <Slider>. Na tomto prvku je ukázáno, že není nutné striktnČ animovat jenom grafické vzezĜení objektu, ale také jeho další vlastnosti. V pĜípadČ tohoto objektu <Slider> je to jeho parametr "Value", jenž udává polohu jezdce na lištČ. ZároveĖ je zde ukázáno použití transformace objektu. <Storyboard x:Name="anim_sld1"> <Slider x:Name="sld1" Minimum="0" Maximum="100" Width="150" Margin="0,50,0,0"> <Slider.RenderTransform>
- 23 -
V tomto zdrojovém kódu vidíme, že elementu <Slider> je pĜiĜazen subelement <Slider.RenderTransform>, kterým je možné definovat rĤzné transformace. V našem pĜípadČ se jedná o rotaci s osou otáþení v bodČ o souĜadnicích [75,20] a poþáteþním úhlem otoþení 0°. Animace je zde zajištČna dvČma elementy , z nichž první animuje zmínČnou pozici jezdce a druhý rotaþní transformaci. V pĜípadČ prvního animaþního elementu vychází poþáteþní a koncová hodnota z minima a maxima definovaného v elementu <Slider> a jezdec tedy osciluje mezi hodnotami 0 a 100, tedy od levého konce lišty až k jejímu pravému konci. Druhý element zajišĢujíce oscilaci hodnoty úhlu rotace mezi -20° a 20°. Oba druhy animace mají nastavenou stejnou dobu trvání. Výsledkem celé definice je kývavý pohyb objektu <Slider> zleva doprava, což s použitím malé þerné elipsy uprostĜed objektu dává iluzi vah, které se naklánČjí podle pozice jezdce. Druhý sloupec obsahuje prvky, na kterých je ukázána možnost ovládat prĤbČh animace. Jedná se o þtyĜi tlaþítka, která ovlivĖují animaci pod nimi umístČného obdélníku s lineárním gradientem na pozadí. Jejich definice je následující: <StackPanel HorizontalAlignment="Center" Orientation="Horizontal"> <Button x:Name="butPlay" Content="Play" Margin="5,10" Click="butPlay_Click" /> <Button x:Name="butPause" Content="Pause" Margin="5,10" Click="butPause_Click" /> <Button x:Name="butResume" Content="Resume" Margin="5,10" Click="butResume_Click" /> <Button x:Name="butStop" Content="Stop" Margin="5,10" Click="butStop_Click" />
Tlaþítka jsou umístČna v objektu <StackPanel>, jenž se stará o jejich seĜazení vodorovnČ. Každé tlaþítko má pomocí handleru "Click" pĜipojenou metodu, která je zavolána po jeho stisknutí. Zleva první tlaþítko slouží ke spuštČní animace, druhé k pozastavení, tĜetí k pokraþování a poslední þtvrté k úplnému zastavení. Jednotlivé metody vypadají následovnČ:
- 24 -
private void butPlay_Click(object sender, RoutedEventArgs e) { anim_rec2.Begin(); } private void butPause_Click(object sender, RoutedEventArgs e) { anim_rec2.Pause(); } private void butResume_Click(object sender, RoutedEventArgs e) { anim_rec2.Resume(); } private void butStop_Click(object sender, RoutedEventArgs e) { anim_rec2.Stop(); }
Samotná animace a animovaný obdélník jsou definovány takto: <Storyboard x:Name="anim_rec2">
Obdélník je vyplnČn svislou lineární interpolací mezi barvami modrou a þervenou. Tyto barvy jsou pĜedstavovány dvČma elementy . Oba elementy mají zadán název ("upGrad" a "downGrad"), díky þemuž mohou být animovány nezávisle na sobČ. Animace se pak skládá celkem ze tĜí þástí. ZároveĖ jsou animovány výška obdélníka a obČ barvy v jeho výplni. Výška se pohybuje mezi hodnotami 2 a 275 pixelĤ, horní barva gradientu se mČní z modré na þervenou a spodní barva z þervené na žlutou. V posledním sloupci je vytvoĜena animace s využitím klíþových snímkĤ. Nacházejí se zde dva objekty. OpČt se jedná o spouštČcí tlaþítko a animovaný obdélník.
- 25 -
<Button Click="butPlay2_Click" x:Name="butPlay2" Content="Play" Margin="5,10" /> <Storyboard x:Name="anim_rec3"> <SplineDoubleKeyFrame KeySpline="0,0 1,0" KeyTime="0:0:1" Value="275"/> <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" KeyTime="0:0:1.3" Value="200"/> <SplineDoubleKeyFrame KeySpline="0,0 1,0" KeyTime="0:0:1.5" Value="275"/> <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" KeyTime="0:0:1.7" Value="250"/> <SplineDoubleKeyFrame KeySpline="0,0 1,0" KeyTime="0:0:1.8" Value="275"/>
StČžejní je zde element . UvnitĜ tohoto elementu se nacházejí definice jednotlivých klíþových snímkĤ. První snímek v tomto pĜípadČ slouží pouze jako nastavení poþáteþního stavu. Následuje série snímkĤ vytváĜejících animaci po kĜivce. Každý s tČchto klíþových snímkĤ má pevnČ danou dobu a hodnotu, které má animovaný parametr dosáhnout. Pomocí parametru "KeySpline" je pro každý klíþový snímek definováno buć postupné zrychlení nebo zpomalení k dané hodnotČ. Výsledek celého zápisu mĤžeme považovat za animaci pádu opony. Vzhledem k nastavenému parametru "AutoReverse" se animace opČt pĜevrátí a projde všechny klíþové snímky pozpátku až k poþáteþnímu. Poté se animace zastaví.
- 26 -
7.7 Napojení na databázi pomocí LINQ
Poslední projekt ukazuje, jakým zpĤsobem se aplikace napojuje na SQL databázi a jaké jsou možnosti zobrazení naþtených dat. Jak je zmínČno v pĜíruþce, na tomto projektu popíši celý (relativnČ komplikovaný) postup pĜipojení k databázi pomocí technologie WCF a jazyka LINQ. K tomuto jsem se rozhodu z toho dĤvodu, že tato tématika je teoreticky dosti obsáhlá a zasloužila by si samostatnou publikaci v rozsahu této práce. Nebudu zde tedy zacházet do pĜílišných a pro úþel této publikace zbyteþných detailĤ a vysvČtlím principy na jednoduchém projektu, ve kterém pĜedstavuji þtyĜi možné cesty k zobrazení dat naþtených z databáze. Nejprve tedy vysvČtlím, co všechno je tĜeba zaĜídit, aby se aplikace dokázala na databázi pĜipojit. Budu zde popisovat postupy ve vývojovém prostĜedí Visual Studio 2008.
- 27 -
Celý proces pĜipojování na databázi se odehrává v projektu webové stránky, která hostuje Silverlight aplikaci. První vČc, kterou do tohoto projektu musíme pĜidat je soubor zvaný "LINQ to SQL Classes". Do projektu ho pĜidáme pomocí dialogu "Add New Item", který spustíme pĜíkazem, jenž najdeme v kontextovém menu názvu projektu.
Šablonu pro tento soubor nalezneme pĜímo v záložce "Visual C#", mĤžeme zvolit název vytváĜeného souboru a stiskneme tlaþítko "Add". Tento soubor se objeví uvnitĜ projektu v panelu "Solution Explorer". Po jeho otevĜení se ukáže prázdná plocha. Na této ploše budou pozdČji zobrazeny tĜídy, které Visual Studio automaticky vygeneruje po pĜipojení k databázi. Každá z tČchto tĜíd bude pĜíslušet jedné tabulce z databáze. Pro vytvoĜení pĜipojení k databázi využijeme panel s názvem "Server Explorer" na levé stranČ obrazovky. V tomto panelu zvolíme pĜíkaz "Connect to Database" a následnČ s pomocí prĤvodce vytvoĜíme pĜipojení k databázovému serveru, na kterém se pĜíslušná databáze nachází. Výsledkem bude, že se struktura databáze zobrazí v panelu "Server Explorer" (viz. obrázek nalevo). Nyní již staþí "pĜetáhnout" vybrané tabulky z databáze na plochu otevĜeného LINQ To SQL
- 28 -
souboru a vytvoĜí se jim odpovídající tĜídy. Následuje již pouze vytvoĜení WCF Servisu. Ten vložíme do projektu stejným zpĤsobem jako pĜedešlý soubor, tentokrát však v dialogu Add New Item zvolíme "WCF Service". Po zadání názvu souboru a stisknutí tlaþítka "OK" pĜibudou v projektu dva soubory. Prvním je "IService1.cs" a druhým je "Service1.svc". Soubor "IService1.cs" obsahuje deklarace metod, kterými jsou naþítána data z databáze a soubor "Service1.svc" (resp. jeho code-behind soubor "Service1.svc.cs") obsahuje samotná tČla tČchto metod. V pĜípadČ našeho projektu vypadají soubory následovnČ: IService.cs: [ServiceContract] public interface IService1 { [OperationContract] List getPics(); }
Service1.svc.cs: public class Service1 : IService1 { public List getPics() { DataClasses1DataContext db = new DataClasses1DataContext(); var query = from p in db.Obrazkies select p; return query.ToList(); } }
V horní þásti ukázky vidíme deklaraci metody "getPics()" a ve spodní þásti její tČlo. Jediným úþelem této metody je naþíst z databáze všechny položky nacházející se v tabulce s názvem "Obrazky". Poslední vČcí, kterou je tĜeba nastavit, je typ tzv. "vazby" - [binding]. Po vytvoĜení WCF Servisu byl v souboru "Web.Config" automaticky vygenerován zápis o typu spojení a všech možných parametrech servisu a právČ zde je tĜeba udČlat malou úpravu. Jelikož Silverlight nepodporuje typ "wsHttpBinding", ale pouze o nČco zastaralejší typ "basicHttpBinding", je tĜeba první jmenovaný typ nahradit tím druhým. Pokud bychom toto neudČlali, servis by nefungoval, jelikož Silverlight aplikace by nedokázala vytvoĜit zmínČný typ vazby se serverem.
- 29 -
Po této zmČnČ je WCF Servis kompletní. Nachází se ale v projektu webové stránky. Abychom jej propojili se samotnou aplikací, je tĜeba pĜidat do Silverlight projektu referenci na tento servis se odkazující. PĜíkaz k vytvoĜení reference se nachází v kontextovém menu Silverlight projektu a po jeho spuštČní se zobrazí dialogové okno s názvem "Add Service Reference". Zde staþí stisknout tlaþítko "Discover" a Visual Studio automaticky vyhledá uvnitĜ solution námi vytvoĜený servis. Nakonec staþí pojmenovat vytvoĜenou referenci a vše potvrdit stisknutím tlaþítka "OK". Nyní již popíši samotný projekt a jeho funkcionalitu. Hlavním prvkem na scénČ je objekt . Tento prvek umožĖuje rozmístit obsah scény do libovolného poþtu záložek, mezi nimiž je následnČ možné se pĜepínat. V tomto projektu využívám þtyĜ záložky. Na každé z nich se nachází tlaþítko pro naþtení dat z databáze a element, který naþtená data urþitým zpĤsobem zobrazuje. KonkrétnČ na prvních tĜech záložkách se nachází pokaždé jinak definovaný objekt a na poslední þtvrté je objekt s použitou šablonou urþující vzhled jeho položek. Následující výĖatek ze zdrojového kódu ukazuje definici první záložky: <StackPanel Orientation="Vertical"> <Button Width="100" Height="30" Content="Naþti data" Margin="0,0,0,5" Click="Button_Click" />
Vidíme zde definovaný popisek záložky a strukturu jejího obsahu, jež je pro všechny záložky stejná. Nachází se zde tlaþítko pro naþtení dat a element , jemuž jsou definovány pouze parametry zajišĢující grafickou podobu - barvy pozadí lichých a sudých ĜádkĤ a viditelnost linek oddČlujících Ĝádky. Parametr "AutoGenerateColumns" je nastaven na hodnotu "True", což zaruþuje automatické vytvoĜení sloupcĤ podle naþítaných dat.
- 30 -
<StackPanel Orientation="Vertical"> <Button Width="100" Height="30" Content="Naþti data" Margin="0,0,0,5" Click="Button_Click" />
Na druhé záložce se nachází již trochu složitČjší verze elementu . V tomto pĜípadČ nejsou sloupce generovány automaticky, nýbrž jsou pĜedem definovány a jsou jim jasnČ pĜidČlená naþítaná data. Je zde rovnČž využita možnost vytváĜet šablony sloupcĤ. V tomto pĜípadČ se jedná o sloupec zobrazující hodnoty typu "DateTime" (tedy údaj o datu a þase). Aby zde nebyly datum a þas zobrazovány jako pouhý text, je do sloupce vložen objekt , což je grafický a interaktivní kalendáĜ. Na tĜetí záložce je k zobrazení naþtených dat použit objekt s definovaným subelementem . Následující zdrojový kód ukazuje definici subelementu: <StackPanel Orientation="Horizontal" Height="30" VerticalAlignment="Center" HorizontalAlignment="Stretch"> <StackPanel.Background>
- 31 -
Z dĤvodu vyšší složitosti zdrojového kódu je z ukázky vynechána definice samotného elementu . Je v podstatČ shodná s definicí prvku na druhé záložce, ovšem je zde jeden zásadní rozdíl. V tomto pĜípadČ totiž nejsou definovány všechny sloupce, ale pouze jeden - sloupec s názvem "fileName". PrávČ úþelem použití prvku "RowDetails" (tedy "detailĤ Ĝádku") je vyhnout se zbyteþnČ velkému poþtu sloupcĤ v tabulce. Jedná se v podstatČ o panel, který se zobrazí po oznaþení urþitého Ĝádku a poskytne všechny ostatní informace. Zde se po oznaþení nČjakého Ĝádku objeví panel se všemi ostatními údaji naþtenými z databáze, týkajícími se daného obrázku. Na poslední záložce se nachází objekt s definicí šablony pro jeho položky - . <StackPanel Orientation="Horizontal" Height="30" Margin="30,0"> <StackPanel Orientation="Vertical" Background="SkyBlue" Width="30"> ...
Z zdrojového kódu je patrné, že samotná definice se celkem podobá definici "RowDetails" z pĜedchozí ukázky. Jedná se o element obsahující layout komponentu <StackPanel>, která zajišĢuje rozmisĢování všech v ní obsažených objektĤ horizontálnČ za sebou. Mezi samotnými objekty jsou pak opČt pĜevážnČ prvky a pro zobrazení data a þasu je použit objekt .
- 32 -
7.8 Problémy pĜi vývoji PĜi vývoji projektĤ jsem narazil na nČkolik problémĤ a komplikací. NejþastČjším problémem byla zpČtná nekompatibilita pluginu pro zobrazení Silverlight aplikací v prohlížeþích. BČhem vytváĜení jednotlivých projektĤ se nČkolikrát objevila nová verze pluginu a automaticky se nainstalovala na mĤj poþítaþ, þímž byla vždy pĜepsána verze, pro kterou byly jednotlivé projekty vyvíjeny. Výsledkem bylo v mnoha pĜípadech žádné nebo špatné zobrazení Silverlight aplikací. Tento problém vČtšinou vyĜešilo odinstalování pluginu a opČtovné stažení nejnovČjší verze. Zajímavé je, že k této komplikaci nedocházelo vždy s pĜíchodem novČjší verze. NČkolikrát se verze aktualizovala bez nejmenších problémĤ. OsobnČ jsem se setkal i s nČkolika problémy pĜi používání nástroje Microsoft Blend 2. Tyto problémy se týkaly vesmČs špatného, þi spíše zbyteþného generování XAML kódu bČhem vytváĜení grafického designu scény. Jako pĜíklad mĤže sloužit následující zápis elementu , ve kterém je zcela zbyteþnČ použit parametr "StrokeThickness":
Obþas se také objevovaly chyby týkající se propojení nástroje Blend 2 s Visual Studiem. Pokud byl tentýž projekt otevĜen v obou prostĜedích, mČla probíhat neustálá synchronizace pĜi jakékoli zmČnČ projektu. NČkolikrát se mi stalo, že projekty nebyl správnČ synchronizován pĜi pĜechodu mezi prostĜedími. Bylo pak tĜeba restartovat aplikaci se starší verzi projektu. Nutno však dodat, že tato chyba nastala velmi zĜídkakdy a nelze ji považovat za zásadní a pĜetrvávající problém.
- 33 -
8
ZávČreþné shrnutí Cílem této práce bylo sestavit první þesky psanou publikaci pojednávající
výhradnČ o Microsoft Silverlight 2.0, otestovat tuto technologii v nejrozšíĜenČjších prohlížeþích a vytvoĜit s její pomocí sadu ukázkových projektĤ. Tyto cíle jsem se snažil splnit v plném rozsahu. Sepsal jsem pĜíruþku pro zaþínající programátory, v níž je popisována syntaxe jazyka XAML jakožto prostĜedku pro vytváĜení grafického designu internetových aplikací a þtenáĜ je obeznámen se základními principy, na kterých je technologie Silverlight postavena. Sestavil jsem také sadu ukázkových projektĤ, v nichž pĜedstavuji základní komponenty a metody, které je možné v Silverlight 2.0 používat. Tyto projekty svou nároþností odpovídají tomu, co jsem si od zaþátku stanovil a jsou nyní volnČ pĜístupné na internetu. Souþástí praktické þásti jsou také volnČ stažitelné všechny pĜíklady použité v pĜíruþce pĜi vysvČtlování látky. Podle mého názoru je technologie Silverlight velmi silným nástrojem pro tvorbu internetových aplikací a má velký potenciál do budoucna. OsobnČ jsem se touto technologií zabýval od jejích úplných zaþátkĤ a byl jsem svČdkem velkého poþtu chyb, problémĤ a komplikací. Domnívám se však, že jakmile Silverlight dosáhne takové funkþní stability jako Adobe Flash, bude pro nČj velmi silným soupeĜem. Jestliže k této stabilizaci dojde, je možné, že i já se pĜidám k programátorĤ, využívajícím technologii Silverlight.
- 34 -
9
PĜehled použité literatury
[1] SCHWARZ, Michael. Silverlight Tutorials - Michael's Blog [online]. 2006 [cit. 2009-0122]. Text v angliþtinČ. Dostupný z WWW: . [2] ŠTURALA, Aleš. Aleš Šturala | Blog | þeská verze » Silverlight [online]. 2007 [cit. 200901-22]. Text v þeštinČ. Dostupný z WWW: . [3] SUREAU, Denis. Silverlight and XAML tutorial for Web applications and RIA [online]. 2007-2008 [cit. 2009-01-22]. Text v angliþtinČ. Dostupný z WWW: . [4] Microsoft Corporation. Tutorials : The Official Microsoft Silverlight Site [online]. 2008 [cit. 2009-01-22]. Text v angliþtinČ. Dostupný z WWW: . [5] Microsoft Corporation. Videos : The Official Microsoft Silverlight Site [online]. 2008 [cit. 2009-01-22]. Text v angliþtinČ. Dostupný z WWW: . [6] GUTHRIE, Scott. ScottGu's Blog [online]. 2003-2009 [cit. 2009-01-22]. Text v angliþtinČ. Dostupný z WWW: . [7] WILDERMUTH, Shawn. Shawn Wildermuth's Blog [online]. 1999-2008 [cit. 2009-0122]. Text v angliþtinČ. Dostupný z WWW: . [8] Microsoft Corporation. 101 LINQ Samples [online]. 2009 [cit. 2009-01-22]. Text v angliþtinČ. Dostupný z WWW: . [9] Microsoft Corporation. Silverlight - MSDN [online]. c2009 [cit. 2009-02-07]. Dostupný z WWW: .
- 35 -
[10] EZELL, Jesse. Silverlight vs. Flash: The Developer Story : Jesse Ezell Blog [online]. 2007 [cit. 2009-02-14]. Dostupný z WWW: . [11] ANDERSON, Tim. Microsoft Silverlight: 10 reasons to love it, 10 reasons to hate it [online]. 2008 [cit. 2009-02-14]. Dostupný z WWW: . [12] MACDONALD, Matthew. Pro Silverlight 2 in C# 2008. Berkeley : Apress, 2008. 607 s. ISBN 1-59059-949-7. [13] MACDONALD, Matthew, SZPUSZTA, Mario. ASP.NET 3.5 a C# 2008. PĜeklad RNDr. Jan Pokorný, Jan Gregor. Brno : Zoner Press, 2008. 1584 s. ISBN 978-80-7413-008-3. [14] CHINNATHAMBI, Kirupa. KirupaBlog : What on Earth is XAP? [online]. 2008 [cit. 2009-03-19]. Dostupný z WWW: . [15] HOWER, Chad Z.. Video: Silverlight versus Flash [online]. 2007 [cit. 2009-04-18]. Text v angliþtinČ. Dostupný z WWW: .
- 36 -
10
Seznam pĜíloh
[1] PĜíruþka Microsoft Silverlight 2.0 [2] Zdrojové kódy všech projektĤ a pĜíkladĤ na pĜiloženém CD
- 37 -
PĜíloha 1:
Microsoft Silverlight 2.0 PĜíruþka pro zaþínající programátory
JiĜí Kolda 2009
Obsah 1.
2.
3.
ÚVOD........................................................................................................4 1.1.
CO JE SILVERLIGHT?........................................................................ 4
1.2.
SILVERLIGHT VS. ASP.NET............................................................. 5
1.3.
SILVERLIGHT VS. ADOBE FLASH...................................................... 6
1.4.
HISTORIE......................................................................................... 9
1.5.
POUŽITÍ TECHNOLOGIE.....................................................................10
1.6.
POTěEBNÉ ZNALOSTI....................................................................... 12
1.7.
PODPORA PROHLÍŽEýģ..................................................................... 13
XAML..................................................................................................... 15 2.1.
POPIS ELEMENTģ POUŽITELNÝCH V SILVERLIGHT 2.0...................... 17
2.2.
KOěENOVÝ ELEMENT.......................................................................17
2.3.
LAYOUT - ROZVRŽENÍ KOMPONENT NA STRÁNCE............................. 17
2.4.
ZÁKLADNÍ KOMPONENTY................................................................. 22
2.5.
GRAFICKÝ DESIGN........................................................................... 26
2.6.
STYLY, ŠABLONY............................................................................. 30
2.7.
ANIMACE......................................................................................... 34
2.8.
MÉDIA............................................................................................. 42
2.9.
DATA............................................................................................... 44
C#............................................................................................................. 48 3.1.
PROPOJENÍ C# A XAML.................................................................. 48
4.
5.
VÝVOJOVÁ PROSTěEDÍ............................................................................ 51 4.1.
MICROSOFT VISUAL STUDIO 2008................................................... 51
4.2.
MICROSOFT BLEND 2....................................................................... 54
PRVNÍ APLIKACE V SILVERLIGHT 2.0..................................................... 56 5.1.
STRUýNÝ POPIS PRÁCE S VISUAL STUDIO 2008................................ 56
5.2.
ROZVRŽENÍ A ADRESÁěOVÁ STRUKTURA......................................... 59
5.3.
SOUBOR ".XAP"................................................................................ 60
5.4.
PUBLIKOVÁNÍ SILVERLIGHT APLIKACE............................................ 60
1
Úvod S pĜíchodem operaþního systému Windows Vista pĜedstavila spoleþnost
Microsoft nČkolik nových technologií. Mezi nČ patĜí napĜíklad Windows Presentation Foundation (WPF), Windows Communication Foundation (WCF) nebo Windows Workflow Foundation (WWF). Hlavním cílem technologie WPF je zjednodušení tvorby grafického vzhledu aplikací a oddČlení grafického návrhu od aplikaþní logiky. Grafický design je zde založen na jazyku XAML (o nČmž pojednává druhá kapitola), který je založen na XML technologii, a programování v nČm je podle mého mínČní velmi jednoduché a pĜehledné. Po zavedení technologie WPF zaþala spoleþnost Microsoft vyvíjet technologii s pracovním názvem WPF/E, jejímž úþelem byla možnost zobrazení WPF aplikací v prohlížeþi Internet Explorer. PozdČji se název technologie zmČnil z WPF/E na Silverlight, a zrodila se technologie, která není jakýmsi WPF emulátorem, nýbrž je schopna pomocí speciálního pluginu využívat XAML knihoven k tvorbČ webových aplikací.
1.1
Co je Silverlight? Microsoft Silverlight je multiplatformní implementace .NET Frameworku
urþená pro tvorbu aplikací RIA a mediálních prezentací na webu. Silverlight je souþasnČ také tzv. "cross-browser" technologií, což znamená, že by mČl být podporován všemi verzemi všech prohlížeþĤ dostupných v dobČ pĜedstavení technologie. Tato vlastnost je samozĜejmČ limitována tím, že Silverlight je úzce spojen s operaþním systémem Windows, takže na konkurenþních operaþních systémech již není podpora zaruþena.
-4-
1.2
Silverlight vs. ASP.NET Kdo nČkdy vytváĜel web pomocí ASP.NET (dále jen ASP), ten pĜi
seznámení se s technologií Silverlight ihned pozná nČkolik podobností. PĜirozenČ je to proto, že obČ technologie využívají platformu .NET - Silverlight využívá .NET Framework 3.0 a 3.5. V podstatČ je možno se na Silverlight dívat jako na jistou odnož ASP technologie, pĜiþemž mĤžeme použít následující analogii: stejnČ jako systém Windows Forms (Windows XP a starší) pĜešel na Windows Presentation Foundation (Windows Vista, budoucí Windows Seven), tak z technologie ASP, využívající grafické knihovny Windows Forms, vznikla technologie Silverlight, která využívá grafické knihovny WPF. Jaké jsou tedy rozdíly mezi technologiemi ASP a MS Silverlight? Ten hlavní spoþívá ve zpĤsobu komunikace uživatele se serverem. V ASP uživatel posílá na server požadavky na jednotlivé stránky a na serveru je, aby vyrenderoval každou vyžádanou stránku podle potĜeb uživatele a odeslal mu ji jako celek, zatímco v Silverlight uživatel pracuje s jednou celistvou aplikací, pĜes kterou odesílá na server požadavky pouze o dílþí prostĜedky. Server s tČmito požadavky nemusí nijak manipulovat, pouze odešle uživateli pĜíslušná data a Silverlight aplikace je zpracuje sama. Z toho vyplívá, že v Silverlight je naprostá vČtšina dat zpracovávána na stranČ uživatele, zatímco v ASP na serveru.
-5-
1.3
Silverlight vs. Adobe Flash Jedním z dĤvodĤ vzniku technologie Silverlight byla i pĜímá konkurence
technologii Adobe Flash (dále Flash) ze strany spoleþnosti Microsoft. NejvČtší rozdíl nalezneme nejspíše v systému animace. Flash poskytuje tzv. frame-by-frame animaci. To znamená, že pro každou zmČnu stavu urþitého objektu na scénČ za jednotku þasu je vypoþítáno, jak pĜesnČ bude daný objekt vypadat na všech snímcích, které tuto zmČnu zobrazují. Bohužel to znamená, že má-li uživatel pomalejší poþítaþ, pak mĤže zobrazení každého jednotlivého snímku trvat delší dobu, než by mČlo, a výsledkem je prodloužení þasu, který je na animaci vyhrazen. Oproti tomu Silverlight pracuje na principu stavové animace. Tento princip vyžaduje pouze urþení poþáteþního a finálního stavu objektu a þasu, bČhem kterého má být zmČna provedena. Silverlight sám dokáže zjistit, zda bude výkon poþítaþe na zobrazení staþit, a pĜizpĤsobit pĜíslušné mezistavy objektu tomu, aby zmČna opravdu probČhla v zadaném þase. ObecnČ by se dalo Ĝíci, že technologie Silverlight je v mnohém jednodušší a pro vývojáĜe pĜíjemnČjší než Flash, jelikož hodnČ práce udČlá za nČj. Oproti tomu technologie Flash svou volností (vČtšinu práce musí obstarat sám vývojáĜ) umožĖuje vytváĜet graficky i funkþnČ unikátní aplikace, zatímco Silverlight je odkázán na grafické možnosti jazyka XAML. MĤj názor je jakousi zlatou stĜední cestou. Pro grafickou stránku webové aplikace bych jednoznaþnČ zvolil technologii Adobe Flash a pro programovou þást bych použil Silverlight. PĜesto však nepochybuji, že se vždy najde nČkdo, kdo bude tvrdit, že jemu se lépe programuje ve Flashi, a zároveĖ nČkdo, komu více vyhovují grafické knihovny jazyka XAML. Naprosto stežejním pĜedmČtem porovnání je také podpora video formátĤ. Technologie Silverlight totiž nabídla už v první verzi možnost pĜehrávání videa v HD kvalitČ, zatímto Flash tuto vlastnost nemČl. Konkrétním kodekovým standardem, který umožĖuje technologii Silverlight pĜehrávat HD video je VC-1. Dnes již spoleþnost Adobe odpovČdČla na tuto novinku tím, že do Flash
-6-
Playeru zaþlenila podporu standardu H.264, také umožĖujícího pĜehrávání videa v HD rozlišení. V nČkolika následujících odstavcích popisuji rozdíly, výhody a nevýhody jednotlivých standardĤ. Výhodou VC-1 je, že umožĖuje pĜímo kódovat prokládané video. H.264 tuto schopnost nemá, nýbrž vyžaduje, aby pĜed kódováním bylo prokládané video pĜevedeno na progresivní. Tento postup pak samozĜejmČ vyžaduje více þasu i práce pĜi manipulaci s videem. Další zásadní vlastností VC-1 je to, že pro pĜehrávání (resp. dekódování) videa není zapotĜebí mnoho výpoþetního výkonu. Dá se Ĝíci, že za tímto úþelem byl standard VC-1 spoleþností Microsoft vyvíjen. Ruku v ruce s odlehþeným dekódováním jde ovšem vČtší výpoþetní nároþnost pĜi kódování videa. Zde VC-1 prohrává pomyslný souboj s H.264, který má o nČco nižší nároky na kódování, ale vyšší na dekódování. Co se týþe kvality obrazu, zde se názory liší. Podle mého soudu jsou oba standardy schopny nabídnout velmi vysokou kvalitu obrazu. jak již bylo Ĝeþeno, VC-1 se snaží o co nejvČtší kvalitu pĜi co nejnižší výpoþetní nároþnosti pĜi dekódování. Oproti tomu H.264 byl navržen hlavnČ pro široké využití v nejrĤznČjších oblastech, má mnoho profilĤ s rĤznou kvalitou obrazu, kompresním pomČrem a výpoþetní nároþností. Na závČr je tĜeba také zmínit podporu obou standardĤ na koncových zaĜízeních. Standard VC-1 vyhovuje hlavnČ zaĜízením s malým výkonem kvĤli odlehþenému dekódování. Je však tĜeba Ĝíci že tento standard ještČ není pĜíliž rozšíĜen a je v souþasné dobČ podporován pĜedevším v HD-Ready televizorech a DVD pĜehrávaþích. Oproti tomu H.264 je již dnes velmi rozšíĜen, pĜedevším na produktech spoleþnosti Apple, Xbox 360, PSP þi na novČjších mobilních telefonech Nokia. Vzhledem k tomu, že Silverlight má pĜímo v runtime pluginu zabudován kodek WMV9 (nejpopulárnČjší implementaci standardu VC-1), není tĜeba stahovat k zobrazení videí žádné další knihovny þi moduly.
-7-
Velmi zajímavou službou, kterou spoleþnost Microsoft poskytuje, je tzv. Silverlight Streaming. Jedná se o bezplatný hosting pro Silverlight aplikace, ale pĜedevším také pro videa v HD kvalitČ. Na stránkách silverlight.live.com má každý registrovaný uživatel k dispozici až 10GB prostoru k hostování aplikací nebo ukládání videosouborĤ.
-8-
1.4
Historie Název "Silverlight" jako takový se poprvé objevil v roce 2007 na
konferenci MIX07. PĜedtím se o této technologii vČdČlo jen sporadicky a mČla oznaþení WPF/E (Windows Presentation Foundation/Everywhere). Již od zaþátku vývoje bylo hlavním cílem technologie pĜenést funkcionalitu Windows do webového prohlížeþe a umožnit tak použití nových technologií pĜi vytváĜení webových prezentací. Vzhledem k lepší orientaci zde nebudu odkazovat na dĜívČjší verze jako na WPF/E, ale radČji i u tČchto verzí budu mluvit o technologii Silverlight. První verzí byl, jak již oznaþení napovídá, Silverlight 1.0 (dále SL1.0). Tato verze umožĖovala použít pouze nČkolik málo elementĤ jazyka XAML. Velmi dĤležitým faktem je, že veškerá interaktivita byla zajišĢována Javascriptem. Propojení XAML a Javascriptu bylo pĜímé, tedy skripty nebyly kompilované. SL1.0 neobsahoval žádné "layout komponenty", hlavním prvkem byl element