Tvorba internetových aplikací pomocí technologie Microsoft Silverlight

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 a všechny ostatní komponenty se musely umisĢovat absolutnČ pomocí souĜadnic. Grafický design byl zajištČn pomocí 2D geometrických tvarĤ, element <StoryBoard> umožĖoval jednoduché animace a také bylo možno zobrazovat obrázky a video. Velmi zajímavým poþinem bylo použití tzv. "štČtcĤ" [brush], díky nimž šlo vyplnit obrazce buć jednou barvou, lineární interpolací více barev, obrázkem þi dokonce videem. Jakousi "mezi-verzí" byl Silverlight 1.1, vydaný velmi brzy po uvedení verze 1.0. Hlavním aspektem této verze byl "multiplatformní CLR". Šlo o spojení technologie Silverlight s platformou .NET, což velmi rozšíĜilo využití technologie a usnadnilo vývoj internetových aplikací. Po nČkolika mČsících, tČsnČ pĜed zmiĖovanou konferencí MIX v roce 2007, spoleþnost Microsoft oznámila, že Silverlight 1.1 bude vydán jako samostatná verze Silverlight 2.0, a to z dĤvodu velkého poþtu nových vylepšení. Verze 2.0 již obsahuje balík základních ovládacích prvkĤ a umožĖuje síĢovou komunikaci za použití WCF. ZároveĖ se rapidnČ zvýšil poþet podporovaných XAML elementĤ. Hlavním rysem však je fakt, že interaktivitu lze zajistit všemi

-9-

bČžnými .NET jazyky (C#, Visual Basic) spoleþnČ s jazyky JavaScript a IronPhyton.

1.5

Použití technologie V této þásti se zmíním o hlavních výhodách a nevýhodách, které

technologie Silverlight obnáší a následnČ popíši, jak se s technologií pracuje a jak je podporována v nejpoužívanČjších prohlížeþích.

Výhody Nespornou výhodou technologie Silverlight je spojení s platformou .NET. Díky tomu lze totiž využít hned nČkolika programovacích jazykĤ, je k dispozici velmi široká nabídka knihoven a komponent a to vše se používá velmi podobnČ, jako kdybychom vytváĜeli Windows aplikace. Další velkou výhodou je, že Silverlight je cross-browser multiplatformní technologií. Je tedy podporována témČĜ všemi prohlížeþi (po instalaci pluginu) a je tedy velmi snadno použitelná. Dá se Ĝíci, že jakmile vytvoĜíte Silverlight aplikaci a umístíte ji na web, mČla by se ve všech prohlížeþích chovat naprosto stejnČ a mČla by i stejnČ vypadat. K Silverlight existuje celá Ĝada volnČ stažitelných komponent, aþkoli hlavní výhodou není to, že si lze spoustu komponent stáhnout, ale samotný fakt, že je velmi jednoduché si vlastní komponenty vytváĜet pomocí jazyka XAML. V další kapitole pĜímo popíši jak. Na závČr je tĜeba jako výhodu zmínit i fakt, že v souþasní dobČ je vyvíjena technologie Moonlight jakožto open-source implementace technologie Silverlight. Technologie Moonlight si dává za cíl umožnit spouštČní a vývoj technologie Silverlight na operaþním systému Linux a ostatních Unixových OS. Zatím je k dispozici verze 1.0, která implementuje Silverlight 1.0, v budoucnu se poþítá s verzí 2.0 (v souþasné dobČ existuje pouze alfa verze), která bude implementovat Silverlight 2.0.

- 10 -

Nevýhody Je pravdou, že Silverlight pĜichází trochu pozdČ, tedy alespoĖ co se týþe konkurence pro Adobe Flash. Flash je v souþasné dobČ již mnohokrát vylepšenou, stabilní a všudypĜítomnou technologií a Silverlight bude mít co dČlat, aby tento pĜedstih dohnal. Mezi nevýhody dále podle mého názoru patĜí také nástroje pro návrh grafického designu Silverlight aplikací - Expression Blend a Expression Design. Tyto nástroje jsem vyzkoušel a z mého pohledu se zdaleka nemohou vyrovnat nejþastČji používanému nástroji Adobe Photoshop. Velkou nevýhodou technologie Silverlight je fakt, že neexistuje podpora mobilních zaĜízení (Ĝeþ je o SL 2.0). Spoleþnost Microsoft ještČ pĜed nedávnem tvrdila, že Silverlight bude podporován na poslední verzi Windows Mobile, ale zatím podpora stále chybí. Vzhledem k tomu, že pro vytváĜení Silverlight aplikací je tĜeba mít MS Visual Studio, je tĜeba poþítat s tím, že zatím neexistuje vhodná a stabilní cesta, jak tento software spustit na jiném operaþním systému než MS Windows. Na závČr bych uvedl fakt týkající se technologie Silverlight, který je podle mého názoru velmi problémový. Tím je naprostá zpČtná nekompatibilita pluginu pro zobrazení Silverlight aplikací v prohlížeþi. To znamená, že pro správné zobrazení aplikace vytvoĜené napĜíklad ve verzi SL 1.1 musí mít uživatel nainstalovanou právČ tu samou verzi. Problém nastane ve chvíli, kdy má uživatel nainstalovanou verzi novČjší a pĜesto se mu aplikace nezobrazí. V tomto smČru tedy Silverlight zatím nemĤže konkurovat ostatním technologiím (napĜ. Adobe Flash).

- 11 -

1.6

PotĜebné znalosti Jak jsem již uvedl výše, technologie Silverlight je založena na kombinaci

jazyka XAML se standardními .NET jazyky. Již z této základní charakteristiky vyplívá, že hlavní potĜebnou dovedností je znalost jazyka XAML. Tento programovací jazyk zajišĢuje grafický design aplikace. Co se týþe interaktivity aplikace, k tomu již mĤžeme použít jednu z více možných alternativ. Já pracuji s jazykem C# a tento bude použit i pĜi vysvČtlování jednotlivých pĜíkladĤ v této publikaci. KromČ tohoto jazyka lze použít jazyky Visual Basic, JScript, IronRuby a IronPhyton. Pokud uživatele zajímá tato technologie a má v úmyslu s její pomocí vyvíjet internetové aplikace, pak nejsnazší cesta povede pĜes technologii ASP.NET, která je technologii Silverlight nejpodobnČjší. Pokud již uživatel ASP.NET ovládá, pak staþí jen pĜejít na principy WPF, WCF a dalších nových technologií spoleþnosti Microsoft. Pak již Silverlight nebude dČlat žádné problémy.

- 12 -

1.7

Podpora prohlížeþĤ V následující tabulce je znázornČno, jaké prohlížeþe a na jakých operaþních

systémech

podporují

technologii

Silverlight.

OsobnČ

jsem

otestoval

funkcionalitu technologie na prohlížeþích Internet Explorer 7, Mozilla Firefox 3.0.6, Google Chrome, Opera 9.63, Netscape Navigator 9 a Safari 3.2.2, a to za použití operaþního systému Windows XP Professional SP3. Jelikož není možné mít nainstalované zároveĖ dvČ verze Silverlight, testoval jsem pouze verzi 2.0, neboĢ právČ touto verzí se zabývá celá tato práce. Následující tabulka zobrazuje výsledky testování.

OS Windows XP Windows Vista Mac OS X

Opera

Netscape

9.63

9

ANO

ANO

NE

ANO

ANO

ANO

ANO

NE

ANO

ANO

NE

NE

NE

ANO

IE7

Firefox 3

Chrome

ANO

ANO

ANO NE

Safari

BČhem testování se zobrazoval Silverlight ve všech podporovaných prohlížeþích stejnČ a pracoval stabilnČ. Velmi zásadním problémem však zĤstává zmiĖovaná zpČtná nekompatibilita pluginu. Ve všech prohlížeþích nastávaly problémy v pĜípadech, kdy zobrazovaná aplikace byla vytvoĜena v jiné verzi Silverlight, než jaká je nainstalována v prohlížeþi. V prohlížeþích Internet Explorer a Mozilla Firefox se pĜi zobrazení starších verzí (1.0, 1.1) zobrazilo upozornČní, že Silverlight plugin není nainstalován a pĜi následné instalaci instalátor vypsal, že je již nainstalována novČjší verze, tudíž instalace neprobČhne. Safari nezobrazoval starší verze vĤbec a Chrome nesprávnČ. Jediným možným Ĝešením je instalovat všechny verze Silverlight postupnČ od

- 13 -

nejstarší po nejnovČjší, aby se každá verze zapsala do prohlížeþĤ. Pak se všechny verze zobrazují bez problémĤ. Testování neprobČhlo na žádných distribucích Linuxu, jelikož zde Silverlight jako takový vĤbec není podporován. Pro OS Linux je vyvíjen systém Moonlight, jehož cílem je zobrazovat a vyvíjet Silverlight aplikace na tomto operaþním systému.

- 14 -

2

XAML

Co je to XAML? Extensible Application Markup Language (XAML) byl pĜedstaven souþasnČ s technologií WPF, na které je založen systém Windows Vista a je na ní stavČn i operaþní systém Windows Seven. XAML je deklarativní programovací jazyk, syntakticky vycházející z jazyka XML. Skládá se tedy s jednotlivých elementĤ, jejichž názvy ("tagy") se zapisují v ostrých závorkách. Tagy se vyskytují buć samostatnČ - tzv. "selfclosing", tedy "samouzavírací" nebo ve dvojicích, kde jeden je poþáteþní a druhý je uzavírací. Pokud se nČjaké elementy vyskytují mezi poþáteþním a uzavíracím tagem jiného elementu, pak tvrdíme, že tyto elementy jsou "potomci" þi "subelementy" onoho nadĜazeného elementu, jenž je jejich "rodiþem". Velmi užiteþnou vlastností jazyka XAML je fakt, že naprostou vČtšinu parametrĤ jednotlivých elementĤ lze použít jako jejich subelementy. NapĜ. chceme-li nastavit barvu pozadí obdélníku, mĤžeme to udČlat takto:

Nebo takto: <SolidColorBrush Color="Blue"/>

Díky tomuto zpĤsobu zadávání parametrĤ je možné vytvoĜit mnohem komplexnČjší styl pozadí (lineární interpolace, obrázek, videoklip, atd.) velmi jednoduše a pĜehlednČ. Stejným zpĤsobem lze napĜ. na tlaþítko umístit místo základního popisku obrázek nebo jakýkoli jiný objekt, popĜ. i více objektĤ najednou. Více o grafickém designu vysvČtlím dále.

- 15 -

Jazyk XAML je nedílnou souþástí technologie Silverlight, jelikož s jeho pomocí se vytváĜí grafický design Silverlight aplikací (stejnČ jako v pĜípadČ WPF). Jak již bylo zmínČno v pĜedchozí kapitole, technologie Silverlight umožĖuje používat pouze podmnožinu všech XAML elementĤ využívaných ve WPF. V tomto oddílu popíši všechny dĤležité elementy a jejich parametry a na nČkolika pĜíkladech ukáži, jak je tento jazyk koncipován a jak se používá.

- 16 -

2.1

Popis elementĤ použitelných v Silverlight 2.0 Všechny elementy jazyka XAML mají dva základní typy parametrĤ, které

mĤžeme rozdČlit do dvou hlavních skupin. Jsou to parametry oznaþující grafický vzhled (vlastnosti) tlaþítka a parametry urþující jeho chování (události). Události jsou ve své podstatČ odkazy na metody, které jsou zavolány po urþité události. NapĜ. "Je-li stisknuto tlaþítko, zavolej metodu Button_Click".

2.2

KoĜenový element <UserControl> Element <UserControl> je vždy nejnadĜazenČjším elementem na stránce

a obsahuje všechny ostatní elementy. Zpravidla je vytvoĜen automaticky hned po vytvoĜení projektu. Na jedné stránce musí být stejnČ jako v XML pouze jeden hlavní element. To znamená, že element <UserControl> se mĤže vyskytovat v každém XAML souboru pouze jednou. DĤležité také je, že za ukonþovacím tagem již nesmí nic následovat. Element <UserControl> má Ĝadu parametrĤ shodnou s dalšími elementy (napĜ. výška, šíĜka, barva pozadí, atd.), ale hlavní parametr, který uvedu, je "xmlns". Díky tomuto parametru mĤžeme vkládat do XAML souboru reference na nejrĤznČjší namespace .NET Frameworku, zejména pak na namespace obsahující definice elementĤ používaných v Silverlight.

2.3

Layout - rozvržení komponent na stránce Tato skupina elementĤ slouží k uspoĜádání a rozvržení komponent na scénČ

aplikace.

MĤžeme

pomocí

nich

umisĢovat

objekty

buć

absolutnČ

(souĜadnicemi X a Y), nebo relativnČ (nastavováním vzdáleností mezi jednotlivými objekty, atd.). Do této skupiny patĜí elementy , <StackPanel> a .

- 17 -

Tento element je nejjednodušší z tĜí výše zmínČných. Jde o jakousi pracovní plochu, na kterou je možné umisĢovat objekty pomocí souĜadnic. Tento postup umisĢování je sice velmi jednoduchý, ale zároveĖ velmi pracný. Element nemá žádné specifické parametry, díky kterým bychom mohli jednoduše mČnit uspoĜádání objektĤ. Následující kód ukazuje, jakým zpĤsobem umístit tlaþítko na stránce za pomoci elementu : <Button Width="100" Height="30" Content="Click" Canvas.Left="30" Canvas.Top="50"/>

Tlaþítko bude vzdáleno 30px od levého a 50px od horního okraje scény. Výsledek bude vypadat takto:

<StackPanel> Jak je vidČt, použití elementu je velmi neefektivní, protože každému objektu, který je elementu pĜidružený, musíme zadávat zvlášĢ souĜadnice. Tuto nevýhodu Ĝeší element <StackPanel>. Jeho úkolem je Ĝazení objektĤ za sebou vodorovnČ nebo svisle. Díky této možnosti mĤžeme velmi jednoduše zobrazovat napĜíklad položky menu nebo seznam obrázkĤ, aniž bychom museli každému jednotlivému objektu zadávat pĜesnou pozici. Staþí pouze u jednotlivých objektĤ použít parametr "Margin", což je údaj v pixelech, Ĝíkající, jak daleko od objektu mĤže být jiný objekt. Jak je uvedeno výše,

- 18 -

<StackPanel> umožĖuje Ĝadit objekty vodorovnČ nebo svisle. O volbu smČru se stará parametr "Orientation", který mĤže nabývat hodnoty "Horizontal" nebo "Vertical". Pakliže zvolíme u elementu <StackPanel> orientaci vertikálnČ, mĤžeme u jednotlivých objektĤ zvolit þtyĜi možná zarovnání pomocí parametru "HorizontalAlignment" - Left, Center, Right a Stretch (= Roztáhnout). Použijeme-li pro StackPanel orientaci horizontální, mĤžeme u jednotlivých objektĤ nastavit zarovnání analogicky pomocí parametru "VerticalAlignment", který mĤže nabývat hodnot Top, Center, Bottom a opČt Stretch. V následující ukázce kódu jsou nastaveny u objektĤ rĤzné hodnoty parametru "Margin" a "HorizontalAlignment": <StackPanel Background="White" Orientation="Vertical"> <Button Width="100" Height="30" Content="Click" Margin="10" HorizontalAlignment="Left"/> <Button Height="30" Content="Click" Margin="60,10" HorizontalAlignment="Stretch"/> <Button Width="100" Height="30" Content="Click" Margin="0" HorizontalAlignment="Right"/> <Button Width="100" Height="30" Content="Click" Margin="0" />

Výsledek vypadá takto:

Jak je vidČt, parametr "Margin" mĤžeme použít nČkolika zpĤsoby. Pokud použijeme jednu þíselnou hodnotu, bude nastaven pĜíslušný odstup na všech stranách. Pokud ale použijeme dvČ þíselné hodnoty oddČlené þárkou, pak první hodnota vyjadĜuje vodorovný a druhá hodnota svislý odstup. Pokud by nám ani

- 19 -

toto nestaþilo, mĤžeme zadat i þtyĜi þíselné hodnoty oddČlené þárkami, kterými zadáme odstup z každé strany zvlášĢ. Pokud u nČkterého z objektĤ vynecháme parametr "HorizontalAlignment", pak bude automaticky použita hodnota "Stretch". Pokud má ovšem objekt zároveĖ nastavenou šíĜku, má tento parametr pĜed roztažrním pĜednost a objekt se zarovná na stĜed, tedy bude použita hodnota"Center". Asi nejmocnČjším nástrojem pro rozmisĢování objektĤ na scénČ je element . Tento element totiž umožĖuje rozdČlovat scénu na Ĝádky a sloupce a vytváĜet tak síĢ bunČk, do kterých je možné umisĢovat jednotlivé objekty. Použití elementu je již relativnČ složité. Proto tentokrát zvolím opaþný postup. NejdĜíve ukáži príklad kódu a teprve poté na nČm vysvČtlím jednotlivé þásti a nastavení. Zde je tedy ukázka kódu: <Button <Button <Button <Button

Width="80" Width="80" Width="80" Width="80"

Height="30" Height="30" Height="30" Height="30"

Content="Click" Content="Click" Content="Click" Content="Click"

Takto bude vypadat výsledek:

- 20 -

Grid.Column="0" Grid.Column="1" Grid.Column="1" Grid.Column="2"

Grid.Row="1" Grid.Row="0" Grid.Row="2" Grid.Row="1"

/> /> /> />

Jak je vidČt na obrázku, scéna je rozdČlena na tĜi Ĝádky a tĜi sloupce. Toto rozvržení je tĜeba prvnČ nadefinovat. PrávČ k tomu slouží dva subelementy elementu Grid - "Grid.ColumnDefinitions" a "Grid.RowDefinitions". Z kódu je jistČ naprosto zĜejmé, jakým zpĤsobem se deklarují jednotlivé Ĝádky a sloupce. Každý nadeklarovaný Ĝádek a sloupec automaticky dostane pĜidČlen index (zaþínající nulou), díky kterému je pak možno se na nČj odkázat. To je vidČt u jednotlivých tlaþítek, která mají dva parametry - "Grid.Column" a "Grid.Row". Jejich þíselná hodnota vyjadĜuje, v jakém sloupci a Ĝádku se jednotlivá tlaþítka nacházejí. Použití elementu je velmi praktické, ale pro rozmisĢování jednotlivých objektĤ, jako jsou tlaþítka nebo textová pole na scénČ, se pĜíliž nehodí. NejþastČji se používá pro rozdČlení scény na nČkolik þástí, v nichž se pak rozmisĢují jednotlivé komponenty pomocí elementĤ <StackPanel> a .

- 21 -

2.4

Základní komponenty V pĜedchozích nČkolika odstavcích jsem uvedl nČkteré základní

komponenty jako tlaþítko neto textové pole. V následujícím oddíle popíši nejdĤležitČjší z nich a ukáži zpĤsob jejich použití. <Button> Tlaþítko je snad nejzákladnČjší interaktivní prvek, který je možno použít. Mezi jeho klíþové vlastnosti patĜí "Content", urþující popisek tlaþítka, þi napĜ. "Cursor", udávající, na co se zmČní kurzor po najetí nad tlaþítko. Asi nejþastČji používanou tzv. událostí je "Click", jejíž hodnota udává název metody, která je vykonána po stisknutí tlaþítka. Následují dvČ ukázky kódu, na kterých je ukázáno hlavnČ použití subelementu <Button.Content>, díky þemuž je možno radikálnČ mČnit vzhled tlaþítka. <Button Width="80" Height="30" Content="Click" Cursor="Hand" IsEnabled="True" Click="Button_Click" />

Takto vypadá základní tag. Je zde nastavena šíĜka, výška, popisek tlaþítka "Click", zmČna kurzoru na "Hand", tlaþítko je aktivní a po jeho kliknutí se zavolá metoda "Button_Click". <Button Width="80" Height="30" Cursor="Hand" IsEnabled="True" Click="Button_Click" > <Button.Content> <StackPanel Orientation="Horizontal"> <Ellipse Fill="Red" Height="10" Width="10"/> <Ellipse Fill="Orange" Height="10" Width="10" Margin="3,0"/> <Ellipse Fill="Green" Height="10" Width="10"/>

Zde je použit subelement <Button.Content> jako náhrada za parametr "Content". Jak je vidČt na obrázku napravo, použití subelementu místo parametru umožnilo pĜidání dalších objektĤ do popisku tlaþítka, v tomto pĜípadČ jsou to tĜi koleþka v barvách semaforu (více o elementu <Ellipse> naleznete dále). DĤležité je použití elementu <StackPanel>, jelikož XAML umožĖuje vložit za parametr "Content" jen jeden

- 22 -

element. Pokud bychom napsali cokoli za uzavírací tag elementu <StackPanel>, debugger nahlásí syntaktickou chybu. Element vyjadĜuje statické nepĜepisovatelné textové pole. S jeho pomocí se dají vytváĜet nadpisy, popisky objektĤ, atd. Nastavením jeho mnoha rĤzných parametrĤ mĤžeme formátovat zobrazovaný text, urþovat výšku ĜádkĤ v odstavci nebo zarovnávat text bČžnými zpĤsoby. Následující pĜíklad ukazuje základní použití a nastavení všech dĤležitých parametrĤ.

Výsledek tohoto zápisu vidíme na obrázku napravo. Jelikož není pĜímo nastavena

velikost

textového

pole,

zvČtšuje se automaticky v závislosti na textu. K této ilustraci byla nastavena pozice textového pole na scénČ pomocí souĜadnic, ale z dĤvodu zachování pĜehlednosti není toto nastavení vidČt v ukázce kódu. Oproti statickému elementu je tento element pĜímo urþen k tomu, aby do nČj uživatel byl schopen zadat text. Nejedná se tedy z vizuálního hlediska pouze o text samotný, ale je to rámeþek, kterému je možné nastavit pozadí, barvu a šíĜku okraje, atd. ZároveĖ má parametry jako napĜ. "SelectedText" nebo "VerticalScrollBarVisibility", které uchovávájí užiteþné informace o textu v textovém poli a grafické stránce komponenty. SamozĜejmČ nechybí ani možnost formátovat text a zarovnávat odstavce, jako tomu bylo u pĜedchozího elementu.

- 23 -



Na tomto pĜíkladČ je vidČt nČkolik základních nastavení, která umožĖuje. Výsledek tohoto zápisu je zde:

Dalším velmi þasto používaným prvkem je , který slouží pĜedevším k výbČru jedné z více položek. Element obsahuje opČt Ĝadu parametrĤ ovlivĖujících formát zobrazovaných položek. Mezi nČ patĜí zejména formát textu, barva pozadí a okraje, atd. KromČ tČchto všeobecných parametrĤ mĤžeme nastavovat také napĜ. délku zobrazovaného seznamu, aktuálnČ oznaþenou položku nebo mĤžeme sledovat, zda je tzv. roztažen seznam položek. Jelikož samotný jazyk XAML slouží hlavnČ pro grafický návrh scény, neumí pĜímo pracovat se seznamy. O mnoho jednodušší je tedy pĜiĜadit do prvku seznam položek právČ kódovČ. To je i pĜípad následující ukázky:

Jak je vidČt, jazyk XAML je zde použit pouze pro nastavení vzhledu prvku. Po pĜidání seznamu mĤže komponenta vypadat následovnČ (postup pro pĜidání seznamu zde není vysvČtlen, neboĢ tato problematika zasahuje až do tĜetí kapitoly):

- 24 -

Na obrázku je komponenta ve stavu "roztažena". To znamená, že došlo ke stisku horního tlaþítka a zobrazil se seznam položek. Výšku tohoto zobrazení urþuje v ukázce použitý parametr "MaxDropDownHeight" udávaný v pixelech. Element , stejnČ jako další prvky zobrazující seznamy, jsou vČtšinou používané ve spojení se šablonami. Tento zpĤsob utváĜení grafického vzhledu je vysvČtlen dále. Poslední ze základních komponent, které zde popíši, je prvek . Jak již jeho pojmenování naznaþuje, jde o prvek zobrazující nČjaký seznam. VČtšina jeho parametrĤ je naprosto stejná jako u elementu , popsaném výše. KromČ základních formátovacích parametrĤ jsou tu navíc jen parametry zarovnání položek svisle a vodorovnČ a dále parametry urþující viditelnost svislého a vodorovného posuvníku.

Na ukázce kódu je opČt vidČt pouze nastavení velikosti komponenty. Po pĜidání seznamu položek bude vypadat takto:

Vertikální posuvník se automaticky zviditelnil, jelikož délka seznamu pĜekroþila zadanou výšku.

- 25 -

2.5

Grafický design Souþástí jazyka XAML jsou kromČ základních komponent také jednoduché

grafické prvky, díky kterým je možné vytváĜet grafický design scény. Mezi tyto prvky patĜí úseþka, elipsa, obdélník, okraj a cesta. Tyto komponenty jsou þistČ grafické, ale to neznamená, že je nemĤžeme použít i jako interaktivní prvky. Ve skuteþnosti slouží právČ k tomu, že jimi pomocí šablon zcela pĜetváĜíme vzhled základních komponent. Tímto postupem se mĤžeme zcela oprostit od klasického vzhledu tlaþítek, textových polí a ostatních komponent. Tomuto tématu je vČnován následující oddíl, na následujících nČkolika stranách si ukážeme základní použití zmínČných grafických prvkĤ na scénČ. ÚplnČ nejzákladnČjším grafickým prvkem je úseþka. Jde v podstatČ o spojnici dvou bodĤ o zadaných souĜadnicích. Její vzhled mĤžeme modifikovat pomocí nČkolika parametrĤ jako napĜ. šíĜka štČtce, styl þáry (plná nebo pĜerušovaná), samozĜejmČ barva nebo tvar zakonþení. NejdĤležitČjší dvojící parametrĤ jsou parametry "X1","Y1", "X2" a "Y2", které udávají souĜadnice poþáteþního a koncového bodu úseþky v pixelech.

Tento pĜíklad použití definuje þervenou pĜerušovanou úseþku vedoucí z bodu [5,5] do bodu [100,75]. Výsledek vidíme vpravo na obrázku. , <Ellipse> Dalšími základními tvary sloužícími pro tvorbu grafického designu scény jsou elementy a <Ellipse>. Element pĜedstavuje obdélník, u kterého mĤžeme nastavovat barvu nebo styl výplnČ, šíĜku a barvu okrajĤ nebo napĜ. zaoblení rohĤ. Klasický zápis kódu vypadá takto:

- 26 -



Výsledkem tohoto zápisu je šedivý obdélník o velikosti 100 x 50 pixelĤ s þerným okrajem a zaoblením rohĤ s polomČrem 5 pixelĤ - viz. obrázek vpravo. Element <Ellipse> má vesmČs stejné parametry jako element , s tím rozdílem, že po zadání rozmČrĤ a dalších parametrĤ se vykreslí elipsa danné velikosti. Následuje opČt ukázka zápisu a výsledné zobrazení. <Ellipse Width="100" Height="50" Fill="Gray" Stroke="Black" StrokeThickness="2" />

Element je obdobou elementu . Jedinným rozdílem oproti tomuto elementu je nČkolik parametrĤ sloužících ke správČ elementĤ obsažených uvnitĜ elementu . Tento element je totiž primárnČ urþen k tomu, aby byl do nČj vkládán nČjaký obsah. Jak již jeho pojmenování napovídá, jde tedy o jakési ohraniþení, které mĤže obsahovat další prvky na scénČ. Mezi zmínČné parametry spravující obsah elementu patĜí napĜ. parametr "Child", ve kterém je uchováván odkaz na jeho "potomka". Je dĤležité zmínit, že element mĤže obsahovat pouze jeden subelement (s výjimkou svých vlastních parametrĤ použitých jako subelementy). Chceme-li do elementu vložit více prvkĤ, pak je tĜeba je ještČ uzavĜít do nČkterého z elementĤ zajišĢujících rozvržení objektĤ na scénČ, jako je napĜ. <StackPanel>. Na následujícím pĜíkladČ je ukázáno použití elementu spoleþnČ s elementem <StackPanel>, do nČhož je uzavĜeno tlaþítko a popisek. <StackPanel Orientation="Horizontal" Margin="3,0"> <Button Content="Click" Height="25" Width="50" />

- 27 -

Výsledné zobrazení vypadá takto:

<Path> Posledním a nejsložitČjším grafickým prvkem je "cesta". Pomocí tohoto prvku mĤžeme kreslit na scénu složitČjší geometrické tvary. Existují dva zpĤsoby, jak popsat složitČjší geometrické obrazce. Jedním z nich je velmi jednoduchý, avšak dosti nepĜehledný, programovací jazyk, který se vepisuje pĜímo jako parametr "Data" elementu <Path>. Jeho syntaxe je velmi dobĜe zdokumentována na webu1), nebudu ho zde proto pĜíliž detailnČ popisovat. Uvedu jen pĜíklad tvaru, na kterém popíši jednotlivé zákonitosti. <Path Stroke="Black" Fill="Green" Data="M 10,100 C 10,300 200,-200 200,100 Z" />

