Úvod do technológie a tvorby aplikácií pomocou nástrojov Microsoft Expression

Silverlight 2.0

Silverlight 2Ľuboslav Lacko

2

Obsah

Silverlight 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3Architektúra a podpora na rôznych platformách . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4XAML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .4Bezpečnosť Silverlight 2.0 aplikácií . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .5Inštalácia Silverlight 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6Rodina nástrojov Microsoft Expression 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8Inštalácia Microsoft Expression Blend 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Silverlight aplikácie v prostredí Microsoft Expression Blend 2.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Silverlight 2.0 aplikácie vo vývojovom prostredí Visual Studio 2008 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14Úvodná Silverlight 2.0 aplikácia v aplikácii Visual Studio 2008 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15Pridanie ovládacieho prvku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17Obsluha udalosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18Spustenie Silverlight 2.0 aplikácie v aplikácii Visual Studio 2008 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18Vývoj toho istého projektu v prostredí Expression Blend 2 a Visual Studio 2008 . . . . . . . . . . . . . . . . . . . . . . . . . .20Objekty pre vytvorenie prezentačnej vrstvy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22Nové ovládacie prvky fi nálnej verzie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27Prepnutie zobrazovania na celú obrazovku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28Komunikácia so serverom, prenos súborov . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29Prenos súborov na server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29Silverlight Streaming na Windows Live . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33Práca s údajmi a využitie technológie LINQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34Údaje v zoznamoch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35Zobrazenie údajov vyžadujúcich konverziu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37Ukladanie údajov u klienta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40LINQ to XML – Silverlight aplikácia pre prácu s XML údajmi z externého zdroja . . . . . . . . . . . . . . . . . . . . . . . . . .44LINQ to SQL – Silverlight aplikácia pre prácu s údajmi v databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .53Klientska Silverlight aplikácia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60Príloha – Inštalácia cvičnej databázy Adventure Works 2008 a odľahčenej verzie LT pre SQL Server 2008 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62AdventureWorks OLTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62AdventureWorksLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63Záverom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .64

3

Silverlight 2

Jedným z pojmov, ktorý sa v súčasnosti skloňuje nielen v IT odvetví, ale aj v biznise je „Web 2.0“. Používajú ho manažéri ako argumentáciu pre potenciálne investície do IT biznisu. Po približne dvojročnej existencii sa potvrdil aj obrovský ekonomický potenciál webu druhej generácie. Evolúcia Internetu ukazuje, že okolo platforiem webu 2.0 sa vytvárajú veľké komunity, ktoré budia záujem investorov. Dynamické, interaktívne webové aplikácie umožňujú deklaratívne prispôsobovanie aplikácií užívateľmi. V minulosti internetový boom súvisel s víziou efektívnejších foriem predaja a distribúcie tovarov. Hitom starého webu bol internetový obchod, ktorý zaručoval nižšie prevádzkové náklady, možnosť rozšírenia zákazníckej obce a lepšiu komunikáciu s konzumentmi. Na úspech v prostredí zobúdzajúceho sa e-businessu boli potrebné dve veci – schopnosť presadiť sa v sieti Internetu svojou webstránkou a zabezpečenie atraktívneho a pestrého sortimentu tovarov. Prvú internetovú vlnu preto prežili len tí, ktorí si na webe získali meno a disponovali kvalitnou a bohatou ponukou. Podobný priebeh sa očakáva aj v súvislosti s webom 2.0. Aj napriek neustálemu zvyšovaniu interaktivity používateľského rozhrania webových aplikácií používatelia ešte stále vnímajú rozdiel medzi webovými a klientskymi aplikáciami najmä v možnostiach prezentačného rozhrania.

Postupným vývojom možností webových a intranetových aplikácií nastala medzi používateľmi určitá kladná „spätná väzba“, kedy nové možnosti evokovali čoraz vyššie a náročnejšie požiadavky zo strany používateľov. Tento trend vyústil do požiadavky, aby sa možnosti používateľského rozhrania webových aplikácií, čo najviac priblížili možnostiam klasických „tlstých“ aplikácií. Súčasné webové aplikácie vybudované na klasických technológiách narážajú pri budovaní interaktívneho rozhrania na hranice momentálne používaných technológií. Hlavným obmedzujúcim faktorom je nutnosť znovu načítania obsahu pri zmene stavu a problémy so zapamätaním stavových informácií pri využívaní bezstavového HTML jazyka a protokolu. Pri programovaní obsluhy prvkov, ktoré interaktívnosť stránok zabezpečujú je potrebné neustále preposielať stavové údaje zo servera na klientsky počítač a opačne, čo aplikáciu podstatne spomaľuje a obmedzuje jej možnosti. Riešení je niekoľko, najjednoduchšie spočíva v rozšírení prehľadávača webového obsahu o interaktívnu prezentačnú vrstvu. Pre túto architektonickú vrstvu sa zaužívalo označenie Rich Presentation Tier. Táto vrstva by mala zastrešovať komunikáciu jednotlivých blokov používateľského rozhrania s aplikačnou logikou na serveri prostredníctvom asynchrónnych správ. Vytvorením všeobecne akceptovateľného modelu pre udalosťami riadené používateľské rozhranie by sa obišla možnosť generovania HTML stránok pre každú reakciu na udalosť. Problém nespočíva v technológiách, ale v štandardizácii. Je potrebné defi novať všeobecne akceptované štandardy a implementovať ich do najpoužívanejších prehľadávačov.

K výraznému zvýšeniu úrovne prezentačnej vrstvy a jej interaktivity môže prispieť aj technológia Silverlight z dielne spoločnosti Microsoft. Silverlight rozširuje prezentačnú úroveň prehľadávača webového obsahu o nové možnosti s využitím vektorovej grafi ky. Spoločnosť Microsoft zároveň s fi nálnou verziou Silverlight 1.0 predstavila aj alfa verziu 1.1. Táto verzia bola následne premenovaná na Silverlight 2.0. Zatiaľ čo Silverlight 1.0 využíva ako programovací jazyk JavaScript, vo verzii 2.0 je možné v plnej miere využívať .NET jazyky. Predtým, v procese vývoja mala táto technológia označenie Windows Presentation Foundation/Everywhere, čo naznačuje, zámer spoločnosti Microsoft preniesť čo možno najviac čŕt nového prezentačného rozhrania WPF(Windows Presentation Foundation), ktoré je súčasťou platformy .NET Framework 3.0. Platforma .NET Framework 3.0 je štandardne predinštalovaná v operačnom systéme Windows VISTA.

4

Architektúra a podpora na rôznych platformách

Z hľadiska implementácie je technológia Silverlight multiplatformový plug-in do webového prehľadávača.

Architektúra platformy Silverlight je rozdelená na dve základné časti: Prezentačná vrstva obsahuje komponenty a služby orientované na generovanie používateľského rozhrania, a interakciu s používateľom. Používateľské rozhranie môže využívať renderovanie vektorovej a bitmapovej grafi ky, textový výstup, animácie a prezentáciu multimediálneho obsahu vo formáte WMA,VC1 a MP3. Interakcia s užívateľom zahrňuje obsluhu udalostí generovaných používateľom pomocou myši a klávesnice. Na úroveň tejto vrstvy môžeme priradiť aj DOM API (Document Object Model) pre Silverlight a XAML. Druhou vrstvou je inštalačný a aktualizačný komponent pre internetový prehľadávač.

Verzia Silverlight 2.0 rozširuje verziu 1.0 o nové vlastnosti. Obsahuje niektoré nové ovládacie prvky, štýly a šablóny, Data Binding. Hlavnou novinkou je podpora .NET. Súčasťou plug-inu Silverlight 2.0 je aj „okresaný“ .NET Framework. Vo verzii 2.0 môžeme u klienta na lokálnom úložisku údajov (akási inteligentnejšia verzia cookies) uložiť 10 MB dát.

Plug-in má veľkosť cca 4,5 MB.Na programovú manipuláciu s prezentačnou vrstvou môžu použiť vývojári javascript. V základe pracujú s objektovým modelom pracovnej plochy nazvanej „Canvas“, ktorá reprezentuje viditeľnú prezentačnú vrstvu Silverlight aplikácie. Napojenie na údajový zdroj je možné zabezpečiť použitím rozšírení ASP.NET AJAX, ktoré podporujú volanie webových služieb z prostredia javascript s výmenou údajov vo formáte JSON (JavaScript Object Notation) a tiež aj volanie jednoduchých výhradne na XML založených webových služieb, tzv. POX služieb („Plain Old XML“).

Na obrázku architektúry si môžete všimnúť moduly prezentačného jadra (Input, UI rendering, Media, Controls, Layout, Data Binding, DRM a XAML), moduly prostredia .NET Framework pre Silverlight (Data, Base class library, Window Communication Foundation (WCF), CLR (common language runtime), a WPF (Windows Presentation Foundation) Controls). Architektúru Silverlight 2.0 dopĺňajú prídavné moduly, kam patria Isolated storage, Asynchronous programming, File management, HTML – managed code interaction, Serialization, Packaging a XML libraries.

Architektúra Silverlight

XAML

XAML je nový druh značkovacieho jazyka pre tvorbu aplikačného rozhrania. Jeho formát vychádza z populárneho formátu dokumentov XML. XAML „stránky“ ako by sme takýmto aplikáciám mohli populárne hovoriť umožňujú dynamicky reagovať na interakciu používateľa s ovládacími prvkami na stránkach.

5

Na rozdiel od iných prezentačných technológií (Java Applet-y, ActiveX a Flash), ktoré posielajú prehľadávaču binárny obsah, takže môžu mať problémy s bránami fi rewall, ale hlavne s kompatibilitou operačných systémov a prehľadávačov na strane klienta a navyše každá zmena vyžaduje aktualizáciu celej aplikácie, je XAML textový formát. Pri použití technológie Silverlight – sa po zmene obsahu vytvorí nový XAML súbor, ktorý sa prenesie na klientsku stranu automaticky pri ďalšej návšteve predmetnej stránky.

Bezpečnosť Silverlight 2.0 aplikácií.

Silverlight 2.0 aplikácia beží v bezpečnostnej obálke tzv. Sandbox-e. Vývojári nemajú možnosť nijak ovplyvniť tento Sandbox na klientskej strane, takže nemôžu prekonať obmedzenie a dostať sa so svojím kódom mimo túto vymedzenú bezpečnostnú obálku. Sandbox poskytuje na klientskej strane lokálne úložisko dát (Local isolated storage) s kapacitou približne 10 MB, dialógové okno na otváranie súborov na klientskom PC a podobne. Je možné vyberať naraz aj viac súborov a tieto následne odoslať na server alebo uložiť do lokálneho úložiska. Obsah súborov v lokálnom úložisku môžeme pomocou aplikačnej logiky meniť, no pôvodný súbor zostáva za každých okolností nezmenený a Silverlight aplikácia pracuje len s jeho kópiou. Ostatný diskový priestor mimo Local isolated storage je pre Silverlight aplikáciu nedostupný. Pomocou súborov s defi novanou politikou (policy-fi les) môžeme kontrolovať všetky cross-domain http(s) požiadavky, teda požiadavky na prenos údajov z iných domén.

6

Inštalácia Silverlight 2.0

