Sergejus apie .NET

Kaip ir buvo žadėta, tapo prieinama galutinė Silverlight 4 versija bei atsinaujino Expression Blend 4 iki Release Candidate versijos. Žemiau rasite visas reikalingas nuorodas:

• Silverlight 4 Tools for Visual Studio 2010
• Silverlight 4 SDK
• Silverlight Windows Runtime & Mac Runtime
• Expression Blend 4 Release Candidate
• Silverlight 4 Online Documentation
• Microsoft Silverlight 4 Offline Documentation
• Silverlight Toolkit
• WCF RIA Services

P.S.

Nemažai žmonių manęs klausia, kokia Silverlight versija įeina į Visual Studio 2010. Atsakymas – Silverlight 3, tad norint dirbti su Silverlight 4 reikia suinstaliuoti Silverlight 4 Tools for Visual Studio 2010.

Mūsų kurtos Silverlight 2.0 aplikacijos išeities tekstai jau prieinami.

Atėjo laikas paskutinei įvado į Silverlight 2.0 daliai. Ankstesnėse įvado dalyse mes realizavome praktiškai visą duomenų išgavimo, atvaizdavimo ir paieškos logiką. Mums beliko įgyvendinti pasirinktojo vaizdo klipo grojimo funkcionalumą. Tam sukurkime Silverlight komponentą ir pavadinkime jį Details.xaml

Mūsų video klipo grojimo komponentas bus sudarytas iš dviejų TextBox elementų skirtų klipo pavadinimui ir aprašymui atvaizduoti bei MediaElemento komponento, kuris ir pasirūpins video atvaizdavimu.

Aukščiau pateiktame kode norėčiau atkreipti dėmesį į tai, kaip mes aprašysime video klipo susiejimą su komponentu. Tai vyks per mūsų anksčiau sukurtą VideoSource objektą, kurį mes perduosime Silverlight komponentui pažymėjus jį sąraše. Pradžioje įtraukime Details komponentą į pagrindinį Page.xaml puslapį:

Dabar reikia aprašyti paspaudimo ant video klipo logiką:

Kaip matyti, mes perduodame pasirinktą VideoSource objektą per duomenų kontekstą, kuriuo pasižymi bet kuris susiejimą palaikantis komponentas. Ką mes turime rezultate? Ogi visai patrauklią ir gana praktišką Silverlight 2.0 aplikaciją!

P.S.

Taigi kaip ir bet kuris įvadas, šis turi irgi pasibaigti. Tikiuosi man pavyko parodyti bazinius Silverlight 2.0 aspektus ir būtų įdomu išgirsti jūsų pastabas bei pasiūlymus. Tai pat būtų džiugu sužinoti jei kas iš jūsų esat kūrę arba šiuo metu kuriate Silverlight 1.0 / 2.0 aplikaciją.

Praeitoje įvado dalyje mes atvaizdavome video klipus mūsų Silverlight puslapyje. Šiandien realizuosime paieškos galimybę. Tam mes suskaidysime pagrindinį puslapį į dvi dalis: kairėje bus atvaizduojami video klipai, o dešinėje bus realizuota klipų paieška bei pasirinkto klipo peržiūra (tai bus realizuota kitoje dalyje).

Panašiai kaip ir HTML, Grid elementas turi eilučių ir celių sąvoką. Tam kad pagrindiniame mūsų Grid komponente aprašyti vieną eilutę ir du stulpelius reikalingas žemiau pateiktas kodas:

Žvaigždutė plotyje ir aukštyje rodo, kad Grid elementas turi užimti visą prieinamą plotą. Paprastumo dėlei, paieškos komponentą aprašykime kaip įvedimo lauką ir mygtuką:

Pateiktame pavyzdyje aš išreikštinai nusakau, kad paieškos komponentas turi būti antroje celėje (numeracija prasideda nuo 0). Kitas įdomus aspektas – vietoje įprasto įvedimo laukelio naudojamas WatermarkedTextBox, jo dėka galima rodyti tekstą tuščiame įvedimo lauke.

