Silverlight 2: vytváříme ukázkovou aplikaci

Silverlight je plugin do webových prohlížečů, který umožňuje spouštět aplikace postavené na .NET 3.5 a WPF. Obsahuje podmnožinu .NET Frameworku 3.5, není proto potřeba mít nainstalovaný .NET Framework na cílovém počítači. V článku vytvoříme ukázkovou aplikaci, představíme si IsolatedStorage a Databinding.

Co potřebuji pro vývoj Silverlight aplikací?

Abyste mohli vytvářet Silverlight aplikace co nejpohodlněji, doporučuji vám použít Visual Studio 2008 SP1 v libovolné, tedy i „free“, edici. Pokud použijete „free“ edici, budete potřebovat Visual Web Developer 2008 SP1. K němu si stáhněte a nainstalujte Silverlight Tools for Visual Studio 2008 SP1. Pro tvorbu uživatelského rozhraní je vhodné pořídit si Expression Blend 2 a doinstalovat do něj SP1. Jako studenti můžete Expression Blend získat zdarma, jinak se jedná o placený produkt.

Pokud tedy nebudete používat Expression Blend, jsou nástroje pro tvorbu Silverlight aplikací komplet zdarma i pro komerční účely. Příznivci IDE Eclipse mohou použít Eclipse Tools For Microsoft Silverlight a příznivci Delphi si zase počkají na Delphi Prism s podporou Silverlight. Ostatním bude muset stačit Silverlight 2 SDK. Všechny příklady v tomto článku jsou určeny pro Visual Studio 2008 SP1 a odkaz na stažení najdete na konci článku. V článku se zaměříme primárně na věci specifické pro Silverlight, protože ostatní je v podstatě identické s WPF.

Jednoduchá aplikace Hello World

Po instalaci Silverlight Tools for Visual Studio 2008 se vám rozšíří nabídka nových projektů o Silverlight aplikace:

Založení nového projektu Silverlight aplikace

Pokud začnete vytvářet Silverlight aplikaci, je vám automaticky nabídnuta možnost vytvořit i testovací web, který bude vaši Silverlight aplikaci hostovat, případně jí poskytovat data pomocí webových služeb.

Přidání Silverlight aplikace

Tím je vytvořena základní struktura Silverlight aplikace – vlastní aplikace a hostující webová stránka. Nyní se soustředíme na vlastní Silverlight aplikaci a popis hostující webové stránky si necháme na později.

Uživatelské rozhraní je vytvořeno pomocí jazyka XAML, který kromě UI popisuje také animace a databinding. Silverlight 2 obsahuje jen podmnožinu „plné“ verze XAML, která je obsažena v .NET Framework 3.0 (WPF – Windows Presentation Foundation). Teoreticky můžete použít stejné UI pro Silverlight i WPF aplikaci, pokud se vyhnete věcem specifickým pro jedno či druhé. Aplikační logika je pak tvořena kódem v jazyce C# nebo Visual Basic.NET. Po instalaci DLR je možné pro tvorbu aplikační logiky použít IronPython, IronRuby (Iron = Implementation Runs on .NET) nebo JScript. DLR není v době psaní článku pro finální verzi Silverlight 2 zatím dostupné. Není bez zajímavosti, že na IronRuby pracují v Redmondu čeští vývojáři.

Silverlight Tools for Visual Studio 2008 SP1 neobsahují vizuální editor jazyka XAML. UI musíte tedy vytvářet ručním psaním kódu a výsledek si kontrolovat v okně s náhledem. Pro vizuální editaci je určen Expression Blend 2 SP1. XAML editor:

XAML editor

Jak vidíte, XAML není nic jiného než XML. Atribut Click elementu Button pak odkazuje na kód v pozadí, který je ve třídě na kterou odkazuje atribut x:Class elementu UserControl:

Ukázka kódu

Start aplikace pak probíhá typicky pomocí třídy App odvozené od Application, kde je vytvořena instance výchozího formuláře Silverlight aplikace:

Kód Application_Startup

Pokud aplikaci zkompilujete bude v adresáři bindebug vytvořen soubor s příponou XAP. Jde v podstatě o ZIP archiv, který obsahuje zkompilovanou aplikaci a další potřebné soubory (např. obrázky). Kromě toho obsahuje soubor AppManifest.xaml, který obsahuje popis aplikace pro spuštění v doplňku Silverlight, např. vstupní bod aplikace:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            EntryPointAssembly="HelloWorld"
            EntryPointType="HelloWorld.App"
            RuntimeVersion="2.0.31005.0">
  <Deployment.Parts>
    <AssemblyPart x:Name="HelloWorld" Source="HelloWorld.dll" />
  </Deployment.Parts>
