Vysoká škola ekonomická v Praze - info.sks.czinfo.sks.cz/www/zavprace/soubory/2011/68370.pdf · Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná

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

http://msdn.microsoft.com/

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



• 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




• 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

http://www.youtube.com/

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>


Duration="00:00:00.1"



</Storyboard>

</VisualState>

<VisualState x:Name="Pressed">

<Storyboard>


Duration="00:00:00.1"



<DoubleAnimation To=".3"

Duration="00:00:00.1"


Storyboard.TargetProperty="Opacity"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>


Duration="00:00:00.1"

Storyboard.TargetName="kruh"



Duration="00:00:00.1"


33


</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).



<Button x:Name="bt_play"

Content="Přehrát"

Height="20"

Width="100"

Margin="10"

Click="bt_play_Click"/>



<Button x:Name="bt_pause"

Content="Pozastavit"

Height="20"

Width="100"

Margin="10"

IsEnabled="False"

Click="bt_pause_Click"/>



<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: "", 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

http://www.symbio.cz/clanky/silverlight-nebo-flash.html

http://www.symbio.cz/clanky/silverlight-nebo-flash.html

http://msdn.microsoft.com/en-us/library/cc189089(VS.95).aspx



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



animations--storyboards >.



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

http://interval.cz/clanky/rich-internet-applications-v-roce-2008/



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

Documents

Vysoká škola ekonomická v Praze - info.sks.czinfo.sks.cz/www/zavprace/soubory/2011/68370.pdf · Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná