XAML.cz Magazín moderních technologií založených na XAML

Začínat se má od začátku a jak tedy nejlépe začít se Silverlightem, než si ukázat jak vlastně dostat Silverlight aplikaci na klienta, což znamená spustit ji v HTML stránce.

Dnešní článek tak tedy nebude vůbec o tom, jak pracovat se Siverlightem, ale jak si připravit stránku, do které později můžeme vytvořenou Silverlight aplikaci umístit. Podívám se na základní způsoby a prozradím, jak je taková aplikace ve stránce spuštěna.

Silverlight jako plug-in

Silverlight je lehký cross platformní plug-in zodpovědný za vyrenderování Silverlight obsahu. V tomto případě ona nezávislost souvisí s tím, jaké všechny platformy a technologie pro vkládání obsahu Silverlight podporuje.

Začnu asi tím nejjednodušším a tím je prohlížeč Internet Explorer, který využívá pro vkládání pluginů ActiveX model. Pokud se pak podíváme na jiné prohlížeče, tak ty mají různé technologie pro vkládání obsahu, takže pro Firefox je to Netscape Server API (NSAPI) a pro Safari a Chrome, které jsou založené na stejném jádře je to WebKit a taktéž NSAPI – zde tuším záleží na tom, na kterém operačním systému je daný prohlížeč použit. Samozřejmě můžu říct, že pokud jakýkoliv jiný browser používá jeden z těchto modelů pro vkládání obsahu, tak v něm můžeme zobrazit Silverlight aplikaci.

Ještě by bylo dobré zmínit, že při instalaci Silverlightu na klientský systém je třeba jen jedné instalace, která má přibližně 5-6MB (na Mac OS je to tuším o něco více) a tato instalace se integruje do všech prohlížečů v systému, není tak třeba pro každý nainstalovaný prohlížeč pouštět samostatnou instalaci.

Vložení Silverlight do stránky

Jak jsem naznačil v odstavcích výše, Silverlight je třeba do prohlížeče nějakým způsobem vložit. A jelikož prohlížeče pracují převážně s HTML budeme jej vkládat právě do HTML stránky. Pro vkládání pluginů k tomu slouží v jazyce HTML speciální značka object, pomocí které říkáme prohlížeči, jaký zásůvný modul má spustit a pomocí něj zobrazit předaný obsah.

Úplně nejjednodušší a nejminimalističtější způsob jak takovou aplikaci vložit je použití následujícího kódu:

<div id="mySilverlightHost" style="height:100%;">
<object
id="SilverlightPlugInID"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/MySilverlightApp.xap" />
</object>
</div>

kde si nejdříve vytvoříme nějaký kontejner, ve kterém bude naše aplikace hostována, to je onen div element pojmenovaný jako mySilverlightHost. A dále již přichází na řadu element object pomocí něhož budeme vkládat Silverlight aplikaci. Všimněte si, že jak atribut data, tak i type nabývají hodnoty x-silverlight-2, což neznamená, že se jedná o Silverlight verze 2, ale o použitý MIME type  spouštějící daný plug-in.

Důležité vlastnosti pro běh Silverlight aplikace se pak předávají přes vnořený element s názvem param, kdy v tomto případě jen odkazujeme na hostovanou Silverlight aplikace a říkáme, kde je umístěna na serveru. Tak jak budeme postupně vytvářet v příštích článcích Silverlight aplikaci, budeme využívat předávání dalších vlastností do aplikace více.

WSOD – White Screen Of Death

V začátcích se asi budete docela často potýkat s tímto typem chyby. Jedná se o to, že se vám Silverlight aplikace z nějakého důvodu nenahraje a vy tak uvidíte jen prázdnou bílou plochu. Nejčastější příčinou je špatně deklarovaný XAML, nesprávně zadaná cesta ke .xap souboru, nebo výjimka při startu aplikace. Samozřejmě se můžete setkat i s dalšími chybami.

Chybu se kterou se můžete taktéž setkat je, že na serveru, který poskytuje .xap soubor, a nemusí se nutně jednat jen o IIS Server, ale třeba Apache nebo jiný webový server, nemáte nastaven správně MIME type pro tyto soubory, který by měl být registrován na x-silverlight-app.

Další možnosti spuštění

Zmíněný přímý zápis elementu object není jediný možný a určitě raději využijete nějakých pokročilejších možností, jak vložit Silverlight aplikaci do stránky. Všechny dále zmíněné techniky však vedou ke stejnému cíly a to vygenerování elementu object a předání potřebných parametrů.

Používáme asp.net stránky

V dřívějších verzích Silverlight SDK byl k dispozici serverový prvek nazvaný asp:Silverlight, který umožňoval vložit a vytvořit na daném místě Silverlight objekt. Tento serverový prvek však od verze 3.0 již není přístupný, což je možná škoda, na druhou stranu jsou vývojáři tlačeni k tomu, aby používali preferovaný způsob, jakým by se měl Silverlight do stránky vkládat a to je za použití JavaScriptu a využití Silverlight.js souboru.

Používáme Silverlight.js

Soubor Silverlight.js je součástí Silverlight SDK a také součástí projektu ve Visual Studiu pro tvorbu Silverlight aplikací. Pokud tedy vytvoříte ve VS projekt typu Silverlight, budete mít tento soubor k dispozici. Aktuální verzi je pak též možné stáhnout z těchto stránek, kde najdete i stručnou dokumentaci.

Tento soubor je třeba referencovat v HTML stránce pomocí script a poté je možné využít všech metod a vlastností, které tento script zpřístupňuje. Jak tedy bude vypadat takový inicializační script, který vloží do stránky aplikaci? Zde je:

<div id="mySilverlightHost" style="height:100%;">
<script type="text/javascript">
Silverlight.createObjectEx({
source: "ClientBin/MySilverlightApp.xap",
parentElement: document.getElementById("mySilverlightHost"),
id: "mySilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "4.0"
},
events: {}
});
</script>
</div>

Jak vidíte, využíváme metody createObjectEx, které předáme parametry o tom, kde je umístěna naše Silverlight aplikace na serveru, jaký element je kontejnerem této aplikace, jak je pojmenována tato instance aplikace a přidáme i další vlastnosti. Opět se jedná o potřebné minimum, které vloží na dané místo kontejner pro hostování aplikace a pokud si porovnáte tyto předané parametry s tím, co jsem uvedl výše při přímém zápisu, toto se téměř neliší.

Jak je možné si všimnout v dokumentaci, těch možností které nám použití JavaScriptu nabízí je mnoho a k některým se ještě vrátím v příštím článku.

Závěrem

V dnešním úvodním článku o začátcích se Silverlight jsem chtěl představit možnosti a způsoby, jak dostat Silverlight aplikaci na klientskou stranu, tedy do prohlížeče uživatele. Toto je možné udělat několika způsoby, jenž všechny vedou na vytvoření elementu object. Mezi ty preferované však bude patřit použití souboru Silverlight.js, který nabízí pokročilé možnosti a tak se k němu příště ještě vrátím.