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
<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/petrsamsabakalarskaprace20 10.Web/ClientBin/PetrSamsaBakalarskaPrace2010.xap", parentelement: document.getelementbyid("mysilverlighthost"), id: "mysilverlightcontrol", properties: { height: "100%", width: "100%", background: "white", iswindowless: "true", framerate: "30", inplaceinstallprompt: true, version: "4.0", ignorebrowserver: "true", enablehtmlaccess: "true", splashscreensource: "preloadersamsa.xaml" }, events: { onload:sl_load, onsourcedownloadprogresschanged: progresschanged }}); 30
Preloader se nemusí zobrazit, pokud se aplikace načte do cca. 0.5 sekundy od požadavku na zobrazení. Preloader se musí nejdříve také nahrát na cílový prohlížeč, tudíž by neměl být příliš velký a neměl by obsahovat velké množství dodatečných resources, hlavně obrázků. Preloader zpříjemní dobu do načtení aplikace a zkrátí tím tak čas, který by uživatel strávil sledováním přibývajících procent. 8.2 Vytvoření šablony pro tlačítko U většiny komponent si vystačím se základním stylováním. Pokud potřebuji u tlačítka změnit nejen styl písma a barvu, musím si vytvořit šablonu. Tu si mohu definovat přímo v těle tlačítka nebo ve zdrojích. Pro opětovné použití je samozřejmě nutné definovat šablonu ve zdroji. Nyní si vytvořím základní tlačítko: <Button x:name="spustit"/> 8.2.1 Vytvoření šablony Pro vytvoření šablony použiji nástroj ControlTemplate a definuji si v něm budoucí vzhled. Půjde o elipsu s textem uprostřed (Obr.15): <ControlTemplate x:key="sablonaspustit" TargetType="Button"> <Grid Height="100" Width="100"> <Ellipse x:name="kruh" Height="100" Width="100" Fill="#EEEEEE" Stroke="DarkGray"/> <TextBlock Text="Spustit" x:name="obsahtlacitka" HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> Šablonu mám připravenou k použití. Nyní ji přiřadíme k tlačítku: <Button x:name="spustit" Template="{StaticResource SablonaSpustit}"/> 31
Obr.15 Vytvoření tlačítko a připravení template 8.2.2 Stavové animace Teď je tlačítko po vzhledové stránce bez úprav, samotné užití šablony nic nezměnilo. Pro změnu chování tlačítka musíme definovat co se stane po najetí a stisku tlačítka myši. Každé tlačítko má v sobě uloženo několik stavů Normal, MouseOver, Pressed a Disable. Nyní vytvořím pro jednotlivé stavy tzv. stavové animace. K obsluze stavové animace nám slouží nástroj VisualStateManager, kde si definuji základní stavy CommonStates. Jednotlivé pak definuji pomocí VisualState. Struktura animace Pro definování skupiny animací použiji Storyboard a pro animaci použiji nástroj DoubleAnimation, který nám umožňuje plynulý přechod mezi dvěma proměnnými Double. Nastavíme si typ komponenty, který a jakou její vlastnost budu animovat, do jaké hodnoty se má během animace dostat a jak dlouho bude celá animace trvat [kód převzat a upraven z: [30] ]. <VisualStateManager.VisualStateGroups> <VisualStateGroup x:name="commonstates"> <VisualState x:name="normal"> <Storyboard> <DoubleAnimation To="11" Duration="00:00:00.1" Storyboard.TargetName="obsahTlacitka" 32
Storyboard.TargetProperty="FontSize"/> </Storyboard> </VisualState> <VisualState x:name="mouseover"> <Storyboard> <DoubleAnimation To="16" Duration="00:00:00.1" Storyboard.TargetName="obsahTlacitka" Storyboard.TargetProperty="FontSize"/> </Storyboard> </VisualState> <VisualState x:name="pressed"> <Storyboard> <DoubleAnimation To="14" Duration="00:00:00.1" Storyboard.TargetName="obsahTlacitka" Storyboard.TargetProperty="FontSize"/> <DoubleAnimation To=".3" Duration="00:00:00.1" Storyboard.TargetName="obsahTlacitka" Storyboard.TargetProperty="Opacity"/> </Storyboard> </VisualState> <VisualState x:name="disabled"> <Storyboard> <DoubleAnimation To=".3" Duration="00:00:00.1" Storyboard.TargetName="kruh" Storyboard.TargetProperty="Opacity"/> <DoubleAnimation To=".3" Duration="00:00:00.1" Storyboard.TargetName="obsahTlacitka" 33
Storyboard.TargetProperty="Opacity"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> Principy stylování v Silverlightu jsou velice podobné CSS a mohu styly definovat u každé komponenty zvlášť. Šablonu využiji tehdy, pokud potřebuji vytvořit vlastní vzhled dané komponenty. Důležité je neopomenout při vytvoření vlastní šablony definovat její chování. 8.3 Vytvoření návštěvní knihy Každá větší aplikace ke své činnosti potřebuje nějakou databázi. Vytvoření "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] ]: <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 using using using using System.Collections.Generic; System.Linq; System.Runtime.Serialization; System.ServiceModel; 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 using using using using using System; System.Collections.Generic; System.Linq; System.Runtime.Serialization; System.ServiceModel; 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 KnihaServiceReference (Obr.10). Obr.10 Service Reference 41 na Discover a nazveme ji
Do code-behind MainPage.xaml.cs vložíme metodu GetAllPosts: private void GetAllPosts() { KnihaServiceReference.KnihaServiceClient gsc = new KnihaServiceReference.KnihaServiceClient(); gsc.getallpostscompleted += gsc_getallpostscompleted; gsc.getallpostsasync(); } Tato metoda nastaví pomocí event handleru metodu, která má zavolat gsc_getallpostscompleted, jakmile bude dokončena práce v metodě GetAllPosts na WCF službě a následně tuto GetAllPosts metodu asynchronně zavolá, tímto nedojde k zablokování zbytku aplikace. Vytvořením metody gsc_getallpostscompleted zajistíme funkčnost: private void gsc_getallpostscompleted(object sender, KnihaServiceReference.GetAllPostsCompletedEventArgs e) { foreach (var item in e.result) { posts_lb.items.add(string.format("{0} ({1}) napsal: {2}", item.author, item.date, item.text)); } } Pro úspěšné načtení příspěvků musíme přidat volání metody GetAllPosts do konstruktoru okna: public MainPage() { InitializeComponent(); GetAllPosts(); } 42
8.3.7 Zápis do databáze Princip a metoda zápisu je stejná jako u čtení z databáze [kód převzat a upraven z: [14] ].: private void SaveNewPost() { GuestbookServiceReference.GuestbookServiceClient gsc = new GuestbookServiceReference.GuestbookServiceClient(); gsc.savenewpostcompleted += gsc_savenewpostcompleted; gsc.savenewpostasync(name_tb.text, text_tb.text); } private void gsc_savenewpostcompleted(object sender, EventArgs e) { name_tb.text = ""; text_tb.text = ""; posts_lb.items.clear(); GetAllPosts(); } 8.4 Streamování videa [V této části ukáži postup a vytvoření streamování videa uloženého na vzdáleném serveru] Pro práci s videem a médii se v Silverlightu používá stejná komponenta MediaElement. Většina definovaných atributů a vlastností je stejných a liší se pouze v několika částech, které náleží přímo povaze média, např. hlasitost zvuku, vykreslování videa nebo pokud je zvuk součástí videa. 8.4.1 Vložení videa do aplikace Vytvoříme si nový projekt typu Silverlight a nazveme ho stream. Prvním krokem je vložení videa do aplikace. V atributu Source se definuje zdroj videa. V mém případě využívám zdroj videa, které je umístěno na vzdáleném serveru: <MediaElement x:name="bmw" Source="http://petrsamsa.wz.cz/video/bmw.wmv"/> 43
Po ozkoušení přidáme vlastnosti jako výška, šířka a např. Autoplay nastavíme na hodnotu False, z důvodu nechtěného otevření videa ihned po načtení aplikace. <MediaElement x:name="bmw" Source="http://petrsamsa.wz.cz/video/bmw.wmv" Height="320" Width="480" AutoPlay="False"/> 8.4.2 Obsluha videa Pro základní obsluhu jsem zvolil tlačítka Přehrát, Pozastavení a Zastavení. Jednoduše tyto příkazy využijeme zavoláním při stisku příslušného tlačítka. U tlačítek Pozastavení a Zastavení nastavíme IsEnable na False, protože je video po načtení zastaveno a je nesmyslené volat funkce Pause() a Stop() (Obr.19). <!--play--> <Button x:name="bt_play" Content="Přehrát" Height="20" Width="100" Margin="10" Click="bt_play_Click"/> <!--pause--> <Button x:name="bt_pause" Content="Pozastavit" Height="20" Width="100" Margin="10" IsEnabled="False" Click="bt_pause_Click"/> <!--stop--> <Button x:name="bt_stop" Content="Zastavit" 44
Height="20" Width="100" Margin="10" IsEnabled="False" Click="bt_stop_Click"/> Do těla tlačítek doplníme obslužné funkce jako zapnutí a vypnutí tlačítek podle stavu videa [kód převzat a upraven z: [33] ]. Partial Public Class MainPage Inherits UserControl Public Sub New() InitializeComponent() End Sub Private Sub bt_pause_click(byval sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) bmw.pause() bt_play.isenabled = True bt_pause.isenabled = False End Sub Private Sub bt_play_click(byval sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) bmw.play() bt_pause.isenabled = True bt_stop.isenabled = True bt_play.isenabled = False End Sub Private Sub bt_stop_click(byval sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) bmw.stop() bt_play.isenabled = True bt_stop.isenabled = False bt_pause.isenabled = False End 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: <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/petrsamsab akalarskaprace2010.web/clientbin/petrsamsabakalarskaprace2010.xap", sl3host, "sl3", { width: "200", height: "50", background: "white", alt: "<!--not installed-->", version: "2.0.31005.0" }, { onerror: onslerror, onload: onslload }, "param1=value1,param2=value2", "row3"); </script> 49