UPORABA SILVERLIGHT 4 ZA PODPORO PRI ELEKTRONSKEM PREVERJANJU ZNANJA

Transcription

1 Matjaž Reberc UPORABA SILVERLIGHT 4 ZA PODPORO PRI ELEKTRONSKEM PREVERJANJU ZNANJA Diplomsko delo Maribor, junij 2011

2

3 I Diplomsko visokošolskega strokovnega študijskega programa UPORABA SILVERLIGHT 4 ZA PODPORO PRI ELEKTRONSKEM PREVERJANJU ZNANJA Študent: Študijski program: Smer: Mentor(ica): Matjaž Reberc VS ŠP Računalništvo in informatika Programska oprema izr. prof. dr. Milan Ojsteršek Maribor, junij 2011

4 II

5 III ZAHVALA Zahvaljujem se mentorju za pomoč in vodenje pri opravljanju diplomskega dela. Posebna zahvala velja staršem in drugim bližnjim, ki so mi omogočili študij in me spodbujali.

6 IV SILVERLIGHT 4 Ključne besede: uporabniško bogate spletne aplikacije, Silverlight, WCF, elektronsko preverjanje znanja UDK: Povzetek Preučili in opisali smo tehnologijo Microsoft Silverlight 4, ki je ena izmed tehnologij za gradnjo uporabniško bogatih spletnih aplikacij. V praktičnem delu diplomskega dela pa smo v tej tehnologiji razvili spletno aplikacijo, ki omogoča elektronsko preverjanje znanja. Omogoča nam ustvarjanje različnih vrst vprašanj, generiranje in reševanje e- testov ter pregled rezultatov njihovega reševanja.

7 V SILVERLIGHT 4 Key-words: Rich internet applications, Silverlight, WCF, e-assessment UDK: Abstract We examined and described Microsoft Silverlight 4, one of techologies for building rich internet applications. In the practical part of the thesis, we have used this technology for implementation of a program package for electronic examination support. It allows to create different types of questions, generate and solve e-tests, and review their results.

8 VI VSEBINA 1 UVOD TEHNOLOGIJA SILVERLIGHT DEFINICIJA SILVERLIGHT TEHNOLOGIJE KAJ JE SILVERLIGHT? ZNAČILNOSTI SILVERLIGHT TEHNOLOGIJE SILVERLIGHT ARHITEKTURA NOVOSTI V SILVERLIGHT IMPLEMENTACIJA XAML Vloga XAML v Silverlightu XAML imenski prostor SILVERLIGHT KONTROLE GRAFIKA, ANIMACIJA, ZVOK IN SLIKA Grafika Animacija Zvok Slika RAZPOREDITEV GRAFIČNEGA VMESNIKA LOGIČNI VMESNIK POVEZOVANJE S PODATKOVNIMI BAZAMI INTEGRACIJA SILVERLIGHT TEHNOLOGIJE V SPLETNE APLIKACIJE IN ORODJA ZA IZDELAVO SILVERLIGHT APLIKACIJ ORODJA ZA IZDELAVO SILVERLIGHT APLIKACIJ Visual Studio 2010 in Visual Web Developer 2010 Express Silverlight 4 Tools for Visual Studio Silverlight 4 SDK Ogrodje.NET Expression Blend... 28

9 VII LINQ INTEGRACIJA SILVERLIGHT TEHNOLOGIJE V SPLETNE STRANI Integracija z uporabo elementa HTML Integracija z uporabo JavaScript funkcij ASP.NET integracija IZDELAVA SILVERLIGHT APLIKACIJE ZA PODPORO PREVERJANJU ZNANJA PREDSTAVITEV APLIKACIJE FUNKCIONALNOSTI APLIKACIJE SKRBNIŠKI DEL Izbira predmeta Izbira področja in generiranje testa Vislice Vroče točke Zaporedje Povezovanje Pregled rezultatov testa UPORABNIŠKI DEL Reševanje testa Igra vroče točke Igra Povezovanje Igra vislice Igra Zaporedje SKLEP VIRI, LITERATURA NASLOV ŠTUDENTA KRATEK ŽIVLJENJEPIS... 55

10 VIII KAZALO SLIK Slika 2.1: Silverlight arhitektura 5 Slika 3.1: Črta 13 Slika 3.2: Pravokotnik 14 Slika 3.3: Elipsa 14 Slika 3.4: Lomljenka 15 Slika 3.5: Mnogokotnik 16 Slika 3.6: Animacija pravokotnika pred začetkom 17 Slika 3.7: Animacija pravokotnika med animacijo 17 Slika 3.8: Deep Zoom - piramidni način 19 Slika 3.9: Razporeditev button kontrole v gridu 21 Slika 3.10: Trinivojski WCF model 23 Slika 4.1: Izgled Visual Studia Slika 4.2: Kreiranje novega Silverlight projekta 27 Slika 4.3: Kreiranje novega Silverlight projekta z izbiro vrste spletne strani in verzijo Silverlighta 28 Slika 4.4: Expression Blend 29 Slika 5.1: Diagram primerov uporabe za uporabnika 34 Slika 5.2: Diagram primerov uporabe za administratorja 35 Slika 5.3: Uporabniški vmesnik za izbiro področja, ustvarjanje nove igre, generiranje novega testa 36 Slika 5.4: Uporabniški vmesnik za dodajanje nove igre vroče točke 38 Slika 5.5: Uporabniški vmesnik za dodajanje nove igre zaporedja 41 Slika 5.6: Uporabniški vmesnik za dodajanje nove igre povezovanja 42 Slika 5.7: Uporabniški vmesnik za prikaz rešenih testov 43

11 IX Slika 5.8: Uporabniški vmesnik za prikaz nalog in rezultatov glede na izbran test 44 Slika 5.9: Uporabniški vmesnik za reševanje igre vroče točke 45 Slika 5.10: Uporabniški vmesnik za reševanje igre povezovanje 46 Slika 5.11: Uporabniški vmesnik za reševanje igre vislice 48 Slika 5.12: Uporabniški vmesnik za reševanje igre zaporedje 51

12 X KAZALO TABEL Tabela 2.1: Shema Silverlight arhitekture [3] 4 Tabela 3.1: Silverlight kontrole [4] 10 Tabela 3.2: Scenarij uporabe tehnologij za delo s podatki [14] 24

13 XI KAZALO IZVORNE KODE Izvorna koda 1: XAML koda za črto [8] 13 Izvorna koda 2: XAML koda za pravokotnik [8] 14 Izvorna koda 3: XAML koda za elipso [8] 14 Izvorna koda 4: XAML koda za lomljenko [8] 15 Izvorna koda 5: XAML koda za mnogokotnik [8] 15 Izvorna koda 6: XAML datoteka za animacijo s pravokotnikom [9] 16 Izvorna koda 7: xaml.cs datoteka s C# kodo [9] 17 Izvorna koda 8: Vključitev MediaElement elementa v Silverlight [10] 18 Izvorna koda 9: XAML definicija Image elementa 18 Izvorna koda 10: XAML primer grid razporeditve [12] 20 Izvorna koda 11: XAML primer in definicija klik dogodka [13] 22 Izvorna koda 12: C# koda v kateri se izvede logika za klik gumba [13] 22 Izvorna koda 13: LINQ primer povpraševanja 29 Izvorna koda 14: HTML element za Silverlight [19] 31 Izvorna koda 15: Integracija Silverlight tehnologije v spletno stran z uporabo JavaScript-a [19] 31 Izvorna koda 16: Metoda za prenos podatkov igre vislice iz Silverlight v WCF 37 Izvorna koda 17: Metoda za shranjevanje podatkov v igri vislice 37 Izvorna koda 18: Metoda klika leve tipke na miški, s katero dobimo začetno točko okvira 39 Izvorna koda 19: Metoda s katero dobimo dolžino in širino okvira vroče točke 39 Izvorna koda 20: Koda za dinamično generiranje dveh stolpcev z labelami, v katerih so izrazi za povezovanje 46

14 Izvorna koda 21: XAML koda za uporabniški vmesnik igre vislice 48 XII

15 XIII UPORABLJENE KRATICE WCF Windows Communication Foundation RIA Rich Internet Applications CLR Common Language Runtime WPF Windows Presentation Foundation XAML Extensible Application Markup Language HTTP Hyper Text Transfer Protocol TCP Transmission Control Protocol SOAP Simple Object Access Protocol SDK Software Development Kit HTML Hyper Text Markup Language DRM - Digital Rights Management LINQ Language-Integrated Query

16

17 Silverlight 4 Stran 1 1 UVOD V današnjem svetu postajajo spletne aplikacije vedno bolj zahtevne, kar zahteva, da so narejene čim bolj interaktivno z uporabo različnih tehnologij, ki vsebujejo veliko grafičnih, slikovnih, video in ostalih komponent. Pri današnjih spletnih aplikacijah ni več dovolj, da vsebujejo samo besedila in enostavna vnosna polja, ampak morajo uporabniku ponuditi veliko več. V ta namen je Microsoft razvil tehnologijo Silverlight, ki omogoča izdelavo uporabniško bogatih spletnih aplikacij. Namen diplomske naloge je bil preučitev te tehnologije pri izdelavi spletne aplikacije za podporo elektronskemu preverjanju znanja. V drugem poglavju bomo predstavili principe in novosti Silverlight tehnologije. Predstavili bomo arhitekturo in novosti, ki jih nudi verzija Silverlight 4. V tretjem poglavju so predstavljene komponente Silverlight tehnologije, ki se uporabljajo za izdelavo spletne aplikacije. V četrtem poglavju opišemo orodja za izdelavo Silverlight aplikacij in kako to tehnologijo vključimo v spletno aplikacijo. V praktičnem delu, katerega opisujemo v petem poglavju, bomo opisali aplikacijo, ki omogoča elektronsko preverjanje znanja. Omogoča nam ustvarjanje različnih vrst vprašanj, generiranje in reševanje e-testov ter pregled rezultatov njihovega reševanja. Predstavili bomo arhitekturo in funkcionalnosti aplikacije ter njen grafični vmesnik. V šestem poglavju bomo podali zaključne misli in napotke za nadaljnje delo.

18 Silverlight 4 Stran 2 2 TEHNOLOGIJA SILVERLIGHT 2.1 DEFINICIJA SILVERLIGHT TEHNOLOGIJE Microsoft Silverlight je spletno aplikacijsko ogrodje, ki zagotavlja funkcije, podobne tistim v Adobe Flash, ki vključujejo vključevanje večpredstavnih gradnikov, in interaktivnost. [1] 2.2 Kaj je Silverlight? Glavne značilnosti Microsoft Silverlight tehnologije so: - kot vstavek ga lahko vključimo v večino spletnih brskalnikov, kot so: Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, - podpira predvajanje video in audio posnetkov. Video posnetke lahko pretvorimo v različne kvalitete, - vključuje grafiko, s katero lahko uporabnik manipulira v brskalniku, - omogoča asinhron prenos podatkov iz strežnika, zato lahko osvežuje dele zaslona brez ponovnega nalaganja strani. Spletni razvijalci in grafiki lahko ustvarijo Silverlight aplikacije na različne načine. Uporabijo lahko označevalni jezik za vključevanje večpredstavnih vsebin in grafike. Silverlight omogoča uporabo profesionalnih orodij, kot je Visual Studio za kodiranje in Microsoft Expression Blend za uporabniški vmesnik in grafično oblikovanje. [2] 2.3 Značilnosti Silverlight tehnologije Silverlight združuje različne tehnologije v eno razvojno platformo, ki omogoča izbiro pravega orodja in pravega programskega jezika. Silverlight ponuje naslednje značilnosti:

19 Silverlight 4 Stran 3 - Silverlight vključuje podskupino WPF tehnologijo, ki močno razširja elemente za izdelavo uporabniškega vmesnika. Dovoljuje ustvarjanje zapletenih grafičnih elementov, animacije, mutimedije in ostalih elementov, - XAML zagotavlja deklerativno označevalno sintakso za kreiranje elementov, - Silverlight ponuja razširitev JavaScript jezika, ki zagotavlja nadzor nad uporabniškim vmesnikom, vključno z možnostjo dela z elementi WPF, - podpora za različne brskalnike/platforme omogoča razvijalcem brezskrbno delo, - Silverlight omogoča podporo za različne obstoječe aplikacije in tehnologije, kot so JavaScript ali aplikacije v ASP.NET Ajax, - dostop do.net ogrodja in njegovih orodij. Uporabimo lahko dinamične jezike, kot so IronPython, C# ali Visual Basic, - podpora v razvijalskih orodjih kot je Visual Studio in Expression Blend, - omrežna podpora omogoča podporo za HTTP preko TCP. Komuniciramo lahko z WCF, SOAP ali ASP.NET AJAX storitvami, - podpora za LINQ omogoča vključevanje povpraševalnega jezika, ki omogoča dostop do podatkov z uporabo znane intuitivne sintakse. [2] 2.4 Silverlight arhitektura Silverlight platforma se kot celota sestoji iz dveh delov ter namestitvene in posodobitvene komponente. Shema Silverlight arhitektura je prikazana v spodnji tabeli in na sliki.

20 Silverlight 4 Stran 4 Tabela 2.1: Shema Silverlight arhitekture [3] Komponenta Jedro predstavitvenega ogrodja ( Core presentation framework).net ogrodje za Silverlight (.NET Framework for Silverlight) Namestitvev in posodobitev Opis Komponente in storitve, orientirane v smeri uporabniškega vmesnika in uporabniške interakcije, vključno z uporabnikovim vnosom, lahke kontrole za uporabo v spletnih aplikacijah, podpora za večpredstavnost, upravljanje z digitalnimi pravicami, podatkovno povezovanje, predstavitvene značilnosti vključno z vektorsko grafiko, tekstom, animacijo in slikami. Vključuje tudi XAML za definiranje elementov. Vsebuje komponente in knjižnice, vključno s podatkovno integracijo, razširljive Windows kontrole, omreženje, osnovne knjižnice razredov, sproščanje pomnilnika in CLR. Kontrola, ki olajša proces prve namestitve in nadaljne posodobitve.

21 Silverlight 4 Stran 5 Slika 2.1:Silverlight arhitektura [3] 2.5 Novosti v Silverlight 4 Končna verzija Silverlight 4 je izšla 15. aprila 2009 skupaj s Silverlight 4 orodji za razvijalce. Silverlight 4 zagotavlja celotno zbirko zmogljivih možnostih za izdelavo spletnih aplikacij, katere uporabljajo.net platformo. Novosti v Silverlight 4: - celovita podpora za tiskanje, - celoten sklop kontrol z več kot 60 prilagodljivih, stilskih komponent,

22 Silverlight 4 Stran 6 - storitve WCF RIA uvajajo poslovne omrežne razrede in dostop do podatkov za gradnjo nivojskih aplikacije, - podpora za desno-proti-levi jezike, kot so arabski, hebrejski in 31 novih jezikov, - skupni.net izvajalno okolje zdaj omogoča enako prevedeno kodo, ki se izvaja na namizju in v Silverlightu brez sprememb, - izboljšana povezava podatkov podpira prožnost in produktivnost, - upravljanje razširljivega ogrodja za gradnjo velikih sestavljenih aplikacij, - popolna podpora Silverlight orodju v Visual Studio Orodja za razvijalce: - popolna urejevalna površina za risanje kontrol in izgleda, - povleci in spusti podpora za podatkovno povezavo in avtomatično ustvarjanje kontrol, kot so listbox, datagrid, - enostavno izbiranje slogov in sredstev za izdelavo izgleda aplikacije v Expression Blend, - vgrajena podpora za izdelavo Silverlight aplikacije, - urejevalnik za XAML, C# in VB. Ustvarjanje bogatejših, bolj interaktivnih spletnih aplikacij Silverlight se že uporablja kot celovita platforma za izdelavo interaktivnih spletnih aplikacij tako za aplikacije kot za goli medijski scenarij, vključno s HD kvaliteto in interaktivni video s Smooth Streaming. Silverlight 4 uvaja dodatne funkcionalnosti, ki omogočajo izdelavo bogatejših, privlačnejših in zmogljivejših interaktivnih doživetij: - vmesniško opremo Fluid za napredno aplikacijsko uporabo s pomočjo animacijskih učinkov, - zmogljivost snemanja avdia in videa lokalno brez uporabe strežniške interakcije, ki omogoča široko paleto interakcije končnega uporabnika in komunikacijske scenarije za videokonference,

23 Silverlight 4 Stran 7 - prenašanje podatkov v aplikacijo z uporabo značilnosti, kot so»kopiraj in prilepi«ali»povleci in spusti«, - za pomikanje po dolgih seznamih lahko zdaj uporabljamo miškino kolo, - podpora za namizni model interakcije z novimi funkcijami, kot so klik desne tipke na miški, - podpora za brskalnik Google Chrome, - optimizacija Silverlight 4 pomeni, da se aplikacije zaženejo hitreje in delujejo 200% hitreje kot enakovredne Silverlight 3 aplikacije, - multi-touch podpora, - izhodna zaščita za avdio/video tok, ki omogoča lastniku ali distributerju zagotovilo, da zaščitene vsebine gledajo z varno video povezavo. Korak onstran brskalnika Silverlight 3 je opravil pionirsko delo z dostavo novega razreda RIA za delo na namizju, brez dodatne kode ali izvajanja. Silverlight 4 omogoča dodatne funkcionalnosti za podporo razvoju namiznih aplikacij: - dodajanje HTML-ja v aplikacije, ki omogoča tesnejšo integracijo z vsebino s spletnih in poštnih strežnikov, kot je e-pošta, pomoč ali poročila, - zagotavlja podporo za "oblaček" obvestilo, ki omogoča aplikacijam sporočanje statusa, medtem ko uporabnik dela na drugi aplikaciji, - nepovezani DRM, razširitev obstoječega Silverlight DRM podprtega z PlayReady tehnologijo za delo brez povezave, - nadzor nad vidiki nastavitev uporabniškega vmesnika, kot so začetni položaj, velikost, itd. Zaupanja vredne aplikacije: - branje in pisanje datotek v mapo»moji dokumeti«,»moja glasba«,»moje slike«in»moj video«o (ali enakovredno za ne-windows platformo),

