Pár střípků o SilverLight

30. September 2007

Tuto středu (27. září 2007) se v Gopasu konala přednáška Štěpána Bechynského s názvem SilverLight. V tomto článku bych vám chtěl představit co jsem se ve zhruba dvouhodinové přednášce dozvěděl.

Nejdříve pár slov o SilverLightu přímo od Microsoftu:

Microsoft® Silverlight™ is a cross-browser, cross-platform plug-in for delivering the next generation of .NET based media experiences and rich interactive applications for the Web. Silverlight offers a flexible programming model that supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. Silverlight supports fast, cost-effective delivery of high-quality video to all major browsers running on the Mac OS or Windows.

Uvedená marketingová definice se jeví celkem správná s jednou podstatnou poznámku – platí pouze pro SilverLight 1.1, který se nachází v Alpha verzi (ostrá verze prý bude v dubnu 2008). Proč to uvedu dále v článku.

Architektura SilverLight aplikace

SilverLight aplikace se skládá ze tří částí:

  • XHTML stránka
  • XAML soubor
  • soubory s aplikační logikou

Stručně popsané části si pojďme prohlédnout podrobněji:

XHTML stránka

XHTML stránka je hostitelem SilverLight aplikace. Je zapotřebí si do prohlížece stáhnout a instalovat (podobně jako u Adobe Flashe) plugin. V současnosti jsou podporovány následující browsery:

  • platforma Windows: IE6, IE7, Firefox, (připravuje se podpora Opery)
  • platforma Mac: Safari
  • platforma Linux: připravuje se ve spolupráci s firmou Novell (projekt Mono a MoonLight)

A jak tedy začlenit SilverLight aplikaci do XHTML stránky? Zde je ukázka:

...
<head>
  <title>My Silverlight Application</title>

  <!-- Helper files for initializing and creating the Silverlight plug-in -->
  <script type="text/javascript" src="js/Silverlight.js"></script>
  <script type="text/javascript" src="js/CreateSilverlight.js"></script>

  <!-- Application event-handler functions -->
  <script type="text/javascript" src="js/eventhandlers.js"></script>
</head>
...
<body>
  <div id="slPluginHost" >
    <script type="text/javascript">
      // Create a variable that references the HTML element that hosts the plug-in.
      var parentElement = document.getElementById("slPluginHost");

      // Initialize and create the plug-in.
      createSilverlight();
    </script>
  </div>
</body>
...

Soubor SilverLight.js obsahuje funkce nutné pro přístup k SilverLight komponentě vložené do stránky. Fuknce createSilverLig­ht() může vypadat následovně:

function createSilverlight()
{
    Silverlight.createObject(
        "plugin.xaml",                      // Source property value.
        parentElement,                      // DOM reference to hosting DIV tag.
        "myPlugin",                         // Unique plug-in ID value.
        {                                   // Plug-in properties.
            width:'1024',                   // Width of rectangular region of plug-in in pixels.
            height:'530',                   // Height of rectangular region of plug-in in pixels.
            inplaceInstallPrompt:false,     // Determines whether to display in-place install prompt if invalid version is detected.
            background:'white',             // Background color of plug-in.
            isWindowless:'false',           // Determines whether to display plug-in in windowless mode.
            framerate:'24',                 // MaxFrameRate property value.
            version:'1.0'                   // Silverlight version.
        },
        {
            onError:null,                   // OnError property value -- event-handler function name.
            onLoad:null                     // OnLoad property value -- event-handler function name.
        },
        null,                               // initParams -- user-settable string for information passing.
        null);                              // Context value -- passed to Silverlight.js onLoad event handlers.
}

Anglickým komentářům je myslím dobře rozumět, takže v rychlosti nejdůležitější parametry:

plugin.xaml
název souboru s definicí uživatelského rozhraní
parentElement
odkaz na element v kontextu XHTML stránky, kdo kterého se má SilverLight aplikace přidat

XAML soubor

XAML je značkovací jazyk pro definici uživatelské rozhraní. Jedná se v podstatě o XML soubor.