Aby sme mohli na svojom klientskom počítači prehliadať stránky využívajúce funkcionalitu prostredia Silverlight 2 a robiť pokusy s touto technológiou, je potrebné prevziať si doplnok prehľadávača na adrese(http://www.microsoft.com/silverlight/resources/install.aspx?v=2.0). Skript na stránke najskôr identifi kuje, ktorú verziu máme aktuálne nainštalovanú a v prípade, ak je na webovej stránke k dispozícii už nová verzia, ponúkne nám ju na prevzatie a inštaláciu. Inštalačný súbor má 4 megabajty.

Webová stránka na ktorej môžeme prevziať plug-in pre využívanie technológie Microsoft Silverlight 2 (v dobe písania publikácie bola táto technológia vo verzii RC0 ).

Nasledujúca tabuľka uvádza kombinácie operačných systémov a prehľadávačov internetového obsahu vhodné pre verzie Silverlight 1 a Silverlight 2.

Operačný systém Internet Explorer 7

Internet Explorer 6 FireFox 1.5 FireFox 2 Safari

Windows Vista Áno - Áno Áno -Windows XP SP2 Áno Áno Áno Áno -Windows 2000 - Áno** Nie Nie -Windows Server 2003 (okrem IA-64) Áno Áno Áno Áno -

Mac OS 10.4.8+ (PowerPC) - - Áno* Áno* Áno*Mac OS 10.4.8+ (Intel-based) - - Áno Áno Áno

* len Silverlight 1.0 ; ** len Silverlight 2

Silverlight 2 je podporovaný aj na nových verziách prehľadávačov Internet Explorer 8 a FireFox 3.

Inštalácia doplnku Microsoft Silverlight 2 (v dobe písania publikácie bola táto technológia vo verzii RC0).

Konfi gurácia automatického inovovania sa nastavuje pomocou programu Silverlight.Confi guration.exe, ktorý je pri implicitnej inštalácii umiestnený v priečinku c:\Program Files\Microsoft Silverlight\..cislo verzie.

7

Konfi gurácia prostredníctvom programu Microsoft Silverlight Confi guration.

V záložke DRM môžeme povoliť alebo zakázať Digital Rights Management, čo môžeme voľne preložiť ako Správa digitálnych práv. DRM je zastrešujúcim pojmom pre technické metódy, ktorých účelom je kontrolovať či obmedzovať používanie obsahu digitálnych médií. Najčastejšie je technikami DRM chránená hudba, obrazové umenie, počítačové hry, videohry a fi lmy. Cieľom takejto ochrany je predovšetkým zaistiť používanie obsahu v súlade s autorskými právami, respektíve v súlade s licenčnými podmienkami, vzťahujúcimi sa k obsahu (napr. zakúpenej hudby v podobe hudobných súborov, ktoré sú za týmto účelom ošetrené technológiou DRM).

Application StorageKeď niektorá webová aplikácia potrebuje prídavný webový priestor, budeme vyzvaní rozšíriť ho. Samozrejme rozšírenie urobíme len v prípade, ak tejto webovej aplikácii dôverujeme.

Výzva na rozšírenie Application storage.

8

Rodina nástrojov Microsoft Expression 2

Microsoft v súvislosti s uvedením novej technológie Silverlight dal k dispozícii vývojárom produkty z rodiny Expression. Vývojári si podľa svojich zámerov a predpokladaného rozsahu práce môžu zvoliť buď komplexný balík pre dizajnérov, tvorcov webov a grafi ky pod názvom Microsoft Expression Studio, alebo jednotlivé časti, ktoré tento balík tvoria:

Microsoft Expression Web 2, –Microsoft Expression Blend 2, –Microsoft Expression Design 2, –Microsoft Expression Media 2, –Microsoft Expression Encoder 2. –

Microsoft Expression Web 2 umožňuje tvorbu kvalitných webových stránok, spĺňajúcich všetky webové štandardy a navyše veľmi dobre vyzerajúcich. Tvorbou stránok sa ich životný cyklus nekončí, preto v prostredí Expression Web je možné stránky a webové aplikácie aj dlhodobo spravovať.

Microsoft Expression Blend 2 je fl exibilné a produktívne grafi cké vývojové prostredie. Pomáha pri tvorbe moderných a vizuálne prepracovaných aplikácií s interaktívnou podporou 3D zobrazovania a prehrávania multimédií. Microsoft Expression Blend umožňuje vytvorenie a úpravy prezentačnej vrstvy webových aplikácií. Využíva nový druh značkovacieho jazyka XAML.

Microsoft Expression Design 2 obsahuje podporu vektorovej a bitmapovej grafi ky a obidve tieto oblasti spája v jednom prostredí. Ako príklad spojenia vektorovej a bitmapovej grafi ky môžeme uviesť grafi cký návrh tlačidla. V prostredí Expression Design môžeme vytvoriť vektorové tlačidlo do Windows Vista a zároveň bitmapové tlačidlo pre webovú aplikáciu. Tento nástroj je len súčasťou integrovaného balíka Expression Studio a pravdepodobne sa nebude dodávať samostatne.

Microsoft Expression Media 2 je profesionálny katalogizačný nástroj pre dávkové spracovanie, úpravy a prevody a hlavne pokročilé vytváranie katalógov multimediálnych súborov. Podporuje viac ako sto rôznych multimediálnych formátov od RAW až po netradičné profesionálne multimediálne formáty a umožňuje aj import konkurenčných katalógov multimediálneho obsahu.

Microsoft Expression Encoder 2 umožňuje kódovanie a úpravy video súborov, ich prípravu pre priamy streaming pomocou servera Windows Media Server obsiahnutého v každom Windows serveri. Priamo z prostredia Expression Encoder môžete exportovať videá so Silverlight prehrávačom a ukladať ich priamo na web.

Rodina nástrojov Microsoft Expression.

Microsoft Expression Studio 2 je komplexný ucelený balík zapuzdrujúci všetky doteraz uvedené Expression nástroje. Pokrýva podporu grafi kom, dizajnérom a tvorcom webov, aby mohli čo najefektívnejšie vytvárať vizuálne príťažlivé a užívateľsky prívetivé aplikácie na web aj do prostredí OS všetkých počítačov.

9

Inštalácia Microsoft Expression Blend 2

Najskôr je potrebné nainštalovať technologickú platformu .NET Framework 3.5. Inštalačný balík má okolo 250 MB. Podporované operačné systémy pre .NET Framework 3.5 sú Windows Server 2003, Windows Server 2008, Windows Vista a Windows XP. Odporúčame skontrolovať, či nie sú k dispozícii opravné balíčky pre .NET Framework a ak áno, tak ich prevziať a nainštalovať.

.NET Framework poskytuje stavebné bloky, čiže akýsi prefabrikovaný softvér pre riešenie častých programátorských úloh. Pripojené aplikácie využívajúce .NET Framework efektívne modelujú procesy podnikateľskej sféry a uľahčujú integráciu systémov v heterogénnych prostrediach a tak podstatne znižujú potrebu písania programového kódu, čím skracujú čas vývoja a dovoľujú vývojárom sústrediť sa na riešenie vlastného problému. .NET Framework vo verzii 3.5 poskytuje rozhranie pre rýchlu a efektívnu tvorbu aplikácií. Verzia 3.5 vychádza z verzie 3.0 a vylepšuje také oblasti ako knižnicu základných tried, Windows Workfl ow Foundation, Windows Communication Foundation, Windows Presentation Foundation a Windows CardSpace.

Inštalácia prostredia Microsoft Expression Blend 2.0.

Pre vývoj Silverlight 2.0 aplikácií je potrebné doinštalovať Service Pack1 pre Expression Blend 2.0.

Poznámka: Vo verzii Silverlight 2 Beta sa nedoinštalovával Service Pack 1 do verzie návrhového prostredia Expression Blend 2.0, ale bola k dispozícii samostatná verzia pod označením Expression Blend 2.5. Takéto riešenie s nainštalovaním samostatnej nezávislej dočasnej verzie je určite lepšie ako neustále odinštalovávanie navzájom nekompatibilných opravných balíčkov do „ostrej“ verzie návrhového prostredia v priebehu beta testovania.

Silverlight aplikácie v prostredí Microsoft Expression Blend 2.0

Microsoft Expression Blend 2 umožňuje po doinštalovaní opravného balíčka Service Pack1 vytvorenie a úpravy prezentačnej vrstvy webových aplikácií aj Windows WPF aplikácií s plnou podporou Silverlight 2. Dialóg pre vytvorenie nového projektu obsahuje šablóny pre:

WPF (Windows Presentation Foundation) application (.exe), –WPF Control Library, –Silverlight 1 Site, –Silverlight 2 Application. –

10

Dialóg pre vytvorenie nového projektu v prostredí Microsoft Expression Blend 2.

Projekty je možné vytvárať pre Windows WPF (Windows Presentation Foundation) a webové aplikácie využívajúce Silverlight 1 a Silverlight 2.

Silverlight 1 podporuje programovanie prezentačnej vrstvy len v prostredí JavaScript. Silverlight 2 podporuje programovanie aplikačnej logiky v .NET jazykoch. Implicitne sú v prostredí Expression Blend 2 k dispozícii programovacie jazyky:

Visual C#, –Visual Basic. –

Zoznámenie sa s vývojovým prostredím Microsoft Expression Blend 2 urobíme „za behu“ na praktickom príklade. Vytvoríme novú aplikáciu typu Silverlight 2 a vhodne ju pomenujeme. Aplikáciu umiestnime do príslušného priečinka v ktorom plánujeme vytvárať projekty tohto typu.

Pracovná plocha v prostredí Expression Blend 2 pre vývoj Silverlight 2.0 aplikácie.

Pracovnej ploche dominuje oblasť „Art Board“, ktorá je umiestnená v strednom okne vývojového prostredia. Môžeme zobraziť grafi cké návrhové zobrazenie, prípadne návrh reprezentovaný v XAML jazyku, alebo v režime „Split“ môžeme zobraziť obidva režimy. Režim zobrazenia prepíname pomocou záložiek v pravej hornej časti stredného okna. V pravej/prvej časti je v okne „Files“ zobrazený zoznam súborov z ktorých pozostáva projekt. Grafi cký návrh prezentačnej vrstvy aplikácie, ktorý obsahuje napríklad defi nície vizuálnych prvkov, pozadia a podobne je uložený v súbore Page.xaml .V novom projekte obsahuje tento súbor defi níciu pracovnej plochy („Art Board“).

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Blend1.Page" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White" /></UserControl>

V súbore App.xaml sú informácie o projekte, napríklad zoznam resource. Tento súbor môžeme editovať len v textovom režime.

11

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Blend1.App"> <Application.Resources> <!-- Resources scoped at the Application level should be defi ned here. --> </Application.Resources></Application>

Návrh prezentačnej vrstvyÚplne vľavo je lišta s ikonami nástrojov pre vizuálny návrh prezentačnej vrstvy. Pomocou nich môžeme na pracovnej ploche vytvárať prvky vektorovej grafi ky a ovládacie prvky. Možnosti pri návrhu ukážeme na prvku „Rectangle“, teda obdĺžnika. V prvom kroku metódou „drag and drop“ umiestnime obdĺžnik na požadované miesto pracovnej plochy a upravíme jeho rozmery.

Návrh grafi ckého objektu.

V XAML kóde sa pridanie obdĺžnika prejaví kódom

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Blend1.Page" Width="640" Height="480">

<Grid x:Name="LayoutRoot" Background="White" > <Rectangle Height="98" HorizontalAlignment="Stretch" Margin="190,85,312,0" VerticalAlignment="Top" Fill="#FFFFFFFF" Stroke="#FF000000"/> </Grid></UserControl>

Návrh dizajnu prvkuVšimnime si záložky „Properties“ v pravom bočnom okne. Po jej zobrazení môžeme nastavovať parametre prvku, ktorý je vybraný a vyznačený v grafi ckom návrhovom okne. K dispozícii je široká paleta možností, napríklad pre návrh farebného dizajnu. Ak chceme zobraziť náš obdĺžnik vyplnený farebným gradientom, vytvoríme ho pomocou návrhových prvkov v záložke „Properties“.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Blend1.Page" Width="640" Height="480">

<Grid x:Name="LayoutRoot" Background="White" > <Rectangle Height="120" HorizontalAlignment="Stretch"

12

Margin="175,57,230,0" VerticalAlignment="Top" Stroke="#FF000000"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF000000"/> <GradientStop Color="#FF48DAD9" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Grid></UserControl>

TransformáciaPri podrobnejšom skúmaní záložky „Properties“ zistíme, že je rozdelená na niekoľko podpriečinkov. Predchádzajúce zmeny farebného návrhu sme vykonávali v záložke „Brushes“. Ak chceme vykonať geometrickú transformáciu objektu, napríklad ho pootočiť, alebo skosiť využijeme záložku Transform. Objekt môžeme pootočiť aj priamo uchopením za vrchol a následným pootočením.

Geometrické transformácie grafi ckého objektu.

V XAML kóde sa geometrická transformácia prvku prejaví kódom.

<Rectangle Height="89" Width="40" HorizontalAlignment="Stretch" Margin="173,99,275,0" VerticalAlignment="Top" Fill="#FFFFFFFF" Stroke="#FF000000" RenderTransformOrigin="0.5,0.5"> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="-22.564"/> <TranslateTransform/> </TransformGroup> </Rectangle.RenderTransform></Rectangle>

TextSkôr než napíšeme textový reťazec, vyčleníme preň miesto na pracovnej ploche. Následne napíšeme text a upravíme jeho vlastnosti, napríklad druh a výšku fontu a podobne.

<TextBox Height="32" Margin="169,126,220,0" VerticalAlignment="Top" Text="Silverlight 2.0 prichádza" TextWrapping="Wrap" FontSize="20" FontWeight="Bold"/>

Posledná ikona v tvare dvojitej šípky sprístupňuje knižnicu prvkov Asset Library.

13

Asset Library.

Všimnite si v kontextovom menu, že projekt môžete otvoriť aj vo vývojovom prostredí Visual Studio 2008, samozrejme len v prípade, ak je toto prostredie nainštalované a doplnené o Silverlight 2 a pokračovať vo vývoji v tomto prostredí. V nasledujúcej kapitole je popísané vytvorenie projektu v prostredí Visual Studio 2008. Ak ste robili nejaký cvičný projekt v prostredí Expression Blend 2, môžete ho pomocou položky v kontextovom menu

otvoriť vo aplikácii Visual Studio a zoznámiť sa s možnosťami vývoja aplikačného kódu v tomto prostredí.

14

Silverlight 2.0 aplikácie vo vývojovom prostredí Visual Studio 2008

Nová verzia vývojového prostredia s označením Visual Studio 2008 z dielne spoločnosti Microsoft prináša mnohé nové črty a vylepšenia. S niektorými sme už mali možnosť sa stretnúť vo forme rôznych doplnkov a servisných balíčkov v predchádzajúcej verzii 2005, iné sú úplne nové. Nová verzia už tradične ponúka efektívnejšie nástroje pre vizuálny návrh používateľského prostredia a vylepšené možnosti ladenia.

S príchodom novej verzie vývojového prostredia už tradične prichádzajú nielen očakávania ale aj určité obavy vyplývajúce hlavne z toho ako sa tvorcovia novej verzie porátali so spätnou kompatibilitou. Mnohí si ešte pamätáme časy, kedy dve po sebe idúce verzie, napríklad Visual Studio 2002 a 2003 nemohli byť súčasne nainštalované na jednom počítači. To prinášalo problémy, pretože vývojári musia nielen vyvíjať nové projekty pre ktoré zákonite chcú použiť nové efektívnejšie a technologicky vyspelejšie vývojárske nástroje, ale musia udržiavať aj staršie projekty po dobu celého ich životného cyklu podpory. Visual Studio 2008 prinieslo v oblasti spätnej kompatibility veľký pokrok. Nielen že dokáže koexistovať s verziami Visual Studio 2005 a Visual Studio .NET 2003, ale vývojári v ňom môžu pracovať s projektmi pre verzie platforiem .NET Framework 3.5, 3.0 aj 2.0. Požadovaná verzia platformy sa vyberá už pri zakladaní nového projektu.

Situácia s doplnkami sa opakuje aj vo verzii 2008. V dobe jej uvedenia na trh nebol Silverlight 2.0 k dispozícii, takže je potrebné nainštalovať doplnok pre podporu tejto technológie. Ak chceme vyvíjať databázové projekty s využitím nového databázového servera SQL Server 2008, musíme nainštalovať doplnok Service Pack1 pre Visual Studio 2008 a následne doplnok pre Silverlight Tools 2.0. Prepojenie na aktuálnu verziu doplnku pre Silverlight 2 nájdeme na adrese

http://silverlight.net,

pre verziu RC0 konkrétne na adrese

http://silverlight.net/GetStarted/sl2rc0.aspx.

Ak sme mali predtým nainštalovaný doplnok pre Silverlight Tools 2 Beta 2, tento sa pred inštaláciou novej verzie doplnku automaticky odinštaluje.

Visual Studio 2008 SP1 ponúka zlepšené nástroje na tvorbu WPF aplikácií, plnú podporu servera SQL Server 2008, ADO.NET Entity Framework Designer a nástroje na použitie ADO.NET Data Services, doplnkové nástroje a komponenty Visual Basic a Visual C++. Balíček prináša aj vylepšenia ohľadne vývoja a nasadenia webov s bohatšou podporou technológie JavaScript, posilnenými AJAX a dátovými nástrojmi.

Service Pack1 pre Visual Studio 2008 obsahuje aj doplnok .NET Framework 3.5 SP1, ktorý v niektorých aplikáciách založených na WPF (Windows Presentation Foundation) môže poskytnúť vyšší výkon o 20 až 45 % bez nutnosti zmeny kódu. Vylepšenia vo WCF poskytnú vývojárom viac kontroly nad spôsobom, akým pristupujú k dátam a službám. .NET Framework 3.5 SP1 umožňuje aj distribúciu prostredia .NET Framework pre klientske aplikácie s optimalizovanou veľkosťou. Z ďalších čŕt a funkcií, ktoré sú zapuzdrené v SP1 pre Visual Studio 2008 náhodne spomenieme:

Microsoft Offi ce Visual Web Developer 2007,Microsoft Visual Studio 2008 Performance Collection Tools ,Visual Studio Tools for the Offi ce system 3.0 Runtime,Microsoft Windows SDK for Visual Studio 2008 Tools,SQL Server System CLR Types,Microsoft SQL Server Management Objects,SQL Publishing Wizard 1.3,Microsoft SQL Server Compact 3.5 SP1.

15

Inštalácia doplnku Service Pack1 pre Visual Studio 2008.

Inštalácia doplnku Silverlight 2.0 tools pre Visual Studio 2008 (v dobe písania vo verzii RC0).

Úvodná Silverlight 2.0 aplikácia v aplikácii Visual Studio 2008

Aplikácia Hello worldVo väčšine publikácií venovaných začiatočníkom je aplikácia typu „Hello World“, ktorá po stlačení nejakého aktívneho prvku vypíše na obrazovku nejaký text, najčastejšie pozdrav. Aby sa začiatočníci pri čítaní tohto zborníku necítili ukrátení, ukážeme jednoduchý príklad tohto typu aplikácie.

Po nainštalovaní doplnku Silverlight 2.0 Tools pre Microsoft Visual Studio 2008 sú k dispozícii dve nové šablóny pre vývoj Silverlight aplikácií:

Silverlight Application, –Silverlight Class Library. –

Všimnite si v ľavom hornom rohu, že aplikáciu môžeme vyvíjať pre tri verzie platformy .NET Framework. Konkrétne pre verzie 2.0, 3.0 a 3.5. Pre podporu technológie Silverlight 2.0 však potrebujeme .NET Framework vo verzii 3.5. Všimnite si, že ak prepnete na inú verziu, ponuka šablón pre Silverlight projekty bude prázdna. Projekt typu Silverlight Application je možné vyvíjať v programovacích jazykoch Visual C# a Visual Basic. Rozdiel je len v syntaxi a sémantike kódu v programovacom jazyku, základné princípy fungovania aplikácie zostávajú rovnaké.

16

Typy šablón projektov Silverlight aplikácií, ktoré sú k dispozícii po nainštalovaní doplnku Silverlight 2.0 Tools pre Visual Studio 2008.

Nasleduje otázka ohľadne spôsobu spúšťania Silverlight aplikácie. Nakoľko ide o webovú aplikáciu, odporúčame ponechať implicitnú možnosť pridať hostovaciu stránku do projektu.

Výber spôsobu hostovania Silverlight aplikácie.

Po vytvorení projektu je pracovná plocha rozdelená na oblasť pre návrh v grafi ckom prostredí v hornej časti a okno pre zobrazenie XAML kódu v spodnej časti. Vpravo sú okná „Solution Explorer “ a „Properties“. Vľavo môžeme zobraziť aj Toolbox s ponukou prvkov pre grafi cký návrh.

Po voľbe základných parametrov, teda názvu projektu, jeho umiestnenia a programovacieho jazyka, modul vývojového prostredia nazývaný „Sprievodca vytvorením aplikácie“ vytvorí prázdnu šablónu aplikácie, čiže ľudovo povedané aplikáciu, ktorá zatiaľ nič nerobí a nič nezobrazuje.

XAML kód v súbore Page.xaml obsahuje defi níciu pracovnej plochy.

<UserControl x:Class="SilverApp.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> </Grid></UserControl>

17

Rozvrhnutie pracovnej plochy pri vývoji Silverlight aplikácie v aplikácii Visual Studio 2008

Pre spúšťanie aplikácie bola vytvorená ASP.NET stránka SilverAppTestPage.aspx. Silverlight je do stránky včlenený ako dynamický prvok.

Pridanie ovládacieho prvku

Ak by sme vo verzii RC0 skúsili pridať vizuálny prvok z Toolboxu priamo na návrhovú plochu, neuspeli by sme. Prvky sa pridávajú do XAML kódu. Takto môžeme pridať napríklad prvok Button dovnútra tagu <Grid>. Pri nastavovaní vlastností prvku môžeme využiť črtu Intellisense, ktorá nám formou interaktívneho pomocníka ponúka názvy parametrov a kostru syntaxe pre ich zápis. Tento pomocník funguje nielen pre XAML a kľúčové slová a objekty programovacích jazykov, ale aj pre HTML dokumenty, ASP.NET tagy a podobne.Pre tlačidlo pridáme parameter „Content“ a Click. Po pridaní prvku Click sa pridá do XAML kódu text Click ="". Medzi úvodzovky bude automaticky umiestnená položka kontextového menu pre vytvorenie obslužnej procedúry udalosti kliknutia na tlačidlo.V XAML kóde bude defi nícia tlačidla vo forme.

<Button Height="40" Content="O.K." Click="Button_Click"></Button>

V súbore Page.xaml.cs bude kostra kódu procedúry pre obsluhu udalosti kliknutia na tlačidlo.

namespace SilverApp{ public partial class Page : UserControl { public Page() { InitializeComponent(); }

private void Button_Click(object sender, RoutedEventArgs e) {

} }}

18

Obsluha udalosti

Každú aplikáciu tvorí aplikačná a prezentačná vrstva. Spomínané vrstvy dokážeme v aplikácii identifi kovať aj tomto prípade, kedy pôjde o niekoľko málo riadkov kódu. Úlohou aplikačnej vrstvy je pracovať s údajmi a premennými a pripraviť údaje, ktoré sa zobrazia používateľovi. Úlohou prezentačnej vrstvy je výpis týchto údajov vo vhodnej forme. V predchádzajúcej stati je popísané vytvorenie kostry kódu procedúry pre obsluhu udalosti, konkrétne obsluhy kliknutia na tlačidlo. Ukážeme ako tento kód v praxi funguje. Po stlačení tlačidla vypíšeme nejaký text. Do XAML kódu pridáme prvok TextBox. V elemente Grid po tomto kroku budú prvky „Button“ a „TextBox“

<Grid x:Name="LayoutRoot" Background="White"> <TextBox x:Name="tbOznam"></TextBox> <Button Height="40" Content="O.K." Click="Button_Click"></Button></Grid>

Prepneme sa do súboru Page.xaml.cs kde je kostra kódu procedúry pre obsluhu udalosti kliknutia na tlačidlo a do tela procedúry vložíme kód pre výpis textu.

private void Button_Click(object sender, RoutedEventArgs e){ tbOznam.Text += "Bolo stlačené tlačidlo O.K." + Environment.NewLine;}

Spustenie Silverlight 2.0 aplikácie v aplikácii Visual Studio 2008.

Po ukončení etapy návrhu prezentačnej a aplikačnej vrstvy nastala príležitosť pre prvé spustenie aplikácie. Pre tento účel slúži buď tlačidlo Toolbaru v tvare zelenej šípky, alebo položka menu Debug | Start, prípadne klávesová skratka F5.

O preklade a zostavení aplikácie získame prehľadný výpis v okne „Output“.

------ Build started: Project: SilverApp, Confi guration: Debug Any CPU ------C:\Windows\Microsoft.NET\Framework\v3.5\Csc.exe /noconfi g /nowarn:1701,1702 /nostdlib+ /errorreport:prompt /warn:4 /defi ne:DEBUG;TRACE;SILVERLIGHT ...

Compile complete -- 0 errors, 0 warningsSilverApp -> C:\Projekty\SilverApp\SilverApp\Bin\Debug\SilverApp.dllBegin application manifest generationNo changes detected. Application manifest fi le is up to dateBegin Xap packagingPackaging SilverApp.dllPackaging AppManifest.xamlXap packaging completed successfullyCreating test pageTest page created successfully------ Build started: Project: C:\...\SilverAppWeb\, Confi guration: Debug .NET ------Validating Web SiteBuilding directory '/SilverAppWeb/'.

Validation Complete========== Build: 2 succeeded or up-to-date, 0 failed, 0 skipped ==========

XAML kód bol preložený do „assembly“ súboru. Tento súbor má príponu „XAP“ a nachádza sa v podpriečinku ...priečinok projektu...\SilverApp\SilverAppWeb\ClientBin\.

Ak si „binárny“ XAP súbor pozrieme binárnym editorom alebo prehliadačom, zistíme, že prvé dva znaky „PK“ avizujú, že ide o ZIP archív. Ak si teda súbor s príponou XAP skopírujeme do pomocného priečinka a premenujeme jeho príponu na „ZIP“, môžeme z tohto archívu vybaliť dva súbory:

19

AppManifest.xaml,SilverApp.dll.

Pre zaujímavosť súbor AppManifest.xaml obsahuje tieto údaje.

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

Pri prvom spustení aplikácie nás vývojové prostredie upozorní, že v konfi guračnom súbore pre webové aplikácie nie je povolené ladenie. Ak chceme ladenie povoliť, vytvorí vývojové prostredie lokálny súbor web.confi g, platný pre konkrétnu aplikáciu, v ktorom bude ladenie povolené.

Povolenie ladenia v súbore web.confi g.

Po spustení aplikácie bude aktivovaný samostatný webový server, ktorý je integrálnou súčasťou vývojového prostredia. Spustenie ASP.NET Developer Web Servera je indikované ikonou v pravom dolnom rohu obrazovky operačného systému (v blízkosti ikony času a ikony prepínania lokálnej klávesnice).Aktivovaním tejto ikony môžeme kedykoľvek zistiť podrobnosti o parametroch tohto lokálneho webového servera. V informačnom dialógu sa dozvieme aký port, fyzický a virtuálny priečinok tento server používa, a na akej URL adrese je prístupná konkrétna aplikácia.

Následne po spustení lokálneho webového servera bude v jeho réžii spustená aplikácia samotná.Ak máme implicitne nastavený prehľadávač, budeme v závislosti od jeho verzie požiadaní, aby sme povolili spúšťanie a zobrazovanie intranetových aplikácií.

Silverlight aplikácie.

20

Vývoj toho istého projektu v prostredí Expression Blend 2 a Visual Studio 2008

V našich úvahách sa zameriame na spoluprácu dizajnéra prezentačnej vrstvy aplikácie a vývojára. Keď návrhár predloží defi nitívny návrh ako by mala aplikácia vyzerať, začnú vývojári pracovať na implementácii tohto návrhu. Vývojár sa pri implementácii návrhov dizajnéra riadi možnosťami prezentačnej vrstvy a návrhového prostredia, takže výsledná podoba niektorých ovládacích prvkov je iná než bola pôvodne navrhnutá.

Vývojár sa pri implementácii návrhov dizajnéra riadi možnosťami prezentačnej vrstvy a návrhového prostredia.

Naproti tomu ak je dizajnérov návrh vytvorený v takom prostredí a formáte, ktorý je podporovaný aj vývojovými prostrediami, je zaručené, že výsledná podoba aplikácie bude presne zodpovedať návrhu dizajnéra. V praxi to funguje tak, že dizajnér odovzdá svoj návrh vývojárskemu tímu v jazyku XAML a vývojársky tím do návrhu naprogramuje aplikačnú logiku.

XAML ako rozhranie medzi návrhárom a vývojárom pri tvorbe prezentačnej vrstvy aplikácie.

Všimnite si, že kontextové menu stránky Page.xaml obsahuje aj položku „Open in Expression Blend...“.

Menu pre otvorenie projektu Silverlight aplikácie v prostredí Expression Blend 2.

21

Silverlight aplikácia v prostredí Expression Blend 2.

V návrhovom prostredí Expression Blend 2 môžeme pokračovať v interaktívnom grafi ckom návrhu.

Upozornenie na zmeny vykonané mimo aplikácie Visual Studio 2008.

Zmeny vykonané návrhovom prostredí Expression Blend 2 sú po upozornení následne akceptované aj v aplikácii Visual Studio 2008.

<Grid x:Name="LayoutRoot" Background="White"> <TextBox x:Name="tbOznam"></TextBox> <Button Height="40" Content="O.K." Click="Button_Click" Background="#FF186297"></Button></Grid>

Rovnako aj zmeny vykonané v aplikácii Visual Studio 2008 sú akceptované v prostredí Expression Blend 2.

22

Objekty pre vytvorenie prezentačnej vrstvy

Pri návrhu prezentačnej vrstvy využívajúcej Silverlight je potrebné poznať objektovú hierarchiu pre zobrazovanie a prácu s objektmi.

Využívajú sa kontajnerové objekty:Canvas, –Stack Panel, –Grid. –

Objekt CanvasSilverlight aplikácie využívajú objektový model pracovnej plochy s názvom „Canvas“. Je to akési „maliarske plátno“, ktoré reprezentuje viditeľnú prezentačnú vrstvu Silverlight aplikácie. Na túto plochu potom umiestňujeme rôzne grafi cké objekty. Pri grafi ckých objektoch môžeme stanoviť ich polohu. Napríklad defi nujeme polohu tlačidla voči ploche Canvas.

<UserControl x:Class="SilverApp.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300">

<Canvas Background="AntiqueWhite"> <Button Height="40" Content="O.K." Click="Button_Click" Background="#FF186297" Canvas.Left="20" Canvas.Top="20"></Button> </Canvas></UserControl>

Relatívna poloha plochy geometrického obrazca voči ploche Canvas.

XAML aplikácia môže obsahovať viac plôch „Canvas“, pričom, tieto môžu byť rôzne vnorené. V našom príklade je vo vnútri hlavnej (bielej) plochy vnorená ďalšia, červená vnorená plocha Canvas. Vo vnútri vnorenej plochy je zobrazená geometrická plocha (elipsa), pričom poloha elipsy je zadaná ako relatívna voči vnútornej vnorenej ploche „Canvas“.

<Canvas Background="White"> <Canvas Background="Red" Canvas.Top="25" Canvas.Left="25" Width="250" Height="100"> <Ellipse Canvas.Top="10" Canvas.Left="25" Width="150" Height="75" Fill="Yellow" /> </Canvas></Canvas>

Vnorenie plochy Canvas.

23

Plocha Canvas môže byť vnorená aj v mnohých typoch ovládacích prvkov. Ukážeme príklad vnorenia plochy na ktorej je „smajlík“. Budeme postupovať systematicky a vytvoríme najskôr plochu so zobrazením smajlíka. Kvôli prehľadnosti uvádzame kompletný výpis XAML kódu.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Grid1.Page" Width="640" Height="480">

<Canvas x:Name="smajlik" Canvas.Left="10" Canvas.Top="10" > <Ellipse Canvas.Left="10" Canvas.Top="10" Width="80" Height="80" Fill="Yellow" Stroke="Black" />

<Ellipse Canvas.Left="25" Canvas.Top="25" Width="10" Height="10" Fill="Black" Stroke="Black" /> <Ellipse Canvas.Left="55" Canvas.Top="25" Width="10" Height="10" Fill="Black" Stroke="Black" /> <Path Data="M 25,50 A 15,15 450 0 0 65,50" Stroke="Black"/> </Canvas>

</UserControl>

Canvas so smajlíkom vo vnútri.

Následne plochu Canvas umiestnime dovnútra tlačidla a vytvoríme tak obrázkové tlačidlo.

<Canvas x:Name="ObrazkoveTlacidlo" Canvas.Left="150" Canvas.Top="10" > <Button Content="Potvrdenie" Width="280" Height="100" />

<Canvas x:Name="smajlik" Canvas.Left="170" Canvas.Top="0" > <Ellipse Canvas.Left="10" Canvas.Top="10" Width="80" Height="80" Fill="Yellow" Stroke="Black" /> <Ellipse Canvas.Left="25" Canvas.Top="25" Width="10" Height="10" Fill="Black" Stroke="Black" /> <Ellipse Canvas.Left="55" Canvas.Top="25" Width="10" Height="10" Fill="Black" Stroke="Black" /> <Path Data="M 25,50 A 15,15 450 0 0 65,50" Stroke="Black"/> </Canvas> <!--koncovy tag canvasu tlacidla-->

</Canvas> <!--koncovy tag obrazkoveho tlacidla-->

Obrázkové tlačidlo.

24

Objekt Stack PanelObjekt Stack Panel slúži na rozmiestnenie objektov nad sebou, alebo vedľa seba.

<UserControl x:Class="SilverApp.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <StackPanel Background="Yellow"> <Button Content="Moznost 1" Width="80" Margin="10"/> <Button Content="Moznost 2" Width="80" Margin="10"/> <Button Content="Moznost 3" Width="80" Margin="10"/>

</StackPanel></UserControl>

Implicitná orientácia usporiadania je vertikálna.

Usporiadanie objektov pomocou Stack Panelu.

Ak zmeníme orientáciu na horizontálnu, zmení sa usporiadanie objektov zapuzdrených v Stack Paneli.

<StackPanel Orientation="Horizontal" Background="Yellow"> <Button Content="Moznost 1" Height="30" Width="80" Margin="10"/> <Button Content="Moznost 2" Height="30" Width="80" Margin="10"/> <Button Content="Moznost 3" Height="30" Width="80" Margin="10"/>

</StackPanel>

Usporiadanie objektov pomocou Stack Panelu po zmene orientácie na „Horizontal“.

Objekt GridNiektoré webové aplikácie majú pracovnú plochu rozvrhnutú na niekoľko samostatných oblastí. Pre tento účel slúži objekt Grid. Ak v prostredí Expression Blend 2 klikneme na malý štvorček v pravom hornom rohu orámovania bielej návrhovej plochy, môžeme pomocou posúvania a umiestňovania pravítok rozdeliť pracovnú plochu na niekoľko oblastí a to vodorovne alebo zvisle.

<Grid x:Name="LayoutRoot" Background="White" > <Grid.RowDefi nitions> <RowDefi nition Height="0.112*"/> <RowDefi nition Height="0.536*"/> <RowDefi nition Height="0.352*"/> </Grid.RowDefi nitions></Grid>

25

Pomocou ikon visacích zámkov môžeme „zamknúť“ fi xné nastavenie rozmerov vybranej oblasti.

Ukážeme príklad tabuľky, so záhlavím a riadkami, aké sa často používajú na webových stránkach. Všimnite si, že rozmery, ktoré sa budú prispôsobovať napríklad veľkosti stránky sú defi nované pomocou znaku „*“ (hviezdička).

Ak chceme mať tabuľku viditeľnú, nastavíme parameter ShowGridLines="true".

<Grid Background="White" ShowGridLines="true"> <Grid.RowDefi nitions> <RowDefi nition Height="40"/> <RowDefi nition Height="*"/> </Grid.RowDefi nitions>

<Grid.ColumnDefi nitions> <ColumnDefi nition Width="*"/> <ColumnDefi nition Width="200"/> <ColumnDefi nition Width="50"/> </Grid.ColumnDefi nitions></Grid>

Príklad Gridu s riadkami a stĺpcami.

Prvý riadok napríklad <RowDefi nition Height="10"/> alebo prvý stĺpec napríklad <ColumnDefi nition Width="10"/> udávajú okraj.

V ďalšom príklade vytvoríme tabuľku obsahujúcu aj riadky s fl exibilnou výškou a ukážeme, ako sa do tabuľky umiestňujú ovlácacie prvky, ktorých poloha je viazaná na polohu a veľkosť buniek tabuľky.

<Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefi nitions> <RowDefi nition Height="50" /> <RowDefi nition Height="30*" MaxHeight="70" /> <RowDefi nition Height="*" MinHeight="30" MaxHeight="50" /> <RowDefi nition Height="Auto" MinHeight="5" MaxHeight="30" /> </Grid.RowDefi nitions>

<Grid.ColumnDefi nitions> <ColumnDefi nition /> <ColumnDefi nition /> <ColumnDefi nition /> </Grid.ColumnDefi nitions>

26

<TextBlock x:Name="tblMeno" Grid.Row="0" Grid.Column="0" Text="Meno:" Margin="5"/> <TextBox x:Name="tbMeno" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Width="200" Background="Yellow" Margin="5" />

<TextBlock x:Name="tblClen" Grid.Row="1" Grid.Column="0" Text="Aktívny člen?" VerticalAlignment="Bottom" /> <CheckBox x:Name="cbClen" Grid.Row="1" Grid.Column="1" Content="ANO" IsChecked="true" VerticalAlignment="Bottom" /> <TextBlock x:Name="klub" Text="Golfový klub" Grid.Row="1" Grid.Column="2" VerticalAlignment="Bottom" FontFamily="Comic Sans MS" FontSize="24" FontWeight="Bold" Margin="0,20,0,0"/> </Grid>

Tabuľka obsahujúca riadky s fl exibilnou výškou a ovládacie prvky viazané na tabuľku.

27

Nové ovládacie prvky fi nálnej verzie

V priebehu beta testovania boli prezentačné možnosti Silverlight 2.0 rozšírené o tri nové ovládacie prvky, ktoré je možné používať od verzie RC0:

PasswordBox, –ComboBox, –ProgressBar. –

<StackPanel Background="LightGray"> <PasswordBox x:Name="PWB" Width="100" Height="22" Margin="10" /> <ProgressBar x:Name="PB" Width="200" Height="12" Value="30" /> <ComboBox x:Name="CB" Width="100" Height="22" Margin="10" > <ComboBoxItem Content="CB1" /> <ComboBoxItem Content="CB2" /> <ComboBoxItem Content="CB3" /> </ComboBox> </StackPanel>

Nové ovládacie prvky, ktoré je možné používať od verzie RC0.

Niektoré ovládacie prvky, napríklad DataGrid, RadioButton, CheckBoxes, a DatePicker majú vo fi nálnej verzii oveľa atraktívnejší vzhľad a rozšírenú funkcionalitu.

Od verzie RC0 majú niektoré prvky oveľa atraktívnejší vzhľad.

28

Prepnutie zobrazovania na celú obrazovku

Systém okien pre viacero súčasne bežiacich aplikácií je bežný režim pre väčšinu bežných úkonov a prác na počítači. Pre niektoré aplikácie, napríklad také, ktoré zobrazujú veľké množstvo údajov môže byť výhodné ak môžu zobrazovať v režime celej obrazovky (full screen). Do tohto režimu nie je možné sa prepnúť po štarte aplikácie, ale až ako odozvu na nejakú používateľovu aktivitu, takže nič v štýle automaticky spúšťaných reklám na celú obrazovku nehrozí. Režim zobrazovania sa nastavuje pomocou vlastnosti IsFullScreen. Môžeme to urobiť napríklad ako obsluhu udalosti stlačenia tlačidla.

private void btUloz_Click(object sender, RoutedEventArgs e){ App.Current.Host.Content.IsFullScreen = true;}

Po prepnutí do celoobrazovkového režimu sa zobrazí upozornenie, že pomocou klávesu ESC sa aplikácia vráti do pôvodného zobrazovacieho režimu v okne.

Nakoľko usporiadanie ovládacích prvkov závisí od veľkosti okna aplikácie, môže byť užitočné, aby sa aplikácia o prepnutí do celoobrazovkového režimu „dozvedela“ a bolo možné napríklad inak usporiadať ovládacie prvky. Na tento účel slúži udalosť FullScreenChanged.

private void btUloz_Click(object sender, RoutedEventArgs e){ App.Current.Host.Content.FullScreenChanged += new EventHandler(App_FullScreenChanged); App.Current.Host.Content.IsFullScreen = true;}

void App_FullScreenChanged(object sender, EventArgs e){ if (App.Current.Host.Content.IsFullScreen) {...} else {...}}

29

Komunikácia so serverom, prenos súborov

Vylepšovanie možností Silverlight aplikácií, či už v oblasti grafi ky, alebo používateľského rozhrania evokujú nové požiadavky. Webové aplikácie tohto typu sa približujú k možnostiam klasických aplikácií, ktoré často pracujú so súbormi. Preto Silverlight aplikácia potrebuje komunikovať so serverom a prenášať súbory. Aplikácia môže komunikovať buď s tým istým serverom na ktorom beží, alebo aj s iným serverom, napríklad so serverom na ukladanie multimediálnych údajov a podobne. Komunikácia môže prebiehať obidvoma smermi, čiže aplikácia potrebuje zo servera niečo načítať, alebo niečo na server odoslať. Pre načítanie textových údajov zo servera môžeme využiť metódu DownloadStringAsync z triedy System.Net.WebClient. Pre súbory typu stream slúži metóda OpenReadAsync. Pre odoslanie požiadavky na server je určená trieda System.Net.WebRequest. Táto trieda poslúži aj na odoslanie súborov na server, ak potrebujeme na server odoslať dáta ako obsah HTTP požiadavky. Na prenos údajov môžeme použiť aj webové služby.

Prenos súborov na server

Často potrebujeme preniesť nejaký súbor z klienta na server, či už kvôli archivácii, alebo takto posielame súbory fotografi í do webových albumov.

Pre používateľské rozhranie pre odoslanie súborov na server by sme teoreticky vystačili s jedným tlačidlom, no aby sme vedeli, čo sa v aplikácii deje, doplníme na plochu aj textové pole na zobrazenie stavových informácií.

<UserControl x:Class="Upload.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <StackPanel Orientation="Vertical"> <Button Click="Button_Click" Content="Vyber subor" /> <TextBlock x:Name="StatusText" FontSize="16" /> </StackPanel> </Grid></UserControl>

Pre výber súboru, ktorý chceme preniesť využijeme objekt OpenFileDialog. Nastavením vlastnosti Multiselect na hodnotu false zamedzíme výberu viacerých súborov. Pomocou masky fi ltra môžeme špecifi kovať aké typy súborov chceme prenášať. Objekt OpenFileDialog vráti pri úspešnom výbere súboru hodnotu true, inak false. V prípade neúspechu vypíšeme chybové hlásenie.

private void Button_Click(object sender, RoutedEventArgs e) { OpenFileDialog dlg = new OpenFileDialog(); dlg.Multiselect = false; dlg.Filter = "All fi les|*.*";

if ((bool)dlg.ShowDialog()) { StatusText.Text = dlg.File.Name; PrenosSuboru(dlg.File.Name, dlg.SelectedFile.OpenRead()); } else {StatusText.Text = "Nebol vybrany subor !!!"; } }

Ak sme úspešne nejaký súbor vybrali, v procedúre PrenosSuboru() ho prenesieme na server. Prenos sa uskutoční asynchrónne. Požiadavka na prenos súboru musí smerovať na URL adresu obsahujúcu generický handler pre prevzatie súboru. Tento vytvoríme v druhej časti príkladu (ktorý bude naprogramovaný nižšie).

30

Odošleme aj názov súboru. Po vytvorení požiadavky aktivujeme metódu BeginGetRequestStream, ktorej odovzdáme názov metódy asynchrónneho callbacku – v našom prípade OnRequestStream: URL adresu handlera na serveri zatiaľ zadáme „http://localhost“.

using System.IO;using System.Net;private void PrenosSuboru(string nazov, Stream stream){ UriBuilder ub = new UriBuilder("http://localhost"); ub.Query = string.Format("fi lename={0}", nazov);

WebClient c = new WebClient(); c.OpenWriteCompleted += (sender, e) => { Prenos(stream, e.Result); e.Result.Close(); stream.Close(); }; c.OpenWriteAsync(ub.Uri);}

Nakoniec vytvoríme telo procedúry Prenos, pre fyzický prenos súboru na úrovni bajtov.

private void Prenos(Stream inp, Stream outp){ byte[] buffer = new byte[4096]; int bytesRead;

while ((bytesRead = inp.Read(buffer, 0, buffer.Length)) != 0) { outp.Write(buffer, 0, bytesRead); }}

Prenos úboru na server.

Ak spustíme aplikáciu v tomto okamihu, bude nám zdanlivo fungovať, môžeme vybrať súbor, no keďže zatiaľ nemáme vytvorený handler na serveri, ktorý by zaisťoval druhú stranu prenosu, teda prijímateľa, prenos súboru na server neprebehne.

Generický handler pre prevzatie súboru na serveriNa strane servera vytvoríme generický handler, ktorý prevezme požiadavku na prenos údajov a údaje uloží.

31

Pridanie generického handlera do projektu.

Sprievodca vytvorí šablónu kódu handlera aj s ukážkovým demo kódom. Tento kód vymažeme.

<%@ WebHandler Language="C#" Class="Handler" %>

using System;using System.Web;

public class Handler : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write("Hello World"); } public bool IsReusable { get {return false;}}}

