Hõbevalge nagu Silverlight :)

Struktuur

Esimene, mis peale Sketchflow prototüübi projekti loomist silma hakkab, on Sketchflow Map. Sketchflow kaardi peal on näha, kuidas rakenduse erinevad osad omavahel seotud on – millisest vaatest millisesse liikuda saab. Kui vaateid on palju, siis võib neid gruppeerida määrates neile erinevaid värve. Seda sama kaarti näeb hiljem ka klient (SL puhul veebilehitsejas) prototüüpi üle vaadates.

Visandamine

Iga kord, kui lisame kaardile uue vaate, luuakse taustal selle kohta üks XAML fail, neid faile muutes muudame siis reaalselt prototüüpi ennast. See käib väga sarnaselt tavalise SL rakenduse loomisele – tuleb lihtsalt tööriistade seast õiged elemendid töölauale lohistada. Lisaks on tervitatav ka see, et kui vaja võib ka XAML koodi muuta, vaevalt muidugi, et mõni disainer seda väga teha tahaks Selleks, et visand liiga peen välja ei näeks ning klient ei hakkaks arvama, et rakendus juba valmis on. Selleks on Sketchflow-ga kaasas WigglyLines stiil, mis teeb kõikide elementide väljanägemise selliseks lapiskuks, lohakaks kritselduseks. Silverlight ja stiilid töötavad aga teatavasti nõnda, et siis kui hiljem on vaja, et rakendus näeks viimistletud välja, siis on vaja teha ainult paar hiireklikki ja vana kritseldus asendada õige disainiga.

Navigatsioon

Liikumaks rakenduse ühest osast teise, piisab sellest, et valime vaates mõne objekti või nupu, teeme sel paremkliki ning valime valikust Navigate to vaate nime, mida järgmisena näitama peaks. Minnes tagasi kaardi juurde, siis sealt võime valida ükskõik millise ühendusjoone ning täpsustada, milline animatsioon peaks nende vaadete vahel liikumisele kaasnema. Siis on peenem, kliendile kindlasti meeldib

Kokkuvõte

Sketchflowga võib väga kiiresti saada päris hea tulemuse – poole tunniga võib saada struktuuri ning kõik vaated  paika ning esimese tagasiside kätte, kas see on umbes see, mida vaja. Siis edasi võib juba minna enam detailidesse – lisada näidisandmeid ning kujundada täpselt välja kõik andmelistid, toodete nimekirjad jne. Näidisandmed ongi need, millega järgmine postitus Sketchflow seerias tegeleb.

Üks Silverlight 3-e uusi omadusi on see, et nüüd on võimalik luua ka selliseid rakendusi, mis töötavad brauserist väljaspool.  Väga kasulik on see näiteks selliste programmide puhul, mis töötamiseks tingimata internetiühendust ei vaja, nagu näiteks meie Home Reading Helper sõnaraamaturakendus.

Alustamine

Esimene samm on Expression Blend 3-s väga lihtne. Tuleb lihtsalt avada oma projekt ja valida ülevalt menüüst Project > Silverlight Project Preferences > Enable Application Outside Browser.

Kui nüüd Run Project teha, siis on peale rakenduse laadimist võimalik sellel parema klahviga vajutada ja see oma arvutisse paigaldada.

Seadistamine

Kui nüüd aga rakendus käima panna, siis võib märgata, et akna suurus on vale ja nimi ei ole ka päris selline nagu ta olla võiks.

Nende vigade parandamiseks tuleb muuta OutOfBrowserSettings.xml faili, mis asub Properties kaustas.

Selle sisu näeb tavaliselt välja umbes järgmine:

<?xml version="1.0" encoding="utf-8" ?>
<OutOfBrowserSettings ShortName="SilverlightApplication1" EnableGPUAcceleration="True">
    <OutOfBrowserSettings.Blurb>
        A short description of the application.
    </OutOfBrowserSettings.Blurb>
    <OutOfBrowserSettings.WindowSettings>
        <WindowSettings Height="600" Width="800" Title="SilverlightApplication1" />
    </OutOfBrowserSettings.WindowSettings>
</OutOfBrowserSettings>

Meile piisab sellest, kui muuta natuke 7. rida ja kirjutada sinna näiteks:

<WindowSettings Height="480" Width="640" Title="Home Reading Helper" />

Lõpptulemus on juba palju ilusam.

Ongi valmis!