Aprašę grafinį elementą, galima pereiti prie logikos. Norėdami atlikti video klipų paiešką video.msn.com puslapyje, reikia pasinaudoti specialiai suformuota nuoroda:

Pati paieška galėtų atrodyti taip:

kur tb – tai mūsų WatermarkedTextBox. Iki pilno funkcionalumo mums beliko aprašyti paieškos mygtuko paspaudimą:

Rezultate mes turime veikiančią Silverlight aplikaciją, kurios pagalba galima ieškoti vaizdo įrašų:

Taigi tiek šiam kartui, kitoje dalyje mes aprašysime Silverlight komponentą, skirtą video klipų peržiūrai.

Ketvirtoje įvado dalyje mes jungiamės prie video.msn.com puslapio, parsisiuntėme XML dokumentą ir konvertavome jį į VideoSource objektų sąrašą. Šiandien mes apibrėšime lentelę, skirtą vaizdo informacijos atvaizdavimui.

Tie kas programuoja ASP.NET gerai pažįsta GridView komponentą, kurs moka automatiškai generuoti stulpelius priklausomai nuo duomenų šaltinio. Įdomu tai, kad labai panašus komponentas yra ir Silverlight ir vadinasi jis DataGrid. Norint pasinaudoti šiuo komponentu, pirma reikia pridėti nuorodą į System.Windows.Controls.Data.dll biblioteką:

Minimaliausias DataGrid aprašas atrodytų taip:

Panašiai kaip ASP.NET GridView komponentas duomenų susiejimui naudoja savybę DataSource, DataGrid turi savybę ItemSource. Tam kad atvaizduoti iš XML dokumento konvertuotą informaciją atnaujinkime metodą wc_DownloadStringCompleted:

Rezultate mes gauname pilnai funkcionuojančią lentelę su slankiojančiais stulpeliais ir redagavimo galimybe:

Panašiai kaip ir GridView atveju, DataGrid elementui mes galime aprašyti stulpelių šablonus, todėl galutinis lentelės vaizdas ribojimas tik jūsų ir dizainerio fantazija. Taip pat aš norėčiau parodyti dar vieną alternatyvią komponentų išdėstymo galimybę – StackPanel komponentą:

Atkreipkite dėmesį į paryškintas vietas. Taip XAML kalboje yra aprašomas duomenų susiejimas (šiuo atveju Binding aprašo VideoSource elemento savybę, kurios reikšmė bus atvaizduojama lentelėje). Viso šito rezultatas atrodys panašiai į pateiktą žemiau:

Tai tiek šiam kartui, kitoje įvado dalyje mes realizuosime vaizdo klipų paiešką.

Praeitoje dalyje mes sukūrėme laukimo elementą WaitControl, kurį panaudojome mūsų pagrindiniame Silverlight puslapyje:

Šiandien mes prisijungsime prie catalog.video.msn.com puslapio ir pasiimsime XML dokumentą su video klipų aprašais, kurį vėliau konvertuosime į .NET objektus LINQ to XML pagalba.

Pirma apibrėžkime nuorodą, kuri grąžins atsitiktinį video klipų sąrašą:

XML duomenų gavimui apibrėžkime metodą GetVideos, kuris asinchroniškai kreipsis į resursą ir pasiims duomenis:

Kaip matyti, GetVideos naudojasi WebClient klase, kuri leidžia ypač paprastai siusti duomenis HTTP protokolu. Kadangi siuntimas vyksta asinchroniškai, tai turi būti aprašytas metodas atsakingas už rezultato apdorojimą:

Kaip matyti, pasibaigus siuntimui mes paslepiame laukimo komponentą, o testavimo tikslais, rezultatą atvaizduojame ekrane pranešimo lange (JavaScript alert analogas):

Tam tereikia iškviesti GetVideos metodą mūsų puslapio konstruktoriuje:

Kadangi XML duomenis mes jau turime, reikia apibrėžti atitinkamą C# klasę ir juos susieti:

O dabar pasinaudosime LINQ to XML pagalba ir konvertuosime XML į C# objektus:

Norėčiau atkreipti dėmesį į tai, kad XML dokumentas naudoja XML vardų sritį, todėl prie kiekvieno elemento pavadinimo tenka pridėti ir vardų sritį. Beliko atlikti du dalykus:

• aprašyti video klipų sąrašą
  


• 
  

  bei atnaujinti wc_DownloadStringCompleted metodą
  

Voilà! Mes parsisiuntėme XML informaciją iš video.msn.com puslapio ir konvertavome ją į C# objektus.

Kaip ir žadėjau, tesiu įvadą į Silverlight 2.0 su nauju, labiau praktiniu, pavyzdžiu. Šį kartą kursime Silverlight aplikaciją, kuri ims informaciją apie vaizdo medžiagą iš video.msn.com puslapio kaip XML failą, konvertuos ją į objektus LINQ to XML pagalba, įgalins naudotojus atlikti norimų klipų paiešką bei leis juos peržiūrėti.

Aplikacijos kūrimą pradėsime nuo tokio pradinio XAML failo:

Kaip matyti, mes naudojame gradientinę fono spalvą. Kadangi mes kreipsimės į video.msn.com paslaugą per tinklą – tai gali užtrukti, todėl prasminga pradėti aplikacijos kūrimą nuo laukimo elemento. Mūsų laukimo elementas suksis nuo puslapio pasikrovimo ir iki to momento, kai mes pilnai gausime XML failą. Šį elementą mes apibrėšime kaip atskirą Silverlight komponentą, o kursime jį Expression Blend 2.5 pagalba.

Pirma Visual Studio aplinkoje mes turime pridėti naują Silverlight komponentą. Suteikime jam WaitControl pavadinimą:

Atsiradusiame lange ištrinkite atributą Background, nes mums reikalingas permatomas fonas, o atributų Width ir Height reikšmes pakeiskite į 200:

Dabar pereiname į Expression Blend 2.5 ir atidarome mūsų projektą:

Matome, Expression Blend puikiausiai atpažįsta Visual Studio sprendimus bei projektus. Atidarome WaitControl.xaml failą ir paišome apskritimą:

Dabar mums reikia pakeisti tam tikrus apskritimo nustatymus, tam pereiname į kortelę Properties:

Tam kad nustatyti mūsų apskritimo fono spalvą, reikia pereiti į kortelės Properties skilti Brushes ir pakeisti žemiau nurodytus parametrus:

Rezultate jus turėtumėte gauti XAML kodą panašų į

Norėdami, kad pasikrovus puslapiui mūsų apskritimas suktųsi, reikia pridėti dar du blokus RenderTransform ir Triggers:

Aukščiau pateiktas kodas aprašo, kad iš karto po puslapio pasikrovimo bus keičiamas mūsų apskritimo kampas nuo 0 iki 360 laipsnių per 1 sekundę ir tai vyks amžinai.

Tam kad mūsų laukimo komponentas atrodytų įdomiau, aprašykime antrą apskritimą, nukopijuodami aukščiau pateiktą kodą keičiant tik elementų pavadinimus ir kelis atributus, atsakingus už apskritimo išsidėstymą ekrane:

Kadangi tai yra laukimo komponentas, tai mums reikės metodų, kurių pagalba galima bus sustabdyti animaciją ir paleisti ją iš naujo. Pereiname į failą WaitControl.xaml.cs ir pridedame keletą eilučių:

Dabar mūsų laukimo komponentas pilnai užbaigtas ir beliko jį panaudoti mūsų Silverlight puslapyje. Tam pirma reikia įtraukti nuorodą į mūsų komponentą bei aprašyti patį komponentą:

Rezultate mes gavome šaunų sukimosi komponentą!

