1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Petr Šamša Webové rozhraní s podpor...
Vysoká škola ekonomická v Praze Fakulta 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 2 3 4
Úvod.......................................................................................................................................7 Cíl práce.................................................................................................................................8 Terminologický slovník.........................................................................................................9 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
Cíl práce
2
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
Nástroje pro tvorbu
6
[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
Definice požadavků na vytvářenou grafickou aplikaci
7
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
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 = '' 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] ]:
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): <Ellipse x:Name="kruh" Height="100" Width="100" Fill="#EEEEEE" Stroke="DarkGray"/> Š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] ]. <Storyboard>
32
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í "databasedriven" 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 Nyní
si
Uživatelské rozhraní 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] ]:
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] ].:
namespace kniha.Web { public class KnihaService : IKnihaService { KnihaDataContext dc = new KnihaDataContext(); public List 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
KnihaServiceReference (Obr.10).
Obr.10 – Service Reference
41
na
Discover
a
nazveme
ji
Do code-behind MainPage.xaml.cs vložíme metodu 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:
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.
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).
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 Sub End 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:
Canvas.Left="36"
Canvas.Top="18"
TextWrapping="Wrap">
Foreground="#FF272626" Text="Bakalářská práce | Petr Šamša | Streaming "/>
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:
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:
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: . 2. Microsoft MSDN. blogs.msdn.com [online]. 2010 [cit. 2010-11-20]. Webové úterý – Novinky v Silverlight 4 – díl 1. Dostupné z WWW: . 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: . 4. EVERETT-CHURCH, Justin. Adobe.com [online]. 2010 [cit. 2010-12-12]. Introducing Adobe Flash Player 10.1 public prerelease. Dostupné z WWW: . 5. Microsoft MSDN. msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. Visual Studio 2010. Dostupné z WWW: . 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: . 7. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-11-14]. What's new in Expression Blend 2?. Dostupné z WWW: . 8. NĚMEC, Luboš. Grafika.cz [online]. 14.6.2007 [cit. 2010-11-11]. Microsoft Expression Blend 2. Dostupné z WWW: . 9. Microsoft MSDN. Blogs.msdn.com [online]. 2010 [cit. 2010-11-22]. MDSN Blog. Dostupné z WWW: . 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: .
53
11. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. Silverlight.js Reference. Dostupné z WWW: . 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: . 13. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-11-21]. ASP.NET Silverlight Server Control. Dostupné z WWW: . 14. KOTTNAUER, Jakub. Programujte.com [online]. 11.1.2010 [cit. 2010-11-01]. Silverlight a práce s databází. Dostupné z WWW: . 15. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-14]. LINQ to SQL. Dostupné z WWW: . 16. Microsoft. Microsoft.com [online]. 2010 [cit. 2010-11-14]. Microsoft Silverlight. Dostupné z WWW: . 17. Microsoft. Silverlight.net [online]. 2010 [cit. 2010-12-11]. Microsoft Silverlight. Dostupné z WWW: . 18. CHRISTENSEN, Rob. Http://blogs.adobe.com [online]. 2010 [cit. 2010-12-03]. Previewing Adobe AIR 2 at Adobe MAX. Dostupné z WWW: . 19. LÁSLO, Petr. Programujte.com [online]. 27.7.2008 [cit. 2010-11-22]. Microsoft Expression Blend - Úvod. Dostupné z WWW: . 20. Microsoft MSDN. Msdn.microsoft.com [online]. 18.9.2007 [cit. 2010-12-14]. Windows Live. Dostupné z WWW: . 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: . 23. Microsoft MSDN. Msdn.microsoft.com [online]. 2010 [cit. 2010-12-11]. Developers code with Microsoft. Dostupné z WWW: .
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: . 25. Microsoft. Windowsclient.net [online]. 2010 [cit. 2010-12-13]. Windows Presentation Foundation. Dostupné z WWW: . 26. BERNARD, Borek. Interval.cz [online]. 25.4.2008 [cit. 2010-12-13]. Rich Internet Applications v roce 2008. Dostupné z WWW: . 27. Adobe.com [online]. 2010 [cit. 2010-11-11]. Adobe AIR. Dostupné z WWW: . 28. Microsoft Czech MSDN Team. Silverlight 3 [online]. [s.l.] : [s.n.], 12.8.2009 [cit. 201012-11]. Dostupné z WWW: . 29. Microsoft. Silverlight.net [online]. 2010 [cit. 2010-12-14]. Silverlight Toolkit. Dostupné z WWW: . 30. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight Templating a Button. Dostupné z WWW: . 31. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight Templating a Button. Dostupné z WWW: . 32. TAULTY, Mike. Channel9.msdn.com [online]. 2008 [cit. 2010-12-11]. Silverlight Templating a Button. Dostupné z WWW: . 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: . 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: . 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.