Brauserivälised rakendused töötavat nii Windowsi kui ka Maciga (kuigi esmapilgul natuke aeglasemalt). Kuna Moonlight veel Silverlight 3-e ei toeta, siis selle operatsioonsüsteemi kasutajad on hetkel natuke kõrvale jäetud.

Silverlight 3 koostöös Expression Blend 3 Preview versiooniga toovad hulga elukergendust disaineritele. Üks lisandunud funktsionaalsusest on kasutajaliidese elementidele lisatavad behvaviorid, ehk drag’n’drop funktsionaalsus. Kõige lihtsam neist ongi lohistamise behvaior.

Kõigepealt behaviorite kasutamiseks tuleb oma projektis viidata Microsoft.Interactions.Interactivity.dll-le (Add reference)

c:\Program Files\Microsoft Expression\Blend 3 Preview\Libraries\Silverlight

Seejärel allalaadida SLPreviewBehaviors pakkk, see lahtipakkida.

http://gallery.expression.microsoft.com/en-us/SampleSLBehaviors

Ning viidata (Add reference) SLPreviewBehaviors.dll –le.

Nüüd kui minna Asset Library aknasse ning valida Behaviors on näha hulk behavioreid.  

Kui nüüd haarata üks neist näiteks DragBehavior ja lohistada mõne objekti peale on see ellips või ristkülik või video kohe lohistatav, kirjutamata ühtki rida koodi

Enne:

Pärast:

Behavioreid saab loomulikult ise oma lemmikdisaineritele juurde programmeerida või otsida internetist http://gallery.expression.microsoft.com/en-us/site/items/behaviors

Hetkel minu kõige lemmikum behavior on DeepZoomActions, sest see kood, mis teeb Deep Zoom albumi interaktiivseks (skrollimine, lohistamine ja muud efektid) see on 6A4 lehekülge pikk. Aga kasutades Behaviorit on see ainult üks drag and drop

Mis need on?

User Controlid ehk kasutajakontrollid (?) on viis kasutajaliidese ja ka loogika kaspeldamiseks Silverlight ja ASP.NET rakendustes.

Lihtsaim näide sellest on tavaline vorm aadressi sisestamiseks – teate ju küll neid (riik, maakond, linn/küla,indeks, maja, korter), selle tegemine nõuaks mingi ~10 rida XAML koodi ilmselt. Aga kujutagem ette stsenaariumit, kus on vaja kaht sellist vormi näiteks arve aadressi ja postiaadressi jaoks, siis läheks ju juba ~20 rida XAML koodi + ehk on veel ka mingi loogika, mis kontrollib, kas vormid on hästi täidetud. Et vähem koodi oleks, on meil vaja aadressivorm kapseldada kasutajakontrolliks nii et seda saaks taaskasutada!

Kes tahab teada, kuidas see aadressi vormide näide täpselt edasi käib, võib lugeda Scott Guthre’i blogipostitust, mina jätkan näitega, kus mul on väga paljudest Path punktidest koosnev lumehelves, mida ma tahaks sadu kordi kloonida, et tuleks korralik lumesadu!

Miks neid vaja läheb?

Esialgne lumehelves on selline, see koosneb 1857 tähemärgist, ehk siis on piisavalt suur, et ma ei tahaks seda 100 kordi lõigata ja kleepida:

<Path x:Name="Snowflake" Width="40" Height="40" Stretch="Fill"
Fill="#FFD9F3F2" Data="F1 M 20.205,19.59L 20.205,17.7075L />
18.765,16.8L 17.3775,17.7075L 17.3775,19.59L
18.765,20.4975L 20.205,19.59 Z M 37.5825,24L
34.275,24L 32.115,20.64L 29.1375,20.64L
31.2975,24L 27.9825,24L 25.8225,20.64L
21.885,20.64L 23.805,23.8575L 27.7425,24L
29.4225,26.88L 25.44,26.925L 26.925,29.61L
30.9075,29.76L 32.5425,32.64L 28.56,32.355L
29.52,33.9825L 26.31,35.805L 25.395,34.2225L
23.4225,37.92L 21.7575,34.9275L 23.6775,31.3275L
22.275,28.8L 20.3025,32.64L 18.63,29.58L
20.55,25.845L 18.6075,22.515L 16.755,25.7775L
18.6225,29.3325L 16.9425,32.16L 15.0675,28.6575L
13.5825,31.245L 15.4575,34.755L 13.8225,37.5825L
11.955,34.08L 11.04,35.6625L 7.8225,33.84L
8.7825,32.205L 4.6575,32.355L 6.2925,29.52L
10.4175,29.3775L 11.9025,26.835L 7.7775,26.925L
9.4575,24.09L 13.5375,23.9475L 15.5025,20.5425L
11.805,20.5425L 9.69,23.9025L 6.285,23.9025L
8.4,20.5425L 5.565,20.5425L 3.45,23.9025L
0.0449994,23.9025L 2.16,20.5425L 0.3375,20.5425L 
0.3375,16.845L 2.16,16.845L 0,13.3425L 3.2625,13.3425L 
5.475,16.845L 8.4,16.845L 6.24,13.3425L 9.5475,13.3425L
11.7075,16.845L 15.645,16.845L 13.7775,13.5825L 9.795,
13.44L 8.16,10.56L 12.0975,10.56L 10.6125,8.085L 
6.675,7.8975L 5.04,5.1825L 8.9775,5.28L8.0625,3.675L 
11.28,1.875L 12.195,3.4575L 14.115,0L 15.855,2.7825L
13.8675,6.3675L 15.315,8.88L 17.28,5.28L 18.96,8.1975L 17.01,11.7825L
18.9225,15.12L 20.835,11.8575L 18.96,8.355L 20.64,5.475L 22.4625,9.0225L
23.955,6.435L 22.125,2.925L 23.76,0.0974998L 25.5825,3.6L 26.5425,1.965L
29.715,3.7575L 28.8,5.28L 32.925,5.28L 31.29,8.1375L 27.165,8.235L
25.68,10.845L 29.805,10.56L 28.125,13.305L 24,13.44L 22.08,16.8L
25.8225,16.8L 27.9375,13.44L 31.245,13.44L 29.1375,16.8L 32.115,16.8L
34.2225,13.44L 37.485,13.44L 35.3775,16.8L 37.245,16.8L 37.245,20.64L
35.3775,20.64L 37.5825,24 Z" />

Uue kasutajakontrolli loomine

Selleks on kaks võimalust. Kasutades programmi Expression Blend tuleb valida need objektid, mida kasutajakontrolliks kapseldada soovitakse, teha paremklikk ning valida Make Control. Selle tulemusena avaneb veel üks aken, mis küsib kasutajakontrollile nime ning, mis tuleks teha esialgse sisuga (meie puhul, siis selle 1857 tähemärgiga) – kas asendada kasutajakontrolli koodiga või jätta nii kuis on.

Lõpuks saame faili Snowflake.xaml, mille sisuks on kõik see, mis üleeelmises sammus valitud sai (aadressi vormi puhul, siis kõik vormi väljad, nende kirjeldused …).

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
             x:Class="Projekt.Snowflake">
   <Path Width="40" Height="40" Stretch="Fill" Fill="#FFD9F3F2"
         Data="F1 M 20.205,19.59L 20.205,17.7075L 18.765,16.8L..."/>
</UserControl>

Kasutajakontrolli loomine Visual Studio abil on samuti lihtne. Tuleb Silverlight projektis valida Add New Item ning seejärel suure hulga valikute seast leida üles Silverlight User Control ning anda talle nimi. Kui Expression Blendis oli kood juba õiges kohas, siis Add new Item meetodit kasutades tuleb õige kood ise Grid märgendite vahele kleepida.

Kuidas iganes see kasutaja kontroll ka loodud sai, selle kasutamine on õige lihtne

Kuidas kasutada?

Esmalt tuleb XAML faili päises kasutajakontrollile viidata:

Süntaks selleks on xmlns:MINU_ENDA_VALITUD_LÜHEND=””clr-namespace:PROJEKTINIMI”

Näiteks projektis nimega Projekt näeb see asi välja nii:

xmlns:u="clr-namespace:Projekt"

Nüüd edaspidi võin luua lumehelbeid nii:

<u:Snowflake/>

Mis asendab kõik need 1857 tähemärki või mitu neid oligi.

A ja see kurikuulus lumehelbeke näeb välja selline:

1200 kordne suurendus … vektorgraafika ruulib

Uue rakenduse loomine

Teeme uue Silverlight Application projekti rakenduses Visual Studio või Silverlight 2 Application programmis Exression Blend.