Tato ukázka definuje tvar pĜímo pomocí parametru

"Data".

Písmeno

"M"

znaþí

poþáteþní bod kĜivky. KĜivka tedy zaþíná na souĜadnicích [10,100]. Následuje pĜíkaz "C", který urþuje, že z poþáteþního bodu povede Bezierova kĜivka. Za tímto pĜíkazem se nachází tĜi dvojice souĜadnic. První dvČ dvojice popisují kontrolní body Bezierovy kĜivky a poslední dvojice urþuje koncový bod. Poslední pĜíkaz je písmeno "Z", znaþící, že celá kĜivka je uzavĜená, tedy že z koncového bodu Bezierovy kĜivky vede spojnice k poþáteþnému bodu. KromČ této definice tvaru obsahuje element <Path> ještČ parametry "Stroke" - barva þáry a "Fill" barva výplnČ. Druhou možností, jak definovat složitČjší tvary pomocí elementu <Path>, je vnoĜení nČkolika jednoduchých tvarĤ do subelementu <Path.Data>. Takto je možné seskupovat více tvarĤ na scénČ a pĜistupovat k nim jako k jednomu objektu.

- 28 -

<Path Margin="10" Fill="Blue" Stroke="Orange" StrokeThickness="5"> <Path.Data> <EllipseGeometry Center="50,50" RadiusX="75" RadiusY="25" /> <EllipseGeometry Center="50,50" RadiusX="25" RadiusY="75" />