Tiek šiam kartui, kitoje dalyje mes dirbsime su XML duomenų gavimu, konvertavimu ir atvaizdavimu.

Praeitoje dalyje mes sukūrėme paprastą Silverlight 2.0 aplikaciją. Šiandien šią aplikaciją mes praturtinsime video klipu ir paprasta animacija.

Tam kad atvaizduoti video informaciją, Silverlight 2.0 galima pasinaudoti MediaElement komponentu, kurį patalpinsime žemiau StackPanel:

Norėčiau atkreipti dėmesį į tai, kad Robots.wmv yra patalpintas į ClientBin katalogą, bet vienintelė vieta lokaliame kompiuteryje prie kurios Silverlight gali prieiti yra ClientBin katalogas, todėl jo išreikštinai nurodinėti nereikia. Kadangi mes nesame nurodę komponento dimensijų, video klipas bus rodomas per visą langą:

O dabar pasinaudokime WPF ir Silverlight 2.0 galia: padarykime šį video klipą prieš tai aprašyto įvedimo laukelio fonu. Tai padaryti labai paprasta, užtenka paslėpti video klipą ir nurodyti VideoBrush elementą kaip įvedimo laukelio foną:

Štai ir viskas, mes turime įvedimo laukelį su dinaminiu fonu!

Ženkime dar vieną žingsnį pirmyn ir pridėkime įvedimo laukeliui sukimosi animaciją. Tam pirma aprašysime sukimosi transformaciją iš karto po TextBox.Background elemento:

Suteikiame mūsų transformacijai pavadinimą rotate ir nurodome pradinį kampą bei sukimosi taško koordinates. Kadangi įvedimo laukas turi suktis iš karto po puslapio pasikrovimo, reikia apibrėžti įvykį, ties kurio prasidės animaciją bei pačią animaciją:

Rezultate mes gausime besisukantį įvedimo laukelį, kurio fone rodomas video klipas:

Taigi tiek šiam kartui, šioje dalyje mes praturtinome įprastą įvedimo laukelį video medžiaga ir animacija. Kitoje dalyje mes pradėsime kurti labiau praktišką Silverlight aplikaciją.

Praeitoje įvado dalyje aš aptariau tolesniam darbui reikalingus įrankius bei aprašiau Silverlight 2.0 patobulinimus. Šioje dalyje mes sukursime savo pirmą Silverlight 2.0 aplikaciją.

Suinstaliavus visus minėtus įrankius, atidarome Visual Studio ir sukuriame Silverlight 2.0 projektą:

Paspaudus mygtuką OK, atsiras langas, kuriame galima sukurti Web aplikaciją arba Web projektą, skirtą mūsų Silverlight komponentų testavimui:

Tokiu būdu mes gauname sprendimą, sudarytą iš dviejų projektų: Silverlight projekto ir testinės Web aplikacijos:

Kaip matyti, Silverlight projekte yra du failai: App.xaml – standartinis įeities taškas visoms WPF (Windows Presentation Foundation) programos ir Page.xaml – mūsų Silverlight komponento failas.

Web aplikacija pilnai paruošta darbui, ji turi nuorodą į System.Web.Silverlight.dll biblioteką, testinius puslapius bei XAP failą. XAP failas – tai Silverlight projekto XAML failai ir resursų failai supakuoti (suspausti GZIP metodu) į vieną archyvą. Atnaujinant Silverlight projektą automatiškai atsinaujins ir XAP failas.

Atidarome Page.xaml ir įtraukiame du žemiau pateiktus kodo blokus:

Silverlight 1.0 buvo tik vienas būdas nurodyti komponentų išsidėstymą – Canvas elementas. Silverlight 2.0 tam siūlo naujus komponentus Grid, StackPanel ir Border. Pirmasis kodo blokas aprašo elemento gradientinį foną, o antrasis – atsako už įvedimo laukelio ir mygtuko išsidėstymą.