Najskôr z požiadavky prevezmeme meno súboru a zahájime prenos.

public void ProcessRequest(HttpContext context){ string nazov = context.Request.QueryString["fi lename"].ToString(); using (FileStream fs = File.Create(context.Server.MapPath("~/App_Data/" + nazov))) { SaveFile(context.Request.InputStream, fs); }}

Pre fyzický prenos napíšeme vlastnú procedúru.

private void SaveFile(Stream stream, FileStream fs) { byte[] buffer = new byte[4096]; int bytesRead; while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0) { fs.Write(buffer, 0, bytesRead); } }

32

URL adresu pre procedúru PrenosSuboru získame tak, že nastavíme stránku handlera ako implicitnú na spustenie, a po spustení si skopírujeme URL adresu z okna prehľadávača Internet Explorer a vložíme ju do kódu procedúry miesto Localhost adresy. Aplikáciu otestujeme napríklad tak, že na vhodné miesto handlera umiestnime zarážku. Obnovíme nastavenie pre spúšťanie na TestPage.aspx, spustíme aplikáciu, vyberieme súbor a po zastavení programu na breakpointe môžeme trasovať priebeh jeho preberania na server.

Testovanie aplikácie.

33

Silverlight Streaming na Windows Live

Služba Microsoft Silverlight Streaming by Windows Live (http://silverlight.live.com) je k dispozícii pre vývojárov a dizajnérov webových aplikácií využívajúcich technológiu Silverlight. Každý registrovaný používateľ má k dispozícii 10 GB serverového priestoru zdarma, takže sem môže umiestňovať aj rozsiahlejšie multimediálne projekty.

34

Práca s údajmi a využitie technológie LINQ

Dosiaľ bolo možné pristupovať k údajom v relačných databázach cez rozhranie ADO.NET a to buď v pripojenom, alebo odpojenom režime. Čoraz populárnejší je dátový formát XML, dôkazom čoho je skutočnosť, že všetky moderné databázové servery podporujú XML ako natívny dátový formát. Jednou z najvýznamnejších noviniek v novej verzii technologickej platformy Microsoft .NET Framework 3.5 je technológia LINQ (Language Integrated Query), ktorá slúži na jednoduchší a efektívnejší prístup k údajom, či už v objektovo-relačných databázach, alebo XML. Duchovným otcom tejto technológie nie je nikto iný ako známy „guru“ objektovo orientovaného programovania a jazyka C# Anders Hejlsberg.

V porovnaní s dopytovacím jazykom SQL dokáže LINQ v maximálnej miere zjednodušiť operácie nad údajmi v databázach. Integrácia LINQ je tak hlboká, že umožňuje vykonávať dopyty do databáz, ADO.NET datasetov, XML štruktúr, proste všade tam, kde sa pracuje s údajmi. LINQ je zakomponovaný priamo do programovacích jazykov C# 3.0 a Visual Basic 2008. Vývojárom tak stačí poznať programovací jazyk v ktorom pracujú a základné konštrukcie LINQ. Už nie sú odkázaní na pomerne zložitú a striktnú syntax jazyka SQL, hlavne pri vytváraní zložitejších vnorených dopytov. Navyše defi novať objektovo – relačné väzby v jazyku SQL bolo niekedy veľmi ťažké. Podobne ako C#, je aj LINQ pomerne silno typovo závislý, takže množstvo potenciálnych chýb zachytí už kompilátor pri preklade zdrojového kódu. Prostredníctvom LINQ môžeme nielen realizovať dopyty, ale údaje aj požadovaným spôsobom modifi kovať, teda pridávať nové záznamy, editovať už existujúce záznamy, prípadne nepotrebné záznamy vymazávať.

LINQ umožňuje pracovať s akýmikoľvek údajmi, pretože jeho architektúra umožňuje vytvárať jej implementácie pre rôzne dátové zdroje. Na rozdiel od ADO.NET, kde bolo možné vytvoriť provider pre prístup k údajom pre akýkoľvek databázový server, možnosti implementácie LINQ sú oveľa abstraktnejšie. Na najvyššej architektonickej úrovni je pridanie nových kľúčových slov do programovacích jazykov. Pod nimi sú moduly a komponenty pre sprostredkovanie LINQ technológie smerom k zdroju údajov.

LINQ toObjects – dopytovanie v kolekciách údajov a rôznych typoch polí v operačnej pamäti, –LINQ to XML – dopytovanie do XML (predtým XLinq), –LINQ to SQL dopytovanie do databázy (predtým DLinq), –LINQ to DataSets implementácia LINQ pre prácu s ADO.NET datasetmi. –

Architektúra LINQ.

LINQ to Objects umožňuje vytvárať dopyty nad objektmi z kolekcie IEnumerable.

35

Najzaujímavejším variantom je zrejme LINQ to SQL, pretože umožňuje vytváranie jednoduchých objektových dopytov nad databázou. Základom pre implementáciu LINQ to SQL je behové prostredie na riadenie relačných dát vo forme objektov bez straty podpory „query“ jazyka. Aplikácia manipuluje s objektmi v managed alebo natívnom jazyku .NET (čo je pre objektovo orientované jazyky .NET prirodzenejšie), kým LINQ to SQL na pozadí má na starosti automatické „trekovanie“ zmien v databáze. Prepojenie medzi objektmi aplikácie a reálnymi tabuľkami databázy je deklarované tzv. diagramom ORM (object relational mapping).

LINQ prináša možnosť dopytovania priamo integrovanú do .NET jazyka, pomocou množiny kľúčových slov.

Základný syntaktický predpis pre dopyt v jazyku LINQ je

from itemName in srcExprjoin itemName in srcExpr on keyExpr equals keyExpr (into itemName)?let itemName = selExprwhere predExprorderby (keyExpr (ascending | descending)?)*select selExprgroup selExpr by keyExpr into itemName query-body

Zdá sa to na prvý pohľad zložité, ale vôbec to tak nie je. K tomu, že sme o miere nutnosti osvojenia syntaxe LINQ hovorili veľmi benevolentne nás oprávňuje veľmi dobre vyriešený pomocník typu IntelliSense aj pre tento databázový dopytovací jazyk. Keď začneme písať príkaz, prípadne názov objektu, IntelliSense nám ponúkne možnosti pre doplnenie na kompletný syntaktický výraz.

LINQ výraz v porovnaní s SQL začína trochu netypicky operátorom FROM, ktorý špecifi kuje dátový zdroj a vracia objekt typu IEnumerable alebo IQueryable. Za operátorom FROM je premenná in ukazujúca na kolekciu. Iterujúcu premennú takto deklarujeme, aby sme s ňou v ďalšej časti dopytu mohli pracovať a odkazovať sa na ňu. Iterujúca premenná je vlastne určitou analógiou aliasu databázovej tabuľky v jazyku SQL. Operátor SELECT defi nuje projekciu, teda výber atribútov. Okrem atribútov môže obsahovať napríklad nový anonymný objekt, alebo iterujúcu premennú. Ukážeme jednoduchý príklad.

var vizitky = from z in zakaznici where z.Mesto == "Bratislava" select new { z.Meno, z.email };

Z klauzule FROM si prekladač zistí akého typu je daný objekt, v našom prípade „z“. Všimnite si, že na začiatku nie je potrebné určovať typ lokálnej premennej. Kompilátor si typ premennej „vizitky“ odvodí sám. Zástupné kľúčové slovo VAR nám podstatne zjednoduší tvorbu kódu.

Pre prístup k údajom v XML štruktúrach je potrebné do projektu pridať odkazy na menné priestory System.Xml.Linq, System.Xml.Schema a System.Xml.XPath. Využívajú sa dve základné triedy XElement a XAtribút.

XmlReader reader = XmlReader.Create(„MojDokument.xml“);XElement element = XElement.Load(reader);

Údaje v zoznamoch

Ak aplikácia pracuje s obmedzeným množstvom údajom, nasadenie databázového servera by mohlo pôsobiť dojmom „kanóna na vrabce“. V takých prípadoch môže byť vhodnejšie a jednoduchšie využiť pre uloženie údajov XML súbory, alebo objekty typu zoznam, napríklad objekt List. Pre ilustráciu vytvorme novú Silverlight aplikáciu napríklad s názvom ZOZNAMY, kde budeme ukladať záznamy o knihách.

36

V súbore Page.xaml.cs vytvoríme novú triedu s názvom knihy. Budú nás zaujímať dva textové atribúty – meno autora a názov knihy a jeden číselný atribút, ktorým je cena. Najskôr triedu defi nujeme.

public class Knihy{ public string autor { get; set; } public string nazov { get; set; } public int cena { get; set; }}

Teraz napíšeme kód pre vytvorenie objektu List a jeho naplnenie niekoľkými inštanciami triedy kniha.

public partial class Page : UserControl{ public Page() { InitializeComponent(); }

private static List<Knihy> ZaradKnihu() { return (new List<Knihy>() { new Knihy(){autor="Rowlingova", nazov="Harry Potter 1", cena=249}, new Knihy(){autor="Adams", nazov="Stoparov sprievodca", cena=199}, new Knihy(){autor="Hecko", nazov="Cervene vino", cena=333} });

}}

V reálnej aplikácii by sa vkladané údaje získavali od používateľa, napríklad z prvkov webového formulára.V súbore Page.xaml vytvoríme prvok typu ListBox, pričom parameter pre binding ponecháme prázdny.

<UserControl x:Class="Zoznamy.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <ListBox x:Name="lbVyber" ItemsSource="{Binding ''}"/> </Grid></UserControl>

V súbore Page.xaml.cs vytvoríme obslužnú procedúru pre udalosť „Page Loaded“ a do jej tela doplníme kód pre pripojenie prvku ListBox k zdroju údajov.

public Page(){ InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded);}

