Silverlight on 2.5 aasta jooksul jõundud oma 4. versioonini, algusest peale on SL olnud cross-platform ja töötanud identselt nii Windowsil kui ka Macil. Vaatamata sellele kohtun ma vahel inimestega, kes on üllatunud, et SL Macil üldse töötab või siis, et SL Macil ja Windowsil on identsed.

Päris identsed ei ole, aga dokument, mis kirjeldab neid erinevusi on ikke imelühike. Seal ei ole asju stiilis “seda Macis teha ei saa” vaid pigem sellised tähelepanekud erinevuste kohta.

Näiteks, et Maci rahval ei pruugi olla hiirel füüsilist nuppu paremkliki jaoks ja siis Silverlight tõstatab ikka MuseRightButtonUp sündmuse, kui Maci-inimene teeb kombinatsiooni ctrl + klikk.

Uurige täpsemalt siit:http://msdn.microsoft.com/en-us/library/cc838247%28VS.95%29.aspx

Varem on igati tüütu olnud reavahetustega tekst Silverlight TextBlockide sees… Selleks tuli siis sobilike kohtade peale lisada näiteks </Linebreak> või \n. Nüüd on Silverlight end kokku võtnud ning respekteerib XML standardis olevat xml:space=”preserve” atribuuti.

Seega, kui kirjutada

<TextBlock xml:space="preserve"> 

<TextBlock.Text> Mina olen üks suur, pikk

mitmerealine teskst ...

</TextBlock.Text>

</TextBlock>

Siis nii ongi, reavahetused on rakenduses näha ja kui kõrvuti on mitu tühikut, siis on mitu tühikut kõrvuti ka rakenduse käivitamisel .

Cool

ENETA foorumis paluti abi järgmise ülesande lahendamiseks:

Kuidas lisada tekstile Silverlight rakenduses selline efekt, et kogu tekst ei ilmu mitte kohe ekraanile, vaid tähthaaval nagu trükimasinal trükkides.

See on tegelikult jummala lihtne. Ainus eeldus, mis ma teen on see, et MainPage.xaml failis eksisteerib TextBlock, mille nimi on myTextBlock.

XAML

Selle lisamiseks tuleb avada MainPage.xaml, teha topeltklõps TextBlock nupu peal ning siis see töölaual õige koha peale lohistada.

Nime saab muuta atribuutide paneelis:

Lõpuks peab objektide puu välja nägema selline.

Kood

Siis järgmisena avame faili MainPage.xaml.cs.

Kõigepealt on meil vaja muutujat (myText), mis teab koguteksti, mis meil ekraanile vaja trükkida:

Järgmisena on meil vaja timerit, mis otsustab kui kiiresti iga järgmine täht ekraanile jõudma peaks. Siinkohal kasutame meie timerina animatsiooni (Storyboard t) objekti.

Eelmisel pildil loome kõigepealt animatsiooni t, seame tema kestvuseks 0.2 sekundit. Lisame sündmuse, et iga kord, kui animatsioon läbi saab (iga 0.2 sekundi järel), kutsutakse välja meetod nimega animationCompleted (nime võib ise valida). Ja lõpuks paneme animatsiooni/timeri käima – t.Begin().

Teksti trükkimine

Kuigi pildil on päris kenasti kommenteeritud, mis toimub selgitan lisaks loogikat. Kõigepealt me kontrollime, kas meil on veel tähti, mis on ekraanile trükkimata (myText.Length > 0). Kui on siis me kõigepealt eemaldame ekraanil nähtavast tekstikastist “_”, mille ma lisasin selleks, et oleks mõnusasti näha, et trükkimine on käimas. Järgmisena ma võtan myText teksti kõige esimese tähe ning lisan selle ekraanile koos uue alamkriipsuga ja siis alustan uuesti meie timerit ning kõik algab algusest.

Kogu MainPage.xaml.cs faili sisu on näha siin: http://dl.dropbox.com/u/3219952/ENETA/Typer/Typer/MainPage.xaml.cs

Loodan, et oli abi.

Have fun

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.

Siin on minu Veebistuudiumi 2010. aasta demod ( see, mis kohapeal tegime ning üks sarnane alternatiiv): Lae alla

Proovimiseks on vaja Silverlight 4 Beta arendusvahendeid, mille saab siit: silverlight.net/getstarted/silverlight-4-beta/

Have fun

Sel nädalal on toimumas Microsoft PDC konverents, mis Microsofti arendajatele on see koht, kust alati põnevaid uudiseid tuleb. Kui tavaliselt oleme kuulnud Silverlight uutest versioonidest MIX konverentsi ajal märtsis, siis seekord avalikustati beta juba novembris.

Silverlight on väga kiiresti arenev tehnoloogia ning veel ei ole me ühegi uue versiooni kohta saanud öelda, pisike parandus või uuendus. Täielik nimekiri uutest featuuridest asub siin: http://silverlight.net/getstarted/silverlight-4-beta/ aga ma räägin mõnest, mis mulle põnevad tundusid

• WYSIWYG tekstikast lõpuks ometi!
• Printimine!
• Veebikaamera ja mikrofoni tugi
• drag-and-drop tugi olulistes kasutajakontrollides (listboxid, datagridid jne.)
• drag-and-drop ja copy-paste abil rakendustesse andmete toomine (pildid, tekst jne.)
• jah nüüd saab hiirega skrollida
• võimalus teha endale sobiv menüü hiire parema kliki jaoks.
• Silverlight Google Chrome jaoks
  • Muide Scott Guthre rääkis, et nende eesmärgiks on SL tugi igasse veebilehitsejasse, mille osakaal ületab 1% kasutajatest. Opera tuge nad teevad, aga ei ole veel valmis.
• Multi-touch tugi
• HTML Silverlight rakenduste sees.

Täiesti uus asi on võimalus küsida kasutaja käest oma rakendusele rohkem õiguseid, millega tulevad kaasa sellised võimalused:

• Võimalus lugeda ja kirjutada kasutaja (My Pictures, My Documents, My Moves) kataloogidesse ja analoogsetesse kataloogidesse Macil.
• Täisekraanil töötavatel rakendustel on nüüd ligipääs kõigile klaviatuuri klahvidele.

Rohkem infot saab siit:

• http://silverlight.net/learn/videos/silverlight-4-beta-videos/
• http://silverlight.net/learn/handsonlabs/
• http://channel9.msdn.com/learn/courses/Silverlight4/Overview/Overview/

Postituses Navigatsioon ja linkimine näitasin kuidas rakendustes XAML lehtede vahel navigeerida. Üheks miinuseks oli see, et vaikimisi nägime aadressiribal reaalset teed failini, mida me alati teha ei taha – esiteks võib siis ju ära arvata linke igasugustele teistele lehtedele ja teiseks ei ole nii eriti ilus ka. Nüüd vaatame, kuidas teha URI-d täpselt nii ilusaks nagu ise tahame. Nimetatakse seda URI mappinguks.

Minu arust on kõige mõistlikum URI mappingud panna App.xaml faili, sest see on ju ometi info, mis käib kogu rakenduse, mitte ainult ühe vaate kohta. Seega, eeldusel, et meil on App.xaml faili päises viide navigatsiooniraamistiku nimeruumile:

xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

Saame kirjutada midagi sellist:

<Application.Resources>
    <navigation:UriMapper x:key="myUriMapper">
         <navigation:UriMapping Uri="About" MappedUri="/Views/About.xaml" />
    </navigation:UriMapper>
</Application.Resources>

See tähendab, et kui kirjutame aadressiks /MinuLaheRakendus/About näidatakse meie navigatsiooni raamis (Frame objekti sees) About.xaml sisu.

Mustrid

Veel toredamaks teevad asja wildcardid, ehk kirjutades reeglisse {page}

<Application.Resources>
    <navigation:UriMapper x:key="myUriMapper">
         <navigation:UriMapping Uri="About" MappedUri="/Views/About.xaml" />
         <navigation:UriMapping Uri="{page}" MappedUri="/Views/{page}Page.xaml" />
    </navigation:UriMapper>
</Application.Resources>

See tähendab, et kui nüüd kirjutada aadressiks /MinuLaheRakendus/MidaIganes saame sisuks /Views/MidaIganesPage.xaml, ehk me ei pea igakord reegleid juurdetekitama, kui mõni leht juurde sigineb. Reegleid kontrollitakse ülevalt alla ning kasutatakse esimest, mis leitakse, seega kuigi meil on reegel {} => {}page.xaml saame About puhul siiski About.xaml sisu.

Mitu mustrit korraga

Wildcarde võib loomulikult ka kombineerida:

<Application.Resources>
    <navigation:UriMapper x:key="myUriMapper">
         <navigation:UriMapping Uri="About"
                                MappedUri="/Views/About.xaml" />
         <navigation:UriMapping Uri="{page}"
                                MappedUri="/Views/{page}Page.xaml" />
         <navigation:UriMapping Uri="toode/{id}"
                                MappedUri="/Views/Toode.xaml?id={id}" />
         <navigation:UriMapping Uri="{aasta}/{kuu}/{paev}"
                                MappedUri="/Views/Blog.xaml?y={aasta}&amp;m={kuu}&amp;d={paev}" />
    </navigation:UriMapper>
</Application.Resources>