Na tomto pĜíkladČ je ukázáno vytváĜení složitČjších tvarĤ pomocí subelementu , který je vložen do subelementu <Path.Data>. slouží jako skupina geometrických obrazcĤ, které se posléze tváĜí jako jeden objekt na scénČ. V našem pĜípadČ jsme spojili jeden obdélník () a dvČ elipsy (<ElipseGeometry>). Element má specifický velmi užiteþný parametr "FillRule", který udává zpĤsob vyplĖování dílþích tvarĤ. Pokud je hodnota tohoto parametru nastavena na "EvenOdd", pak se spolu sousedící plochy vyplĖují stĜídavČ. Je-li hodnota nastavena na "NonZero", pak je vyplnČna celá plocha výsledného obrazce stejnou barvou nastavenou v parametru "Fill" elementu <Path>. Výsledný tvar odpovídající pĜíkladu vypadá následovnČ. Na obrázku je ukázán rozdíl v hodnotČ parametru "FillRule".

- 29 -

2.6

Styly, Šablony Nyní je tĜeba vysvČtlit rozdíl mezi dvČma základními XAML soubory

v projektu. Jsou to soubory "page.xaml" a "app.xaml". Vše, co jsem zatím popisoval z jazyka XAML se týkalo prvního z obou jmenovaných. Soubor "page.xaml" je urþen pro správu všech prvkĤ na scénČ. Do nČj tedy vepisujeme všechno, co na scénČ má být zobrazeno. Naopak soubor "app.xaml" je urþen kromČ jiného hlavnČ ke správČ pozadí projektu. Tímto pozadím jsou mínČny právČ definice stylĤ a šablon, které urþují vzhled jednotlivých komponent, mĤžeme sem zaĜadit i pĜeddefinované animace, vĤbec všechna nastavení týkající se celé Silverlight aplikace. Tomuto souboru definic se také Ĝíká "statické zdroje". Ze všech tČchto globálních nastavení jsou nejþastČji používané právČ styly, šablony a animace. V této þásti je popsáno, jak vytváĜet styly a šablony komponent. <Style> Element <Style> je velmi mocným prvkem sloužícím k tvorbČ vizuální podoby komponent. Jeho použití je velmi podobné technologii CSS, ve které jsou definice barev, formátu písem a další parametry objektĤ na stránce uchovávány v samostatném souboru nebo v oddČlené þásti zdrojového kódu a objekty na stránce se na tyto definice odkazují pomocí zvoleného oznaþení. Tento zpĤsob umožĖuje velmi jednoduché a pĜehledné psaní zdrojového kódu, protože autor nemusí každému dalšímu prvku na stránce definovat vzhled od základu. V následujícím pĜíkladČ použijeme element , konkrétnČ to bude šedivý obdélník ukázaný v pĜíkladu výše.