</Deployment> 

Vkládání do HTML

Tím jsme si ve stručnosti popsali základy Silverlight aplikace. Nyní se podíváme, jak tuto aplikaci vložit do HTML stránky. Silverlight běží na klientovi a je tím pádem naprosto nezávislý na straně serveru. Doplněk Silverlight můžeme tedy vložit jak do statické HTML stránky, tak do stránky vygenerované dynamicky na straně serveru. První, co je do stránky třeba vložit, je odkaz na JavaScript knihovnu Silverlight.js, která je součástí SDK. Tato knihovna umožňuje vložit plugin Silverlight do stránky pomocí JavaScriptu, zjistit, zda je Silverlight nainstalovaný a pokud ne, vygenerovat odkaz pro stažení doplňku podle použitého OS:

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

Další možností je vložit doplněk přímo pomocí značky object:

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

Pokud potřebujete aplikaci předat při startu nějaké parametry, můžete použít vlastnost initParams.

initParams: "klic1=hodnota1, ..." 

Předané parametry se pak zpracovávají v události Startup objektu App:

private void Application_Startup(object sender, StartupEventArgs e)
{
  IDictionary<string, string> initParams = e.InitParams;
  …
} 

Komunikace s hostující HTML stránkou

Silnou stránkou Silverlightu je možnost spolupráce s hostující HTML stránkou. Objekt HtmlPage.Document zpřístupňuje pro manipulaci celý HTML strom. Příklad:

HtmlPage.Document.GetElementById("myDiv").SetProperty("innerHtml", "<strong>bla bla</strong>"); 

Přes objekt Document je přístupný i Query String:

HtmlWindow window = HtmlPage.Window;
HtmlDocument document = HtmlPage.Document;

foreach (string key in document.QueryString.Keys)
{
  window.Alert(key + ": " + document.QueryString[key]);
} 

Podobným způsobem funguje přístup k objektu Window HTML stránky. To se hodí, pokud potřebujete uživatele přesměrovat na jinou adresu nebo zavolat javascriptovou funkci:

HtmlPage.Window.Navigate("index.html", "_blank");
HtmlPage.Window.Invoke("javascriptFunkce", new object[] {p1, p2, ...}); 

Obráceně to funguje také. Vaše Silverlight aplikace může některé své metody zveřejnit tak, aby je bylo možné volat z javascriptového kódu stránky. Objekt, který zpřístupňuje své metody volání z JavaScriptu musí mít atribut [ScriptableType] a metody, které budou viditelné z venku se označí atributem [ScriptableMember]. Pak je třeba objekt zaregistrovat a přiřadit mu jméno, pod kterým jej kód v JavaScriptu u­vidí:

HtmlPage.RegisterScriptableObject("mujObjekt", this); 

Přístup ke zveřejněným metodám z JavaScriptu vypadá následovně:

document.getElementById("SilverlightPlugInID").plugin.content.mujObjekt.mojeMetoda(); 

Jak na síťovou komunikaci

Tím, že je Silverlight primárně určen pro běh v prostředí internetu, kdy nemáte zaručenou dobu odezvy od serveru, je možné komunikovat pouze asynchronně a je na to třeba myslet již při návrhu aplikace. Jedna z možností, jak získat data ze serveru je použití objektu HttpWebRequest:

private void cmdGetData_Click(object sender, RoutedEventArgs e)
{
  HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri("..."));
  request.BeginGetResponse(OnData, request);
}
 
private void OnData(IAsyncResult e)
{
  HttpWebRequest request = (HttpWebRequest)e.AsyncState;
  HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(e);
 
  StreamReader data = new StreamReader(response.GetResponseStream());
 
  // Synchronizace s UI
  Dispatcher.BeginInvoke(() => { txtData.Text = data.ReadToEnd(); });
} 

Pokud chcete komunikovat s webovou službou, můžete si nechat vygenerovat proxy třídu přímo ve Visual Studio příkazem Project – Add Service Reference.

Úložiště IsolatedStorage pro ukládání dat

Pokud potřebujete uložit nastavení aplikace uživatelem nebo něco podobného, můžete využít IsolatedStorage. Toto perzistentní datové úložiště je vázáno na uživatelův počítač a aplikaci. Můžete k němu přistupovat jako k virtuálnímu souborovému systému a ukládat do něj soubory nebo je využít k ukládání dat systémem klíč-hodnota. V následujícím příkladě se uloží naposledy hledaný text:

