Silverlight 2 úvod

Tomáš Jecha, MVP, MCSD       01.01.2009       Silverlight, Offtopic, HTTP/HTML, Grafika       14029 zobrazení

Zajímá vás psaní webových aplikací na straně klienta ve vašem oblíbeném nástroji v .NETu? Slyšeli jste o Silverlightu a chcete vědět jak funguje a jestli může pro vás být užitečný? Nebo jen máte zájem poznat možnosti nové webové technologie?

Každý, kdo se alespoň trochu zajímá o Microsoft technologie, tak nemohl přeslechnout magické slůvko Silverlight.   Aby taky ne. Víme, že se Microsoft do pole webových technologií poslední dobou hrne opravdu s pořádným nasazením. Právě jednou z jeho zbraní je i relativně nedávno vypuštěný Silverlight 2, který je založený na principech konkurenčního Adobe Flash. O tom, k čemu je pro nás dobrý a jaké má možnosti využití píši (bez marketingových řečí) v tomto článku.

Fakta o Silverlightu

Pokusil jsem se sestavit hned ze začátku seznam faktů o Silverlightu, které by mohli zajímat každého, kdo se s technologií dostane do styku a rozmýšlí se, jestli ji případně použije.

Co může nabídnout aplikace v Silverlightu?

Silverlight nabízí bezpečné spuštění grafické aplikace na straně klienta ve webovém prohlížeči (proto se stává konkurencí Flashe). Je velmi podobný technologii Windows Presentation Foundation, je to vlastně její odlehčený klon pro web. Má funkce pro vektorovou grafiku a její rozpohybování animacemi. Specializuje se také na přehrávání videí ve vysokém rozlišení. Silverlight 2 navíc oproti první verzi poskytuje vestavěnou sadu ovládacích prvků (Button, ListBox, GridView, TextBox atp.), které si můžeme po grafické stránce plně upravit (rozbrat na grafické subelementy).

Samozřejmostí je komunikace se serverem v podobě dodatečných dotazů například na webové služby, které poskytnou data podle volby uživatele. Výsledkem může být velmi hezky graficky zpracovaná a snadno ovladatelná webová aplikace. Alternativou je JavaScript a Flash.

Jednoduchá ukázka je třeba moje hra Pacman pro Silverlight (hru spustíte klepnutím na obrázek):

Pacman

 

Co nabízí vývoj v Silverlightu nám, vývojářům?

Psát aplikace na straně klienta můžete dnes prakticky jen v JavaScriptu nebo ve Flashi. JavaScript je užitečný, ale podle mě jen na drobnosti a dovoluje jen naprosto minimální grafické efekty. Oproti tomu Flash je na tom po grafické Silverlight Logostránce mnohem lépe. Jen jeho vývojové prostředí je dost drahé a musím se přiznat, že ani scriptování v ActionScriptu (to je jazyk pro psaní funkcionality Flashových aplikací) mi není po chuti.

Když šáhneme po Silverlightu 2, dostáváme možnost využít odlehčený .NET Framework a to v oblíbeném vývojářském prostředí Visual Studio za pomoci C# nebo Visual Basic .NET. Úžasné je, že na klientské straně nemusí být .NET Framework nainstalován. Odstraněny jsou funkce, kterými můžeme klientovi uškodit. Většina základních a běžně používaných  objektů zůstává.

Pokud se rozhodneme pro starší Silverlight 1, tak bohužel nezbývá než použít JavaScript k dopsání funkcionality. To mě dost od první verze odpuzovalo.

Rozhodně zajímavá je také možná komunikace mezi stránkou a Silverlightem. Vy tak můžete třeba upravovat elementy na stránce, či ze stránky tlačítkem spouštět animaci v Silverlightu. Nejsem expert na Flash, ale četl jsem, že on takové možnosti nemá (nebo alespoň nejsou tak dobře použitelné).

Stejně jako u Flashe má i Silverlight vlastní obdobu cookies pro ukládání dat z aplikace (převážně nastavení a historie). Limituje se 4MB na doménu.

Co musí udělat klient, aby se mohla aplikace spustit?