Z ukázky kódu je jasnČ patrné, že pro zobrazení tohoto obdélníku je potĜeba spousta parametrĤ a bylo by velmi pracné zapisovat je všechny znova, pokud bychom chtČli vytvoĜit další

- 30 -

obdélník o stejných rozmČrech, jen napĜ. s jinou barvou výplnČ. Abychom se tomuto pracnému zapisování vyhnuli, použijeme element <Style> a vytvoĜíme si vlastní styl. Zápis tohoto stylu bude vypadat takto (pĜipomínám, že element <Style> bude v souboru "app.xaml"): <Style x:Key="rec" TargetType="Rectangle"> <Setter Property="Height" Value="50" /> <Setter Property="Width" Value="100" /> <Setter Property="Stroke" Value="Black" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="RadiusX" Value="5" /> <Setter Property="RadiusY" Value="5" />

Element <Style> má dva velmi dĤležité parametry. První z nich je "x:Key", jehož hodnota udává pojmenování stylu pro pozdČjší použití u komponenty na scénČ. Hodnota druhého parametru, "TargetType", Ĝíká, jakému typu objektu je styl urþen. V našem pĜípadČ je tedy tato hodnota rovna "Rectangle". V tČle elementu <Style> se nachází nČkolik subelementĤ <Setter>. Tento element slouží k uchovávání definic jednotlivých parametrĤ objektu. Mezi jeho parametry musí vždy patĜit dvojice parametrĤ "Property" a "Value", z nichž "Property" oznaþuje název parametru cílového objektu a "Value" uchovává hodnotu tohoto parametru. Poté, co jsme vytvoĜili styl s názvem "rec", staþí místo dlouhého výpisu parametrĤ v elementu použít parametr "Style" následujícím zpĤsobem:

Jak je vidČt na zdrojovém kódu, jako hodnotu parametru "Style" nestaþí zapsat pouze název vytvoĜeného stylu. Je tĜeba použít klíþové slovo "StaticResource" spolu s názvem stylu a to vše ve složených závorkách. Debbuger pak z tohoto zápisu pĜi pĜekladu pĜeþte informaci, že existuje styl s názvem "rec" umístČný v statických zdrojích aplikace - tedy v souboru "app.xaml". Do elementu ještČ doplníme parametr "Fill" a

- 31 -

nastavíme barvu pozadí na þervenou a výsledkem bude obdélník totožný s pĤvodním, jen se bude lišit barva pozadí (viz. obrázek vpravo).