Hõbevalge nagu Silverlight :)

Stiilide pärimine

Oletame, et meil on stiil Stiil1 ja me tahame teha Stiil2-e, mis sarnaneb esimesele aga on ikkagi pisut teistsugune. Varem tähendas see seda, et Stiil2-ks tuli kopeerida Stiil1 sisu ja siis muutma hakata. Alates juba Silverlight 3-st on võimalik pärimine stiilide vahel.

Üldised stiilid

Põhimõtteliselt ei ole ju keeruline kirjutada nupu juurde <Button x:Name="startButton" Style="{StaticResource Stiil1}", samas kui kõik minu nupud peakski täpselt sellised välja nägema nagu selles stiilis kirjeldatud, siis oleks nagu tüütu.

Kui stiili definitsiooni juures eemaldada atribuut x:Key, siis on selle stiiliga kõik rakenduse või konkreetse XAML lehe seda tüüpi objektid – näiteks nupud. See kas üldine stiil mõjub üle rakenduse või üle ühe XAML faili sõltub sellest, kas stiil on defineeritud App.xaml (mõjub üle rakenduse) või mõnes muus XAML failis (mõjub ainult selle faili nuppudele).

Järgnev postitus räägib pildikasti rakenduse ehitamisest ning seda samm-sammult. Eesmärgiks on tutvustada Silverlight 4 RC võimalusi

Lõpptulemus

Lõpptulemuseks on rakendus, mis näitab suurelt kasutaja veebikaamerast videopilti, kui vajutada Klõps! nuppu tehakse foto, mis jäädvustatakse paremasse nimekirja. Kui sealt nimekirjast seejärel üks pilt valida, on võimalik pilt arvutisse salvestada. Selleks, et asi liiga keeruline ei oleks, on võimalik alumisest listist valida erinevate effektide vahel, mis siis oma pildile lisada.

Kasutajaliides

Kasutajaliidese põhjaks on Grid – kolme rea ja kahe tulbaga, mis tüüpi objektidega täpselt tegemist on, näeb järgneval pildil.

Esialgu näeb seda kasutajaliidest defineeriv XAML välja väga lihtne (kliki, et suuremalt näha). Aga olgem ausad, ma seda ise ei kirjutanud, lihtsam oli Blendis asjad paika lohistada Soovitan seda ka lugejale .

using

Selleks, et kogu demo kenasti töötaks vaata, et MainPage.xaml.cs faili alguses oleks vähemat järgmised using read:

Kas ma võin su kaamerat kasutada?

Kõigepealt on peame küsima kasutajalt luba, kas võib kaamerat kasutada. Selleks lisame nupu, mille kliki peale teeme hulga algseadistusi:

captureSource muutujast võiksime mõelda justkui tunnelist meie rakenduse ja veebikaamera vahel, mis meile pilti toob ja see ei ole null, sest tegelikult MainPage konstruktoris me inistialiseerisime selle. Lisaks seome fotonimekirja ning massiivi, kus tehtud pilte hoiame.

Liikudes startButton sündmusehalduris edasi on näha, et tehakse hetke kaamerapildist videopintsel ning seejärel värvitakse selle pintsliga kõik vajalikud ristkülikud. Seda viimast tehakse tegelikult küll alles siis, kui kasutaja annab luba tema kaamerapilti kasutada (viimane if).

Lisame stardinupule veel ka kaks Behaviorit ChangePropertyAction (see käib analoogselt efektide lisamisele, mida on näha järgmisel pildil). Ühes behavioris seame nii, et kui startButton-it vajutatakse peidetakse see nupp ära – Visibility = Collapsed ja teiseks seame Klõps! nupu kasutatavaks (isEnabled = true).

Efektide lisamine

All reas on meil esialgu 5 identset ristkülikut, selleks et need oleks ristkülikud, mis näitavad kaamerapilti koos eriefektiga lohistame iga ristküliku peale Assets=>Effects aknast endale sobiva efekti.

Järgmiseks tuleks igale efekti ristkülikule lisada ka MouseLeftButtonUp sündmusehaldur, kus teeme sellise triki, et see efekt, mis on hetkel valitud ristkülikul lisatakse ka suurele kaamerapildi ristkülikule.

Pildi tegemine

Pildi tegemise all ma mõtlen seda (eeldusel, et meil on tunnel kaamerast rakenduseni) , et teeme nupuvajutuse peale klõpsu (esimene rida peale if-i) ja lisame selle paremal olevasse ListBoxi näitamiseks ( teine rida ). Kuna snapShots massiiv on meil tüüpi ObservableCollection, siis ei pea me ListBoxiga eraldi midagi tegema, tema sisu uueneb automaatselt siis kui uueneb see konkreetne massiiv.

Pildi salvestamine kettale