using System.IO.IsolatedStorage;
…
// načtení uložené hodnoty
if (IsolatedStorageSettings.ApplicationSettings.Contains("search"))
{
  string s = IsolatedStorageSettings.ApplicationSettings["search"].ToString();
  txtSearch.Text = s;
  Search(s);
}
…
// Uložení hodnoty
IsolatedStorageSettings.ApplicationSettings["search"] = s;
… 

IsolatedStorage umožňuje uložit maximálně 1 MB dat, ale je možné si od uživatele vyžádat navýšení. Pokud kliknete na Silverlight aplikaci pravým tlačítkem myši a vyberete si příkaz Silverlight Configuration, tak na záložce Application Storage uvidíte přehled aplikací, které IsolatedStorage využívají.

Konfigurace Silverlight

To, co jsme si zatím ukázali, je specifické pro Silverlight 2. Na závěr se podíváme na vlastnost Databinding, která je dostupná i v klasickém WPF.

Databinding

Jednou z příjemných vlastností WPF je datový kontext. Každý ovládací prvek má svůj datový kontext (DataContext) z kterého se bere datová vazba. Následující kód je jednoduchý formulář, kterému v kódu na pozadí přiřadíme jako datový kontext objekt. Jednotlivé vlastnosti objektu se pak zobrazí v polích formuláře:

<StackPanel Margin="15" x:Name="CompanyForm">
  <TextBlock Text="{Binding CompanyName}" />
  <TextBlock Text="{Binding Address}" />
  <TextBlock Text="{Binding City}" />
  <TextBlock Text="{Binding Country}" />
  <TextBlock Text="{Binding PostalCode}" />
</StackPanel> 
CompanyForm.DataContext = new Company{
  CompanyName = "Microsoft",
  Address = "Vyskočilova 2a",
  City = "Praha",
  Country = "Czech Republic",
  PostalCode = "140 00"
}; 

Některé ovládací prvky, typicky ty, které zobrazují seznamy, podporují vlastnost DataTemplate. DataTemplate si můžete představit jako ovládací prvek, který slouží pro zobrazení jedné položky v seznamu. Ukázka kódu a výsledku:

<dt:DataGrid.RowDetailsTemplate>
  <DataTemplate>
    <StackPanel Orientation="Vertical">
      <StackPanel Orientation="Horizontal">
        <TextBlock Margin="5" Text="Supplier: " />
        <TextBlock Margin="5" Text="{Binding Suppliers.CompanyName}"/>
        <Button Margin="5" x:Name="cmdShowSupplier"
                Content="Show details"
                Tag="{Binding Suppliers}"
                Click="cmdShowSupplier_Click" />
      </StackPanel>
      <StackPanel Orientation="Horizontal">
        <TextBlock Margin="5" Text="Category: " />
        <TextBlock Margin="5" Text="{Binding Categories.CategoryName}"/>
      </StackPanel>
    </StackPanel>
  </DataTemplate>
</dt:DataGrid.RowDetailsTemplate> 
Ukázka výsledné aplikace

Pokud bychom pokračovali dál, opravdu zjistíte, že tvorba Silverlight aplikací není nic jiného, než tvorba WPF aplikací s určitými omezeními, které jsou dány podmnožinou .NET Frameworku obsaženou v Silverlightu 2. Bude-li zájem, mohu připravit článek, který se zaměří i na WPF. Informace v něm využijete nejen při tvorbě Silverlight aplikací.

Probrané ukázky si můžete stáhnout: Ukázkové Silverlight aplikace (ZIP 3280783 bytů)


Autor článku je specialista pro vývojové nástroje ve společnosti Microsoft v České republice. Více informací o on-line technologiích a samozřejmě i Internet Exploreru 8 se zdarma dozvíte na on-line konferenci Vort-ex ve dnech 18. a 19. 11. 2008. Informace pro vývojáře také najdete na blogu odborníků z českého Microsoftu.

Používáte Silverlight?

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 10

Přehled komentářů

Rob Proc na rootovi
Anonymní Re: Proc na rootovi
Anonymní Re: Proc na rootovi
Jakub Fojtl Re: Proc na rootovi
Martin Hassman Re: Proc na rootovi
Ivo Re: Proc na rootovi
Radek Hulán Re: Proc na rootovi
Radek Hulán Re: Proc na rootovi
Ladislav Thon Re: Proc na rootovi
Anonymní Silverlight
Zdroj: https://www.zdrojak.cz/?p=2869