(Piltidel vajutades näeb neid suuremalt.)

Seejärel on valida, kas rakenduse testimiseks lisatakse ka veebiprojekt või genereeritakse igal kompileerimisel testlehekülg.

Rakenduse ülesehitus

Silverlight rakendus koosneb minimaalselt ühest kasutajaliidese (.xaml) failist (Page.xaml), sellele vastavast programmikoodist (Page.xaml.cs) ning failidest App.xaml ja App.cs.

XAML failid on XML dokumendid, milles on defineeritud kasutajaliides. Vastavates C# (või VB) failides on antud XAML failide objektidele vastav programmiloogika – sündmuste haldamine jms. Page.xaml on antud projektimallis kasutajaliides, mis vaikimisi laetakse.

App.xaml sisaldab kasutajaliidese elemente, mis on kättesaadavad terve rakenduse piires (mitte ainult Page.xaml vaid ka teised xaml failid). App.xaml võib sisaldada näiteks stiile ja malle.

App.cs sisaldab koodi rakenduse kui terviku kohta. Siin defineeritakse, mis juhtub rakenduse laadimisel, sulgemisel ning erindi korral, mida mujal rakenduses kinni ei püütud. Samuti saab määrata, milline on .xaml fail, mis rakenduse käivitamisel esimesena laetakse. Vaid App klassi Startup sündmust haldavas meetodis on kättesaadavad rakenduse initsialiseerimisparameetrid.

Esimeste rakenduste loomisel on meil aga vaja teada vaid seda, et Tere maailm, kirjutame me faili Page.xaml.

Tere maailm!

Andmaks rakendusele ka mingit sisu, tuleb meil muuta faili Page.xaml, mis esialgu näeb välja järgnev:

1 <UserControl x:Class="TereMaailm.Page"
2    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4    Width="400" Height="300">
5    <Grid x:Name="LayoutRoot" Background="White">
6
7    </Grid>
8 </UserControl>

Esimene rida viitab C# klassile, kus on sellele XAML failile vastav programmikood, teine ja kolmas rida viitavad XML skeemidele (schema), millele fail peab vastama. Neljandas reas on määratud vaikimisi kõrgus ja laius, mille antud rakendus hõivab. Kui mõõtmed on veebilehitseja aknast suuremad, siis ülejääv osa „lõigatakse“ ära.

Järgmisena (rida 5) tuleb igas Silverlight rakenduses mingit tüüpi paigutus-lõuend, mis sisaldab kõiki rakenduse kasutajaliidese elemente – vaikimisi on selleks Grid ehk ruudustik.

Lisame Grid märgiste sisse TextBlock elemendi tekstiga Tere maailm! ning määrame selle teksti suuruseks 32 punkti. Defineerime ka x:Name atribuut, mis võimaldab seda objekti animeerida ning hiljem ka talle programmikoodis viidata.

1 <TextBlock x:Name="tekstikast" Text="Tere maailm!" FontSize="32" />

Rakenduse käivitamiseks vajutame klahvikombinatsiooni ctrl + F5 ning silumiseks lihtsalt F5.

Seejärel näeme vaikimisi veebilehitsejas järgnevat tulemust.

Muide eeltoodud XAML on samaväärne järgmise C# koodilõiguga:

1 TextBlock tekstikast = new TextBlock();
2 tekstikast.Text = "Tere maailm!";
3 tekstikast.FontSize = 32;
4 LayoutRoot.Children.Add(tekstikast);

Rakenduse kompileerimisel tekkis projekti kausta bin/Debug fail TereMaailm.xap. See ongi kogu meie rakendus, mis tuleb mõnele veebilehele lisada. Silverlight rakenduste publitseerimisest on juttu järgmises postituses.

Lisaks TextBlock elemendile sisaldab Silverlight veel hulga teisigi. Ülevaate mõningatest neist saab siit.

Silverlight rakenduste loomiseks on vaja paigaldada vähemalt kaks komponenti – Microsoft Visual Studio 2008 ning Silverlight Tools Beta 2 for Visual Studio 2008 8. Soovitatav oleks installeerida ka rakendus Expression Blend June 2008 Preview . Versiooninumbrid on antud siis tänase päeva täpsusega.

Lisaks võib ka lugeda esimest peatükki minu bakalaureusetööst, kus on samuti töövahendeid tutvustatud ning veidi ka arutletud teemal, millal millist töövahendit valida.