Přejít k navigační liště

Zdroják » Různé » Silverlight 2: vytváříme ukázkovou aplikaci

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

Články Různé

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?

Komentáře

Subscribe
Upozornit na
guest
10 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Rob

Proc je tenhle v podstate reklamne osvetovy clanek zrovna na rootovi? To uz Micro$ofti nevedi, kde by si udelali reklamu? Tak pouzivaji zadarmo blogy na rootovi?

Anonymní

Naopak, clanek mi prisle celkem v pohode (i kdyz pochybuji ze jste ho vubec cetl) a dekuji timto autorovi za male intro do nove (byt M$) technologie. Myslim ze koncepce Silverlightu 2 je celkem povedena. A to ze se casem bude dat programovat v non M$ jazycich jako Ruby ci Python me v tom jeste vice utvrdilo.
A Vy byste si z takovychto clanku mohl odnest minimalne to jak veci funguji jinde a ze ne vse od M$ musi byt nutne z principu zle:-)

Anonymní

http://en.wikipedia.org/wiki/Moonlight_(runtime)#Microsoft_support
Microsoft released a restrictive public covenant not to sue anyone for infringing patent claims that makes use of Moonlight implementations obtained by Novell or subsidiaries, which covers only the use of Moonlight as a plugin in a browser, when those implementations are not GPL3 licensed, and only if Moonlight has been obtained though Novell.

Vendor lock-in ako vysity, to ti pripada "povedeny"?

Jakub Fojtl

Kdy konečně pochopíte, že zdrojak.cz sice patří pod root, ale věnuje se úplně jíné oblasti – vývoji webových aplikací a to v jakékoliv formě. Tohle rozhodě není reklama na Microsoft, ale úvod do problematiky Silverlightu.

Martin Hassman

Zkusím vysvětlit. Článek je na Zdrojáku (což je samostatná sekce Roota) a jde zde, protože chceme pokrývat všechny zajímavé technologie nezávisle na výrobci nebo operačním systému. Do budoucna se podobné články budou na Zdrojáku objevovat pravidelně, pokud to někomu vadí, může bez problémů nadále číst pouze Roota.

Ivo

Mne to nevadi ze to tu je. Je to nova technolgia. Ale priklad by mohol byt aspon v spomenutom EclipseIDE, nech to ma aspon nieco spolocne s linuxom a open source.

Radek Hulán

A proč musí mít každý článek o webu něco společného s Linuxem a open-source? Protože šíření open-source propagandy je, zatímco komerčních technologií ne?

Já ve svém okolí mimochodem vidím hromadný přesun od open-source na webu (PHP a další) k Microsoftím technologiím, protože jsou řádově lepší. Člověk který viděl .NET pochopí, proč není dobré aby si každý bastlil svoje DB layery a svoje frameworky, když to už (Microsoft) udělal za něj a pořádně. A kdo zkusil vývoj v C# a Visual Studiu, ten nechce o open-source ani slyšet ;)

Chce to sundat open-source klapky z očí, člověk pak vypadá tupě.

Radek Hulán

propagandy je ok*

Ladislav Thon

> aby si každý bastlil svoje DB layery a svoje frameworky, když to už (Microsoft) udělal za něj a pořádně

Ale že to tomu Microsoftu trvalo! ADO.NET Entity Framework vyšel až letos, ASP.NET MVC myslím taky, do té doby to bylo (a ještě chvíli bude) utrpení neviňátek. Zachraňuje to samozřejmě open-source software (NHibernate, Spring.NET).

Je fakt, že v některých firmách se open-source (a vůbec cokoliv, co není od MS) prosazuje obtížně. Ale v některých firmách se taky obtížně prosazuje např. verzování…

Anonymní

Konecne niekde nejaka zmysluplna ukazka Silverlightu a jeho pouzitia.Vsade vecsinou su len nezaujimave PR kecy a obrazky.
Teraz trochu z ineho sudka.Uz ma boli hlava kam sa cely web development a celkovo development otaca.Sprepacenim je to drbn*te.Cela teoria o tom aky je web development rychly a ze su tenky klienti a vobec ako desktopove aplikacie zdochnu sa mi cim dale zdaju uz ani nie ujete ale sialene.Ved niekedy je tak zlozite dosiahnut uplne banalne veci cez Ajax/JavaScript/Flash-Flex a dalsie technologie ze ovela jednoduchsie je napisat klasicku desktopovu aplikaciu a skompilovat ju.A to uz ani nevravim o vykone.Java a .NET su sice pekne technologie ale aj super zabijaju vykon.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.