Tikriausiai pastebėjote, mygtukas turi įvykio doroklį Button_Click, kuris apsirašo taip:

Jo pagalba paspaudus mygtuką Test įvedimo laukelyje atsiras užrašas DotNetGroup.LT kartu su naujos eilutės simboliu. Paleidus testinį puslapį ir du kartus paspaudus Test jus turėtumėte pamatyti tokį vaizdą:

Norėdami kad įvedimo laukelis ir mygtukas būtų vienoje eilutėje, užtenka StackPanel komponentui nurodyti horizontalų išdėstymą ir lygiavimą pagal centrą:

Taigi šioje dalyje mes sukūrėme minimalistinę Silverlight 2.0 aplikaciją. Kitoje dalyje prie šios dalies pavyzdžio mes pridėsime video klipą bei animaciją.

Nuo paskutinio mano straipsnio praėjo savaitė, per tą laiką aš aktyviai nagrinėjau naują Silverlight versiją. Taigi kaip ir žadėjau, pradedu straipsnių ciklą, skirtą Silverlight 2.0. Pradėsiu nuo pradžių, ko mums prireiks:

• Windows - Silverlight 2 Beta 1 Runtime – pats Silverlight 2.0


• Microsoft Silverlight Tools Beta 1 for Visual Studio 2008 – Visual Studio 2008 įrankiai skirti Silverlight


• Expression Blend 2.5 Preview – grafinis XAML redaktorius, kuris moka dirbti ir su Silverlight 2.0 projektais


• Deep Zoom Composer – labai šviežia programa, skirta pritaikyti didelės raiškos nuotraukas DeepZoom technologijai

Lyginant Silverlight 2.0 su pirma versija, jis gerokai ištobulėjo. Jame atsirado .NET palaikymas, standartiniai Silverlight komponentai ir daug kitų dalykų. Žemiau išvardinsiu svarbiausius:

• .NET platformos palaikymas (C#, Visual Basic)


• Standartiniai komponentai (mygtukai, įvedimo laukeliai ir kiti panašūs komponentai)


• Komponentų stiliai ir šablonai (principai panašūs į CSS stilius)


• Duomenų susiejimas (angl. Data Binding)


• LINQ technologija


• XML API


• Darbas su HTTPS ir sockets


• Integracija su HTML (įskaitant JSON Serializer)


• Lokali saugykla


• Kriptografijos API (apima ir AES)


• Daugiagijiškumas

Instaliuojant Microsoft Silverlight Tools Beta 1 for Visual Studio 2008, kartu susiinstaliuoja ir taip vadinamas Silverlight 2.0 SDK, kurio dėka galima šalia minėtų galimybių naudotis:

• Dinaminėmis .NET kalbomis (IronRuby, IronPython, JScript)


• Daugiau standartinių komponentų (prisideda dar virš 10)


• LINQ to XML


• XML serializacija


• RSS API

Kaip aš jau ir minėjau, Silverlight 2.0 siūlo didelį komponentų pasirinkimą. Dėl tokios įvairovės dalis jų įeina į standartinę Silverlight instaliaciją, o kiti automatiškai siunčiami pagal poreikį.

Standartiniame pakete jus rasite tokius komponentus: 

• FileOpenDialog


• Grid


• Image


• ItemsControl


• MediaElement


• MultiScaleImage


• StackPanel


• TextBox


• TextBlock


• Button


• Popup

Papildomai prieinami tokie komponentai:

• CheckBox


• DataGrid


• DateTimePicker


• GridSplitter


• Hyperlink


• ListBox


• Calendar


• RadioButton


• Slider


• ToggleButton


• Tooltip


• WatermarkTextBox

Šioje įvado dalyje aš aptariau tolesniam darbui reikalingus įrankius bei aprašiau Silverlight 2.0 patobulinimus. Kitoje dalyje mes sukursime minimalistinę Silverlight aplikaciją, panaudojant Grid, MediaElement ir kitus komponentus.