Silverlight 2 Digg klient - 1. díl

V tomto díle se ještě nepodíváme na Digg klienta, místo toho začneme tradičním Hello World a řekneme si, z čeho se Silverlight projekt skládá.

Na začátek vytvoříme nový Silverlight Application projekt (ve Visual Studiu dejte File → New Project). Pojmenujeme si ho DiggKlient. Po kliknutí na tlačítko OK se nás Visual Studio zeptá, jestli chceme vytvořit samotný Silverlight Application projekt, anebo k němu přidat i ASP.NET projekt, ve kterém budeme hostovat Silverlight aplikaci. Vybereme druhou možnost a ASP.NET projekt pojmenujeme „DiggKlient_WebServer“. Po kliknutí na OK se vytvoří celé solution se dvěma projekty uvnitř. Váš Solution Explorer by teď měl vypadat takto:

Když aplikaci zkompilujeme, Visual Studio samo zkopíruje Silverlight aplikaci na ASP.NET web server vytvořený v druhém projektu. Tento projekt obsahuje ASP.NET a HTML stránku, tedy vše, co potřebujeme k testování Silverlight aplikace.

Aplikace v Silverlightu mohou běžet na jakémkoli web serveru (třeba i na Apachi pod Linuxem) a být hostovány v libovolné statické HTML stránce, nebo ve vygenerované stránce (PHP, Python, Ruby, ASP.NET, …).

Složení Silverlight aplikace

Ve výchozím stavu obsahuje Silverlight projekt soubory Page.xaml a App.xaml a jejich code-behind soubory (tedy soubory se zdrojovým kódem napsaným v C#, VB.NET, či jiných .NET jazycích).

Možná už víte z ostatních zdejších článků, že XAML jsou jen XML soubory, které definují grafické rozhraní Silverlight a WPF aplikací.

App.xaml se typicky využívá pro deklarování resources, jako jsou různé štětce, šablony vzhledu, obrázky, … Zjednodušeně, je určený pro vše, co najde využití napříč celou aplikací. Code-behind soubor (tedy App.xaml.cs) se dá použít pro zachycení událostí na úrovni aplikace, například Application_Startup (při načtení aplikace), Application_Exit (při jejím ukončení), atd.

Soubor Page.xaml obsahuje výchozí grafické rozhraní, které se načte, když se aplikace spustí. Význam code-behind souboru je v tomto případě snad jasný – v něm probíhá většina logiky aplikace. Tento přístup je stejný jako u klasických WinForms a WebForms, popřípadě WPF, kde také můžeme designérem ve Visual Studiu nastavit vzhled aplikace a v příslušných code-behind souborech se pak starat o běh aplikace.

Kompilace a spuštění Silverlight aplikace vypadá takto. Když aplikace sestavíme, Visual Studio vezme zdrojové kódy a sestaví z nich standardní .NET assembly, tu pak zabalí společně se všemi statickými resources (teda soubory které se nijak nemění – obrázky, statické textové soubory, …) do .xap souboru, v našem případě se bude jmenovat DiggKlient.xap:

.xap soubor (čte se to [zap]) používá běžný .zip algoritmus, aby se zmenšila velikost stahované aplikace. Prázdná aplikace má většinou velikost necelých 5 kB. Pro tento konkrétní případ najdeme .xap soubor v adresáři DiggKlientDiggKlient.WebClientBin.

Pro hostování SL2 aplikace v HTML stránce slouží tag object, kterým odkážeme právě na .xap soubor. Při otevření stránky se pak tento soubor sám stáhne, rozbalí a spustí. Voilà, Silverlight aplikace je připravená k použití!

Potřebné HTML a ASP.NET soubory obsahující tag object byly automaticky přidány do projektu DiggKlient.Web, takže se o nic nemusíme starat, stačí jen stisknout F5.

Přidávání ovládacích prvků a událostí

Zrovna teď naše aplikace nedělá vůbec nic. To napravíme otevřením souboru Page.xaml a přidáním nějakého obsahu, třeba tlačítka. Stačí do XAML kódu přidat mezi tagy Grid jen jediný řádek kódu (to, co je Grid, si povíme příště):

<Button x:Name="MojeTlacitko" Content="Klikni!" Width="100" Height="50" />

Kód mluví sám za sebe – x:Name je název tlačítka, pomocí kterého se pak můžeme odkazovat v code-behind souboru, Content obsahuje text zobrazený na tlačítku a Width a Height jsou výška a šířka. Když aplikaci klávesou F5 spustíme, zobrazí se nám zhruba toto:

Momentálně na tlačítko můžeme klikat, jak se nám zachce, ale nic se nestane. Musíme k tlačítku přidat argument Click s názvem metody, která se zavolá, když dojde k vyvolání události Click. Tedy takhle:

<Button x:Name="MojeTlacitko" Content="Klikni!" Width="100" Height="50" Click="MojeTlacitko_Click" />

A metoda MojeTlacitko_Click může vypadat například následovně:

private void MojeTlacitko_Click(object sender, RoutedEventArgs e)
{
    MojeTlacitko.Content = "Kliknuto!";
}

Jak sami vidíte, nic, co byste neměli znát už z dřívějších hrátek s .NET frameworkem.

V příštím díle nás čeká rozbor jednotlivých kontejnerů pro ostatní prvky a konečně začneme s návrhem vzhledu Digg klienta.