Microsoft Silverlight 2.0

Příloha 1:

Příru čka pro za čínající programátory

Ji ří Kolda

2009 Obsah

1. Ú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

2. 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

3. C#...... 48

3.1. PROPOJENÍ C# A XAML...... 48

4. VÝVOJOVÁ PROST ŘEDÍ ...... 51

4.1. MICROSOFT VISUAL STUDIO 2008...... 51

4.2. MICROSOFT BLEND 2...... 54

5. 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

- 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í.

Opera Netscape OS IE7 Firefox 3 Chrome Safari 9.63 9 Windows ANO ANO ANO ANO NE ANO XP Windows ANO ANO ANO ANO NE ANO Vista Mac OS X NE ANO NE NE NE ANO

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. "self- closing", 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:

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 Element 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 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 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

- 17 -