V XAML souboru se nadefinuje uživatelské rozhraní a handlery událostí.

Aplikační logika

Pokud se bavíme o SilverLight 1.0 tak se aplikační logika omezuje na javascriptové funkce, které jsou ze SilverLight aplikace volány. Tyto funkce mohou být umístěny v externích souborech nebo přímo v XHTML stránce.

V SilverLight 1.1 je situace dočista jiná. Přímo v XAML souboru je možno definovat code begind zdroj. Tím zdrojem může být buď kompilovaný kód nebo skript. Z kompilovaných jazyků bude podporován C# a VB.NET. Jejich běh bude zajišťovat CLR integrovaný v pluginu. Ze skriptovacích jazyků budou podporovány Javascript, Python a Ruby. jejich běh bude zajišťovat DLR. Ani v jednom případě tedy není nutné mít na klientu nainstalovaný MS.NET.

Tohle se mi hodně líbí – možnost definovat aplikační logiku v DLL souboru. Výkon aplikace bude oproti javascriptovému řešení určitě nesrovnatelný (podle slov pana Bechynského je to o 4 řády).

Ještě bych chtěl zmínit, že se připravuje podpora Web Services.

Vývojové nástroje

Základním vývojovým nástrojem je Microsoft Visual Studio 2008. Po stažení příslušného pluginu si můžete přímo založit nový SilverLight projekt.

XAML soubor lze editovat v programu Microsoft Expression Blend 2. V blendu si můžete vektorově nakreslit grafiku a opatřit ji například animátory. Ty se rozdělují podle datového typu animované vlastnosti.

Po založení nového SilverLight 1.1 projektu se vytvoří prádný XAML soubor a rovnou také code behind stránky v jazyce C#.

Další zajímavosti

  • Zaujala mě snadná komunikace mezi XHTML stránkou a SilverLight aplikací. Kupříkladu ze SilverLight aplikace máte pomocí statické property přístup k DOM hostitelské stránky, se kterým můžete dělat do se vám zlíbí.
  • Z kontextu javascriptu v XHTML stránce lze volat třídy a metody v SilverLight aplikaci. Takže například můžete spouštět C# kód v DLL z javascriptu – neuvěřitelné. Přístup je samozřejmě pouze ke spřávně oanotovaným třídám a metodám.
  • Další skvělá věc je, že si mezi SilverLightem a javascriptem ve stránce můžeme posílat i komplexní data – například doménové objekty. Komunikace probíhá pomocí JSONu.
  • Už dnes je SilverLight neporazitelné v oblasti videa. V USA prý existují televize, které svůj program vysílají po internetu a pomocí SilverLightu jej lze přehrávat v HD kvalitě.
  • Velikost pluginu, který je nutno nainstalovat do prohlížeče je ve verze 1.0 asi 1.5 MB, verze 1.1 bude mít asi 4.5 MB.
  • SilverLight má obdobu cookies (SharedObject v případě Flashe) – možno uložit až 4 MB dat.

Závěr

SilverLight (a obzvláště verze 1.1) se mi moc líbí. Je vidět, že se Microsoft rozhlédl kolem sebe (Flash) a udělal svoje řešení, které netrpí některými neduhy konkurence. Uvidíme, jak se v budoucích měsících SilverLight rozšíří. V Čechách jsem o něm zatím skoro neslyšel. Už několik měsíce nesleduju dění kolem JavaFX, ale bojím se, že SilverLight má zatím navrch.

Odkazy

Článek patří do kategorie: Ostatní

2 Komentářů Přidat komentář

Přidat komentář

Povinné

Povinné, skryté

Security Image Povinné
Opište text z obrázku

Povolené HTML značky:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Odkazovat na tento článek  |  Přihlásit se k odběru těchto komentářů přes RSS Feed

Kalendář

November 2024
M T W T F S S
« Jan    
 123
45678910
11121314151617
18192021222324
252627282930  

Poslední články

Locations of visitors to this page