Vysoká škola ekonomická v Praze - info.sks.czinfo.sks.cz/www/zavprace/soubory/2011/68370.pdf ·...
Transcript of Vysoká škola ekonomická v Praze - info.sks.czinfo.sks.cz/www/zavprace/soubory/2011/68370.pdf ·...
Vysoká škola ekonomická v PrazeFakulta informatiky a statistiky
Vyšší odborná škola informačních služeb v Praze
Petr Šamša
Webové rozhraní s podporou technologie Silverlight
Bakalářská práce
2010
ProhlášeníProhlašuji, že jsem bakalářskou práci na téma „Návrh webového rozhraní s podporou
technologie Silverlight“ zpracoval samostatně a použil pouze zdrojů, které cituji a uvádím v
seznamu použité literatury.
V Praze dne 15. prosince 2010 Podpis
Anotace
Internet je v posledních letech nedílnou součástí každodeního života a RIA aplikace se snaží
zaujmout svým všestraným využitím. Práce se bude zabývat vytvořením dílčích příkladů a
vytvořením výsledného webového rozhraní s podporou technologie Microsoft Silverlight,
který si v současné době získává oblibu u uživatelů, díky podpoře streamingu, kterému se
budu věnovat v teoretické i praktické části.
V teoretické části se budu zabývat jednotlivými technologiemi, které budou obecně popsány,
dále historií a provedu porovnání technologií dvou konkurenčních technologií, a to Adobe
Flash a Microsoft Silverlight. Další část práce se bude věnovat již konkrétním praktickým
příkladům, kdy vytvořím postupně webové stránky a webové rozhraní s použitím
streamingového videa s grafickými tlačítky a návštěvní knihou. Cílem práce je vytvořit
ukázkovou webovou prezentaci umožňující stream videa a využití databáze.
Abstract
Internet is in recent years an necessary part of everyday life and RIA applications are trying
like his broadly use. The work will creating examples of partical and resulting web interface
with support of Microsoft Silverlight, which is more popular for users, thanks to support
streaming, which I will discuss in the teoretical and practical part.
In the theoretical part I will be devoting with various technologies, which are generally
described, history and then compares two competing technologies, Adobe Flash and
Microsoft Silverligh. Next part is devoted to practical specifical examples, when I gradually
create web pages and web interface using streaming video with graphical buttons and
guestbook. The aim of the work is to create the hample prezentation of web video stream
and use of the database.
Poděkování
Rád bych poděkoval vedoucímu mé bakalářské práce Ing. Bc. Davidu
Klimánkovi, Ph.D. za jeho ochotu a čas věnovaný řešení této problematiky.
Obsah 1 Úvod.......................................................................................................................................7 2 Cíl práce.................................................................................................................................8 3 Terminologický slovník.........................................................................................................9 4 Technologie pro RIA aplikace.............................................................................................11
4.1 Technologie Microsoft Silverlight................................................................................11 4.2 Windows Presentation Foundation / XAML / Expression............................................14 4.3 Adobe Flash..................................................................................................................15 4.4 AJAX............................................................................................................................16 4.5 Závěr a porovnání.........................................................................................................17
5 Porovnání technologií Silverlight a Flash............................................................................18 6 Nástroje pro tvorbu..............................................................................................................21
6.1 Microsoft Visual Studio 2010 Ultimate........................................................................21 6.2 Microsoft Expression Blend 2.......................................................................................23
7 Definice požadavků na vytvářenou grafickou aplikaci........................................................26 8 Dílčí příklady.......................................................................................................................27
8.1 XAML preloader...........................................................................................................27 8.2 Vytvoření šablony pro tlačítko......................................................................................31 8.3 Vytvoření návštěvní knihy............................................................................................34 8.4 Streamování videa.........................................................................................................43
9 Návrh webového rozhraní....................................................................................................47 10 Možnosti integrace Silverlight aplikace do webových stránek..........................................49
10.1 Integrace pomocí JavaScriptu.....................................................................................49 10.2 Integrace pomocí ASP.NET Silverlight Server Control.............................................50 10.3 Integrace pomocí (X)HTML.......................................................................................50 10.4 Nejčastější chyby........................................................................................................51
11 Závěr..................................................................................................................................52 12 Použité zdroje.....................................................................................................................53
1 Úvod
Toto téma jsem si vybral, protože se domnívám, že technologie Microsoft Silverlight je
prakticky využitelná pro mnoho podob vizualizace a splnění potřeb dnešních náročných
uživatelů. Vývoji této technologie společnost Microsoft věnuje v současné době značnou
pozornost a snaží se tak získat nejen náskok před konkurencí, ale stejně tak i oblibu u
širokého okruhu uživatelů. Důkazem toho je i skutečnost, že společnost Microsoft vytvořila
Rich Internet Application (RIA), která je tzv. user friendly a podporuje formou webových
stránek http://msdn.microsoft.com, ze kterých jsem ve velké míře také sám čerpal, v
osobním přístupu ve formě přednášek a poskytovaných materiálů.
Vývoj RIA aplikací má společné výhody, aplikace jsou nezávislé na použitých
implementacích kromě AJAXu a plugin pochází od jednoho autoritativního dodavatele. To v
praxi znamená, že odpadá nutnost ladění aplikací pro konktrétní prohlížeč. Jelikož tyto
technologie nejsou závislé na klasických technologiích, jako jsou HTML, CSS a JavaScript,
nemají omezení pro tvorbu rozmanitějších aplikací a poskytují vyšší výkon. Velkou výhodou
je podpora nástrojů a vývojových prostředí pro vývoj jednotlivých aplikací. To umožňuje
kontrola syntaxe, debugging apod.
V teoretické části mé bakalářské práce Vás seznámím s jednotlivými technologiemi, historií a
provedu porovnání technologií pro vývoj RIA aplikací. V praktické části pak vytvořím webové
stránky, obsahující dílčí příklady, které jsou popsány v jednotlivých níže uvedených
kapitolách a grafické rozhraní.
7
2 Cíl práce
Cílem mé bakalářské práce ze zadání je: Webové rozhraní s podporou technologie
Silverlight. Pro splnění cíle jsem si vytýčil tyto dílčí úkoly:
• Seznámení s jednotlivými vývojovými nástroji
• Představení jednotlivých technologií a porovnání
• Vytvoření dílčích ukázkovových příkladů
• Sestavení grafického řešení webové prezentace
V teoretické částí představím technologii Silverlight a její konkurenty na poli RIA aplikací.
Dále se budu zabývat porovnáním dvou největších technologií na trhu, a to Silverlight a
Flash. Popíšu vývojová prostředí Visual Studio 2010 Ultimate a Expression Blend 2 od
společnosti Microsoft a ostatní potřebný software pro vývoj aplikace.
V praktické části navrhnu vlastní webové rozhraní s grafickým řešením, umožňující práci s
databází a streaming videa. Chtěl bych vlastně přiblížit vývojové prostředí, vývoj aplikace
Silverlight, její vložení na webový prostor a spuštění webové prezentace.
8
3 Terminologický slovník
CSS
Cascading Style Sheets neboli kaskádové styly. Je to kolekce metod pro grafickou úpravu
webových stránek
C#
C Sharp je vysoce úrovňový objektově orientovaný programovací jazyk vyvinutý společností
Microsoft zároveň s platformou .NET Framework
HTML
HyperText Markup Language je jedním ze základních značkovacích jazyků pro vytváření
webových stránek na internetu
JavaScript
JavaScript je multiplatformní objektově orientovaný skriptovací jakyk
.NET
je název pro soubor technologií v softwarových produktech, která je dostupná nejen pro web.
Common Language Infrastructure je standardizovaná specifikace jádra .NET, základní
komponentou je Microsoft .NET Framework
PHP
Hypertext Processor je programovací jazyk, který je určený především pro programování
dynamických stránek, nejčastěji se začleňuje přímo do struktury jazyka HTML, XHTML či
WML, což lze využít při tvorbě webových aplikací, PHP lze použít i k tvorbě konzolových a
desktopových aplikací
Plugin
je zásuvný modul, který nepracuje samostatně a pro svůj běh potřebuje jinou aplikaci, které
svým během rozšíří funkčnost
9
RIA
Rich Internet Application je pojem velmi neurčitý, svoji nejasností se blíží k novinářskému
pojmu Web 2.0 a význam této zkratky je internetová podoba aplikací, běžících v prostředí
operačního systému
VSTA
Visual Studio Tools for Applications jako následovník Visual Basic for Applications (VBA) a
VSA (Visual Studio for Applications), VSTA bylo původně vydáno pro práci s Office 2007
WCF
Windows Communication Foundation přinesl .NET Framework 3.0, je to jednotný framework
na vytváření servisně orientovaných aplikací (SOA)
WPF
Windows Presentation Foundation bylo dříve známé jako Avalon a je podmnožinou .NET
Frameworku od verze 3.0, který používá značkovací jazyk XAML pro vytváření RIA aplikací
WYSIWYG
je zkratka anglické věty „What you see is what you get“ česky řečeno: „co vidíš, to dostaneš“,
tato zkratka označuje způsob editace dokumentů v počítačí, při kterém je verze zobrazená
na obrazovce vzhledově totožná s výslednou verzí dokumentu
XAML
Extensible Application Markup Language je deklativní jazyk vyvíjený Microsoftem a založený
na XML, zkratka původně znamenala Extensible Avalon Markup Language, kde Avalon bylo
kódové označení pro WPF
XHTML element object
představuje základní mechanismus pro vkládání externích objektů (obrázky, zvuk a video) do
stránky
10
4 Technologie pro RIA aplikace
[tato kapitola popisuje dostupné technologie pro vývoj RIA aplikací, čerpal jsem z
následujících zdrojů: [1],[2],[4],[9],[16],[17],[18],[19],[22],[23],[24],[25],[26],[27] ]
V této době jsou na poli RIA technologií silní hráči, kteří chtějí zaujmout a převzít vládu
Adobe se svým Flashem, nyní nastupující s Adobe AIR. Jedním z nich je Silverlight od
Microsoftu, o kterém jsem se rozhodl napsat svou bakalářskou práci. Dalšímí jsou Sun s
novinkou JavaFX a Opera jako zástupce Open Web technologií, např. HTML5, JavaScript,
Canvas a další. Rád bych Vás seznámil s dostupným přímými konkurenty technologie
Silverlight a zmínil se o nich v další kapitole a provedl přímé porovnání největšího
konkurenta Adobe Flash.
4.1 Technologie Microsoft Silverlight
Microsoft Silverlight byl již od první verze zamýšlen jako platforma pro tvorbu grafických
aplikací běžících přímo v internetovém prohlížeči v rámci webových stránek. Nabízí
bezpečné prohlížení, bez možnosti poškození počítače ze strany škodlivého programu,
protože celá Silverlight aplikace běží v chráněném režimu. Tuto možnost nabízí jak Flash tak
i Silverlight, ale o rozdílech se zmíním později.
Vývojář ocení nástroje z rodiny Microsoft Expression Studio a Microsoft Visual Studio, které
popisuji v dalších kapitolách. Silverlight je postaven na základech technologie Windows
Presentation Foundation (WPF), odlehčeném .NET Framework, uživatelské rozhraní je
definováno ve značkovacím jazyku XAML. Tato kombinace tvoří nejsilnější kombinaci pro
tvorbu klientských grafických aplikací.
Vzhledem k tomu, že se zabývám vývojem samotné aplikace, bylo nutné provést instalaci
.NET Frameworku. Ovšem pro pouhé spuštění aplikace stačí instalace Silverlight plug-inu.
11
4.1.1 Historie verzí Microsoft Silverlight
• Silverlight 1
První ostrá verze Silverlightu, uvedená na trh v roce 2007, přinesla možnost používat jazyk
XAML pro návrh grafického prostředí na straně klienta. Pro aplikační logiku využívala
programovací jazyk Javascript a uměla zobrazovat 2D grafiku, obrázky ve formátech png a
jpg, audio a video soubory, animace a text, umožňovala stahovat data přes http a
komunikaci přes AJAX. V této technologii vytvářím XAML preloader v kapitole 8.1.
• Silverlight 2
Byla uvedena na trh rok po první verzi pod označením 1.1 a poté přejmenována na verzi 2.
Tato verze používá jako svojí programovací logiku jazyky .NET Frameworku, což jsou C# a
VB.NET. Také lze použít jazyky Javascript a IronPython, IronRuby nebo F#. V této verzi se
rozšířila podpora dalších prvků, jako jsou ovládací prvky typu Button, CheckBox, DataGrid,
hyperlink, ListBox, popup, slider a další. V této verzi přibylo rozšíření v podobě
vyskakovacího okna, kterému lze v XAML kódu upravit a zinteraktivnit vzhled. Podporuje
streaming videa v HD (High Definition) a to až do rozlišení 1920x1080. Nejzajímavější prvek,
který byl přidán, je Canvas layout, což představuje virtuální plochu nebo blok elementů, se
kterými je možné provádět jakoukoli akci v podobě celku, jako např. Rotace, zviditelnění a
další.
• Silverlight 3
Verze 3 nabízí podporu zvukového kodeku H.264/AAC, akcelerované vykreslování,
streamování videa, podporu 3D s možností využití pixel shaderů, dále byly přidány nové
ovládací prvky včetně zdrojových kódů, komponenty pro snadnější layout, GridView,
TreeView a podpora SEO a také je možné u této verze spustit aplikaci i mimo okno
prohlížeče, a to jako klasickou aplikaci (out-of-browser).
12
• Silverlight 4
Tuto verzi využívám pro tvorbu praktické aplikace. Tato verze nabídne využití webových
kamer a mikrofonů, podporuje off-line přehrávání, funkce renderování HTML obsahu v
oknech aplikaci a bezmála 60 dalších nových ovládacích prvků. Podpora tisku, vylepšená
funkčnosti bindingu, možnost přidělovat vyšší oprávnění a formátování textu a integrace
WCF pro komunikaci se serverem.
• Silverligh 5 beta
Microsoft nadále pracuje na svém projekt Silverlight, který původně odstartoval jako
konkurent Adobe Flash a připravuje řadu novinek pro jeho chystanou pátou verzi. Silverlight
5 by měl přinést několik desítek významných novinek, například podporu 64bitových
systémů, nové funkce pro přehrávání multimediálního obsahu, využití procesoru grafické
karty (GPU) pro realizaci 2D a 3D obsahu např. hardwarovou akceleraci H.264, vylepšenou
podporu pro DRM, lepší podporu dálkových ovladačů při přehrávání médií a mnoho dalšho.
První veřejná betaverze by se měla objevit v polovině roku 2011 a finální verze pak na konci
roku 2011.
4.1.2 Technologie streamingu videa
První uskutečněné projekty v Silverlightu byly zaměřené právě na práci s videem a jeho
streaming a tím i vstoupily do podvědomí uživatelů.
Silverlight používá pro streaming protokol MMS. Ten zajišťuje aplikaci kdy je možné na
straně klienta navázat přímé spojení se zdrojovým souborem na straně serveru. K tomu
využívá UDP a TCP. Toto spojení má velkou výhodu, jelikož se můžeme kdykoliv a jakkoliv
pohybovat po celém souboru během přehrávání.
Pro Silverlight 2, který budu pro praktické streamování využívat, jsou podporovány tyto
formáty pro video:
• WMV1: Windows Media Video 7
• WMV2: Windows Media Video 8
• WMV3: Windows Media Video 9
• WMVA: Windows Media Video Advanced Profile, non-VC-1
• WMVC1: Windows Media Video Advanced Profile, VC-1
13
Pro audio tyto dostupné formáty:
• WMA 7: Windows Media Audio 7
• WMA 8: Windows Media Audio 8
• WMA 9: Windows Media Audio 9
• WMA 10: Windows Media Audio 10
• MP3: ISO/MPEG Layer-3
Praktické využití je popsáno v kapitole 8.4.
4.2 Windows Presentation Foundation / XAML / Expression
S použitím těchto nástrojů Microsoft propaguje postup práce, ve kterém designéři vytvoří
uživatelské rozhranní s pomocí Expression, které pak vývojáři implementují s pomocí Visual
Studia. Microsoft veřejně vyhlásil podporu dalších platforem pro využití WPF/E, což znamená
Windows Presentation Foundation/ Everywhere. Jedinou slabinou WPF je, že byla navržena
pro tvorbu desktopových aplikací, ale ne aplikací pro prohlížeče. Tyto aplikace budou
uživatelé moci instalovat přes prohlížeč, což ovšem znamená stahování vetšího objemu dat.
Dostupné nástroje Microsoft pro vývojáře RIA na platformě Windows:
• WPF - je analogický k Flash Playeru a Flex Frameworku
• XAML - jazyk založený na XML, ve kterém můžete vytvářet WPF aplikace, XAML je
podobný jazyku MXML pro Adobe Flex
• C# - programovací jazyk, který se používá k vytváření WPF aplikací
• Microsoft Expression - grafický nástroj navržený k práci s XAML, dovoluje
designérům navrhnou uživatelské rozhranní a vizuální chování WPF aplikace
• Visual Studio – do budoucna bude umožňovat práci s XAML, WinFX, C# a VB.Net
14
4.3 Adobe Flash
Dalším hráčem v prostředí RIA je Flash Platforma od společnosti Adobe, dříve Macromedia.
V současnosti klíčový konkurent Ajaxu. Flash Player se vyvinul z původně vytvořeného
přehrávače animací. S dalšími verzemi se přidávaly nové možnosti, přičemž je zachována
malá velikost Flash Playeru. Společnost Macromedia (nyní Adobe) se od roku 2002 zaměřila
na jeho vývoj a přestala ho brát jako pouhý animační nástroj. V roce 2006 byl přidán
objektově orientovaný jazyk ActionScript 3.0, který umožňoval integraci ostatních produktů
společnosti Adobe, např. Photoshop, Illustrator aj. Vylepšení se dočkalo také chování
vektorové grafiky, byla přidána nová technologie podobná AJAXu, nazvaná Asynchronous
Flash and XML. Tato technologie umožňuje dynamicky, např. u přehrávačů
(www.youtube.com), nabízet obdobná videa dle zadaných parametrů. Verze Flash 6 začala
poskytovat více možností právě pro tvorbu aplikací. Kombinace již zavedeného přehrávače a
síly programovacího jazyka ActionScript je ideální pro vývoj plnohodnotných aplikací v
prohlížeči bez omezení HTML.
Zacílením na Flash Player se nemusejí vývojáři omezovat internetovými prohlížeči a
problémy s nekompatibilitou operačních systémů. Výborná vlastnost Flash Playeru je, že
obsah i samotná aplikace vyvinutá pro jeho určitou verzi bude fungovat ve všech
prohlížečích a platformách, které tu kterou konkrétní verzi Flash Playeru podporují.
Největší překážkou ve vývoji aplikací pro Flash Player je prostředí programu Flash, které
bylo původně vytvořeno pro tvorbu animací. Tato překážka a také málo materiálů pro výuku,
odradila mnohé vývojaře RIA aplikací od technologie Flash.
Flash Player zůstává vynikající platforma pro RIA aplikace a s uvedením nových řešení
Laszlo nebo Flex, se zjednoduší vývoj a sníží se počet RIA aplikací vytvořených přímo v
prostředí Flash.
4.3.1 Laszlo
V Laszlo Systems vytvořili vhodnější nástroj pro RIA vývojáře, jazyk i kompiler, který jim
usnadnil práci s dosud známými technologiemi a umožnil vytvoření aplikace fungující ve
Flash Playeru. Aplikace je postavena na JavaScriptu a XML, ale běží ve Flash Playeru. I
když je hodně podobný AJAXu, tak používá kompiler, který z JavaScriptu a XML vygeneruje
Flash SWF soubor. To co se ze začátku jevilo jako výhoda (hlavně využití JavaScriptu) se
nakonec stalo velkou překážkou, protože v současné verzi není chybí podpora mnoha
základních objektově orientovaných principů, např. Datové typy, skutečné třídy. Vývojáři také
15
nemohou přistupovat k bohaté kolekci Flash Player API a jsou nuceni používat tagy a
JavaScript API.
4.3.2 Macromedia Flex
Projekt Macromedia Flex byl vytvořen na podobných základech jako AJAX. Obě dvě dokáží
dynamicky aktualizovat uživatelská rozhranní a přijímat i odesílat data na pozadí běhu
aplikace. Produktová řada Flex 2 poskytuje novou generaci vývojářských nástrojů a služeb,
které umožňují tvorbu i publikaci RIA. Skládá se z následujících částí:
• ActionScript 3.0
• Flash Player 9
• Flex Framework 2
• Flex Builder 2
• Flex Data Services 2
4.4 AJAX
Technologie AJAX (Asychronní JavaScript a XML) je tvořena na základech HTML, DHTML a
JavaScriptu. Základní myšlenkou je použití běžícího JavaScriptu v prohlížeči k aktualizaci
stránky, vkládání informací do stránky a změna struktury manipulací HTML DOM bez
nutnosti opětovného načítání stránky. Dříve se používaly pro vzdálenou komunikaci Java
aplety, nyní se nová data přenášejí s použitím XML na pozadí. Největší výhodou AJAXu, že
pro svůj chod nepotřebuje další pluginy, protože funguje s JavaScriptem a DHTML, který už
internetový prohlížeč obsahuje. Pokud je aplikace přístupná široké veřejnosti např.
extranetové nebo internetové aplikace, je třeba AJAXovou aplikaci testovat a vyvíjet na
všech operačních systémech i prohlížečích. AJAX je ve skutečnosti sbírka různých knihoven
JavaScriptu a není to programovací model sám o sobě.
16
4.5 Závěr a porovnání
Výběr technologie z výše uvedeného výčtu je velmi obtížný. Pokud bude požadavkem
spokojenost uživatele a přidaná hodnota nebo rychlý a efektivní vývoj aplikace, je v
současné době nejlepší volbou ucelený Microsoft Silverlight, který staví na základech WPF
od Microsoftu a je i přímým konkurentem Adobe Flex 2, stejně tak i z mého pohledu jako
uživatele a vývojáře jednoduchých aplikací. Ovšem vývojář velkých aplikací zvolí zřejmě
řešení od společnost Adobe, a to produktovou řadu Flex 2, především pro komfort
samotného vývoje a provázanosti jednotlivých nástrojů Adobe.
Porovnání největších konkurentů tedy Microsoft Silverlight a Adobe Flash se budu věnovat v
další samostatné kapitole (kapitola 5).
17
5 Porovnání technologií Silverlight a Flash
[v této části jsem se zaměřil na porovnání dvou největších konkurentů, a to Silverlight a
Flash, čerpal jsem z následujících zdrojů: [4],[9],[16],[17],[20],[21],[26] ]
V současné době je nejúspěšnějším pluginem internetových prohlížečů Adobe Flash ve verzi
9, a to 98% a Flash 10 s 55%. (zdroj: adobe.com). Silverlight má nyní kolem 25%, ale
očekává se rychlý růst až k 80%. (zdroj: microsoft.com), (údaje k 8.10.2010).
Silverlight chce dát vývojářům .NET lepší podmínky pro vytváření bohatě vybaveného
webového rozhraní. Silverlight obsahuje obdobné funkce jako konkurenční Flash, až na
jednu, která byla od počátku navrhována pro .NET s mateřským jazykem C# a jejímž
výsledkem je usnadnění práce vývojářů, kteří mohou psát kód pro Silverlight na straně
klienta ve stejném jazyce, v jakém píší kód na straně serveru (C# a VB) a mohou využívat
mnoho stejných abstrakcí jako jsou ovládací prvky, kolekce, proudy, genetika a LINQ.
Bezpečnost
Silverlight zvolím, pokud požaduji ochranu svého obsahu (DRM) či použítí tzv. Smooth
Streaming. Flash zvolím, pokud mám nepříliš unikátní obsah a naopak mám velikou
konkurenci. Bude zřejmě rozhodující co nejjednodušší zpřístupnění obsahu a tedy využiji
většího rozšíření Flashe.
Dostupnost
Flash i Silverlight jsou dostupné na všech majoritních platformách, tedy na Microsft
Windows, Mac i Linux a také na dostupných prohlížečích (IE 8, Opera, Chrome, Firefox a
Safari)
Výkon
Při uměle vytvořeném zkušebním testu byl Silverlight o 20% výkonnější než Flash. Oba
podporují a využívají vícejádrové procesory. Flash 10 i Silverlight 3 již nyní podporují
hardwarovou akceleraci (využívají moderních grafických karet). Zde vede Silverlight s HD
rozlišením 720p i kodek h.264.
18
Integrovaná podpora důležitých kodeků
Silverlight podporuje průmyslový standart VC-1, který se preferuje u filmů, kde je rozhodující
kvalita obrazu než datová úspora. Flash 10 i Silverlight 3 (a výše) podporují kompresi h.264,
která je vhodná pro živé přenosy a pro nízké datové přenosy.
Inteligentní přehrávání
Silverlight Smooth Streaming a Adobe Dynamic Streaming. Obě technologie umožňují, za
podpory dalších systémů jako např. Adobe Flash Media Streaming Server 3.5, plynulé
přehrávání videa v maximální kvalitě. Z hlediska živých přenosů je lepší využití
Silverlight/WPF. Pro on-demand přehrávání jsou obě technologie bez problémů, avšak
Silverlight vede díky dostupnosti Smoothe Streamingu.
Vývoj RIA aplikací
Flash, resp.Flex, je na trhu už několik let a pro vývoj RIA se značně osvědčil. Silverlight bude
těžce dobývat pozice v této oblasti. Výhodou může být možnost psaní aplikační logiky ve
více jazycích (C#, VB.NET, Python, Ruby, PHP a další) a má lepší podporu pro spolupráci s
prohlížečem. Výhodou Flashe je zase mnoho hotových aplikací a příkladů na všechny oblasti
použití. Nejbližší budoucnost bude určitě i nadále patřit Flash. Silverlight bude pomalu
získávat nezanedbatelnou část trhu, a to především díky komfortnějším možnostem vývoje a
ladění aplikace.
Tvorba jednoduchých animací
Flash je technologie, u které k tvorbě potřebujete program Adobe Flash. Toto omezení s
sebou přináší spoustu výhod i nevýhod. Pro jednoduché použití je to ale spíš nevýhoda.
Silverlight naopak používá pro reprezentaci grafických prvků textový formát XAML. Do tohoto
formátu existují konvertory z mnoha grafických či animačních programů. Lze tak vytvářet
animace bez dalších nákladů na softwarovou výbavu. Tato výhoda je mírně degradována
složitějším procesem ladění a spuštění, ale i tak je Silverlight lepší.
Media streaming
V oblasti streamování nebo přehrávání videí má vedoucí pozici právě Silverlight, i díky
možnosti přehrávat videa až v HD kvalitě přes celou obrazovku. Microsoft navíc nabízí
zdarma každému 4GB prostoru pro uložení videí na svém serveru, tato možnost bude jistě
hojně využívána a místo flashových videí se začne prosazovat Silverlight. Další výhodou
Silverlightu v této oblasti je přímá podpora formátu WMV, který lze považovat za standardní
oproti flashovému FLV.
19
Shrnutí výhod Silverlightu
Základní výhodou SilverLightu je dle mého názoru provázanost SilverLightu na ASP.NET
webové služby, používání známých technologií (WPF), programovací jazyk C#, podpora pro
větvení na klientovi což Flash Player neumí a vysoký výkon.
Flash Player je výrazně pomalejší než SilverLight a i jednoduché výsledné Flex (Flash)
aplikace jsou objemově zbytečně velké. .NET se zde vyznačuje malou a rychlou aplikací.
20
6 Nástroje pro tvorbu
[v této kapitole jsem se zaměřil na popis a obsah instalace Visual Studia 2010 Ultimate a
Expression Blend 2, čerpal jsem z následujících zdrojů: [3],[5],[6],[7],[8],[19] ]
6.1 Microsoft Visual Studio 2010 Ultimate
„Visual Studio 2010 Ultimate je komplexní sada týmových nástrojů pro řízení životního cyklu
aplikace, která zaručuje kvalitní výsledky od návrhu až po nasazení“ [3].
Při instalaci Microsoft Visual Studia 2010 Ultimate, si také mimo jiné nainstalujeme tyto
nástroje, které nejsou součástí ostatních nižších verzí Visual Studia. Jsou to např. tyto:
• sada základních jazyků Visual Basic, Visual C++, Visual C# nyní rozšiřuje i
funkcionální jazyk/nejazyk Visual F# 2.0
• ASP.NET MVC 2 můžeme použít jako alternativu pro vytváření webů
• SQL Server Compact 3.5 SP2 pro mobilní databáze
• Visual Studio 2010 Tool for Office (VSTO)
• Dotfuscator Software Services v community edition
• Crystal Reports pro tvorbu tiskových sestav
• Microsoft Sync Framework 1.0 s rozšířením pro ADO.NET ve verzi 2.0
• podpora pro Microsoft SQL Server 2008 R2 data-tier application
• Microsoft Sharepoint Developer Tools, integrované nástroje pro vývoj Sharepoint
6.1.1 Vývojové prostředí Visual Studia 2010 Ultimate
Celé prostředí a některé dialogy jsou navrženy nově. Po chvíli je ale jasné, že naprostá
většina příkazů a důležitých menu zůstala na svém místě a v podstatě beze změn. Dílčí
změny byli provedeny s ohledem na intuitivnost uživatelů a pro jejich komfort. Rozhraní
Visual Studia (Obr.1).
21
Obr.1 – Úvodní obrazovka programu Visual Studio 2010
6.1.2 Extension Managers
„Extension Manager dovoluje spravovat šablony projektů, souborů, rozšiřující nástroje a
komponenty pohodlně z jednoho místa“ [3].
Přímý přístup k online galeriím je možný i z běžných dialogů pro přidávání nových souborů a
zakládání nových projektů. Také můžeme využít prohlížení online dostupné rozšíření, pokud
nám standardně nainstalované nevyhovuje.
6.1.3 Nový jazyk F#
„Pokud programujete v Microsoft .NET, určitě se podívejte na funkcionální programovací
jazyk F#. F# vychází z jazyka OCaml který patří do rodiny funkcionálních jazyků ML, stejně
jako již zmiňovaný jazyk Scala“ [6].
Jazyk F# je plně shrnut do podporovaných jazyků Visual Studia stejně jako C# nebo Visual
Basic. Jediným rozdílem je pouze to, že není koncipován, jako ostatní jazyky, na to samé. K
dispozici máme pouze projekty pro vývoj konzolových aplikací a Silverlight knihoven.
6.1.4 Call Hierarchy
Tuto funkci vyvoláme z kontextové nabídky z kódu v konkrétní nebo nad konkrétní
procedurou. Zvolené procedury nám zobrazí v dokovaném okně a další procedury už volá
funkce sama. Jde o funkci, která nám umožní zrychlení a zefektivnění práce
22
6.1.5 Editor kódu
Nově byla přidána možnost rozvrhnout si editor s kódem do více oken, a to oceníte při psaní
komplexnějších komponent, které se skládají z více formulářů. Výborná drobnost pro práci s
kódem je zvýrazňování výskytů označených volání a proměnných. Zvýrazní se nám, pokud ji
máme ve více třídách, ale pouze pokud není definována samostatně. Není to tedy pouhé
prohledávání textu podle výskytu slov.
6.2 Microsoft Expression Blend 2
Je grafické rozhraní pro aplikace a interaktivní XAML projekty a je svým způsobem unikátní
WYSIWYG editor grafických prostředí k aplikacím v prostředí .NET Framework 3.0. Prostředí
.NET Framework 3.0 obsahuje WPF s podporou XAML, který slouží jako komunikační
rozhraní pro výměnu datových struktur mezi aplikacemi vyvíjených pomocí balíků Expression
Studio a Visual Studio. Expression Blend, původně označen Sparkle, nahrazuje původní
Expression Interactive Designer.
Využití Blendu pro aplikaci Silverlight
Blend slouží k návrhům, projektování, samostatné tvorbě, přehrávání projektů a aplikací na
bázi Silverlight, kterou lze porovnat k Adobe Flash a ActionScriptu. Hlavní výhodou a
rozdílem je komplexní editace Silverlight projektů na úrovni XML, resp. XAML zdrojového
kódu, díky kterému můžete v podstatě naprogramovat chování, vlastnosti, vzájemné
propojení a případný vizuální výstup. Je také schopný současně využívat kromě animací
také vektorovou grafiku a video, a to při plné interakci s uživatelem.
Editace objektů
Moderní prostředí Blendu 2 přímo navazuje na další aplikace od společnosti Microsoft.
Náhledové okno pracuje pochopitelně v realtime režimu a s prvky grafických rozhraní mohu
pracovat jako s klasickými vektorovými objekty. Do objektů lze vkládat bitmapy, na které se
vztahují rozdílné funkce a vlastnosti. K vlastnostem objektů mohu přistupovat v nástrojových
a informačních oknech rozmístěných po stranách náhledového okna (Obr.11). Blend 2 nabízí
podporu klíčovatelných animací s časovou osou, podobná editoru Adobe Flash, ne však
funkčností, ale pouze principem práce s ovládáním. Každý prvek rozhraní lze opatřit stylem,
který lze editací lehce změnit. Blend 2 také nabízí podporu 3D objektů, které jsou ovšem
náročné a dají zabrat i moderním procesorům a grafickým kartám.
23
Vzájemné vztahy vyvíjených objektů u projektů zajištuje jednak integovaný editor kódu, ve
kterém lze napojit na další datové zdroje a naprogramovat mu různé vlastnosti a dále
databáze stylů nejrůznějších přednastavených navigačních prvků, jako jsou tlačítka,
posuvníky, toolbary aj., které lze využívat pro jakoukoliv interaktivní aplikaci.
Obr.11 – Nástrojová a informační okna.
24
Pracovní plocha Blendu 2
Zdrojový kód každého projektu lze ručně upravit stejným způsobem, jako se edituje
HTML/XHTML, popřípadě XML kód webových stránek (Obr.12).
Obr.12 - Editor Blendu 2.
25
7 Definice požadavků na vytvářenou grafickou aplikaci
Výsledná aplikace bude obsahovat tyto dílčí příklady:
• XAML preloader
před samotným načtením aplikace, se zobrazí preloader, který poskytne informace o aplikaci
a zbývající čas do načtení aplikace, tento preloader nahradí standardní za mnou vytvořený
• Tlačítko a jeho stavová animace
vytvořím animované tlačítko s využitím šablony
• Vytvoření návštěvní knihy s využitím databáze
vytvořím ukázkovou návštěvní knihu, která díky LINQ to SQL, bude načítat, zobrazovat a
ukládat data do SQL databáze, návštěvní kniha bude mít své grafické rozhraní ve výsledné
aplikaci
• Streaming videa
ukázkové streamování videa s ovládacími prvky
• Vytvoření webového rozhraní aplikace
vytvořím weobvé rozhraní, které bude obsahovat všechny výše uvedené příklady
26
8 Dílčí příklady
[tato kapitola je věnována praktickým příkladům a popisu jejich kódů, čerpal jsem z
následujících zdrojů: [1],[14],[15],[28],[29],[30],[31],[32],[33],[34],[35],[36] ]
Veškeré zdrojové kódy dílčích příkladů jsou uloženy na přiloženém CD a výsledná aplikace
je ke shlédnutí na adrese k tomu vytvořené: http://petrsamsa.wz.cz.
8.1 XAML preloader
Vytvořil jsem Silverlight aplikaci, která je obsáhlejší a výsledný soubor je větší než jsem
předpokládal. Mohu buď ponechat standardní preloader, tj. grafické znázornění načítání
aplikace, které zobrazí procenta zbývající do načtení celé aplikace nebo vytvořím pro
uživatele svůj vlastní preloader. Tímto se pokusím upoutat jeho pozornost, a to volbou např.
grafických prvků, postaviček nebo textů, které upoutají jeho pozornost při delším načítání
aplikace, aniž by tento uživatel odešel na jinou stránku a výslednou aplikaci by neshlédl.
Rád bych nyní v několika krocích předvedl vytvoření vlastního preloaderu v jazyce XAML.
Pro vývoj jsem použil technologii Silverlight 1, protože Silverlight plugin využívá pro načítání
preloaderu pouze verzi 1. Pro rozpohybování a interakci prvků v aplikaci jsem odkázán
pouze na užívání JavaScriptu. V preloaderu je nutné vytvořit celkem 100 prvků Rectangle
(čtverců), které budou postupně měnit svoje vlastnosti Opacity. Protože nechci mít celých
100 prvků zadaných přímo v XAML souboru, budu je proto generovat automaticky a budou
poskládány dle potřeby. Využiji pouze dostupný Canvas a jeho vlastnostmi Canvas.Left a
Canvas.Top.
Samotný XAML soubor bude velmi jednoduchý a bude obsahovat dvě deklarace pro Canvas
a umístění podkladového obrázku. V hlavním elementu Canvasu je pak vidět volání
přiřazené obsluhy pro událost Loaded, která volá příslušnou metodu v JavaScriptu (Obr.14):
27
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="mainCanvas" Loaded="mainCanvasLoaded"> <Canvas x:Name="rootCanvas" Width="303" Height="303"> <Canvas.Background> <ImageBrush ImageSource="http://petrsamsa.wz.cz/img/bg.jpg" Stretch="UniformToFill" /> </Canvas.Background>
</Canvas></Canvas>
Obr.14 - Canvas s pozadím z externího zdroje.
Po nahrání Canvasu je zavolána obslužná metoda, kde se nejdříve naplní globálně
proměnné pro přístup k samotným prvkům uvnitř Canvasu a získá se přístup k hostitelskému
pluginu. Poté se pomocí skládání textu vytvoří příslušné čtverečky pomocí tohoto kódu:
var xamlEl = plugin.content.createFromXaml(xaml_str);
dojde tak jejich převedení na Silverlight objekt, který je vložen do kolekce prvků a tímto jsou
umístěny na Canvas [kód převzat a upraven z: [36] ].
28
function mainCanvasLoaded(s) { main = s.findName("mainCanvas") plugin = s.getHost() root = main.findName('rootCanvas'); if (root != null) { try { var x = 0; var xaml_str = ''; for (var i = 0; i < 100; i++) { var y = i % 10; x = parseInt(i / 10); var posx = (x * 30) + 1; var posy = (y * 30) + 1; var hldr = i; xaml_str = '<Canvas Name="hldr_' + hldr + '" Canvas.Left="' + posx + '" Canvas.Top="' + posy + '">' xaml_str += ' <Rectangle Name="rec_' + hldr + '" Canvas.Top="1" Canvas.Left="1" Fill="#00f" Height="29" Width="29" Opacity="1"></Rectangle>' xaml_str += '</Canvas>' var xamlEl = plugin.content.createFromXaml(xaml_str); root.children.add(xamlEl); } } catch (e) { alert('chyba' + e); } }}
Způsob zobrazení preloaderu
Je potřeba říci jaký má být použit preloader a také obsloužit události, které jsou generovány
v průběhu načítání hlavní Silverlight aplikace a také nesmím zapomenout vložit odkaz na
obsluhující JavaScript. Pomocí properties předáme odkaz na soubor na XAML přes vlastnost
SplashScreenSource, kde tuto cestu uvedeme. Tato relativní cesta musí být na stejné
doméně, na které je HTML stránka i hlavní aplikace. Dále přidám odkazy na funkce
OnSourceDownloadProgressChanged, které oznamují vývoj stahování aplikace. V této
funkci ošetřím zobrazování jednotlivých čtverců. Tato funkce se vyvolá až po stažení
určitého počtu dat, a proto musíme ošetřit hodnoty minulého stažení.
29
function progressChanged(sender, args) { step = args.progress; var hldr = parseInt(step * 100); var k = parseFloat(step * 100); var o = parseFloat(k - hldr); var rec = root.findName('rec_' + hldr); if (rec) { rec['Opacity'] = 1-o; } for (var i = 0; i < hldr; i++) { rec = root.findName('rec_' + i); if (rec) { rec['Opacity'] = 0; } }}
Funkci OnSourceDownloadComplete nevyužiji, protože je voláná po plném načtení aplikace
pro manipulaci např. se samotnou HTML stránkou.
Výsledné vložení Silverlight objektu do stránky i s preloaderem [kód převzat a upraven z:
[36] ]:
Silverlight.createObjectEx({source: "http://petrsamsa.wz.cz/PetrSamsaBakalarskaPrace2010/PetrSamsaBakalarskaPrace2010.Web/ClientBin/PetrSamsaBakalarskaPrace2010.xap",parentElement: document.getElementById("mySilverlightHost"),id: "mySilverlightControl",properties: {height: "100%",width: "100%",background: "white",isWindowless: "true",frameRate: "30",inplaceInstallPrompt: true,version: "4.0",ignoreBrowserVer: "true",enableHtmlAccess: "true",splashScreenSource: "preloaderSamsa.xaml"},events: {onLoad:SL_Load,onSourceDownloadProgressChanged: progressChanged}});
30
Preloader se nemusí zobrazit, pokud se aplikace načte do cca. 0.5 sekundy od požadavku
na zobrazení. Preloader se musí nejdříve také nahrát na cílový prohlížeč, tudíž by neměl být
příliš velký a neměl by obsahovat velké množství dodatečných resources, hlavně obrázků.
Preloader zpříjemní dobu do načtení aplikace a zkrátí tím tak čas, který by uživatel strávil
sledováním přibývajících procent.
8.2 Vytvoření šablony pro tlačítko
U většiny komponent si vystačím se základním stylováním. Pokud potřebuji u tlačítka změnit
nejen styl písma a barvu, musím si vytvořit šablonu. Tu si mohu definovat přímo v těle
tlačítka nebo ve zdrojích. Pro opětovné použití je samozřejmě nutné definovat šablonu ve
zdroji. Nyní si vytvořím základní tlačítko:
<Button x:Name="Spustit"/>
8.2.1 Vytvoření šablony
Pro vytvoření šablony použiji nástroj ControlTemplate a definuji si v něm budoucí vzhled.
Půjde o elipsu s textem uprostřed (Obr.15):
<ControlTemplate x:Key="SablonaSpustit" TargetType="Button">
<Grid Height="100" Width="100">
<Ellipse x:Name="kruh"
Height="100"
Width="100"
Fill="#EEEEEE"
Stroke="DarkGray"/>
<TextBlock Text="Spustit"
x:Name="obsahTlacitka"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
Šablonu mám připravenou k použití. Nyní ji přiřadíme k tlačítku:
<Button x:Name="Spustit" Template="{StaticResource SablonaSpustit}"/>
31
Obr.15 – Vytvoření tlačítko a připravení template
8.2.2 Stavové animace
Teď je tlačítko po vzhledové stránce bez úprav, samotné užití šablony nic nezměnilo. Pro
změnu chování tlačítka musíme definovat co se stane po najetí a stisku tlačítka myši. Každé
tlačítko má v sobě uloženo několik stavů – Normal, MouseOver, Pressed a Disable.
Nyní vytvořím pro jednotlivé stavy tzv. stavové animace. K obsluze stavové animace nám
slouží nástroj VisualStateManager, kde si definuji základní stavy CommonStates. Jednotlivé
pak definuji pomocí VisualState.
Struktura animace
Pro definování skupiny animací použiji Storyboard a pro animaci použiji nástroj
DoubleAnimation, který nám umožňuje plynulý přechod mezi dvěma proměnnými Double.
Nastavíme si typ komponenty, který a jakou její vlastnost budu animovat, do jaké hodnoty se
má během animace dostat a jak dlouho bude celá animace trvat [kód převzat a upraven z:
[30] ].
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation To="11"
Duration="00:00:00.1"
Storyboard.TargetName="obsahTlacitka"
32
Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation To="16"
Duration="00:00:00.1"
Storyboard.TargetName="obsahTlacitka"
Storyboard.TargetProperty="FontSize"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation To="14"
Duration="00:00:00.1"
Storyboard.TargetName="obsahTlacitka"
Storyboard.TargetProperty="FontSize"/>
<DoubleAnimation To=".3"
Duration="00:00:00.1"
Storyboard.TargetName="obsahTlacitka"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation To=".3"
Duration="00:00:00.1"
Storyboard.TargetName="kruh"
Storyboard.TargetProperty="Opacity"/>
<DoubleAnimation To=".3"
Duration="00:00:00.1"
Storyboard.TargetName="obsahTlacitka"
33
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Principy stylování v Silverlightu jsou velice podobné CSS a mohu styly definovat u každé
komponenty zvlášť. Šablonu využiji tehdy, pokud potřebuji vytvořit vlastní vzhled dané
komponenty. Důležité je neopomenout při vytvoření vlastní šablony definovat její chování.
8.3 Vytvoření návštěvní knihy
Každá větší aplikace ke své činnosti potřebuje nějakou databázi. Vytvoření "database-
driven" aplikace v Silverlight může vypadat složitě a zbytečně, ale rád bych jednoduchost a
rychlost vytvoření této aplikace názorně ukázal. Budu využívat technologie WCF, LINQ to
SQL a SQL Server a Visual Studio pro IDE.
Začneme vytvořením projektu typu Silverlight Application ve Visual Studiu, nazveme ho
kniha a pokračujeme potvrzením vytvořit k Silverlight 4 aplikaci také ASP.NET projekt.
Výsledný projekt kniha.Web máme připravený (Obr.02).
Obr.02 – Vytvořený projekt kniha.Web.
34
8.3.1 Databáze
Vytvoříme si nejprve databázi. V projektu kniha.Web si vytvoříme složku App_Data
otevřením Solution Explorer záložky na pravé straně (Add / New folder). Do vytvořené složky
vložíme novou databázi s názvem knihaDB.mdf (Add / New item / SQL Server Database)
(Obr.03). V této databázi si vytvoříme jednu tabulku (Obr.04), zvolil jsem vytvoření tímto SQL
příkazem:
CREATE TABLE [dbo].[Posts]( [PostID] INT NOT NULL PRIMARY KEY IDENTITY(1,1), [Autor] NVARCHAR(50) NOT NULL, [Text] NVARCHAR(500) NOT NULL, [Date] DATETIME NOT NULL)
Obr.03 – Vytvoření nové tabulky databáze.
Obr.04 – Vytvořená tabulka Posts.
35
8.3.2 Uživatelské rozhraní
Nyní si vytvoříme uživatelské prostředí, které bude zprostředkováno souborem
MainPage.xaml v Silverlight projektu. Toto rozhraní je tvořeno jedním ListBoxem, do kterého
se nám budou zobrazovat načtené příspěvky z databáze, dva TextBoxy a potvrzovací
tlačítko Button (Obr.05) [kód převzat a upraven z: [14] ]:
<UserControl x:Class="kniha.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="340" Width="400">
<Grid x:Name="LayoutRoot" Background="White" Height="2000" Width="450"> <Grid.RowDefinitions> <RowDefinition Height="160" /> <RowDefinition Height="130" /> <RowDefinition Height="50" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="40" /> <ColumnDefinition Width="115" /> <ColumnDefinition Width="165" /> </Grid.ColumnDefinitions>
<ListBox Margin="0,10,0,0" Name="posts_Lb" Grid.Column="1" Grid.ColumnSpan="2" /> <TextBlock Margin="0,15,40,100" Grid.Column="1" Grid.Row="1">Jméno:</TextBlock> <TextBox Margin="85,15,0,100" Name="name_Tb" TabIndex="1" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" /> <TextBlock Margin="0,60,10,55" Grid.Column="1" Grid.Row="1">Text příspěvku:</TextBlock> <TextBox Margin="0,60,0,20" AcceptsReturn="True" Name="text_Tb" TabIndex="2" Grid.Column="2" Grid.Row="1"/> <Button Margin="90,0,0,8" Name="Send_Btn" Height="30" Width="70" Content="Odeslat" Click="Send_Btn_Click" TabIndex="3" Grid.Column="2" Grid.Row="2" /> </Grid></UserControl>
36
Obr.05 – Připravené uživatelské rozhraní.
8.3.3 LINQ to SQL
Dále využijeme technologie LINQ to SQL, která nám umožní přímo z C# kódu přistupovat k
databázi. Její využití je na místě i pro její jednoduchost, kdy několika tahy myši umožní
vytvořit objektovou reprezentaci databáze, se kterou poté komunikuje pomocí LINQu a ten
překládá na SQL dorazy. Do projektu kniha.Web přidáme LINQ to SQL (Add / New item) a
klikneme na přidat třídu typu LINQ to SQL Classes (Obr.06) a nazveme ji kniha.dbml. Nyní
otevřeme Server Explorer a tabulku Posts z databáze přetáhneme do designeru LINQ to
SQL (Obr.07). V prvé řadě nastavíme důležitou položku pro správnou funkčnost ve spojení s
WCF službami. V okně Properties nastavíme vlastnost Serialization Mode na Unidirectional
(Obr.08). Tato změna nám umožní tyto objekty serializovat a posílat službě WCF tj. přidá
třídě Post potřebné atributy [DataContract] a [DataMember].
Obr.06 – Přidání třídy typu LINQ to SQL Classes.
37
Obr.07 – Připravená tabulka v LINQ to SQL
Obr.08 – Změna typu Serialization Mode na Unidirectional
8.3.4 Načítání z databáze
Do projektu kniha.Web přidáme nový soubor typu WCF Service a pojmenujeme ho
KnihaService.svc. Tato služba je tvořena rozhraním IKnihaService a od něj odvozenou třídou
KnihaService (Obr.09).
38
Obr.09 - Přidání nového souboru typu WCF Service
V následujícím kódu, který vložím do IKnihaService, jsem přejmenoval metodu DoWork na
GetAllPosts a změnil její návratový typ [kód převzat a upraven z: [14] ].:
using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.Text;
namespace kniha.Web{ [ServiceContract] public interface IKnihaService { [OperationContract] List<Post> GetAllPosts(); }}
39
Do třídy KnihaService vložíme následující kód, který již obsahuje implementovanou metodu
GetAllPosts [kód převzat a upraven z: [14] ]:
using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.Text;
namespace kniha.Web{ public class KnihaService : IKnihaService { KnihaDataContext dc = new KnihaDataContext(); public List<Post> GetAllPosts() { var posts = from p in dc.Posts orderby p.Date descending select p; return posts.ToList(); } }}
U rozhraní stojí za povšimnutí atribut [ServiceContract], který definuje službu a atribut
[OperationContract], kterým musí být označena každá metoda, kterou chceme na službě
volat.
Metoda GetAllPosts nám slouží k načtení příspěvků z databáze, seřadí je sestupně podle
data napsání a uloží je do kolekce List.
8.3.5 Ukládání do databáze
Do rozhraní IknihaService přidáme novou metodu:
[OperationContract]void SaveNewPost(string name, string text);
A její implementace vypadá následovně:
public void SaveNewPost(string name, string text)
40
{ dc.Posts.InsertOnSubmit(new Post { Autor = name, Text = text, Datum = DateTime.Now });
dc.SubmitChanges();}
8.3.6 Využití WCF služby
Do Silverlight projektu přidáme referenci na naši WCF službu. V Solution Exploreru zvolíme
Add Service Reference. V novém okně klikneme na Discover a nazveme ji
KnihaServiceReference (Obr.10).
Obr.10 – Service Reference
41
Do code-behind MainPage.xaml.cs vložíme metodu GetAllPosts:
private void GetAllPosts(){ KnihaServiceReference.KnihaServiceClient gsc = new KnihaServiceReference.KnihaServiceClient(); gsc.GetAllPostsCompleted += gsc_GetAllPostsCompleted; gsc.GetAllPostsAsync();}
Tato metoda nastaví pomocí event handleru metodu, která má zavolat
gsc_GetAllPostsCompleted, jakmile bude dokončena práce v metodě GetAllPosts na WCF
službě a následně tuto GetAllPosts metodu asynchronně zavolá, tímto nedojde k
zablokování zbytku aplikace.
Vytvořením metody gsc_GetAllPostsCompleted zajistíme funkčnost:
private void gsc_GetAllPostsCompleted(object sender, KnihaServiceReference.GetAllPostsCompletedEventArgs e){ foreach (var item in e.Result) { posts_Lb.Items.Add(string.Format("{0} ({1}) napsal: {2}", item.Author, item.Date, item.Text)); }}
Pro úspěšné načtení příspěvků musíme přidat volání metody GetAllPosts do konstruktoru
okna:
public MainPage(){ InitializeComponent(); GetAllPosts();}
42
8.3.7 Zápis do databáze
Princip a metoda zápisu je stejná jako u čtení z databáze [kód převzat a upraven z: [14] ].:
private void SaveNewPost(){ GuestbookServiceReference.GuestbookServiceClient gsc = new GuestbookServiceReference.GuestbookServiceClient(); gsc.SaveNewPostCompleted += gsc_SaveNewPostCompleted; gsc.SaveNewPostAsync(name_Tb.Text, text_Tb.Text);}
private void gsc_SaveNewPostCompleted(object sender, EventArgs e){ name_Tb.Text = ""; text_Tb.Text = ""; posts_Lb.Items.Clear(); GetAllPosts();}
8.4 Streamování videa
[V této části ukáži postup a vytvoření streamování videa uloženého na vzdáleném serveru]
Pro práci s videem a médii se v Silverlightu používá stejná komponenta MediaElement.
Většina definovaných atributů a vlastností je stejných a liší se pouze v několika částech,
které náleží přímo povaze média, např. hlasitost zvuku, vykreslování videa nebo pokud je
zvuk součástí videa.
8.4.1 Vložení videa do aplikace
Vytvoříme si nový projekt typu Silverlight a nazveme ho stream. Prvním krokem je vložení
videa do aplikace. V atributu Source se definuje zdroj videa. V mém případě využívám zdroj
videa, které je umístěno na vzdáleném serveru:
<MediaElement x:Name="bmw"
Source="http://petrsamsa.wz.cz/video/bmw.wmv"/>
43
Po ozkoušení přidáme vlastnosti jako výška, šířka a např. Autoplay nastavíme na hodnotu
False, z důvodu nechtěného otevření videa ihned po načtení aplikace.
<MediaElement x:Name="bmw"
Source="http://petrsamsa.wz.cz/video/bmw.wmv"
Height="320"
Width="480"
AutoPlay="False"/>
8.4.2 Obsluha videa
Pro základní obsluhu jsem zvolil tlačítka Přehrát, Pozastavení a Zastavení. Jednoduše tyto
příkazy využijeme zavoláním při stisku příslušného tlačítka. U tlačítek Pozastavení a
Zastavení nastavíme IsEnable na False, protože je video po načtení zastaveno a je
nesmyslené volat funkce Pause() a Stop() (Obr.19).
<!--play-->
<Button x:Name="bt_play"
Content="Přehrát"
Height="20"
Width="100"
Margin="10"
Click="bt_play_Click"/>
<!--pause-->
<Button x:Name="bt_pause"
Content="Pozastavit"
Height="20"
Width="100"
Margin="10"
IsEnabled="False"
Click="bt_pause_Click"/>
<!--stop-->
<Button x:Name="bt_stop"
Content="Zastavit"
44
Height="20"
Width="100"
Margin="10"
IsEnabled="False"
Click="bt_stop_Click"/>
Do těla tlačítek doplníme obslužné funkce jako zapnutí a vypnutí tlačítek podle stavu videa
[kód převzat a upraven z: [33] ].
Partial Public Class MainPage Inherits UserControl
Public Sub New() InitializeComponent() End Sub
Private Sub bt_pause_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) bmw.Pause()
bt_play.IsEnabled = True bt_pause.IsEnabled = False End Sub
Private Sub bt_play_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
bmw.Play()
bt_pause.IsEnabled = True bt_stop.IsEnabled = True bt_play.IsEnabled = False End Sub
Private Sub bt_stop_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) bmw.Stop()
bt_play.IsEnabled = True bt_stop.IsEnabled = False bt_pause.IsEnabled = False End SubEnd Class
45
Obr.19 – Základní tlačítka a jejich funkce
46
9 Návrh webového rozhraní
[v této kapitole sestavím výsledné jednoduché webové rozhraní z vytvořených dílčích
příkladů v programu Visual Studio]
Vzhledem k tomu, že Visual Studio používá na grafické úpravy XAML, vytvořím proto
webové rozhraní přímo ve Visual Studiu a výsledný design aplikace vygeneruji přímo v
programu (Obr.21). Použiji dílčí příklady ke složení celkové prezentace s využitím základních
nástrojů. Následně přidám TextBlock (Obr.20), který jsem vytvořil v Blend 2:
<TextBlock Canvas.Left="36" Canvas.Top="18" TextWrapping="Wrap"><Run
Foreground="#FF272626" Text="Bakalářská práce | Petr Šamša | Streaming "/><Run
Text="videa"/></TextBlock>
Obr.20 - Vytvoření textového pole
47
Obr.21 – Konečná podoba aplikace ve Visual Studiu
48
10 Možnosti integrace Silverlight aplikace do webových stránek
[v této části se zabývám rozdílnou integrací aplikace do webové stránky, čerpal jsem z
následujících zdrojů: [10],[11],[12],[13],[28] ]
Technologie Microsft Silverlight nabízí několik způsobů umístění aplikace do webové
stránky. To, které jsou velmi nevhodné z hlediska přístupnosti, se Vám budu snažit vysvětlit
v další částech kapitoly. Tento popis může vypadat jako nadbytečný, protože samotný
element object vygeneruje Visual Studio, ale rád bych názorně uvedl postup a rozdíly mezi
jednotlivými integracemi.
10.1 Integrace pomocí JavaScriptu
K vložení aplikace použiji Microsoftem zveřejněný skript Silverlight.js. Do stránky poté
vkládám kód, který vypadá takto:
<script type="text/javascript"> Silverlight.createObject( "http://petrsamsa.wz.cz/PetrSamsaBakalarskaPrace2010/PetrSamsaBakalarskaPrace2010.Web/ClientBin/PetrSamsaBakalarskaPrace2010.xap",sl3Host, "sl3", { width: "200", height: "50", background: "white", alt: "<!--not installed-->", version: "2.0.31005.0" }, { onError: onSLError,onLoad: onSLLoad }, "param1=value1,param2=value2", "row3");</script>
49
I když můžeme určitým způsobem ovlivnit zobrazený alternativní obsah, je celá funkcionalita,
tedy i alternativní obsah, závislý na podpoře klientského skriptování. Skript má tendenci
uživatele nutit k instalaci Silverlight pluginu, bez ohledu na práva či vůli uživatele instalaci
provést. Tento způsob je vhodný spíše pro intranetové aplikace a pro webové stránky se
příliš nehodí.
10.2 Integrace pomocí ASP.NET Silverlight Server Control
Tento způsob vkládání obsahu využívá, tak jako předešlý, skript Silverlight.js, ale bez zásahu
vývojaře, protože jej do stránky automaticky přidá ScriptManager. Díky tomu, ale musíme na
webovou stránku umístit formulář. Tímto omezením bych řekl, že tento způsob integrace se
spíše hodí pro vyvíjení a ladění aplikace, kde tyto nevýhody nevadí. Pro finální ASP.NET
aplikaci bych tento způsob integrace nezvolil, z důvodu vývojařského komfortu.
10.3 Integrace pomocí (X)HTML
Tento způsob jsem zvolil pro výsledné prezentování mé aplikace. Jde o způsob, který je z
hlediska přístupnosti nejčistší a dobře čitelný. Využívá se zde standardní XHTML element
object. Vidíme tak i sémantiku dokumentu a snadno umožníme zobrazení obsahu. Kód pro
integraci hotové aplikace do webových stránek vypadá takto:
<object width="400" height="150" data="data:application/x-silverlight-2," type="application/x-silverlight-2"> <param name="Source" value="http://petrsamsa.wz.cz/PetrSamsaBakalarskaPrace2010/PetrSamsaBakalarskaPrace2010.Web/ClientBin/PetrSamsaBakalarskaPrace2010.xap" /> <param name="InitParams" value="UploadUrl=http://myserver/ClientFunction.UploadFile.aspx"/> <param name="MinRuntimeVersion" value="2.0.31005.0" /> <param name="AutoUpgrade" value="true" /> <param name="EnableHtmlAccess" value="true" /> <param name="AllowHtmlPopupWindow" value="true" /> <div style="text-align:center"> <p> Toto je alternativní obsah pro SilverLight aplikaci <br /> <a href="http://go2.microsoft.com/fwlink/?LinkID=114576&v=2.0"><img src="http://go2.microsoft.com/fwlink/?LinkID=108181"alt="Microsoft Silverlight" style="border-width:0;" /></a> </p>
50
</div></object>
V první řadě si vytvoříme element object, který nám samotnou aplikaci spustí v klientovi.
Atributy data a type nabývají hodnot x-silverlight-2, což znamená, že se nejedná o Silverlight
2, ale o použitý MIME type, který spouští daný plug-in. Pro běh samotné aplikace je důležitý
element param, který v tomto případě jen odkazuje na hostovanou Silverlight aplikac a říká
nám, kde je umístěna na serveru.
Kód jsem vyzkoušel v prohlížečích, pro které je dnes Silverlight plugin k dispozici. Jedná se o
především o prohlížeče Opera, Firefox, Safari a Internet Explorer v jejich posledních verzích.
Výhodou je, že není v kódu potřeba uvádět problematický atribut clsid. Tento kód se
nepokouší uživatele nutit stahovat nějaký plugin a to i ve formě nepříjemných vyskakovacích
oken se zvukovým doprovodem. Zde je jako alternativní obsah připravený odstavec, kam
mohu doplnit skutečně užitečné informace pro jinou variantu získání pluginu či jiného
požadavku. Dále pak následuje obrázkový odkaz, směřující přímo na oficiální stránky
Microsoftu, pro stažení Silverlight pluginu. Tuto volbu využijí pouzi ti uživatelé, kteří chtejí
vidět obsah Silverlight aplikace a chtějí si Silverlight plugin nainstalovat.
Tato možnost integrace je vhodná i v přípradě ASP.NET aplikací pro finální nasazení na web
a to i přesto, že metoda v ASP.NET značně usnadňuje práci vyvojáře. Z hlediska Silverlight
aplikace je totiž úplně jedno, zda je stránka, do které aplikaci vkládáme, statická (klasické
html) nebo ji generujeme dynamicky (např. PHP či JSP).
10.4 Nejčastější chyby
Setkal jsem se sám s některými problémy se zobrazením a dohledával možné chyby. Zde
jsem vypsal několik nejčastějších chyb, se kterými se můžete setkat. Říká se jim WSOD
(White Screen Of Death) neboli „smrtelně bílé okno“. Toto nastane, pokud se vám aplikace z
nějakého důvodu nenačte a zobrazí se pouze bílá plocha. Nejčastější příčinou může být
špatně deklarovaný XAML, nesprávně zadaná cesta k aplikaci ci .xap souboru, můžete mít
problém s nastavením MIME type pro soubory na serveru kde běží ISS server, apache či jiný
server, který by měl být registrován na x-silverlight-app pro jeho podporu, nebo také vlastní
chybou jako je překlep v samotném kódu či špatné nahrání aplikace na server.
51
11 Závěr
Domnívám se, že o aktuálnosti tématu svědčí také fakt, že technologie Silverlight byla
využita pro živé přenosy Olympijských her v Pekingu v roce 2008. Cílem této práce bylo tedy
vytvořit návrh webového rozhraní pomocí technologie Silverlight, na kterém jsem ověřil
jednoduchost použití (jak z hlediska velikosti výsledného kódu, tak z hlediska možnosti
streamování přenášeného videa), tak i jednoduchosti návrhu pomocí připravených prostředí.
Tyto developerské aplikace je bohužel nutné zakoupit, což může většinu začínajících
vývojářů odradit, protože cena je v současné době značná.
Dalším faktem, který může zásadně ovlivnit masivní nasazení popisované aplikace je odklon
od klasických uživatelských zvyklostí, jelikož aplikace vypadá jako webová stránka, avšak
chováním se blíží k desktopovým aplikacím. Uživatel, který je zvyklý na klasické ovládání v
prohlížečí, nemůže využívat např. klávesových zkratek prohlížeče, tlačítka zpět bez
předchozího ošetření přímo v aplikaci, dále pak zapamatování hesel, posílání šifrovaných
dat přes http apod. Tento krok je po pro méně zkušenou uživatelskou základnu vnímán spíše
jako problém než vylepšeni a výhoda. Uz samotna nutna instalace nejakejho balicku ci
pluginu velkou cast uzivatelu muze odradit od sledovani stranky a zdá se to tedy značným
problémem. Ovšem po podrobném seznameni a shlednuti možností tohoto webu ocení jeho
vlastnosti.
Po bližším seznámení s technologií Silverlight si však myslím, že do budoucna je to výborný
nástroj, ale bude mít těžkou konkurenci na poli RIA aplikací. Vývoj RIA technologie jde
prudce dopředu a i tato technologie, která se v současné době jeví jako nejlepší, bude za
několik málo měsíců již zastaralá a příliš komplikovaná. Přesto v současné chvíli je to
nejlepší způsob pro živé streamování, které např. využívá společnost Nova (Nova.cz).
Specificky a jednoduše využitelná technologie pro přenos a kvalitní sledování v HD.
Osobním přínosem je vytvoření webového rozhraní, využívajícího prvky streamingu, které
jsem názorně a jednoduše ukázal v této době jednoduchým způsobem. Ovšem před několika
lety, byla tato technologie zcela neznámá a její využití nemyslitelné. Výhodou aplikace je její
malá velikost pro přenos a prezentování na různých místech, např. školení, semináře, …,
bez nutnosti zdrojové video přenášet s aplikací, tzn. aplikace pracuje pouze s odkazem na
místo uložení videa.
52
12 Použité zdroje
1. Microsoft MSDN. msdn.microsoft.com [online]. 2010 [cit. 2010-12-01]. XAML Overview
(WPF). Dostupné z WWW: <http://msdn.microsoft.com/en-us/library/ms752059.aspx>.
2. Microsoft MSDN. blogs.msdn.com [online]. 2010 [cit. 2010-11-20]. Webové úterý –
Novinky v Silverlight 4 – díl 1. Dostupné z WWW:
<http://blogs.msdn.com/b/vyvojari/archive/2010/04/20/webove-utery-novinky-v-silverlight-4-
dil-1.aspx>.
3. JECHA, Tomáš. Vbnet.cz [online]. 12.4.2010 [cit. 2010-12-14]. Visual Studio 2010 a .NET
Framework 4 - instalace ostré verze. Dostupné z WWW: <http://www.vbnet.cz/clanek--156-
visual_studio_2010_a_net_framework_4_instalace_ostre_verze.aspx>.
4. EVERETT-CHURCH, Justin. Adobe.com [online]. 2010 [cit. 2010-12-12]. Introducing
Adobe Flash Player 10.1 public prerelease. Dostupné z WWW:
<http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10_1.html>.
5. Microsoft MSDN. msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. Visual Studio
2010. Dostupné z WWW: <http://msdn.microsoft.com/cs-cz/vstudio/default.aspx>.
6. STOKLASA, Jan. Lisp.cz [online]. 31.9.2010 [cit. 2010-12-13]. Programovací jazyk F# -
funkcionální programovací jazyk pro Microsoft .NET. Dostupné z WWW:
<http://www.lisp.cz/2009/10/programovaci-jazyk-f-funkcionalni.html>.
7. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-11-14]. What's new in
Expression Blend 2?. Dostupné z WWW: <http://msdn.microsoft.com/en-
us/library/cc294722.aspx>.
8. NĚMEC, Luboš. Grafika.cz [online]. 14.6.2007 [cit. 2010-11-11]. Microsoft Expression
Blend 2. Dostupné z WWW:
<http://www.grafika.cz/art/webdesign/msexpressionblend2.html>.
9. Microsoft MSDN. Blogs.msdn.com [online]. 2010 [cit. 2010-11-22]. MDSN Blog. Dostupné
z WWW: <http://blogs.msdn.com/b/vyvojari/archive/tags/silverlight/>.
10. RŮŽIČKA, Pavel. Interval.cz [online]. 6.4.2009 [cit. 2010-12-14]. Vkládejte SilverLight do
stránky přístupně, s alternativní obsahem. Dostupné z WWW:
<http://interval.cz/clanky/vkladejte-silverlight-do-stranky-pristupne-s-alternativni-obsahem/ >.
53
11. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. Silverlight.js
Reference. Dostupné z WWW: <http://msdn.microsoft.com/en-
us/library/cc838126(VS.95).aspx>.
12. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-11-21]. How to: Add
Silverlight to a Web Page by Using HTML. Dostupné z WWW:
<http://msdn.microsoft.com/en-us/library/cc189089(VS.95).aspx>.
13. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-11-21]. ASP.NET
Silverlight Server Control. Dostupné z WWW: <http://msdn.microsoft.com/en-
us/library/cc838274(VS.95).aspx>.
14. KOTTNAUER, Jakub. Programujte.com [online]. 11.1.2010 [cit. 2010-11-01]. Silverlight
a práce s databází. Dostupné z WWW: <http://programujte.com/index.php/rss_clanek.php?
akce=clanek&cl=2010010200-silverlight-a-prace-s-databazi >.
15. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. LINQ to SQL.
Dostupné z WWW: <http://msdn.microsoft.com/en-us/library/bb386976.aspx>.
16. Microsoft. Microsoft.com [online]. 2010 [cit. 2010-11-14]. Microsoft Silverlight. Dostupné
z WWW: <http://www.microsoft.com/cze/web/silverlight/>.
17. Microsoft. Silverlight.net [online]. 2010 [cit. 2010-12-11]. Microsoft Silverlight. Dostupné
z WWW: <http://www.silverlight.net/>.
18. CHRISTENSEN, Rob. Http://blogs.adobe.com [online]. 2010 [cit. 2010-12-03].
Previewing Adobe AIR 2 at Adobe MAX. Dostupné z WWW:
<http://blogs.adobe.com/air/2009/10/previewing_adobe_air_2_at_adob.html>.
19. LÁSLO, Petr. Programujte.com [online]. 27.7.2008 [cit. 2010-11-22]. Microsoft
Expression Blend - Úvod. Dostupné z WWW: <http://programujte.com/index.php/%3C/
%3C/banery/pda/galerie/2006/08/index.php?akce=clanek&cl=2008071401-microsoft-
expression-blend-uvod>.
20. Microsoft MSDN. Msdn.microsoft.com [online]. 18.9.2007 [cit. 2010-12-14]. Windows
Live. Dostupné z WWW: <http://msdn.microsoft.com/en-us/windowslive/default.aspx>.
21. MACDONALD, Matthew; SZPUSZTA, Mario. Kniha "ASP.NET 2.0 a C#". Vyd. 1. [s.l.] :
Zoner press, 2006. 1376 s. ISBN 80-86815-38-2.
22. All-streaming-media.com [online]. 2010 [cit. 2010-11-25]. Streaming media protocols.
Dostupné z WWW: <http://all-streaming-media.com/faq/streaming-media/faq-streaming-
media-protocols.htm>.
23. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-11]. Developers code
with Microsoft. Dostupné z WWW: <http://msdn.microsoft.com/en-us/default.aspx >.
54
24. BRICHTA, Ondřej. Flash.cz [online]. 2.4.2007 [cit. 2010-12-14]. Adobe Apollo – nové
možnosti Flash aplikací. Dostupné z WWW: <http://www.flash.cz/portal/clanek.aspx?
id=594>.
25. Microsoft. Windowsclient.net [online]. 2010 [cit. 2010-12-13]. Windows Presentation
Foundation. Dostupné z WWW: <http://windowsclient.net/wpf/default.aspx>.
26. BERNARD, Borek. Interval.cz [online]. 25.4.2008 [cit. 2010-12-13]. Rich Internet
Applications v roce 2008. Dostupné z WWW: <http://interval.cz/clanky/rich-internet-
applications-v-roce-2008/>.
27. Adobe.com [online]. 2010 [cit. 2010-11-11]. Adobe AIR. Dostupné z WWW:
<http://www.adobe.com/products/air/>.
28. Microsoft Czech MSDN Team. Silverlight 3 [online]. [s.l.] : [s.n.], 12.8.2009 [cit. 2010-
12-11]. Dostupné z WWW: <http://download.microsoft.com/download/C/0/6/C063ED26-
AD71-4731-A6BA-791C6888BCD0/Silverligh_3.pdf>.
29. Microsoft. Silverlight.net [online]. 2010 [cit. 2010-12-14]. Silverlight Toolkit. Dostupné z
WWW:
<http://www.silverlight.net/content/samples/sl3/toolkitcontrolsamples/run/default.html>.
30. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight -
Templating a Button. Dostupné z WWW: <http://channel9.msdn.com/blogs/mtaulty/silverlight-
templating-a-button>.
31. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight -
Templating a Button. Dostupné z WWW: <http://channel9.msdn.com/blogs/mtaulty/silverlight-
animations--storyboards >.
32. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight -
Templating a Button. Dostupné z WWW: <http://channel9.msdn.com/blogs/mtaulty/silverlight-
simple-styles >.
33. JELÍNEK, Jan. Zdrojak.root.cz [online]. 16.3.2009 [cit. 2010-11-11]. Úvod do
streamování médií v Silverlightu 2.0. Dostupné z WWW: <http://zdrojak.root.cz/clanky/uvod-
do-streamovani-medii-v-silverlightu-2-0/ >.
34. Microsoft Czech MSDN Team. Blogs.msdn.com [online]. 2010 [cit. 2010-12-09].
Expression Blend: Přehrávání videa pomocí prvku MediaElement. Dostupné z WWW:
<http://blogs.msdn.com/b/vyvojari/archive/2010/06/15/expression-blend-prehravani-videa-
pomoci-prvku-mediaelement.aspx>.
35. LACLKO, Luboslav. Silverlight : Výukový průvodce tvorbou interaktivních aplikací. Vyd.
1. [s.l.] : Computer Press, 2010. 464 s. ISBN 978-80-251-2716-2.
55
36. JIRAVA, Jarda. Xaml.cz [online]. 2010 [cit. 2010-12-03]. Silverlight preloader. Dostupné
z WWW: <http://xaml.cz/silverlight/silverlight-preloader/>.
37. Laszlo. Laszlosystems.com [online]. 2010 [cit. 2010-11-25]. Products. Dostupné z
WWW: <http://www.laszlosystems.com/products/webtop/overview/>.
38. Adobe. Adobe.com [online]. 2010 [cit. 2010-12-11]. Adobe Flex. Dostupné z WWW:
<http://www.adobe.com/products/flex/>.
56
57
58