24 Silverlight 4 Stran 8 - zagon drugih namiznih programov, kot je Office, na primer zahteva Outlook za pošiljanje e-pošte, pošlje poročilo v Word ali podatke v Excel, - COM avtomatizacija omogoča dostop do naprav in drugih sistemskih zmožnostih, tako da kliče aplikacijske komponente; na primer za dostop do čitalnika USB varnostne kartice, - nov uporabniški vmesnik za zahtevke aplikacijskih privilegijev zunaj Silverlight peskovnika, - skupinska politika objektov omogoča organizacijsko prilagoditev, katere aplikacije lahko imajo povišano zaupanje, - popolna podpora tipkovnici v celotno zaslonskem načinu za multimedijske aplikacije, - dodatna oprema za povezovanje omogoča navzkrižno dostopanje brez varnostne datoteke.

25 Silverlight 4 Stran 9 3 IMPLEMENTACIJA 3.1 XAML XAML je deklarativni označevalni jezik, ki temelji na XML. Uporablja se za definiranje elemententov uporabniškega vmesnika. XAML lahko inicializira predmete in nastavi njihove lasnosti z uporabo jezikovnih struktur, ki prikazujejo hierarhičen odnos med več predmeti Vloga XAML v Silverlightu V Silverlight arhitekturi in v razvoju Silverlight aplikacij igra XAML pomembno vlogo. - XAML je osnovni format za deklariranje elementov uporabniškega vmesnika, - XAML format se uporablja za deklariranje slogov in predlog, ki se uporabljajo za logično osnovo Silverlight kontrol in uporabniškega vmesnika, - XAML je skupen format za ustvarjanje kontrol Silverilght uporabniškega vmesnika in izmenjavo načrta uporabniškega vmesnika med različnimi aplikacijami, kot sta Expression Blend in Visual Studio, - WPF prav tako opredeljuje svoj uporabniški vmesnik v XAML s skupnim privzetim imenskim prostorom. To omogoča učinkovit prehod med uporabniškim vmesnikom v Silverlight in WPF, - Silverlight XAML definira videz uporabniškega vmesnika in pripadajočo datoteko s kodo. Videz uporabniškega vmesnika je mogoče spremeniti, ne da bi bile potrebne velike spremembe v kodi logike, - vizualno oblikovanje in podpora oblikovanju površine omogočata XAML hitro izdelavo uporabniškega vmesnika in ohranitev točk dostopa v celotnem procesu razvoja ne glede na spremembe v razvoju uporabniškega vmesnika. [6]

26 Silverlight 4 Stran XAML imenski prostor Koncept imenskih prostorov omogoča ločitev uporabniško deklariranih žetonov od ogrodja definiranih žetonov. XAML se uporablja za deklariranje objektov, lastnosti teh objektov in objekt-lastnost povezav, izraženih kot hierarhija. Ti objekti so podprti z različnimi knjižnicami. Knjižnice so lahko naslednje: - osnovna Silverlight knjižnica, ki je na razpolago ob izvajanju, - porazdeljene knjižnice, ki so del Silverlight SDK, - definicijo knjižnic, ki predstavljajo tretje-osebne kontrole, ki so vključene v aplikacijo, - lastne knjižnice, ki so vključene v Silverlight aplikacijo, - druge knjižnice, ki so preko referenc vključene v aplikacijo. Poseben XAML imenski prostor, ki je deklariran v vsaki XAML datoteki je XAML imenski prostor za elemente, ki jih definira XAML sintaksa. [7] 3.2 Silverlight kontrole Silverlight zagotavlja bogato izbiro kontrol in pogovornih oken, katere podpirajo izdelavo uporabniškega vmesnika. Nekatere kontrole so del Silverlight izvajalnega okolja, druge kontrole pa so del Silverlight knjižnic in Silverlight SDK. V spodnji tabeli so navedene nekatere Silverlight kontrole po abecednem redu. Tabela 3.1: Silverlight kontrole [4] Kontrole Avtomatično dopolnjevalno okno (AutoCompleteBox) Meja (Border) Opis Pogovorno okno za uporabnikov vnos in padajoči predlogi, ki vsebujejo možne predloge. Zagotavlja mejo, ozadje ali oboje v drugih kontrolah.

27 Silverlight 4 Stran 11 Gumb (Button) Koledar (Calendar) Platno (Cavans) Potrditveno polje (Checkbox) Podrejeno okno (ChildWindow) Kombinirano okno (ComboBox) Podatkovna mreža (DataGrid) Izbira datuma (DatePicker) Okvir (Frame) Mreža (Grid) Hiperpovezavni gumb (HyperlinkButton) Slika (Image) Oznaka (Label) Zagotavlja dogodek pritisk za odziv na pritisk miške, tipkovnice ali kakšnega drugega pripomočka. Zagotavlja grafični uporabniški vmesnik za izbiro datuma. Zagotavlja površino za prikaz elementov v določenih kordinatah. Omogoča uporabniku izbiro možnosti. Zagotavlja okno, ki se lahko prikaže nad matičnim oknom in onemogoča delo z matičnim oknom. Predstavlja izbirno kontrolo, ki je kombinacija neurejevalnega polja in pojavne izbire. Zagotavlja prožen način za prikaz podatkov v stolpcih in vrsticah. Omogoča uporabniku izbiro datuma z vnosom datuma ali pa iz padajočega koledarja. Podpira navigacijo do kontrole strani. Zagotavlja površino, sestavljeno iz vrstic in stolpcev za prikaz podrejenih elementov. Predstavlja gumb, ki omogoča uporabniku obisk spletne strani v isti spletni aplikaciji ali pa spletno stran zunaj trenutne aplikacije. Omogoča prikaz slike v PNG ali JPEG formatu. Prikaže napis, indikator zahtevanega polja in indikator napake povezane kontrole. Seznamsko polje (ListBox) Vsebuje zbirko predmetov, ki jih dobimo iz podatkovnega vira. Multimedijski element (MediaElement) Nadzira določeno pravokotno območje, kjer lahko prikažemo video ali avdio vsebine.

28 Silverlight 4 Stran 12 Več obsežna slika (MultiScaleImage) Dialog za odpiranje datoteke (OpenFileDialog) Okno za geslo (PasswordBox) Vrstica napredka (Progressbar) Radio gumb (RadioButton) Bogato besedno okno Omogoča, da uporabnik odpre večresolucijsko sliko, ki ji lahko nato spreminja velikost. Uporablja se v Deep Toom tehnologiji. Predstavlja kontrolo, s katero lahko uporabnik izbere eno ali več datotek. Uporablja se za vnos občutljivih informacij. Prikazuje napredek operacije. Omogoča uporabniku izbiro ene same možnosti v skupini. Predstavlja bogat nadzor za urejanje besedila. (RichtextBox) Dialog za shranjevanje datoteke (SaveFileDialog) Tekstovno okno (TextBox) Zagotavlja dialog, ki omogoča uporabniku izbiro možnosti za shranjevanje datoteke. Omogoča pridobitev uporabnikovega vnosa ali za prikaz besedila. 3.3 Grafika, animacija, zvok in slika Grafika Grafika v Silverilgtu omogoča risanje in barvanje raznih oblik, geometrijskih likov, delo s slikami, ustvarjanje 3-D učinkov itd. Silverlight ponuja že nekaj vnaprej pripravljenih oblik predmetov, kot so elipsa, črta, pravokotnik itd. Vsaki od teh oblik lahko določimo barvo z uporabo SolidColorBrush ali pa z uporabo Gradient-a, ki omogoča, da ima predmet več različnih barv. Grafika v Silverilgtu temelji na vektorskem formatu na matematični osnovi. Vektorska grafika je idealna za internetno distribucijo, ker je lahko zgoščena v manjšo datoteko kot pa rasterska. [8]

29 Silverlight 4 Stran Oblike Oblike so eni izmed najbolj pogosto uporabljenih elementov pri ustvarjanju grafike. Obliki je skupno ime za različne like, kot so na primer črta, kvadrat, elipsa. Vsaka oblika je sestavljena iz dveh osnovnih elementov. Prvi element se imenuje Stroke in definira oris oblike. Drugi element je imenova Fill, ki definira, kako naj bo pobarvana notranjost oblike. [8] Črta Črta (Line) predstavlja element, ki je določen med dvema točkama. Vsaka črta mora imeti začetno in končno točko. Vsaka točka je definirana z X in Y koordinatami. Spodaj je predstavljen primer, kako definiramo črto (Izvorna koda 1) [8]: <Canvas x:name="mycanvas" Height="20" Width="50"> <Line Stroke="Black" X1="10" Y1="10" X2="30" Y2="30" /> </Canvas> Izvorna koda 1: XAML koda za črto Slika 3.1: Črta

30 Silverlight 4 Stran Pravokotnik Ključni lastnosti pravokotnika sta višina in širina. Ti dve lastnosti zagotavljata ustvarjanje meje pravokotnika. Naslednji primer prikazuje kodo za pravokotnik (Izvorna koda 2) [8]: <Rectangle Stroke="Black" Width="104" Height="64" Canvas.Left="8" Canvas.Top="8" Fill="Aqua"/> Izvorna koda 2: XAML koda za pravokotnika Slika 3.2: Pravokotnik Elipsa Elipsa (Ellipse) element definira osnovno krožno obliko. Za definiranje elipse uporabljamo enake lastnosti kot za pravokotnik. Naslednji primer prikazuje definicijo elipse v xaml kodi ( Izvorna koda 3)[8]: <Ellipse Stroke="Black" Width="104" Height="64" Margin="50, 50,0,0" Fill="Aquamarine"/> Izvorna koda 3: XAML koda za elipso Slika 3.3: Elipso

31 Silverlight 4 Stran Lomljenka Lomljenka (Polyline) uporablja seznam kordinat v parih, ki predstavljajo črte za izris. Vsak koordinatni par predstavlja točko (Point), ki je definirana z X-točko in Y-točko. Kordinate točke so navedene v Points ukazu. Naslednji primer prikazuje dafinicijo lomljenke v XAML (Izvorna koda 4) [8]: <Polyline Stroke="Black" Points="10,50 20,40 23,44 25,49 40,12 46,50 51,42 55,50" /> Izvorna koda 4: XAML koda za lomljenko Slika 3.4: Lomljenka Mnogokotnik Mnogokotnik (Polygon) predstalja podoben element kot lomljenka, vendar je ta oblika vedno zaprta. Lomljenka se uporablja za odprte oblike, medtem ko mnogokotnik vedno predstavlja zaprte oblike. Tako kot lomljenka, tudi mnogokotnik uporablja točke lastnosti točk. Naslednji primer prikazuje definicijo mnogokotnika v XAML (Izvorna koda 5) [8]: <Polygon Stroke="Black" Points="10,40 20,10 60,10 70,40 100,70 10,40" /> Izvorna koda 5: XAML koda za mnogokotnik

32 Silverlight 4 Stran 16 Slika 3.5: Mnogokotnik Animacija Animacija omogoča ustvarjanje dinamičnega uporabniškega vmesnika. Pogosto se nanaša na učinke, kot so sprememba velikosti ikone, vrtenje logotipa, premik besedila v ogled itd. Animacija lahko naredi uporabo aplikacije bolj naravne, intuitivne in dovzetnejše. Naslednji primer prikazuje, kako lahko naredimo, da pravokotnik zbledi in se ponovno prikaže (Izvorna koda 6, 7) [9] : <StackPanel> <StackPanel.Resources> <Storyboard x:name="mojpravokotnik"> <DoubleAnimation Storyboard.TargetName="MojAnimiranPravokotnik" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </StackPanel.Resources> <TextBlock Margin="10">Klikni na pravokotnik za začetek animacije.</textblock> <Rectangle MouseLeftButtonDown="Mouse_Clicked" x:name="mojanimiranpravokotnik" Width="100" Height="100" Fill="Blue" /> </StackPanel> Izvorna koda 6: XAML datoteka za animacijo s pravokotnikom

33 Silverlight 4 Stran 17 private void Mouse_Clicked(object sender, MouseButtonEventArgs e) { mojpravokotnik.begin(); } Izvorna koda 7: xaml.cs datoteka s C# kodo Slika 3.6: Animacija pravokotnika pred začetkom animacije (izvorna koda 1) Slika 3.7: Animacija pravokotnika med animacijo (izvorna koda 1) Zvok Element MediaElement nam omogoča, da zelo enostavno dodamo predvajanje zvoka in slike v Silverlight aplikacijo. Kreiramo element MediaElement in mu nastavimo lokacijo datoteke, ki jo naj uporabi. MediaElement nam ponuja naslednje možnosti: avtomatsko predvajanje, izklop/vklop zvoka, raztegovanja slike, nastavitev glasnosti.

34 Silverlight 4 Stran 18 Spodnji primer prikazuje uporabo elementa MediaElement in vključitev wmv datoteke za predvajanje (Izvorna koda 8) [10]: <MediaElement x:name="media" Source="xbox.wmv" Width="300" Height="300" /> Izvorna koda 8: Vključitev MediaElement elementa v Silverlightu Slika Slike se dandanes uporabljajo na vseh spletnih straneh. Uporabljajo se kot ikone, logotipi, slike oseb ali dogodkov. Tako tudi Silverlight omogoča prikazovanje in delo s slikami. Za ta namen uporablja elemeta Image in MultiScaleImage Osnove slike Element Image omogoča prikaz slike v Silverlight na spletni strani. Poleg tega da omogoča nalaganje slike iz svojega projekta, lahko naslov slike dobimo tudi iz drugega spletnega mesta. Sliverlight 4 omogoča prikaz slik z naslednjimi končnicami:.jpg,.jpeg,.jpe,.jfif,.jfi,.jif,.png. Te formate je možno prikazati z uporabo BitmapImage razreda. Če želimo v Silvelight uporabiti formata slik, kot sta.gif in.bmp, moramo uporabiti WriteableBitmap. Naslednji primer prikazuje uporabo elementa Image (Izvorna koda 9) : <Image Source="./sliverlight.jpg"></Image> Izvorna koda 9: XAML definiranje elementa Image Deep Zoom Deep Zoom ponuja možnost interaktivnega pogleda na visoko ločljivostne slike. Sliko lahko hitro povečamo ali pomanjšamo, pri čemer se hitrost nalaganja glede na sliko ne spremeni. Edina lastnost, ki vpliva na hitrost delovanja, je število pikslov slike. Deep Zoom slika je sestavljena iz več ploščic, ki kot celota predstavljajo celotno sliko. Ta tehnika se imenuje piramidni način prikazovanja slike. Tako Silverlight osvežuje samo tiste ploščice, katere uporabnik vidi, in ne celotne slike. [11]

35 Silverlight 4 Stran 19 Slika 3.8: Deep Zoom - piramidni način Deep Zoom se lahko uporabi na veliko raličnih področjih, vendar obstajajo tri področja, kjer je posebaj uporaben: - pregledovanje zelo velikih slik ali pa slike z visoko ločljivostjo, - 3-D fotografije, - Oglasi. Orodje za usvarjanje Deep Zoom slik je Deep Zoom Composer, ki omogoča da uporabnik ustvari datoteko, ki nadzoruje povečevanje ali pomajnšanje slike, in nato izvozi vse potrebne datoteke za razporeditev v Silverlight. 3.4 Razporeditev grafičnega vmesnika Silverlight nam ponuja fleksibilno razporeditev grafičnega vmesnika, kjer določimo, kako bodo kontrole prikazane v Silverlight aplikaciji. Uporabimo lahko statično razporeditev ali pa tekočo razporeditev, kjer se razporeditev avtomatično prilagodi spremembi velikosti v brskalniku. V Silverlight 4 imamo na voljo 5 razporeditev, kjer ima vsak svoje dobre in slabe lastnosti.

36 Silverlight 4 Stran 20 Razporeditve so: - Cavans Panel - Omogoča absolutno postavitev, je zelo preprosta, zahteva pa, da je vsaka kontrola definirana s Cavans.Top in Cavans.Left, ki definira položaj, - StackPanel - Omohoča hitro razporeditev elementov, tako da elemente zloži vertikalno ali horizontalno, - Grid - Ponuja razporeditev elementov v vrstice in stolpce, katera ustvari celice, kamor lahko vstavljamo elemente. Za določitev, v kateri celici naj bo element, uporabimo Grid.Column in Grid.Row lastnosti, - WrapPanel - Podoben je StackPanel-u z razliko, da če bo število elementov preseglo širino ali višino kontrole, se bo avtomatično nadaljevalo v naslednji vrstici ali naslednjem stolpcu, odvisno od lastnosti postavitve, - DockPanel - Zagotavlja postavitev elementov na vse štiri smeri: zgoraj, spodaj, levo in desno. Spodnji primer je predstavitev Grid razporeditve, ki je razdeljen na 3 vrstice in 3 stolpce, v katerih so vstavljeni 4 gumbi (Izvorna koda 10) [12]: <Grid x:name="layoutroot" Background="White" ShowGridLines="True" Width="400" Height="400"> <Grid.RowDefinitions> <RowDefinition Height="70"/> <RowDefinition Height="*" /> <RowDefinition Height="70" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="150" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="150" /> </Grid.ColumnDefinitions> <Button Width="100" Height="30" Content="Zgoraj Levo" Margin="5" Grid.Row="0" Grid.Column="0" ></Button> <Button Width="100" Height="30" Content="Zgoraj Desno" Margin="5" Grid.Row="0" Grid.Column="2"></Button> <Button Width="100" Height="30" Content="Spodaj Levo" Margin="5" Grid.Row="2" Grid.Column="0"></Button> <Button Width="100" Height="30" Content="Spodaj Desno" Margin="5"

37 Silverlight 4 Stran 21 </Grid> Grid.Row="2" Grid.Column="2"></Button> Izvorna koda 10: XAML primer Grid razporeditve Slika 3.9: Razporeditev Button kontrole v Gridu (Izvorna koda 3) 3.5 Logični vmesnik Logični vmesnik je koda v ozadju, v kateri je dodana logika za XAML objekte. Visual Studio ustvari datoteko, ki jo imenujemo koda v ozadju. Ta datoteka vsebuje enega od jezikov, ki podpira Silverlight skozi CLR, kot sta C# ali VisualBasic in v njem je dodana logika za XAML elemente. Visual Studio na primer ustvari datoteko Page.xaml in ji pripne jezikovno datoteko Page.xaml.cs ter ju združi. V ozadju lahko ustvarimo XAML elemente,

38 Silverlight 4 Stran 22 jim dodamo logiko ter jih dodajamo k grafičnemu prikazu strani. Velika prednost je v tem, da lahko v ozadju ustvarimo razrede in kontrole, do katerih lahko dostopamo iz grafičnega vmesnika. Naslednji primer prikazuje povezavo med.xaml datoteko in.xaml.cs datoteko (Izvorna koda 11, 12) [13]: <Button Name="showUpdatesButton" Content="{Binding ShowUpdatesText}" Click="showUpdatesButton_Click"/> Izvorna koda 11: XAML primer gumba in definiranje klik dogotka private void showupdatesbutton_click (object sender, RoutedEventArgs e) { Button b = e.originalsource as Button;... } Izvorna koda 12: C# koda, v kateri se izvede logika za klik gumba 3.6 Povezovanje s podatkovnimi bazami Skoraj vse današnje aplikacije, tudi Silverlight aplikacije, zahtevajo prikaz in shranjevanje podatkov za izpolnitev zahtev uporabnika. Za prikaz podatkov v Silverlight lahko uporabimo na primer ListBox ali DataGrid. Najprimernejši način dela s podatkovnimi bazami v Sliverlight je spletna storitev. HTTP razredi Omogoča dostop do spletne storitve ali pa do storitev na spletnem strežniku, direktno iz Silverlight aplikacije. Za ta dostop se uporablja HttpWebRequest/HttpWebResponse ali razred WebClient. WCF storitve WCF storitve zagotavljajo temelje za izdelavo spletnih storitev za Sliverlight aplikacije. Zagotavlja najlažji način dela s podatki v Silverlight aplikaciji. Glede na to kaj naj program dela, nam WCF ponuja trinivojski model, iz katerega izberemo najbolj primeren model za našo aplikacijo. Vsak model ima svoje dobre in slabe lastnosti.

39 Silverlight 4 Stran 23 Slika 3.10: Tri nivojski WCF model [14] WCF storitve so najbolj prilagodljive storitve, ki omogočajo povezavo med razredom in objekti v Silvelightu skozi spletno storitev. WCF podatkovne storitve Windows Communication Foundation (WCF) Data Service je bolj poznano pod imenom ADO.NET Data service, omogoča ogrodje za dostop do podatkov iz obstoječega modela podatkov. WCF RIA storitve RIA storitve omogočajo podatkovno modeliranje, potrjevanje, varnost in verodostojnost orodij in storitev za enostavno ustvarjanje obrazcev za prikaz podatkov. Ko določimo zahteve Silverlight aplikacije, lahko izberemo najboljši način za delo s podatki. V spodnji tabeli so navedeni različni scenariji in najprimernejše tehnologije za delo s podatki. [14]

40 Silverlight 4 Stran 24 Tabela 3.2: Scenariji uporabe tehnologij za delo s podatki [14] Scenarij Poslovna aplikacija, delo s podatki z uporabo spletnih storitev Dostop do podatkov s tretje strani REST storitev Dostop do obstoječe podatkovne baze z uporabo REST storitev Dostop do poslovne logike Aplikacija za klepet Pošiljanje podatkov preko interneta večim odjemalcem ob istem času Primerna tehnologija WCF RIA storitve Uporaba WebClient ali HttpWebRequest/HttpWebResponse WCF Data Service WCF services WCF services UDP multicast

41 Silverlight 4 Stran 25 4 INTEGRACIJA SILVERLIGHT TEHNOLOGIJE V SPLETNE APLIKACIJE IN ORODJA ZA IZDELAVO SILVERLIGHT APLIKACIJ V tem poglavju bomo predstavili orodja in tehnologije, potrebne za izdelavo Sliverlight aplikacij. Predstavili bomo tudi način integracije Silverlight v spletno stran. 4.1 Orodja za izdelavo Silverlight aplikacij Visual Studio 2010 in Visual Web Developer 2010 Express Visual Studio 2010 in Visual Web Developer 2010 Express predstavljata glavni orodji za razvoj Silverlight 4 aplikacij. Visual Studio je IED (Integrated development environment), ki omogoča razvoj.net rešitev. IED je aplikacija, ki vsebuje obsežne zmogljivosti za pomoč pri razvijanju aplikacij. Visual Studio ponuja zelo dober urejevalnik kode, ki vključuje funkcije, kot so predloge pri dokončanju kode in barvanje izvorne kode. Vključuje tudi razhroščevalnik, ki omogoča vstavljanje prekinitvenih točk kot tudi izvajanje po korakih. Visual Studio prav tako nudi bogat nabor funkcij za postavitev aplikacij, namestitev aplikacij in povezovanje s podatkovno bazo. [12]

42 Silverlight 4 Stran 26 Slika 4.1: Izgled Visual Studia 2010 Kot vidimo na sliki, ponuja Visual Studio že ob izdelavi aplikacije predogled za izgled strani. Na levi strani se nahaja Toolbox, kjer lahko izbiramo različne kontrole, ki bodo vključene v Sliverlight aplikacijo. Glavni razvijalni del predstavlja sredinski okvir, ki je razdeljen na dva dela. Zgornji del nam omogoča, da že med razvijanjem v Visual Studio vidimo, kako bo kasneje aplikacija vidna. V spodnjem delu je vidna XAML koda; ta je ob spremembi vidna tudi v zgornjem delu. Na desni strani zgoraj je Solution Explorer, ki nam prikazuje dokumente projekta. Desno spodaj lahko s pomočjo Visual Studia nastavimo razne nastavitve za izbrane kontrole (barva, velikost, dogodke ob kliku itd.) Silverlight 4 Tools for Visual Studio 2010 Silverlight 4 Tools for Visual Studio je dodatek za Visual Studio 2010 ali za Visual Web Developer 2010 Express, ki vsebuje funkcije za izdelavo Silvelight 4 aplikacij. Ob namestitvi Silvelight 4 Tools se namestijo naslednje komponente [15]: - Silverlight 4 developer runtime, - Silverlight 4 SDK, - Posodobitve za Visual Studio, za podporo Silverlight 4 funkcij, - WCF RIA storitve.

43 Silverlight 4 Stran Silverlight 4 SDK Silverlight 4 SDK ( Software Development Kit) vsebuje komponente, ki nam pomagajo pri ustvarjanju Sliverlight aplikacij. Silverlight 4 SDK vsebuje naslednje elemente: - Uporabniško licenco. Licenca vsebuje dokumentacijo za uporabo Silverlight 4 SDK. - Silverlight knjižnice. Silverlight 4 SDK vsebuje knjižnice za odjemalca in strežniške knjižnice. Ob namestitvi Silverilght 4 SDK v Visual Studio lahko opazimo veliko sorodnih funkcionalnosti, ki jih poznamo od Visual Studia ob ustvarjanju projektov v.net tehnologijah. [15] Slika 4.2: Ustvarjanje novega Silverlight projekta

44 Silverlight 4 Stran 28 Slika 4.3: Ustvarjanje novega Silverlight projekta, z izbiro vrste spletne strani in verzijo Silverlighta Ogrodje.NET Ogrodje.NET je sestavni del Windows okolja, ki podpira izgradnjo in delovanje nove generacije aplikacij in spletnih storitev. Glavni komponenti ogrodja.net sta CLR in knjižnica, ki vključuje ADO.NET, ASP.NET, Windows Forms in WPF. Ogrodje.NET zagotavlja izvajalno okolje, poenostavlja razvoj, namestitev in integracijo s široko paleto programskih jezikov. [16] Expression Blend Expression Blend je orodje za grafično oblikovanje Silverlight grafičnega vmesnika. Tako kot Visual Studio tudi Expression Blend uporablja XAML, kar omogoča, da lahko razvijalci in oblikovalci delajo na istem projektu.

45 Silverlight 4 Stran 29 Slika 4.4: Expression Blend LINQ Language-integrated query (LINQ) je tehnologija, ki predstavlja povezavo med viri predmetov in viri podatkov. Dva najbolj pogosta vira podatkov sta podatkovna baza in XML. Prav povpraševanje po teh in tudi ostalih virih nam omogoča LINQ. LINQ definira operatorje, ki jih uporabljamo za povpraševanje, projekcijo in filtriranje podatkov. Obstajajo naslednje vrste LINQ [17]: - LINQ to SQL, - LINQ to XML, - LINQ to DataSet, - LINQ to Objects. Primer, ki uporablja standardne povpraševalne operatorje v jeziku C#, je viden spodaj (Izvorna koda 13): int[] scores = new int[] { 97, 92, 81, 60 }; IEnumerable<int> scorequery = from score in scores

46 Silverlight 4 Stran 30 where score > 80 select score; foreach (int i in scorequery) { Console.Write(i + " "); } Izvorna koda 13: Primer LINQ povpraševanja V zgornjem primeru (Izvorna koda 13) smo najprej definirali polje števil, nad katerimi bomo izvedli povpraševanje. V polju števil so navedena štiri različna števila. V povpraševanju uporabimo vir podatkov, ki je polje, in preberemo števila, ki so večja od 80. Na koncu s pomočjo foreach zanke izpišemo vsa števila, ki ustrezajo danemu pogoju. Rezultat izpisa je: Nekateri standardni operatorji LINQ: - Select projekcija; - Where omejitev; - GroupBy združevanje; - Sum/Min/Max/Average - vsota, minimum, maksimum, povprečje; - OrderBy urejanje; - First/Last selekcija; - ElementAt - selekcija elementa na poziciji. 4.2 Integracija Silverlight tehnologije v spletne strani Silverlight aplikacija je tehnologija, integrirana v spletno stran s pomočjo Silverlight dodatka. Lahko zavzame celotno stran ali samo del strani. Visual Studio nam privzeto nastavi velikost Silverlight strani čez celotno višino in širino. Silverlight dodatek lahko vključimo v spletno stran na dva načina, ki sta predstavljena v naslednjih podpoglavjih. [12]

47 Silverlight 4 Stran Integracija z uporabo elementa HTML Najenostavnejši način vključitve Silverlight dodatka v spletno stran je z uporabo HTML elementa. Visual Studio nam sam ob začetku kreiranja nove aplikacije generira potrebno kodo. Prav tako Visual Studio generira kodo, če uporabnik nima nameščenega Silverlight dodatka, in kodo, če pride do napake. Spodnji primer prikazuje element HTML za Silverlight dodatek v spletni aplikaciji (Izvorna koda 14) [19]: <object id="silverlightplugin1" width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" > <param name="source" value="silverlightapplication1.xap"/> <a href= " " style="text-decoration: none;"> <img src=" alt="get Microsoft Silverlight" style="border-style: none"/> </a> </object> Izvorna koda 14: HTML element za Silverlight Integracija z uporabo JavaScript funkcij Drugi način integracije Silverlight tehnologije v spletno stran je z uporabo JavaScripta. Za uporabo JavaScript funkcij v Silverlight aplikacijah moramo vključiti datoteko Silverlight.js. JavaScript funkcije nam prinašajo naslednje prednost: - programska nastavitev Silverlight vstavka, - združljivost s Silverlight 1.0, CreateObject in createobjectex funkcije, - določitev posebnih identifikatorjev za vsak vstavek, če imamo na eni spletni strani več kot enega. Spodnji primer prikazuje JavaScript dodatek za integracijo Silverlight tehnologije v spletno stran (Izvorna koda 15) [19]: <div id="silverlightcontrolhost"> <script type="text/javascript"> var getsilverlightmethodcall =

48 Silverlight 4 Stran 32 "javascript:silverlight.getsilverlight(\" \");" var installimageurl = " var imagealttext = "Get Microsoft Silverlight"; var althtml = "<a href='{1}' style='text-decoration: none;'>" + "<img src='{2}' alt='{3}' " + "style='border-style: none'/></a>"; althtml = althtml.replace('{1}', getsilverlightmethodcall); althtml = althtml.replace('{2}', installimageurl); althtml = althtml.replace('{3}', imagealttext); Silverlight.createObject( "ClientBin/SilverlightApplication1.xap", silverlightcontrolhost, "slplugin", { width: "100%", height: "100%", background: "white", alt: althtml, version: " " }, // See the event handlers in the full example. { onerror: onslerror, onload: onslload }, "param1=value1,param2=value2", "row3"); </script> </div> Izvorna koda 15: Integracija Silverlight tehnologije v spletno stran z uporabo JavaScript-a ASP.NET integracija Prejšnje različice Silverlight SDK so vključevale ASP.NET Controls za Silverlight. Ta način je omogočal vključitev Silverlighta v spletno aplikacijo na način, ki je zelo domač ASP.NET razvijalcem. Silverlight SDK ne vsebuje več ASP.NET Server Cotrols za Silverlight, ampak spodbuja razvijalce k uporabi HTML ali JavaScript tehnologije za vključitev Silverlighta v spletne aplikacije.

49 Silverlight 4 Stran 33 5 IZDELAVA SILVERLIGHT APLIKACIJE ZA PODPORO PREVERJANJU ZNANJA V okviru diplomskega dela je bila razvita aplikacija, ki prikazuje nekatere lastnosti tehnologije Silverlight, ki so bile predstavljene v predhodnih poglavjih. Namen aplikacije je bil ustvarit štiri različne igre, ki se uporabljajo za preverjanje znanja. Te igre so»vroča točka«,»zaporedje«,»povezovanje«in»vislice«. 5.1 Predstavitev aplikacije Z aplikacijo smo predstavili nekaj principov tehnologije Silverlight: - delo z orodjem Visual Studio 2010 in MS SQL Server 2008, - LINQ, - delo s polji, - uporaba DataGrid kontrole, - shranjevanje in prenos podatkov iz aplikacije v/iz podatkovne baze s WCF tehnologijo, - dinamično dodajanje kontrol na uporabniški vmesnik, - dinamična postavitev kontrol. 5.2 Funkcionalnosti aplikacije Na spodnji sliki lahko vidimo diagram uporabe za uporabnika. Uporabnik lahko izbere, kateri test bo reševal in glede na izbran test reši zadane naloge. Test ima lahko različno število nalog, prav tako se lahko naloge ponavljajo, vendar z različnim vprašanjem.

50 Silverlight 4 Stran 34 Slika 5.1: Diagram primerov uporabe za uporabnika Naslednja slika prikazuje diagram uporabe za skrbnika, kjer lahko dodajamo nove predmete, nova področja. Glede na predmet in področje, skrbnik dodaja nova vprašanja - igre. Ko skrbnik ustvari igre, lahko generira test, ki sestavi test iz naključnih vprašanj - iger glede na predmet in področje. Test lahko vsebuje različno število vprašanj - iger. Igre v testu se lahko ponavljajo, vendar imajo različna vprašanja.

51 Silverlight 4 Stran 35 Slika 5.2: Diagram primerov uporabe za administratorja 5.3 Skrbniški del Skrbniški del aplikacije nam omogoča ustvarjanje novih vprašanj, dodajanje novih predmetov in področij, izbiro predmeta in področja, generiranje novih testov ter pregled rešenih testov Izbira predmeta Uporabnik skrbniškega dela ima na začetku možnost izbire predmeta ali pa dodajanje novega predmeta.

52 Silverlight 4 Stran Izbira področja in generiranje testa Ko uporabnik izbere željen predmet, se odpre stran, na kateri lahko izbira med že ustvarjenimi področji ali pa doda novo področje, katero se bo navezovalo na prej izbran predmet. Ko imamo izbrano želeno področje, lahko ustvarimo novo vprašanje. Na izbiro imamo štiri vrste vprašanj: vislice, vroče točke, povezovanje in zaporedje. Slika 5.3: Uporabniški vmesnik za izbiro področja, ustvarjanja novega vprašanja in generiranje novega testa Prav tako nam uporabniški vmesnik omogoča ustvarjanje novega testa, kateremu določimo naslov in število vprašanj, ki jih bo vseboval. Generiran test se naključno izbere iz vprašanj, ki so ustvarjena za določen predmet in področje. Vsak test lahko ima različno število vprašanj, ki se lahko ponavljajo, vendar imajo različna vprašanja in temu primerne odgovore. Test se navezuje na prej izbran predmet in področje. Prav tako nam uporabniški vmesni omogoča pregled že ustvarjenih testov in možnost njihovega brisanja.

53 Silverlight 4 Stran Vislice Namen igre vislice je, da uporabnik ugotovi skriti izraz. Skrbnik vpiše izraz, ki je lahko sestavljen iz več besed, in ta izraz mora kasneje reševalec naloge ugotoviti. Naslednji primer prikazuje metodo, s katero prenesemo vse podatke o igri, vprašanje, odgovor in ID področja v WCF (Izvorna koda 16): private void shrani_click(object sender, RoutedEventArgs e) { string naslov = naslovbox.text; string vprasanje = vprasanjebox.text; if (naslov.length <= 0) { MessageBox.Show("Vpišite naslov igre!!!"); } else if (vprasanje.length <= 0) { MessageBox.Show("Vpišite odgovor igre!!!"); } else { VisliceSR.VisliceServiceClient webservice = new VisliceSR.VisliceServiceClient(); webservice.addnovevislicecompleted += new EventHandler<VisliceSR.AddNoveVisliceCompletedEventArgs>(webS ervice_addnovevislicecompleted); webservice.addnovevisliceasync(naslov, vprasanje, podrocjeid); } } Izvorna koda 16: Metoda za prenos podatkov igre vislice iz Silverlight v WCF Naslednji primer prikazuje metodo, s katero shranimo podatke o igri vislice v podatkovno bazo (Izvorna koda 17): [OperationContract] public bool AddNoveVislice(string naslov, string vprasanje, int podrocjeid) { try { VisliceDBDataContext contex = new VisliceDBDataContext(); Vislice vis = new Vislice(); vis.naslov = naslov; vis.vprasanje = vprasanje;

54 Silverlight 4 Stran 38 } vis.podrocjeid = podrocjeid; vis.tipigre = 3; contex.vislices.insertonsubmit(vis); contex.submitchanges(); return true; } catch { return false; } Izvorna koda 17: Metoda za shranjevanje podatkov o igri vislice Vroče točke Namen igre vroče točke je poiskati določena mesta na sliki. Skrbnik najprej izbere sliko, ki se bo uporabljala za določitev vročih točk. Slika 5.4: Uporabniški vmesnik za dodajanje nove igre vroče točke Prav tako doda naslov te igre in vprašanje zanjo. Vročo točko na sliki ustvari s pomočjo miške, tako da pritisne levi gumb na miški in povleče, da dobi okvir, ki predstavlja vročo točko. Vsaki vroči točki doda tudi izraz, ki določa, kaj ta vroča točka predstavlja.

55 Silverlight 4 Stran 39 Koordinate vroče točke so sestavljene iz začetne točke, to je X in Y točka, kjer uporabnik pritisne levo tipko na miški. Poleg začetne točke se shranita tudi dolžina in širina okvira, ki ju dobimo, ko uporabnik spusti levo tipko na miški. Na koncu še uporabnik navede možno število točk, ki služijo pri izračunu uspešnosti reševanja naloge. Spodnji primer prikazuje izvorno kodo, kjer uporabnik pritisne levo tipko na miški, da dobi začetno pozicijo vroče točke (Izvorna koda 18): private void okvir_mouseleftbuttondown(object sender, MouseButtonEventArgs e) { if (isdragging == true) { intcount++; rect = new Rectangle(); origpoint = e.getposition(okvir); Canvas.SetLeft(rect, origpoint.x); Canvas.SetTop(rect, origpoint.y); rect.stroke = new SolidColorBrush(Colors.Black); rect.strokethickness = 2; rect.name = intcount.tostring(); okvir.children.add(rect); okvir.mousemove += draw_mousemove; okvir.mouseleftbuttonup += draw_mouseleftbuttonup; } } Izvorna koda 18: Metoda klika leve tipke na miški, s katero dobimo začetno točko okvirja Naslednji primer prikazuje izvorno kodo, kjer dobimo dolžino in širino okvirja vroče točke (Izvorna koda 19); void draw_mousemove(object sender, MouseEventArgs e) { if (rect!= null) { curpoint = e.getposition(okvir); if (curpoint.x > origpoint.x)

56 Silverlight 4 Stran 40 { rect.width = curpoint.x - origpoint.x; dolzina = rect.width; } else if (curpoint.x < origpoint.x) { Canvas.SetLeft(rect, curpoint.x); rect.width = origpoint.x - curpoint.x; dolzina = rect.width; } if (curpoint.y > origpoint.y) { rect.height = curpoint.y - origpoint.y; visina = rect.height; } else if (curpoint.y < origpoint.y) { Canvas.SetTop(rect, curpoint.y); rect.height = origpoint.y - curpoint.y; visina = rect.height; } } } Izvorna koda 19: Metoda, s katero dobimo dolžino in širino okvirja vroče točke Zaporedje Namen igre zaporedje je razvrstitev izrazov v pravilni vrstni red. Uporabniški vmesnik za igro zaporedje je narejen tako, da moramo vpisati naslov igre in poljubno število izrazov. Izraze moramo vpisovati v vrstnem redu, ki predstavlja pravilno zaporedje. Prav tako vpišemo možno število točk, ki se lahko pri tej nalogi dosežejo.

57 Silverlight 4 Stran 41 Slika 5.5: Uporabniški vmesnik za dodajanje nove igre zaporedja Povezovanje Igra povezovanje je namenjena povezovanju ujemajočih izrazov. Uporabnik, ki ustvarja novo igro, mora vpisati naslov igre, možno število točk, ki jih lahko dosežemo, in izraza, ki se ujemata.

58 Silverlight 4 Stran 42 Slika 5.6: Uporabniški vmesnik za dodajanje nove igre povezovanje Pregled rezultatov testa Skrbniški del naloge omogoča uporabniku pregled vseh rešenih testov. Teste lahko izbiramo glede na izbran predmet in na izbrano področje.

59 Silverlight 4 Stran 43 Slika 5.7: Uporabniški vmesnik za prikaz rešenih testov Tabela za prikaz rešenih testov vsebuje naslednje podatke: - naslov testa, - datum reševanja testa, - rezultat reševanja posameznega vprašanja in končni rezultat reševanja vseh nalog v testu. Prav tako lahko uporabnik pregleda vsak test posebej in vidi, katere naloge so v testu bile, koliko jih je bilo in število točk, ki jih je "študent" pri posamezni nalogi dosegel.

60 Silverlight 4 Stran 44 Slika 5.8: Uporabniški vmesnik za prikaz nalog in rezultatov glede na izbran test Tabela za prikaz nalog v posameznem testu vsebuje naslednje podatke: - naslov igre, - dosežen rezultat pri posamezni igri, - tip igre. 5.4 Uporabniški del Uporabniški del aplikacije nam omogoča izbiro testa, ki ga bomo reševali. Vsak test je sestavljen iz štirih različnih iger: vilice, vroče točke, zaporedje in povezovanja. Vsak test ima lahko različno število iger, pri čemer se vprašanja glede na igro ne ponavljajo. To pomeni, da imamo na primer v enem testu dve igri vislice, ki imata različno vprašanje in odgovor, eno zaporedje, eno vročo točko ali tri igre povezovanja, prav tako vsa tri z različnimi vprašanji in odgovori.

61 Silverlight 4 Stran Reševanje testa Uporabniški vmesnik ponudi uporabniku tabelo testov, katere lahko rešuje. S klikom na test začne uporabnik reševati test. Uporabnik ne ve, koliko iger vsebuje določen test, prav tako ne ve, v kakšnem vrstnem redu igre so. V nadaljevanju vam bom predstavili reševanje enega izmed testov, ki ima štiri igre, po eno iz vročih točk, povezovanja, vislic in zaporedja Igra vroče točke Prva igra v našem testu je vroče točke. Uporabnik ima nalogo, da na dani sliki poišče tipkovnico, monitor in računalnik. Slika 5.9: Uporabniški vmesnik za reševanje igre vroče točke V tej igri uporabnik za reševanje naloge uporablja miško. S kliki na sliko poizkuša ugotoviti, kje določena vroča točka je. Če uporabnik klikne izven okvirja vroče točke ali če določena vroča točka ostane nekliknjena, se mu ta klik oz. neklik šteje kot nepravilen odgovor. S tem se mu zmanjša možnost za osvojitev vseh možnih točk tako v posamezni igri kot v celotnem testu.

62 Silverlight 4 Stran Igra Povezovanje Naslednja igra v našem testu je povezovanje. Uporabnik ima nalogo, da poveže izraze, ki se ujemajo. Slika 5.10: Uporabniški vmesnik za igro povezovanje Uporabniku se prikažeta dva stolpca. V prvem stolpcu so izrazi zapisani tako, kot jih je vpisoval skrbnik, ko je ustvarjal igro. V drugem stolpcu so izrazi razvrščeni poljubno in so lahko vsakič, ko se igra igra, v drugačnem vrstnem redu. Uporabnik rešuje igro z miško tako, da najprej klikne na enega izmed izrazov v poljubnem stolpcu, nato pa še enkrat na izraz v drugem. Ob drugem kliku se oba izraza iz prvega in drugega stolpca shranita in na koncu se preveri, če se povezana izraza ujemata s shranjenim pravilnim rezultatom. Naslednji primer nam prikazuje del kode, kjer se dinamično generirata stolpca z labelami v katerih so zapisani izrazi, katere mora uporabnik povazat. (Izvorna koda 20): foreach (var item in pi1) { string ime1 = "od" + v1; labelaznakov[v1] = new Label(); labelaznakov[v1].height = 40; labelaznakov[v1].width = 300; labelaznakov[v1].content = item.odgovor1; labelaznakov[v1].name = ime1;

63 Silverlight 4 Stran 47 labelaznakov[v1].foreground = new SolidColorBrush(Colors.Black); labelaznakov[v1].background = new SolidColorBrush(Colors.LightGray); labelaznakov[v1].margin = new Thickness(50, top1, 0, 0); labelaznakov[v1].verticalcontentalignment = System.Windows.VerticalAlignment.Center; labelaznakov[v1].horizontalcontentalignment = System.Windows.HorizontalAlignment.Center; labelaznakov[v1].mouseenter += new MouseEventHandler(PovezovanjeIgra_MouseEnter); labelaznakov[v1].mouseleftbuttondown += new MouseButtonEventHandler(PovezovanjeIgra_MouseLeftButtonDown); this.mycanvas.children.add(labelaznakov[v1]); v1++; top1 += 70; } foreach (var item in source2) { string ime2 = "odg" + v2; labelaznakov[v2] = new Label(); labelaznakov[v2].height = 40; labelaznakov[v2].width = 300; labelaznakov[v2].content = item.odgovor2; labelaznakov[v2].name = ime2; labelaznakov[v2].foreground = new SolidColorBrush(Colors.Black); labelaznakov[v2].background = new SolidColorBrush(Colors.LightGray); labelaznakov[v2].margin = new Thickness(450, top2, 0, 0); labelaznakov[v2].verticalcontentalignment = System.Windows.VerticalAlignment.Center; labelaznakov[v2].horizontalcontentalignment = System.Windows.HorizontalAlignment.Center; labelaznakov[v2].mouseenter +=new MouseEventHandler(PovezovanjeIgra_MouseEnter); labelaznakov[v2].mouseleftbuttondown += new MouseButtonEventHandler(PovezovanjeIgra_MouseLeftButtonDown);

64 Silverlight 4 Stran 48 this.mycanvas.children.add(labelaznakov[v2]); v2++; top2 += 70; } Izvorna koda 20: Koda za dinamično generiranje dveh stolpcev z labelami, v katerih so izrazi za povezovanje Igra vislice Naslednja igra v testu je igra vislice. Uporabnik mora z vpisovanjem črk ugotoviti, kateri izraz predstavlja pravilen rezultat. Slika 5.11: Uporabniški vmesnik za igro vislice Pri tej igri lahko uporabnik dobi vse ali nič točk. Uporabnik ima na razpolago določeno število nepravilnih rešitev. Če prekorači to število, se mu izrišejo vislice in igra je zaključena. Prav tako lahko porabi skoraj vse nepravilne znake in kljub temu pravilno reši nalogo. Naslednji primer prikazuje XAML kodo za uporabniški vmesnik (Izvorna koda 21): <Grid x:name="layoutroot" Background="#FFE6FFFF"> <TextBlock Height="30" HorizontalAlignment="Left" Margin="70,50,0,0" Name="textBlock1" Text="Vislice igra" FontSize="20" VerticalAlignment="Top" />

65 Silverlight 4 Stran 49 <Grid x:name="rez" Height="300" Width="1000" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="50,500,0,0"/> <Button Content="Preveri črko" Height="23" HorizontalAlignment="Left" Margin="825,400,0,0" Name="preveriCrko" VerticalAlignment="Top" Width="75" Click="preveriCrko_Click" /> <TextBox Height="50" HorizontalAlignment="Left" Margin="720,368,0,0" Name="znakiBox" VerticalAlignment="Top" Width="56" FontSize="20" IsTabStop="True" /> <ListBox Height="50" HorizontalAlignment="Left" Margin="719,150,0,0" Name="listBox1" VerticalAlignment="Top" Width="386" FontSize="16" UseLayoutRounding="True" Foreground="Green"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> <ListBox Height="50" HorizontalAlignment="Left" Margin="719,280,0,0" Name="listBox2" VerticalAlignment="Top" Width="386" FontSize="16" Foreground="Red"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </ListBox.ItemsPanel> </ListBox> <sdk:label Height="28" HorizontalAlignment="Left" Margin="720,120,0,0" Name="label1" VerticalAlignment="Top" Width="180" Content="Pravilni uporabljeni znaki" /> <sdk:label Height="28" HorizontalAlignment="Left" Margin="720,250,0,0" Name="label2" VerticalAlignment="Top" Width="188" Content="Nepravilni uporabljeni znaki" /> <Grid Height="300" Width="300" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="210,150,0,0"> <Line x:name="line1" Stroke="Black" StrokeThickness="4" X1="150" Y1="280" X2="280" Y2="280" Visibility="Collapsed"/> <Line x:name="line2" Stroke="Black" StrokeThickness="4" X1="215" Y1="280" X2="215" Y2="100" Visibility="Collapsed"/> <Line x:name="line3" Stroke="Black" StrokeThickness="4" X1="160" Y1="280" X2="215" Y2="230" Visibility="Collapsed"/> <Line x:name="line4" Stroke="Black" StrokeThickness="4" X1="270" Y1="280" X2="215" Y2="230" Visibility="Collapsed"/>

66 Silverlight 4 Stran 50 <Line x:name="line5" Stroke="Black" StrokeThickness="4" X1="215" Y1="102" X2="100" Y2="102" Visibility="Collapsed"/> <Line x:name="line6" Stroke="Black" StrokeThickness="4" X1="215" Y1="150" X2="160" Y2="102" Visibility="Collapsed"/> <Line x:name="line7" Stroke="Black" StrokeThickness="4" X1="102" Y1="102" X2="102" Y2="130" Visibility="Collapsed"/> <Image Height="65" HorizontalAlignment="Left" Margin="70,130,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="65" Source="./Slike/sad smile.jpg" Visibility="Collapsed"></Image> <Image Height="65" HorizontalAlignment="Left" Margin="70,218,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="65" Source="./Slike/smile.jpg" Visibility="Visible"></Image> <sdk:label Height="28" HorizontalAlignment="Left" Margin="88,22,0,0" Name="labelKonec" VerticalAlignment="Top" Width="120" Content="Konec igre" FontSize="23" FontStyle="Italic" FontFamily="Times New Roman" FontWeight="Normal" Foreground="#FFB13030" Visibility="Collapsed" /> </Grid> <Button Content="Prekliči" Height="23" HorizontalAlignment="Left" Margin="966,410,0,0" Name="prekliciButton" VerticalAlignment="Top" Width="75" Click="prekliciButton_Click" /> <sdk:label Height="28" HorizontalAlignment="Left" Margin="538,60,0,0" Name="naslovLabel" VerticalAlignment="Top" Width="620" FontSize="20" /> <Button Content="Vredu" Height="23" HorizontalAlignment="Left" Margin="966,0,0,423" Name="button1" VerticalAlignment="Bottom" Width="75" Click="button1_Click"/> <Button Content="Naprej" Height="23" HorizontalAlignment="Left" Margin="1083,454,0,0" Name="naprejButton" VerticalAlignment="Top" Width="75" Click="naprejButton_Click" /> </Grid> Izvorna koda 21: XAML koda za uporabniški vmesnik igre vislice Igra Zaporedje Zadnja igra v našem testu je zaporedje. Uporabnik mora iz naključno generiranega zaporedja ustvariti pravilnega.

67 Silverlight 4 Stran 51 Slika 5.12: Uporabniški vmesnik za igro zaporedje V prvem okviru «Odgovori«so izrazi v naključnem vrstnem redu. Uporabnik jih z miško prenaša v drugi okvir. Ob zaključku igre se izrazi preberejo in se primerjajo s pravilnim vrstnim redom. Če je izraz na nepravilnem mestu v zaporedju, se to šteje kot nepravilen odgovor.