void Page_Loaded(object sender, RoutedEventArgs e){ this.DataContext = ZaradKnihu();}

37

Nakoľko sme dosial v prvku ListBox nedefi novali šablónu ItemTemplate pre defi novanie zobrazovaných atribútov, ak by sme aplikáciu spustili v tomto okamihu, zobrazí sa len zoznam objektov, z ktorého sa dozvieme maximálne počet záznamov.

Zobrazenie zoznamu objektov.

Po zadefi novaní Item Template, kde využijeme kontajnerový prvok StackPanel na horizontálne radenie jednotlivých atribútov a sa nám zobrazí zoznam v požadovanom tvare. Aby to bolo prehľadné, doplníme parameter „Margin“, ktorý zaistí medzeru medzi atribútmi v riadku ListBoxu.

<ListBox x:Name="lbVyber" ItemsSource="{Binding ''}"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding autor}" Margin="5,0,0,0"></TextBlock> <TextBlock Text="{Binding nazov}" Margin="5,0,0,0"></TextBlock> <TextBlock Text="{Binding cena}" Margin="5,0,0,0"></TextBlock> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

Zobrazenie zoznamu objektov v požadovanej forme.

Zobrazenie údajov vyžadujúcich konverziu

Zatiaľ čo v predchádzajúcom príklade sme zobrazili údaje presne v takej forme ako boli uložené v databázovej tabuľke, v mnohých prípadoch bude aplikačná logika vyžadovať konverziu údajov pred ich zobrazením. Typickým príkladom by mohol byť klasicky semafor. Z riadiaceho procesu dostáva tri stavy „STOJ“, „PRIPRAV“ a „CHOD“. Mohli by sme ich jednoducho zobraziť v textovej podobe, ale s tým by sme neuspeli. Všetci sú zvyknutí na klasické semaforové farby „červená“, „žltá“ a „zelená“.

Najskôr defi nujeme prípustné stavy semafora ako vymenovaný typ enum.

38

public enum Stav{ STOJ, PRIPRAV, CHOD}

Aby sme mohli oznámiť klientskemu zariadeniu, že nastala zmena požadovaného parametra, v našom prípade zmena stavu semafora, vytvoríme triedu „Svetlá“ odvodenú od triedy INotifyPropertyChanged. Do súboru Page.xaml.cs pridáme referenciu na namespace.

using System.ComponentModel;using System.Windows.Data;

Trieda Svetla má metódy pre zistenie stavu a nastavenie jeho zmeny.

public class Svetla : INotifyPropertyChanged{ public Stav St { get { return (st); } set { st = value; if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("St")); } } }

private Stav st; public event PropertyChangedEventHandler PropertyChanged;}

Aby aplikácia spoľahlivo fungovala od samého začiatku, je potrebné pri jej zavádzaní (procedúra PageLoad) nastaviť implicitný stav. Z vlastnej skúsenosti viete, že keď sa semafory spúšťajú, naskočí najskôr pre všetky smery červená a až po chvíli sa postupne začnú riadiť jednotlivé smery. Podobne je to aj pri ukončení riadenia premávky. Najskôr naskočí pre všetky smery červená a až po chvíli začne blikať oranžová, čo znamená, že križovatka už nie je riadená. Implicitný stav pre semafor je teda jednoznačne „STOJ“.

public partial class Page : UserControl{ public Page() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); }

void Page_Loaded(object sender, RoutedEventArgs e) { LayoutRoot.DataContext = new Svetla() { St = Stav.STOJ; }; }}

39

Trieda pre konverziu je odvodená od triedy IValueConverter z namespace System.Windows.Data;Obsahuje dve metódy (nemusíte ich písať, stačí pri zadávaní názvu IValueConverter využiť Code Snippets) pre doprednú a spätnú konverziu. Pre konverziu jedným smerom slúži metóda Convert() a pre opačnú konverziu metóda ConvertBack().

public class Konverzia : IValueConverter{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return (...); }

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return (...); } }}

V našej aplikácii nám stačí jednosmerná konverzia zo stavov na farby svetiel semafora. Podľa stavu budeme nastavovať objekt Brush pre vyfarbenie zobrazeného kruhu semafora.Do metódy ConvertBack pre spätnú konverziu vložíme len kvôli syntaktickej úplnosti jeden riadok kódu vracajúci honotu null. Kompletný kód triedy bude

public class Konverzia : IValueConverter{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { Stav st = (Stav)value; SolidColorBrush brush = new SolidColorBrush(Colors.Red); switch (st) { case Stav.STOJ: break; case Stav.PRIPRAV: brush = new SolidColorBrush(Colors.Orange); break; case Stav.CHOD: brush = new SolidColorBrush(Colors.Green); break; default: break; } return (brush); }

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return (null); } }}

40

Súbor Page.xaml bude obsahovať kód pre nastavenie UserControl.Resources na triedu Konverzia a pripojenie sa na objekt „konv“. Samotná konverzia sa potom vykoná automaticky na základe zmeny stavu.

<UserControl x:Class="Semafor.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:custom ="clr-namespace:Konverzia" Width="400" Height="300">

<UserControl.Resources> <custom:Konverzia x:Key="konv"> </custom:Konverzia> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <Ellipse Fill="{Binding St, Konverzia={StaticResource konv}}"> </Ellipse> </Grid></UserControl>

Ukladanie údajov u klienta

Aby webové aplikácie dokázali prekonať obmedzenia vyplývajúce z http protokolu, hlavne jeho bezstavovosť, webové aplikácie si ukladajú hodnoty niektorých parametrov nastavenia a dočasné súbory na strane klienta, najčastejšie vo forme cookies. Silverlight aplikácia beží na klientskom počítači v bezpečnom sandbox režime a preto nemá voľný prístup na dátové úložiská klientskeho počítača, takže nemôže nič voľne zapisovať na disk. Preto sa údaje ukladajú do izolovaného úložiska Isolated Storage. Používateľ (na rozdiel od Silverlight aplikácie) vlastne ani nevie, kde sú tie ktoré údaje uložené. Zjednodušene povedané, ide o izolovanú časť disku s obmedzenou kapacitou, vyhradenú len pre Silverlight aplikáciu. K týmto údajom však pokročilejší používatelia môžu pristupovať aj z iných .NET aplikácií. Rovnako ako na disku aj Isolated Storage umožňuje vytvárať hierarchickú štruktúru priečinkov.

Ako východiskovú aplikáciu pre ukážku možností práce s Isolated Storage vyberieme riešenie ZOZNAMY z jednej z predchádzajúcich statí. Aplikácia pracuje s objektom typu List, kam ukladá údaje o knihách, ktoré sú v inštanciách triedy Knihy.

public class Knihy{ public string autor { get; set; } public string nazov { get; set; } public int cena { get; set; }}

Zoznam máme naplnený niekoľkými inštanciami triedy kniha. Pre vkladanie údajov slúži metóda

private static List<Knihy> ZaradKnihu() { return (new List<Knihy>() { new Knihy(){autor="Rowlingova", nazov="Harry Potter 1", cena=249}, new Knihy(){autor="Adams", nazov="Stoparov sprievodca", cena=199}, new Knihy(){autor="Hecko", nazov="Cervene vino", cena=333} }); }

41

Do projektu pridáme novú triedu Ukladanie. Pre prácu s objektom List je potrebné do súboru Ukladanie.cs pridať referenciu.

using System.Collections.Generic;

Pre prácu s Isolated Storage pridať referenciu.

using System.IO.IsolatedStorage;

Uloženie údajov do dočasného úložiska aplikácieV triede implementujeme metódy pre vkladanie údajov do izolovaného úložiska, výber údajov a ich vymazanie. Najskôr ukážeme ukladanie údajov do dočasného úložiska aplikácie. Údaje v tomto úložisku nie sú uložené natrvalo. Po vypnutí aplikácii sú automaticky odstránené, takže aj po opätovnom spustení aplikácie sú všetky údaje uložené počas predchádzajúceho spustenia vymazané.

using System.IO.IsolatedStorage;

namespace Zoznamy{ public static class Ukladanie { public static void UlozKnihy(List<Knihy> knihy) { IsolatedStorageSettings.ApplicationSettings["MojeKnihy"] = knihy; }

public static List<Knihy> DajKnihy() { List<Knihy> zoznam = null; if (IsolatedStorageSettings.ApplicationSettings.Contains("MojeKnihy")) { zoznam = IsolatedStorageSettings.ApplicationSettings["MojeKnihy"] as List<Knihy>; } return (zoznam); }

public static void VymazKnihy() { IsolatedStorageSettings.ApplicationSettings.Remove("MojeKnihy"); } }}

Uloženie údajov do súborovPríklad môžeme modifi kovať a ukladať údaje do súboru, samozrejme ako inak, vo formáte XML. V takomto prípade sú údaje uložené aj po ukončení aplikácie. Do projektu pridáme referenciu System.XML.Linq a namespace.

using System.Linq;using System.Xml;using System.Xml.Linq;using System.IO;

42

Kód triedy využívajúcej pre ukladanie údajov do Isolated storage súbory bude

public static class Ukladanie{ public static void UlozKnihy(List<Knihy> knihy) { IsolatedStorageFile subor = IsolatedStorageFile.GetUserStoreForApplication(); using (IsolatedStorageFileStream stream = subor.CreateFile("knihy.xml")) { XElement data = new XElement("knihy", from k in knihy select new XElement("kniha", new XAttribute("Autor", k.autor), new XAttribute("Nazov", k.nazov), new XAttribute("Cena", k.cena)));

using (XmlWriter writer = XmlWriter.Create(stream)) { data.Save(writer); writer.Close(); } stream.Close(); } }

public static List<Knihy> DajKnihy() { List<Knihy> zoznam = null; try {

IsolatedStorageFile subor = IsolatedStorageFile.GetUserStoreForApplication(); using (IsolatedStorageFileStream stream = subor.OpenFile("knihy.xml", FileMode.Open)) { using (XmlReader reader = XmlReader.Create(stream)) { XElement data = XElement.Load(reader); zoznam = (from k in data.DescendantNodesAndSelf("kniha") select new Knihy() { autor = (string)k.Attribute("Autor"), nazov = (string)k.Attribute("Nazov"), cena = (int)k.Attribute("Cena") }).ToList(); } stream.Close(); } catch{} return (zoznam); }

public static void VymazKnihy() { IsolatedStorageFile.GetUserStoreForApplication().DeleteFile("knihy.xml"); } }

43

Textový editor s ukladaním do súboruV predchádzajúcom riešení sme sa zamerali na ukladanie štruktúrovaných údajov do XML, pričom sme vytvorili len procedúry na ukladanie, načítanie a vymazanie údajov, bez nadväznosti na zvyšok aplikácie. V treťom príklade budeme ukladať údaje v jednoduchom textovom formáte, no vytvoríme kompletnú aplikáciu vrátane používateľského rozhrania. Námetom je jednoduchý textový editor.

Vizuálne používateľské rozhranie pozostáva z jedného prvku TextBox pre písanie a zobrazovanie textu a dve tlačidlá, jedno pre uloženie textu do súboru v lokálnom úložisku a druhé pre jeho načítanie. Aby sme dodržali určitú úpravu aplikácie, prvky sú zoradené v Gride, ktorý má tri riadky. Dva dolné sú úzke pre tlačidlá a horný riadok pre TextBox. Alternatívne usporiadanie by mohol byť Grid s dvoma riadkami a v dolnom riadku Stack Panel pre dve vedľa seba usporiadané tlačidlá.

<UserControl x:Class="Editor.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefi nitions> <RowDefi nition Height="*"></RowDefi nition> <RowDefi nition Height="30"></RowDefi nition> <RowDefi nition Height="30"></RowDefi nition> </Grid.RowDefi nitions> <Button x:Name="btUloz" Grid.Row="1" Content="Ulož" Click="btUloz_Click" Width="100" Background="LightGray" Margin="2"></Button> <Button x:Name="btCitaj" Grid.Row="2" Content="Načítaj" Click="btCitaj_Click" Width="100" Background="LightGray" Margin="2"></Button> <TextBox x:Name="tbEdit" Grid.Row="0" AcceptsReturn="True" Margin="2" BorderThickness="2" Background="LightGray" FontFamily="Courier New" FontSize="12"></TextBox> </Grid></UserControl>

Kód obslužných procedúr bude podobný ako v predchádzajúcom príklade.

using System.IO.IsolatedStorage;using System.IO;

private void btUloz_Click(object sender, RoutedEventArgs e){ IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication(); using (IsolatedStorageFileStream s = storage.OpenFile("edit.txt", FileMode.Create)) { using (StreamWriter w = new StreamWriter(s)) { w.Write(tbEdit.Text); w.Close(); } } }

private void btCitaj_Click(object sender, RoutedEventArgs e){ IsolatedStorageFile f = IsolatedStorageFile.GetUserStoreForApplication(); if (f.FileExists("edit.txt")) { using (IsolatedStorageFileStream s = f.OpenFile("edit.txt", FileMode.Open))

44

{ using (StreamReader reader = new StreamReader(s)) { tbEdit.Text = reader.ReadToEnd(); } } } }

Textový editor s ukladaním údajov do lokálneho úložiska.

LINQ to XML – Silverlight aplikácia pre prácu s XML údajmi z externého zdroja

Silverlight 2.0 aplikácia môže v princípe používať údaje z troch druhov zdrojov. Môže načítať údaje z domény odkiaľ pochádza náš Silverlight kód, prípadne z inej domény (cross-domain), alebo môže pracovať s lokálnymi údajmi. Naša prvá aplikácia bude využívať údaje z externého zdroja v inej doméne, konkrétne katalóg videí z domény msn.com. Cieľom aplikácie je vypísať informácie o náhodne vybraných videách, vrátane obrazovej ukážky a možnosti prehrávania. Po zadaní URL adresy:

http://catalog.video.msn.com/randomVideo.aspx?mk=us

sa zobrazí náhodná ponuka video titulov z msn.com. Ponuka je vo formáte XML.

Zobrazenie zoznamu videí na msn.com vo formáte XML.

XML dokument obsahuje informácie o jednotlivých videách v tagoch <video>. Napríklad titul a popis obsahu videa, ktorý budeme pre našu aplikáciu potrebovať je v tagoch <title> a <description>. Odkazy na videosúbory sú v tagoch <videoFiles>.

45

Krok 1: načítanie údajov z XML zdrojaObsah XML dokumentu budeme preberať asynchrónne, keď bude preberanie ukončené, aktivuje sa metóda DownloadStringCompleted, ktorá odkazuje na našu metódu wcStahovanieUkoncene.

V prvom kroku vytvoríme len ladiaci prototyp implementácie metódy, pomocou Alert okna vypíšeme obsah XML dokumentu, aby sme sa presvedčili, že ho skutočne načítavame. Ak nám táto fáza bude fungovať a v niektorom z ďalších krokov budeme mať problémy, budeme vedieť, že XML súbor bol zo servera prevzatý úspešne a že problém je nutné hľadať inde. Využijeme objekt HtmlPage, ktorý je v namespace

using System.Windows.Browser;

v súbore Page.xaml.cs bude po uvedených krokoch kód

using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using System.Windows.Browser;

namespace SilverVideo{ public partial class Page : UserControl {

public string sRndUrl { get { return "http://catalog.video.msn.com/randomVideo.aspx?mk=us"; } } public Page() { InitializeComponent(); DajVideo(sRndUrl); }

private void DajVideo(string sUrl) { WebClient wcKlient = new WebClient(); wcKlient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wcStahovanieUkoncene); wcKlient.DownloadStringAsync(new Uri(sUrl)); }

void wcStahovanieUkoncene(object sender, DownloadStringCompletedEventArgs e) { HtmlPage.Window.Alert(e.Result); } }}

V tomto okamihu môžeme aplikáciu predbežne otestovať a ak sme neurobili žiadnu chybu, zobrazí sa v okne hlásenia obsah XML dokumentu. Aby sme boli presní, zobrazí sa PO URČITOM ČASE, ktorý je potrebný na načítanie obsahu.

46

Zobrazenie obsahu preneseného XML dokumentu.

Je to vlastne AJAX aplikácia. Komunikácia klientskeho prehľadávača so serverom prebieha asynchrónne, preto sa takáto aplikácia môže z pohľadu klienta niekedy správať nezvykle, hlavne v porovnaní s klasickými desktopovými aplikáciami, ktoré fungujú tak, že používateľ pomocou ovládacích prvkov vykoná nejakú akciu a počká na jej výsledok. Preto by vývojári mali pamätať na obmedzenia vyplývajúce z asynchrónneho spracovania a vlastnými prostriedkami signalizovať, že sa čaká na výsledok nejakej akcie. Navyše asynchrónne spracovávané požiadavky nemusia byť spracovávane v poradí, v akom boli inicializované. Preto ak používateľ naraz aktivuje viac ovládacích prvkov, z ktorých každý vyvolá asynchrónne spracovávanú požiadavku, môže ľahko stratiť prehľad o aktuálnom stave aplikácie. Pri asynchrónne spracovávaných akciách je potrebné s rozvahou využívať potvrdzovacie okná, nakoľko sa veľmi ľahko môže stať, že používateľ potvrdí inú akciu ako zamýšľal.

Krok 2: konverzia údajov z XML dokumentu na .NET objekty (LINQ to XML).Výsledkom predchádzajúcej etapy je prevzatie údajov z externého zdroja v podobe štruktúrovaného XML dokumentu. Dokument je samozrejme štruktúrovaný tak, ako bol defi novaný a vytvorený na zdroji údajov. Na spracovanie údajov máme k dispozícii principiálne tri technológie: XML Reader, XML Serialization alebo LINQ to XML. My využijeme LINQ to XML. Na tento účel potrebujeme pridať do projektu referenciu na System.Xml.Linq.

Pridanie referencie na System.Xml.Linq.

Do súboru Page.xaml.cs pridáme odkaz na namespace.

using System.Xml.Linq;

Pomocou kontextového menu aplikovaného na názov Silverlight aplikácie v okne Solution Explorer vytvoríme novú triedu XMLvideo. Trieda bude v samostatnom súbore XMLvideo.cs a bude obsahovať atribúty nadväzujúce na elementy XML dokumentu. Aby sme ukázali aj možnosť spracovania údajov pred ich zobrazením, posledný atribút ShortDescription je odvodený od atribútu Description skrátením na 80 znakov. Takýto popis môžeme využiť napríklad pri krátkych upútavkách.

47

public class XMLvideo { public string Title { get; set; } public string Description { get; set; } public string VideoUrl { get; set; } // 432x320 public string ImageUrl { get; set; } // 136x102 public string ShortDescription { get { return ((Description.Length > 83) ? Description.Substring(0, 80) + "..." : Description); } } }

Pre objekty triedy XMLvideo vytvoríme objekt List.

List<XMLvideo> klipy;

Následne tento objekt naplníme údajmi z načítaného XML dokumentu. Vytvoríme metódu pre extrakciu URI obsahu z XML elementov. Jadrom metódy bude LINQ dopyt ktorý zisťuje, či sa v texte elementu nevyskytuje reťazec „uri“ a či reťazec obsahuje správny kód formátu videoobsahu.

private XNamespace _XNS = "urn:schemas-microsoft-com:msnvideo:catalog";

private string ExtraktUri(XElement tag, string sNod, string sFormat){ IEnumerable<string> sUri = from fi le in tag.Descendants(_XNS + sNod) where (string)fi le.Attribute("formatCode") == sFormat select (string)fi le.Element(_XNS + "uri"); return ((sUri.Count<string>() > 0) ? sUri.First<string>() : string.Empty);}

Túto metódu použijeme na extrakciu URL adries z elementov „VideoURL“ a „ImageURL“.

Metóda wcStahovanieUkoncene, ktorá v predchádzajúcom kroku obsahovala len výpis obsahu XML dokumentu pomocou Alert okna bude v tomto kroku obsahovať kompletný kód pre naplnenie triedy XMLvideo údajmi z XML dokumentu.

void wcStahovanieUkoncene(object sender, DownloadStringCompletedEventArgs e){ klipy = new List<XMLvideo>(); XDocument doc = XDocument.Parse(e.Result); foreach (XElement video in doc.Descendants(_XNS + "video")) { klipy.Add(new XMLvideo() { Title = (string)video.Element(_XNS + "title"), Description = (string)video.Element(_XNS + "description"), VideoUrl = ExtraktUri(video.Element(_XNS + "videoFiles"), "videoFile", "1002"), ImageUrl = ExtraktUri(video.Element(_XNS + "fi les"), "fi le", "2007"),}); } }

Ak si dáme na koniec kódu metódy ladiacu zarážku a spustíme aplikáciu, po načítaní údajov z XML dokumentu sa aplikácia zastaví a my môžeme v prostredí Visual Studio 2008 ladiť a prezerať obsah premenných a objektov, v našom prípade obsah objektu „klipy“.

48

Ladenie LINQ to XML.

Krok 3: zobrazenie údajov V predchádzajúcom kroku sme sa v etape ladenia názorne presvedčili, že údaje načítané z XML dokumentu máme naparsované v .NET objektoch, konkrétne v objektoch triedy XMLvideo. V tejto fáze môžeme pristúpiť k ich zobrazeniu. Využijeme bežné prvky na zobrazovanie textu a obrázkov. Stránku s demonštráciou možností prvkov využiteľných v Silverlight 2.0 aplikáciách nájdeme na adrese:

http://silverlight.net/Samples/2b2/SilverlightControls/run/default.html.

Multimediálny obsah môžeme zobrazovať pomocou prvku „MediaElement“.

Stránka s demom možností prvkov využiteľných v Silverlight 2.0 aplikáciách.

Nakoľko sa ide o cvičnú aplikáciu pre zoznámenie sa s technológiou Silverlight 2, budeme postupovať metodicky a kým sa dostaneme k vyšším métam, ktorými je napríklad zobrazovanie obrázkov a prehrávanie vybratého videa, vytvoríme si prototyp zobrazovania, v ktorom len vypíšeme názvy fi lmov.Pre výpis názvov fi lmov využijeme prvok ItemsControl, ktorý je do značnej miery analogický s prvkom repeater v ASP.NET. Samotné texty vypisujeme pomocou prvku TextBlock. Pre prvok ItemsControl je potrebné defi novať dátovú šablónu (DataTemplate) ako súčasť ItemTemplate.

<ItemsControl x:Name="icFilmy"> <ItemsControl.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Title}"></TextBlock> </DataTemplate> </ItemsControl.ItemTemplate></ItemsControl>

49

V súbore Page.xaml.cs musíme do kódu procedúry wcStahovanieUkoncene, presnejšie na jej koniec – pred uzatváraciu zloženú zátvorku – ešte pridať jeden riadok kódu pre naplnenie prvku „icFilmy“ údajmi.

icFilmy.ItemsSource = klipy;

Otestovanie aplikácie pre výpis názvov fi lmov.

V tejto fáze môžeme aplikáciu otestovať, pričom by sa nám mali zobraziť názvy fi lmov. Aby sme dosiahli konečný cieľ, potrebujeme do aplikácie ešte vložiť prvok s obrazovou ukážkou fi lmu a prvok na prehrávanie videa. Ak by sme sa pokúšali umiestniť prvok <Image> do vnútra elementu <Data Template>, vývojové prostredie nám tento element podčiarkne ako problémový a zobrazí vysvetľujúci text.

Element <Data Template> môže obsahovať len jeden zapuzdrený prvok.

Element <Data Template> totiž môže obsahovať len jeden zapuzdrený prvok, takže ak chceme zobraziť aj nadpisy a obrázky musíme ich zapuzdriť do nejakého kontajnerového prvku, napríklad <StrackPanel>.

<ItemsControl x:Name="icFilmy"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ImageUrl}" Width="100" Height="80"></Image> <TextBlock Text="{Binding Title}"></TextBlock> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate></ItemsControl>

V tejto fáze môžeme aplikáciu znovu otestovať, pričom by sa nám mali zobraziť obrázky vľavo a v pravo pri každom obrázku názvy fi lmov. Toto usporiadanie sme dosiahli nastavením vlastnosti „Orientation“ pri StackPaneli.

50

Otestovanie aplikácie pre výpis názvov fi lmov a ukážkových screenshotov.

Naša aplikácia začína dostávať určitú „štábnu kultúru“. Ku každému názvu by však bolo vhodné pripojiť aj popis. Tento popis máme v atribúte Description triedy XMLvideo, prípadne máme k dispozícii aj skrátený popis v atribúte ShortDescription. Doplníme „vizuál“ aplikácie tak, aby sa vpravo vedľa obrázka zobrazil nielen názov, ale aj popis videa a pripravíme sa aj na to, že kliknutím na názov, alebo obrázok bude možné dané video prehrať. Znovu nadpis a popis zapuzdríme do kontajnera typu StackPanel, aby sa nám zobrazili pekne pod sebou, vpravo od obrázka.

<ItemsControl x:Name="icFilmy"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ImageUrl}" Width="100" Height="80" Margin="10"></Image> <StackPanel Orientation="Vertical" Margin="8"> <TextBlock Text="{Binding Title}" FontSize="13" Foreground="Blue" TextDecorations="Underline"></TextBlock> <TextBlock Text="{Binding Description}" Height="56" Width="320" FontSize="11" TextWrapping="Wrap" HorizontalAlignment="Left"> </TextBlock> </StackPanel> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>

Otestovanie aplikácie pre grafi cky upravený výpis názvov fi lmov a ukážkových screenshotov.

51

Krok 4: Silverlight User Control pre prehrávanie videa a zobrazenie doplnkových informácií

Tak ako doteraz, by sme mohli intuitívne pokračovať a pridať na vhodné miesto plochy (napríklad pod popis) prvok MediaElement na prehrávanie videa. Vieme, že video na msn.com má rozmery 432 x 320, tak môžeme nastaviť aj skutočnú veľkosť prvku na prehrávanie. Pri vizuálnych prvkoch, ktoré sa zobrazia len za určitých okolností, odporúčame vložiť ich do rámika, aby sme v prípade neúspechu – teda ak sa prvok z rôznych dôvodov nezobrazí – vedeli, kam by sa zobrazil, keby sa zobrazil. V tomto prípade môžeme urobiť aj z núdze cnosť a rámček urobiť napríklad vo forme „retro“ obrazovky so zaoblenými rohmi.

<Border CornerRadius="5" Height="330" Width="442" Background="LightGray" BorderBrush="DarkBlue" BorderThickness="2"> <MediaElement x:Name="mePlayer" Source="{Binding VideoUrl}" Height="320" Width="432" BufferingTime="0:0:.01"/></Border>

Pokus o návrh dizajnu prehrávania.

Ak aplikáciu spustíme, nebudeme zatiaľ skúmať, prečo sa nám zobrazil len prázdny rámik (nabufrovanie niekoľkých videí trvá určitý čas, v závislosti na rýchlosti pripojenia), dôležitejšie je, že nám prvky pre prehrávanie videa úplne rozbili prácne vytvorený dizajn. Vidíme, že by bolo vhodnejšie vrátiť sa k pôvodnému usporiadaniu obrazovky a video zobraziť na požiadanie v detailnom okne. Preto zobrazovaciu plochu rozdelíme pomocou prvku Grid na dve časti.

<Grid x:Name="LayoutRoot" Background="LightGray"> <Grid.ColumnDefi nitions> <ColumnDefi nition Width="*"/> <ColumnDefi nition Width="480"/> </Grid.ColumnDefi nitions> <Grid.RowDefi nitions> <RowDefi nition Height="*"/> </Grid.RowDefi nitions> ......</Grid>

Na prehrávanie si vytvoríme špeciálny, trochu komfortnejší prvok typu „Silverlight User Control“. Využijeme kontextové menu „Add“ „New Item“.

52

Dialóg pre pridanie nového prvku „Silverlight User Control“.

Prvok nazveme, v našom prípade SilverPlayer. Okrem prvku MediaElement na prehrávanie videa bude nami vytvorený prvok obsahovať aj zobrazenie názvu a popisu fi lmu. Popis fi lmu bude pre zlepšenie dizajnu v samostatnom rámčeku, ktorý bude mať rovnakú šírku ako rámček pre prvok MediaElement.

<UserControl x:Class="SilverVideo.SilverPlayer" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MinWidth="400" MinHeight="300"> <StackPanel x:Name="LayoutRoot"> <TextBlock x:Name="sNazov" Text="{Binding Title}" Height="20" FontSize="13" Foreground="#07519A" Margin="10,4,0,0"/> <Border CornerRadius="5" Height="330" Width="442" Background="Black" BorderBrush="DarkBlue" BorderThickness="2"> <MediaElement x:Name="mePlayer" Source="{Binding VideoUrl}" Height="320" Width="432" BufferingTime="0:0:.01"/> </Border> <Border CornerRadius="5" Width="442" BorderBrush="Black" Background="LightGray" BorderThickness="2" Margin="10"> <TextBlock x:Name="sPopis" Text="{Binding Description}" Width="430" FontSize="11" TextWrapping="Wrap" HorizontalAlignment="Left"></TextBlock> </Border> </StackPanel></UserControl>

Dostávame sa k umiestneniu nášho prvku „SilverPlayer “ na plochu aplikácie. Aby sme ho mohli zobraziť, musíme do projektu pridať XML namespace, ktorý nazveme napríklad sp.

xmlns:sp="clr-namespace:SilverVideo"

Do gridu napravo, do stĺpca 1 umiestnime nami vytvorený komplexný prvok „SilverPlayer “.

<sp:SilverPlayer x:Name="splayer" Grid.Column="1"> </sp:SilverPlayer>/>

Aby sa nám začalo prehrávať požadované video, je potrebné defi novať obsluhu udalosti kliknutia na položku a v tejto obsluhe udalosti priradiť prehrávaču správny kontext.

Pre Stack Panel obsahujúci obrázok vytvoríme obsluhu udalosti stlačenia ľavého tlačidla myši. V nej sa priradí nášmu komponentu DataContext z vybranej položky Stack panelu.

<StackPanel Orientation="Horizontal" MouseLeftButtonDown= "StackPanel_MouseLeftButtonDown">

53

Kód obslužnej procedúry v Page.xaml.cs bude

private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ splayer.DataContext = ((StackPanel)sender).DataContext;}

Ak otestujeme aplikáciu v tejto chvíli, zistíme, že po kliknutí na niektorý obrázok sa nad oknom pre prehrávanie videa zobrazí názov vybraného videa a pod oknom v rámčeku jeho popis a po chvíli, ktorá je potrebná na nabufrovanie videa sa nami vybrané video začne prehrávať.

Otestovanie aplikácie.

LINQ to SQL – Silverlight aplikácia pre prácu s údajmi v databáze

Napokon sa dostávame k zobrazeniu údajov uložených v databáze pod správou databázového servera. Webová aplikácia využívajúca databázy je z hľadiska architektúry spravidla niekoľkovrstvová. Nás bude zaujímať rozhranie vrstvy aplikačnej logiky a vrstvy databázového servera. Tieto dve vrstvy je potrebné nejakým spôsobom prepojiť. V našom prípade použijeme WCF (Windows Communication Foundation).Námetom aplikácie bude vyhľadávanie produktov podľa farby v databáze AdventureWorksLT2008.

Vytvoríme nový projekt a v dialógu pre výber typu „zapuzdrovacej“ aplikácie zvolíme typ „WebApplicationProject“. Do projektu pridáme novú špeciálnu triedu LINQ to SQL Classes. Nad touto triedou pracuje objektovo – relačný dizajnér integrovaný do aplikácie Visual Studio 2008.

Pridanie triedy LINQ to SQL do projektu.

54

Trieda DataContext je odvodená od triedy System.Data.Linq.DataContext.

Aby sme mohli pracovať s údajmi spravovanými databázovým serverom, je potrebné defi novať pripojenie. Na tento účel slúžia objekty Data Connections. Výhodou takéhoto prístupu je modulárnosť a škálovateľnosť. Napríklad ak chceme migrovať na iný databázový server, pokiaľ sme nevyužili špeciálne vlastnosti konkrétnej databázy, stačí zmeniť parametre na úrovni objektu Data Connection. Zvyšok aplikácie zostáva bezo zmien. Vzhľadom na preferovanú fi lozofi u vizuálneho návrhu, aj jadro návrhu objektu pre pripojenie sa k zdroju údajov prebehne na vizuálnej úrovni. Všimnime si, že ľavý stĺpec pracovnej plochy vývojového prostredia spolu zdieľajú dve záložky: Toolbox a Server Explorer. Ak sme dosiaľ žiadnu databázovú aplikáciu nevyvíjali, v okne Server Explorer máme zatiaľ len prázdny priečinok Data Connections. Pre pridanie pripojenia na databázu aktivujeme v kontextovom menu položku Add Connection. Takto vytvorený objekt pre pripojenie sa k zdroju údajov potom môžeme využívať aj v iných projektoch. Najskôr potrebujeme defi novať druh zdroja údajov. Môžeme použiť Access databázu, ODBC, SQL Server, Oracle a podobne.

Vytvorenie pripojenia na databázový server.

Vytvoríme pripojenie na cvičnú databázu AdventureWorksLT2008.

Nastavenia parametrov pripojenia na databázu AdventureWorks 2008LT.

55

Dialógy na vytváranie objektov pripojenia obsahujú spravidla aj tlačidlo na otestovanie práve vytváraného spojenia. Po vytvorení sú jednotlivé objekty pripojenia vizuálne umiestnené v okne Server Explorer v priečinku Data Connection. Objekty sú vizuálne zobrazené ako priečinky obsahujúce jednotlivé objekty v príslušnej databáze.

Metódou „dragg and drop“ presunieme na návrhovú plochu „Object Relational Designer “ symbol názvu databázovej tabuľky Products. Pre ilustráciu, táto tabuľka obsahuje atribúty:

[ProductNumber][Color][StandardCost][ListPrice][Size][Weight][ProductCategoryID][ProductModelID][SellStartDate][SellEndDate][DiscontinuedDate][ThumbNailPhoto][ThumbnailPhotoFileName][rowguid][Modifi edDate]

a údaje v tvare

Príklad obsahu databázovej tabuľky Products.

Po výbere tabuľky alebo tabuliek sa zobrazí databázový O-R diagram, v ktorom môžeme vyberať atribúty, defi novať vzťahy a podobne.

Presun databázovej tabuľky na návrhovú plochu DataClasses.

56

Výber stĺpcov.

WCF služba pre prístup k údajomPomocou dialógu Add New item, pridáme do projektu WCF service. V súbore Service1.svc je vzor kódu služby.

using System;using System.Collections.Generic;using System.Linq;using System.Runtime.Serialization;using System.ServiceModel;using System.Text;

namespace SilverLinqWeb{ // NOTE: If you change the interface name "IService1" here, you must also update the reference to "IService1" in Web.confi g. [ServiceContract] public interface IService1 { [OperationContract] void DoWork(); }}

Telo metódy DoWork je v súbore Service1.svc.cs a je prázdne.

Všimnite si upozornenie v komentári, že ak zmeníte názov interfejsu, v našom prípade „IService1“ je potrebné v súbore web.confi g v sekcii <services> upraviť referenciu na tento interfejs.

<services> <service behaviorConfi guration="SilverLinqWeb.Service1Behavior" name="SilverLinqWeb.Service1"> <endpoint address="" binding="wsHttpBinding" contract="SilverLinqWeb.IService1"> <identity> <dns value="localhost" /> </identity> </endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" /> </service></services>

57

Metódu použitú ako príklad DoWork() nahradíme našou metódou ProduktFarba, pre vyhľadanie produktov podľa farby. Parametrom dopytovania bude farba zadaná vo forme reťazca.

public interface IService1{ [OperationContract] List<Product> ProduktFarba(string farba);}

Kompilácia projektu v tejto fáze sa nám nepodarí, nakoľko v súbore Service1.svc.cs nemáme implementované telo metódy ProduktFarba(string farba);. Na túto skutočnosť budeme upozornení chybovým hlásením v tvare:

'SilverLinqWeb.Service1' does not implement interface member 'SilverLinqWeb.IService1.ProduktFarba(string)' C:\Projekty\SilverLinq\SilverLinqWeb\Service1.svc.cs

V súbore Service1.svc.cs klikneme ľavým tlačidlom myši na názov triedy IService (viď obrázok) a v kontextovom menu aktivujeme položku „Implement Interface“. Do kódu bude pridané prázdne telo procedúry obsahujúce len ošetrenia prípadnej neimplementovanej výnimky.

public List<Product> ProduktFarba(string farba){ throw new NotImplementedException(); }

Implementovanie interfejsu.

Do tela procedúry umiestnime kód pre dopytovanie v tabuľke Products. Najskôr vytvoríme dopyt v jazyku LINQ.

from p in db.Productswhere p.Color.StartsWith(farba)select p

Dopyt zapuzdríme do tela implementácie metódy. Najskôr vytvoríme inštanciu objektu DataContext, ktorý obsahuje informácie o pripojení na databázu ako zdroja údajov.

58

public List<Product> ProduktFarba(string farba){ DataClasses1DataContext db = new DataClasses1DataContext(); var dopyt = from p in db.Products where p.Color.StartsWith(farba) select p; return dopyt.ToList();}

Aby sme mohli využívať WCF službu v Silverlight aplikácii, je potrebné zmeniť metódu pre data binding. WCF využíva „wsHttpBinding“. Pre Silverlight aplikáciu zmeníme metódu na „basicHttpBinding“. Zmenu uskutočníme v konfi guračnom súbore web.confi g v sekcii <services>.

<service behaviorConfi guration="SilverLinqWeb.Service1Behavior" name="SilverLinqWeb.Service1"> <endpoint address="" binding="basicHttpBinding" contract="SilverLinqWeb.IService1"> <identity> <dns value="localhost" /> </identity> </endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/></service>

Pre vyskúšanie WCF služby spustíme aplikáciu, no ešte predtým nastavíme súbor „Service1.svc“ ako stránku, ktorá sa zobrazí ako prvá po spustení projektu („Set As Start Page“).

Rozhranie pre testovanie WCF služby.

Ak preklad a zostavenie prebehne úspešne, zobrazí sa stránka na ktorej je URL adresa WSDL a telá testovacích metód v programovacích jazykoch C# a Visual Basic, ktoré je potrebné implementovať na klientskej strane.

C#

class Test{ static void Main() { Service1Client client = new Service1Client();

// Use the 'client' variable to call operations on the service.

// Always close the client. client.Close();

59

}}

Visual Basic

Class Test Shared Sub Main() Dim client As Service1Client = New Service1Client() ' Use the 'client' variable to call operations on the service.

' Always close the client. client.Close() End SubEnd Class

Pridanie referencie na System.Windows.Controls.Data.

http://localhost:1235/Service1.svc?wsdl

Pridanie referencie na WCF službu.

60

Klientska Silverlight aplikácia

Silverlight stránku budeme navrhovať vo vizuálnom prostredí Expression Blend 2, ktoré otvoríme prostredníctvom kontextového menu aplikovaného na stránku Page.xaml v okne Solution Explorer.

Plochu stránky rozdelíme vodorovnou čiarou na dve časti. V hornej menšej časti bude prvok „TextBox“ pre zadanie parametra dopytovania, ktorým je v našom prípade farba a tlačidlo na potvrdenie dopytu. V spodnej časti umiestnime Grid na zobrazenie výsledkov.

Návrh formulára v prostredí Expression Blend 2.

<UserControl x:Class="SilverLinq.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300" xmlns:System_Windows_Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"> <Grid x:Name="LayoutRoot" Background="White"> <Grid.RowDefi nitions> <RowDefi nition Height="0.167*"/> <RowDefi nition Height="0.833*"/> </Grid.RowDefi nitions> <TextBox HorizontalAlignment="Left" Margin="17,20,0,0" VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap" Width="176.896" x:Name="tbDopyt"/> <Button Click="Button_Click" HorizontalAlignment="Right" Margin="0,20,59,9.3" VerticalAlignment="Stretch" Width="74" Content="Dopyt"/>

<System_Windows_Controls:DataGrid Height="200" AutoGenerateColumns="True" HorizontalAlignment="Stretch" Margin="17,37.9,0,0" VerticalAlignment="Stretch" Width="375" Grid.Row="1" x:Name="dgTabulka"/> </Grid></UserControl>

Keď sme na plochu umiestnili všetky požadované prvky, uložíme súbor Page.xaml, ukončíme aplikáciu Expression Blend 2 a budeme pokračovať v tvorbe aplikačnej logiky v aplikácii Visual Studio 2008. Princíp je zrejmý, po stlačení tlačidla prečítať parameter z prvku TextBox, vytvoriť reťazec LINQ dopytu, poslať ho na server a následne zobraziť výsledky dopytovania, ktoré nám server pošle.Aby sme na to neskôr nezabudli, doplníme do defi nície DataGridu parameter:

61

AutoGenerateColumns="True"

Do defi nície tlačidla pridáme odkaz na obsluhu udalosti stlačenia tlačidla.

<Button Click="Button_Click" HorizontalAlignment="Right" Margin="0,20,59,9.3" VerticalAlignment="Stretch" Width="74" Content="Dopyt"/>

V súbore Page.xaml.cs sa vytvorí telo obslužnej procedúry do ktorého dopíšeme kód.

private void Button_Click(object sender, RoutedEventArgs e){ ServiceReference1.Service1Client klient = new ServiceReference1.Service1Client(); klient.ProduktFarbaCompleted += new EventHandler<SilverLinq.ServiceReference1.ProduktFarbaCompletedEventArgs> (klient_ProduktFarbaCompleted); klient.ProduktFarbaAsync(tbDopyt.Text);}

Všimnite si že pri písaní riadku, ktorý vyzerá na prvý pohľad odstrašujúco dlhý vám významne pomôže Intellisense:

klient.ProduktFarbaCompleted += new EventHandler<SilverLinq.ServiceReference1.ProduktFarbaCompletedEventArgs> (klient_ProduktFarbaCompleted);

Keď napíšeme +=, črta Intellisense integrovaná do aplikácie Visual Studio 2008 nám ponúkne kód zvyšku riadka, stačí stlačiť kláves TAB. Keď tabulátor stlačíme, vloží sa kód a Intellisense nám ponúkne, že po ďalšom stlačení tlačidla TAB bude do kódu vložené telo metódy.

void klient_ProduktFarbaCompleted(object sender, SilverLinq.ServiceReference1.ProduktFarbaCompletedEventArgs e){ throw new NotImplementedException();}

Test databázovej Silverlight aplikácie využívajúcej WCF.

62

Príloha – Inštalácia cvičnej databázy Adventure Works 2008 a odľahčenej verzie LT pre SQL Server 2008

V praktických príkladoch sú využité údaje z cvičnej databázy AdventureWorks LT. Cvičné databázy sú pre SQL Server 2008 k dispozícii voľne na prevzatie napríklad na adrese:

http://go.microsoft.com/fwlink/?LinkId=87843.

K dispozícii sú štyri verzie cvičnej databázy. V názve každej z nich je názov fi ktívnej fi rmy „Adventure Works“ vyrábajúcej bicykle a bicyklové príslušenstvo. Dodáva ich na americký, európsky a ázijský trh (fi ktívny samozrejme...).

AdventureWorks OLTP – štandardná databáza fi ktívnej fi rmy pre testovanie transakčných príkladov a scenárov. Obsahuje schémy Manufacturing, Sales, Purchasing, Product Management, Contact Management, a Human Resources.Adventure Works DW databáza pre príklady scenárov budovania dátového skladu. Adventure Works AS cvičná databáza pre scenáre využitia business intelligence, teda analytických služieb, dolovania údajov (datamining), integračných a reportovacích služieb.Adventure Works LT je podstatne zjednodušená verzia databázy AdventureWorks OLTP.

AdventureWorks OLTP

Ak by sme sa pokúsili o popis všetkých takmer sedemdesiatich tabuliek, ktoré tvoria túto databázu, aj napriek veľmi jasne pomenovaným tabuľkám v takejto podobe by sme len veľmi ťažko identifi kovali, aké sú vzájomné väzby a fi lozofi a návrhovej štruktúry. Predstaviť fi remnú databázu, či už reálnej, alebo v tomto prípade fi ktívnej fi rmy sa nám pravdepodobne najlepšie podarí tak, že predstavíme fi remné procesy. Podľa týchto procesov sú objekty rozdelené do schém.

Schéma Popis objektov Príklad tabuliek v schéme

HumanResources Zamestnanci spoločnosti Adventure Works Cycles.

Employee, Department

Person Mená a adresy zákazníkov, predajcov a zamestnancov.

Contact, Address, StateProvince

Production Produkty vyrábané a predávané spoločnosťou Adventure Works Cycles.

BillOfMaterials, Product, ProductCategory, ProductSubcategory, WorkOrder

Purchasing Dodávatelia súčiastok. PurchaseOrderDetail, PurchaseOrderHeader, Vendor

SalesÚdaje týkajúce sa obchodu a zákazníkov. Customer, Individual, SalesOrderDetail,

SalesOrderHeader, Store, StoreContact

Inštalačný program cvičnej databázy AdventureWorksLT má približne 50 MB a umožňuje jej nainštalovanie na lokálny server. Po spustení inštalačného programu sa vytvorí priečinok.

c:\Program Files\Microsoft SQL Server\100\Tools\Samples\

V tomto priečinku je cvičná databáza uložená vo forme záložného súboru s príponou BAK, konkrétneAdventureWorks2008.bak. Skript pre obnovu tejto databázy je v súbore RestoreAdventureWorks2008.sql.Tento skript spustíme pomocou nástroja SQL Server Management Studio. Skript obsahuje v komentári priame nastavenie priečinka, v ktorom sa nachádza súbor zálohy. Aby sme sa vyhli problémom s prideľovaním prístupových práv do podpriečinkov priečinka c:\Program Files, skopírovali sme súbor zálohy do novovytvoreného priečinka c:\Install, ktorý má štandardné prístupové práva.

63

USE master;DECLARE @source_path nvarchar(256);SET @source_path = 'c:\Install\'BEGIN DECLARE @sql_path nvarchar(256); SELECT @sql_path = SUBSTRING(physical_name, 1, CHARINDEX(N'master.mdf', LOWER(physical_name)) – 1) FROM master.sys.master_fi les WHERE database_id = 1 AND fi le_id = 1; IF EXISTS (SELECT * FROM sys.databases WHERE name = 'AdventureWorksLT2008') BEGIN EXECUTE (N'ALTER DATABASE AdventureWorksLT2008 SET SINGLE_USER WITH ROLLBACK IMMEDIATE;'); EXECUTE (N'DROP DATABASE AdventureWorksLT2008;'); END EXECUTE (N'RESTORE DATABASE AdventureWorksLT2008 FROM DISK = ''' + @source_path + 'Tools\Samples\AdventureWorksLT2008.bak'' WITH MOVE ''AdventureWorksLT2008_Data'' TO N''' + @sql_path + N'AdventureWorksLT2008.mdf'', MOVE ''AdventureWorksLT2008_Log'' TO N''' + @sql_path + N'AdventureWorksLT2008.ldf'';'); EXECUTE (N'ALTER DATABASE AdventureWorksLT2008 SET NEW_BROKER;');END

AdventureWorksLT

Vzhľadom k jednoduchosti budeme v cvičných príkladoch využívať práve túto databázu. Ide o zjednodušenú a do značnej miery denormalizovanú databázu AdventureWorks OLTP. Zatiaľ čo pôvodná databáza mala 180 MB a obsahovala 5 schém a 70 tabuliek, zjednodušená databáza AdventureWorksLT má necelých 7 MB a obsahuje len jednu schému a v nej 12 tabuliek.Inštalačný program cvičnej databázy AdventureWorksLT má 3 MB a umožňuje jej nainštalovanie na lokálny server. Po spustení inštalačného programu sa vytvorí priečinok:

c:\Program Files\Microsoft SQL Server\100\Tools\Samples\

V tomto priečinku je cvičná databáza uložená vo forme záložného súboru s príponou BAK, konkrétneAdventureWorks2008LT.bak. Skript pre obnovu tejto databázy je v súbore RestoreAdventureWorks2008LT.sql. Pri inštalácii postupujeme podobne ako v predchádzajúcom odseku zadaním zdrojového priečinka do skriptu.

AdventureWorksLT.jpg Schéma cvičnej databázy AdventureWorksLT.

64

Záverom

Technológia Silverlight je jedným z dôležitých počinov na ceste k dizajnovo bohatým a interaktívnym webovým aplikáciám, ktoré sa z hľadiska možností a grafi ckého stvárnenia prezentačného rozhrania blížia desktopovým aplikáciám. Budúce trendy budú v tejto oblasti zrejme čoraz viac smerovať k 3D grafi ke. Súvisí to s čoraz širšou dostupnosťou vysokorýchlostného Internetu, ktorý je základným predpokladom pre beh grafi cky bohatých webových aplikácií.