See on nüüd pisut keerulisem osa, kuid õnneks on armas Silverlight kommuun kogu selle keerukuse meie eest ära lahendanud ning salvestamisel on meil abiks kaks juba valmisolevat klassi EditableImage.cs ja PngEncoder.cs, mille algallikas on Silverlight guru Shawn Wildermuth blogist. http://wildermuth.com/

Kõigepealt taas eraldame ekraanilt need pikslid, mis meid huvitavad ning seejärel kutsume välja SaveBitmap meetodi, mis avab esmalt failisalvestamise dialoogi ning seejärel faili ka kettale kirjutab.

Kindlasti peavad projekti olema lisatud need kaks klassi EditableImage.cs ja PngEncoder.cs ning ära unusta seal see namespace nime muutmast enda projekti nimeks .

Veebirakendusest päris rakendus

Viimaseks võib rakenduse muuta töölauale paigaldatavaks (OOB) rakenduseks (töpsem õpetus), selleks tuleb valida Project->Silverlight project Settings-> Enable Application Outside Browser. Seejärel on nii, et kui kasutaja teeb rakenduse peal paremkliki saab ta valida Install ning rakendus paigaldatakse tema arvutisse koos vajalike Start menüü ja Desktop shortcutidega .

Demo: http://dl.dropbox.com/u/3219952/ENETA/ENETAPhotoBooth/ENETAPhotoBoothSite/Default.html

Source:

http://dl.dropbox.com/u/3219952/ENETA/ENETAPhotoBooth.rar

Edu ja have fun

Silverlight 3 tõi võimaluse Silverlight rakendusi töölauale paigaldada (out of browser applications), ega see palju muud juurde ei toonud kui selle, et veebilehitseja raam kadus rakenduse ümbert. Alates Silverlight 4 RC versioonist on aga võimalus nendele samadele veebilehitsejavälistele rakendustele anda suuremaid õiguseid – elevated trust mode.

Mida elevated trust rakendusele juurde annab?

• Ligipääsu Documents, Music, Videos kataloogidele.
• Võimalust kasutada täisekraanil kõiki klaviatuuri nuppe, mitte ainult alamhulka.
• Tavalistel Silverlight rakendustel on mõningatel operatsioonidel piirang peal, et neid võib käivitada ainult kasutaja sündmuse peale (näiteks pärast nupu vajutust ja siis ka 1 sekund pärast nupu vajutust). Elevated Trust rakendus võib näit. täisekraanile minna ka kohe rakenduse avamisel. Selliseid tegevusi on tegelikult veel.
• Võimalus muuta OOB rakenduse akna välimust. jm.

Kuidas seadistada?

Kõrgendatud õiguste saamiseks tuleb kõigepealt seadistada Silverlight projekt OOB projektiks:

Siis seejärel saab lubada ka kõrgendatud õiguseid:

Selle tulemusena lisandub projekti Properties kataloogi OutOfBrowserSettings.xml fail, mis näeb pärast neid kahte sammu välja selline:

Edasi oleks kusagil oma koodis viisakas ka kontrollida, kas rakendusel tõesti siis on kõrgendatud õigused ja siis vastavalt käituda. Aga see on õnneks lihtne:

if(App.Current.HasElevatedPermissions) {

}

Kõige täpsem info on alati dokumentatsioonis: http://msdn.microsoft.com/en-us/library/ee721083(VS.96).aspx

24. märtsil tutvustab Jaana Metsamaa (see olen mina ) arendajatele Silverlight 4 imelist maailma ja selle võimalusi kasutades Expression Studio tööriistu. Fookuses on eelkõige uue versiooniga kaasnev funktsionaalsus.
Kas sa teadsid, et Silverlight ei tähenda alati kitsas liivakastiga piiritletud veebirakendusi vaid on paigaldatavad ka töölauarakendustena nagu Office või Windows Live Messenger? Mida lõbusat annab teha veebikaameraga peale tavalise video? Tule kohale või osale üle Live Meetingu ja saadki teada Eneta kommuuniõhtu on kõigile tasuta!

• 24. märts, kolmapäev
• kell 18:00 – 19:45
• IT Kolledž, Raja 4c, r 316 (kaart) + Live Meeting
• lektor: Jaana Metsamaa
• sihtgrupp: arendajad, disainerid
• tehniline tase: 200-300 (selgitus)
• slaidid vs. demo: 20/80

Registreeru IT Kolledžis toimuvale loengule hiljemalt 22. märtsiks lehelhttp://bit.ly/eneta_silverlight4

Registreeru Live Meeting veebipõhisele loengule siin lehel http://bit.ly/eneta_silverlight4_lm. Virtuaalselt osalejatele edastame liitumise lingi 24. märtsil.

Esita küsimusi ja osale Silverlight arutelus Eneta foorumis. Registreeru Eneta kasutajaks ja saad tellida tulevaste kommuunisündmuste teavituse mugavalt e-postile.