Silverlight aplikace se spouští v prohlížeči. Jeho podporu obstarává 4MB veliký plugin pro Internet Explorer, Mozzila Firefox a Safari pro Max OS X (k dispozici na http://silverlight.net/). Běžný postup je takový, že pokud plugin není nainstalován, zobrazí se odkaz pro jeho stažení.

Pracuje se na podpoře prohlížeče Opera a pro mobilní telefony s Windows Mobile 6 a Symbianem. Pro GNU a Linux je k dispozici implementace Moonlight. Bohužel nevím nakolik je dokončená a použitelná, ani kde ji stáhnout a jak nainstalovat.

Chci Silverlight aplikaci vystavit na web, musí na to být hosting připravený?

Odpověď je ne. Silverlight aplikace se spouští na straně klienta a nevyžaduje od serveru žádné speciální služby. Pokud si uživatel otevře stránku se Silverlightem a má nainstalovaný plugin, tak se prohlížeč dotáže serveru běžným GET požadavkem na XAP soubor ve kterém je aplikace umístěna (v Silverlightu 1 jsou to XAML soubory) a spustí ji. Ano, může se stát, že server nezná xap/xaml typ souboru a klientovi ho nevrátí. To můžeme ale snadno řešit změnou přípony – například mojeAplikace.xap na mojeAplikace.xap.bin (bin hostingy znají).

Pokud ale Silverlight aplikace má i serverovou stranu, která poskytuje data, tak se může stát, že nějaké požadavky na konfiguraci serveru budou. To je ale snad jasné a s technologií to nijak nesouvisí – samotné spuštění Silverlightu probíhá v rámci běžné http komunikace se souborovým serverem.

Chci si zkusit napsat něco v Silverlightu 2, co bych měl vědět?

Struktura

Na obrázku můžeme vidět rozdíl mezi aplikací v Silverlightu 1 a Silverlightu 2:

 Silverlight 1 a 2 struktura

U verze 1 vše funguje tak, že na HTML stránce je XAML Silverlight objekt a my ho dodatečným JavaScriptem ovládáme. XAML kód obsahuje jen vektorou grafiku a definice animací (tzv. storyboardy). XAML je ve formátu XML a k jeho úpravě lze využít při dostatečných znalostech i jen textový editor. To ale dělat nebudeme.

Verze 2 postoupila o krok dál. HTML stránka odkazuje pouze na XAP soubor, který není ničím jiným než archivem s DLL, což je výstup ze Silverlight Projektu (nový typ projektu, který Visual Studio umí otevřít po instalaci nástrojů Silverlightu). Projekt obsahuje jak funkční kód, tak i soubory vektorové grafiky XAML, ze kterých automaticky vytváří uživatelské komponenty. Do prohlížeče tak dodáme kompletní Silverlight aplikaci v jednom souboru. A pokud máme nějaké další zdroje (obrázky, zvuky atp.), můžeme je umístit buď přímo do projektu nebo je nechat dotahovat za běhu přes http protokol.

Implementace do HTML stránky

Nebudu tu teď rozebírat detaily. Ukážu jen pro představu, jak umístění Silverlight objektu do HTML stránky vypadá. Vkládá se pomocí tagu <object>:

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
            <param name="source" value="aplikace.xap"/>
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
    </div>

V atributu object se definuje šířka a výška. V parametrech pak odkaz na xap soubor, pozadí okna a řada dalších nepovinných parametrů. Zajímavý je ještě odkaz s obrázkem na konci. Tam je html kód určující, co se má zobrazit, pokud Silverlight plugin nebyl nalezen. V příkladu je použit implicitní doporučený kód od Microsoftu, který nasměruje na instalaci Silverlightu, vypadá takhle:

Get Microsoft Silverlight 

Nástroje, editory, odkazy…

Pro práci potřebujeme Visual Studio 2008 SP1 nebo zdarma stažitelné Visual Web Developer Express SP1.

Nad vývojové prostředí musíme doinstalovat balíček Silverlight Tools for Visual Studio 2008 SP1. Po nainstalování se ve Visual Studio zobrazí typ projektu Silverlight Application.

Na editaci XAML souborů doporučuji Expression Blend, bohužel je placený. Lze ale stáhnout zkušební verze na 30 dní.

Sadu dalších komponent můžete stáhnout na http://www.codeplex.com/Silverlight.

Další informace v cizím jazyce na http://silverlight.net/GetStarted/.

Závěrem

Rád bych napsal o Silverlightu pár článku o psaní her. Máte nějaký tip, která by to měla být? Já jsem pro jednoduchou skákačku. Co vy na to? Je něco na co bych se měl zaměřit?

 

hodnocení článku

1 bodů / 1 hlasů       Hodnotit mohou jen registrované uživatelé.

 

Mohlo by vás také zajímat

ImagineCup

Upoutávka na celosvětovou studentskou soutěž Imagine Cup 2009!

Hledáme .NET vývojáře (Praha, Brno, Frýdek-Místek)

Webináře zaměřené na .NET Core a .NET 5

 

 

Nový příspěvek

 

Diskuse: Silverlight 2 úvod

dobrý den, nemohu si nainstalovat Silverlight Tools for Visual Studio 2008 SP1, při instalaci to vyhodí chybu, visual studio 2008 mam nainstalované i s tím service packem.Můžete prosím poradit?Děkuji Suchomel

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Z toho nic nevyčteme, jakou chybu???

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

Zdravím a omlouvám se všem mladším kolegům za příspěvek, ale, přestože neodsuzuji tvorbu her a jako prostředníka k naučení se nové technologie bych ji i podporoval, ale nezbylo-li by místečko také pro pár řádečků o technologiích využitelnějších na běžných (komerčních) webech - třeba multimédia (video, fotoshow atd.), animace či k čemu se tato technologie dá ještě na stránkách využít?

A ještě poznámečka - tentokrát pro Vás mladší pro změnu pozitivnější. V článku je zmínka o Expression nástrojích a jejich ceně. (placené resp. 30. denní trial). Nám dříve narozeným sice již není pomoci, ale Vám, kteří studujete, stačí vlastnit ISIC studentskou kartu (300 Kč/rok) a můžete si Expression Studio, stejně jako třeba MS Visual Studio 2005 či 2008 ve verzi profesional (myslím) stáhnout pro své pokusy zcela zdarma.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Rád bych do ukázkových příkladů přidal několik funkcí, které budou použitelné v běžných aplikacích (zobrazování nejlepšího skóre, nastavení, výběr levelu).

Ano, úplně jsem to vypustil. Jedná se o program DreamSpark na adrese http://www.dreamspark.com/ - tam si studenti mohou stáhnout verze pro výukové účely.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Měl jsem taky pocit že je to zde o webech a nikoliv o plošinovkách. Za sebe si myslím, že 1 příklad na vyrobení malé animace by vydal za 10 těchto článků.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

"Za sebe si myslím, že 1 příklad na vyrobení malé animace by vydal za 10 těchto článků."

Mám pocit, že mícháte více věcí dohromady. Tento první článek je pouze teoretický úvod do Silverlightu, proto není žádným způsobem srovnatelný s články o implementaci.

Navíc malá animace je čistě záležitost XAMLu a tudíž s programováním nemá vůbec nic společného. A já o XAMLu psát nechci.

A když bych to chtěl rozebírat do detailů, tak tvrdit, že příklad animace by vydal za 10 článků je trochu mimo. Je snad jasné, že ve hře by animace předvedeny byly. Tak proč by vám vadilo, že budu ukazovat příklad hry a ne web?

"Měl jsem taky pocit že je to zde o webech a nikoliv o plošinovkách."

Web je o webu. Silverlight je o webových grafických aplikacích. Co je špatné na příkladu hry plošinovky (hry jsou jedním z poslání Silverlightu), na které toho jde hodně ukázat?

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Nenechte se zviklat ve svém úsilí. Pokud Váš připravovaný příspěvek prakticky ukáže základy práce s touto technologií, je jedno, bude-li to na hře či čemkoliv jiném - hlavně že tam budou obsaženy i technologie, jak jste psal, potřebné či využitelné i pro běžné (komerčnější) webové aplikace.

Hlavní je se do problematiky pustit co nejdříve - než těm "snaživějším" propadne Vámi doporučená zkušební licence Expression Blendu :-(

nahlásit spamnahlásit spam -1 / 1 odpovědětodpovědět

Vím, že to bude znít jako výmluva, ale kvůli nedávné nemoci ještě cca po další 2 měsíce bude pociťovat značnou únavu. Zvládat při tom psaní článků, náročnou práci a programování nového portálu je poněkud vyčerpávající (dokonce jsem musel odřeknout rozepsanou knihu). Každopádně dokončení seriálu (společně s tím o databázích) plánuji a už na něm pracuji.

Pravděpodobně se budu ale zajímat více o programování než o Expression Blend, takže k psaní Silverlight aplikací ho potřebovat nebudete.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Neberu to jako výmluvu - zdraví je to hlavní, co máme. Hlavně se dejte brzo do kupy (a to skutečně ne toliko kvůli našemu portálu!

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

Děkuji, že sis našel časa článek napsal. Ze začátku jsem byl naštvaný, že MS všechnu svou sílu přesouvá na web a ve WinForms nenabídne takřka nic nového, navíc Silverlight 1 za moc nestojí, nevyhovuje mi použití JS. Silverlight 2 je ale o něčem jiném, nedělá bordel v HTML a vše je v jednom souboru, což je skvělé! Uvítám tedy další články a pokud jde o tip na hru, jsem pro klasiku typu Prehistorik.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Do WinForms už se nic moc nového asi přidávat nebude, Microsoft se snaží pomalu ale jistě zpropagovat a rozšířit Windows Presentation Foundation. Silverlight je takový první krůček, výhoda je, že se pěkně sjednotí GUI na webu a na desktopu.

Ještě by se mi líbilo, kdyby celá stránka mohla být přímo XAP, nebo resp. že by webová aplikace byla všeho všudy jeden jediný XAP a odkazovalo by se na jednotlivé XAML soubory v tom archivu, což by byly de facto jednotlivé stránky celého webu. Tím by se mohlo definitivně zrušit HTML a byl by jednou pro vždy pokoj od problémů s CSS, Javascriptem atd.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Aby ne, Microsoft na poli WinForms nemá konkurenci, proč by se snažil?

A snad jedna HTML stránka nevadí... alespoň jde nějak říct uživateli, že nemá plugin.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Jak říká Tomáš, bylo by skvělé mít celý projekt v jednom souboru. Jedna stránka by nevadila, ale obludný je způsob jakým se objekty do stránky vkládají. Lepší než všechno řešit přes object by bylo standardizovat nový tag, ale to je zbytečné, to už pak bude rovnou lepší spoušťět SL projekty z jednoho souboru.

A k WinForms... Proč by se Microsoft snažil? Máš pravdu, důvod k tomu nemá a s WinForms se vyvýjí opravdu velmi velmi dobře, ale nějaká novinka by se snad objevit mohla. Když MS přinese jednou za rok nějaké grafy, které navíc ani nevytvořili v MS, akorát odkoupili, to je celkem tristní. Neříkám, že by mi nějaká komponenta chyběla, všechno se dá dotvořit, ale uvítal bych, kdyby se čas od času něco nového objevilo. Škoda, že je to jen křik do větru jednotlivcem, ale mám osobně radši, když můžu spustit e-amilový klient, který bude mít systémový vzhled (controls, okno, barvy, fonty atp), než když otevřu hnusně barevnou stránku na Internetu, jejíž vzhled můžu ovlivnit maximálně tak skinem.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Dnes už jsou ve WinForms prakticky na všechno placené komponenty a Microsoftu se oprávněně s nimi nechce pouštět do boje. Začátečníky na pokročilé komponenty nenaláká a profesionálové si je můžou v rámci projektů dovolit.

Ale to se snažím Microsoft pochopit, ne ho obhajovat.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

V pořádku, to netvrdím. Abych řekl pravdu, takhle jsem se na to nedíval. Když si vezmu, kolik práce muselo být kolem vytvoření pitomého Labelu se vším všudy (jen se podívejme do Reflectoru, co všechno v sobě Label má). A i takto zdánlivě jednoduchá komponenta má v pozadí dokonalý kód, který zajišťuje, že když budeme stejně dokonalí, jako vývojáři v MS, náš program nikdy nebude chybovat. A takových komponent nám MS nabídl velmi mnoho. Jak říkáš, na to ostatní jsou tu placené a jistě stejně dokonalé komponenty, ale pro mě je logo Microsoftu zárukou kvality a proto mi další komponenty chybí.

PS: A flamery prosím ať se zdrží komentářů ohledně kvality MS. Mám svůj názor a ten žádný ubožák, co akorát kritizuje cizí práci nezmění, takže ať se o to žádný takový prosím ani nepokouší.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

No, asi budu prohlášen za flamera, ale tvrdit, že nějaký kód je dokonalý podle Reflectoru, to je zajímavé. Kdybys alespoň vycházel z referenčních zdrojáků, ale Reflector neukazuje pravé zdrojové kódy, ale jen to, co disassembloval, a to se může dost značně lišit. Jinak existuje taková hezká pravdivá poučka - každý program má alespoň jednu chybu. Jsme jenom lidi a nemusíme se za to stydět, že chybujeme. Ostatní chybují daleko víc. Pro mě je hlavně důležité, jestli se chyba dá vůbec opravit a za jak dlouho opravená bude.

Jinak na základních WinForms komponentách se toho moc zkazit nedá, je to víceméně jen obálka kolem WinAPI a komponenty jako Label a TextBox jsou otestovány intenzivním používáním už od Windows 3 a možná ještě starších.

Hold bych Microsoftu vzdával třeba za DataGridView, je to sice robustní a obludná šílenost, ale funguje a umí snad úplně všecko, co by kdokoliv mohl kdy potřebovat. Většinou spíš člověk neví, že ta komponenta něco umí sama, nebo neví, kde a jak má co nastavit.

On obecně celý .NET Framework je velice hezky napsaný (jasně, dá se najít spousta protipříkladů), je to možná jediný fakt perfektně napsaný Microsoftí produkt. Další takový jsou obecně Windows, horší je to už třeba s MS Office nebo Visual Studiem, tam by jisté rezervy byly (co se týče toho, jak to funguje vevnitř, navenek to vypadá OK, ale uvnitř je v tom trochu zmatek a nepořádek, i když je pravda, že je to díky dlouhé historii těchto produktů a nutnosti zachovat kompatibilitu).

Ale jak jsem říkal, ve Winformech se toho už moc zlepšovat nedá a nebude, Microsoft se snaží natlačit lidi do WPF. I když se to některým (včetně mě) nemusí moc líbit, je to tak a je pravda, že aplikaci prodává hlavně vzhled a uživatelské rozhraní (typický příklad je iKrám od Applu, neumí to spoustu věcí, které by člověk očekával, ale hezky to vypadá a jsou tam kůl efekty a prostě se to prodá).

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Ano, že Reflector neukazuje přímo zdroják a někdy i něco co se zdaleka nepodobá vím i ze zkušenosti, spíš jsem to myslel tak, že jsou ty komponenty promyšlené do posledního detailu. A že jsou obal kolem Windows API? To je taky práce MS, takže to skoro vyjde na stejno.

A že aplikaci prodává vzhled? To je bohužel stoprocentní pravda. Z obchodního hlediska je to logické, že MS tlačí lidi do WPF, ale myslím, že je věčná škoda, že tak masově.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

To, že není nutná žádná podpora na straně web serveru, není tak úplně pravda, alespoň ne v případě Silverlight 2.0. Je nutné zajistit správné posílání MIME type pro příslušné soubory. V posledních verzích IIS serveru je toto již nastaveno, pro nižší verze doporučuji následující návod

http://learn.iis.net/page.aspx/262/silve...

--J.

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Proto jsem psal o přejmenování souboru například na koncovku bin. Mám vyzkoušené, že vše funguje i se špatným MIME. Viz hra Pacman, kterou jsem uvedl ve článku. Máte jiné zkušenosti?

nahlásit spamnahlásit spam 1 / 1 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

Doporučil bych třeba, jako druhou hru, vyrobit poker... Dobře by se na tom ukazovala funkcionalita

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

Přímou konkurencí Silverlightu je spíše Flex od Adobe nebo JavaFX od Sunu

nahlásit spamnahlásit spam 0 odpovědětodpovědět

No měl jsem za to Flex je vývojová sada pro Flash... Nebo snad ne?

Pokud jde o JavaFX, tak to je konkurence samozřejmně také. Ale Flash je známější, proto jsem ho uvedl.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

Diskuse: Silverlight 2 úvod

Plošinovka není špatný nápad. Nejlépe s posouváním obrazu podle toho, jak chodí postavička, pokud to není příliš pokročilé na začátečnický tutoriál. Bude se mi hodit do jednoho projektu.

nahlásit spamnahlásit spam -1 / 1 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:
Heslo:

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback