Hõbevalge nagu Silverlight :)

Silverlighti hiire tugi piirdub järgnevate sündmustega:

• MouseMove
• MouseEnter
• MouseLeave
• MouseLeftButtonDown
• MouseLeftButtonUp

Nagu näha hiire kerimisnupu sündmusi nende hulgas ei ole. Aga kuidas öeldaksegi, kui kuidagi ei saa, siis kuidagi ikka saab.

Silverlighti üks vingemaid omadusi on väga hea läbisaamine rakendust hostiva veebilehega. Tänu klassidele HtmlPage, HtmlDocument ja HtmlWindow saab selle hostlehega praktiliselt kõike teha – muuta DOMi ning ka kinnituda ka sündmuste külge, mida läbi Silverlighti kätte ei saa.

Kõigepealt defineerime kolm (kõigi erinevate veebilehitsejate jaoks) sündmusekuularit:

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel);
HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel);
HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);

Meetodi OnMouseWheel argumendina saame tüüpilise Html sündmuse atribuutide jada ning sealt omakorda info selle kohta kui palju hiire kerimisnuppu keriti. Kuna üldiselt meid huvitab vaid suund, siis taandame kerimisfaktori meetodiga Math.Sign kas +1 või -1ks. Vastavalt sellele numbrile saame, siis vajalikke asju kerida, liigutada, zoomida jms.

private void OnMouseWheel(object sender, HtmlEventArgs args)
{
    double mouseDelta = 0;

    ScriptObject e = args.EventObject;

    // Mozilla, Safari
    if (e.GetProperty("detail") != null)
    {
        mouseDelta = ((double)e.GetProperty("detail"));
    }

    // IE & Opera
    else if (e.GetProperty("wheelDelta") != null)
    {
        mouseDelta = ((double)e.GetProperty("wheelDelta"));
    }

    // -1 or +1
    mouseDelta = Math.Sign(mouseDelta);

}

Demomiseks on lihtne rakendus, mille paigutushalduriks on ScrollViewer ning mille sees on andmetabel. Andmetabel on üks selliseid asju, mida oleks tore hiirega kerida …

<ScrollViewer x:Name="LayoutRoot">
            <my:DataGrid x:Name="myDatagid"
                         AutoGenerateColumns="True"
                         RowBackground="LightSteelBlue" 

                         AlternatingRowBackground="Azure" />
</ScrollViewer>

Lisades esimesele koodilõigule vaid ühe rea:

LayoutRoot.ScrollToVerticalOffset(LayoutRoot.VerticalOffset + 100 * mouseDelta);

Saabki meie andmetabel keritavaks.

Lõpptulemus on näha siin:
http://silverlight.services.live.com/invoke/60908/Scroller/iframe.html
Andmed tulevad tabelisse kasutades sellist koodi:

myDatagid.ItemsSource = inimesed;

Ainus tingimus on, et see <inimesed>, oleks IEnumerable, ehk siis mingit tüüpi list.

Siin on tegemist Inimese klassi objektide listiga

public class Inimene {
        public string Eesnimi { get; set; }
        public string Perenimi { get; set; }
        public int Vanus { get; set; }
        public string Elukoht { get; set; }
    }

List<Inimene> inimesed = new List<Inimene>();

Lae lähtekood:

Üks sagedane küsimus silverlight.net foorumis on, kuidas panna nupu sisse pilt. Lahendus on nii lihtne ja loogiline, et selle peale hoobilt ei tulegi.

Keskmine XAML kood nupu jaoks näeb Silvelrightis välja nii:

<Button x:Name="nupp" Content="Mina olen nupp" Click="nupp_Click" />

Aga kuidas saada teksti asemele pilt? Selleks tuleb nupu sisu kood enam lahtikirjutada:

<Button Width="100">
    <Button.Content>
        <Image Source="bus.jpg"/>
    </Button.Content>
</Button>

Eelnev kood loob 100 piksli laiuse nupu mille täidab pildiga bus.jpg. Pildile võib loomulikult ka ise täpsed mõõtmed määrata.

Niisamuti võib nupu sisse ka video mängima panna:

<Button Width="100">
    <Button.Content>
        <MediaElement Source="Bear.wmv"/>
    </Button.Content>
</Button>

Aga, kuidas panna nupu sisse nii pilt, kui ka video?

<Button Width="100">
    <Button.Content>
        <MediaElement Source="Bear.wmv"/>
        <Image Source="bus.jpg"/>
    </Button.Content>
</Button>

Eelnev kood ei vii meid sihile, sest üldjuhul lubavad kasutajaliidese elemendid oma sisuks (Content) vaid üht elementi korraga.

Kõik vajaliku, mis nupu sisuks peavad minema, võime aga koondada Canvas objekti sisse. Nii paistab XAML parserile, et elemendil Button on vaid üks alluv:

<Button Width="100">
    <Canvas>
        <Image Source="bus.jpg"/>
        <MediaElement Source="Bear.wmv" />
    </Canvas>
</Button>

Nupp pildi ja videoga näeb välja niisugune:

Veel võimalusi

Niisamuti saab pilte ja videosid panna teistelegi objektidele, mille sisu määratakse atribuudiga Content.

Näiteks Checkbox ning ListboxItem sisaldavad atribuuti Content ning seega võib nende sisuks olla ka kõik muu peale teksti. TextBlock ning TextBox’il on aga vaid atribuut Text, mis nõustub vaid tekstiga.

Video ja pildi võib panna ka Ellipsi või Ristküliku sisse, põhimõte jääb samaks, et sisu tuleb määrata pikemalt lahtikirjutades, mitte kasutades XAMLi kiirteed nagu tavaliselt.

<Ellipse Width="100" Height="100">
   <Ellipse.Fill>
       <ImageBrush ImageSource="bus.jpg" />
   </Ellipse.Fill>
</Ellipse>

Hea lisalugemine:

Button (dokumentatsioon)

Pildiga nupu stiil (silverlight.net foorum)

Silverlight rakenduse veebi lisamiseks tuleb see paigutada veebilehe sisse – olgu see siis HTML, PHP, ASP.NET vm.

Selleks on kaks võimalust:

• kasutada märgist object

1 <object data="data:application/x-silverlight,"

2         type="application/x-silverlight-2-b2" width="100%" height="100%">
3    <param name="source" value="TereMaailm.xap"/>
4    <param name="background" value="white" />

5    <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">

6      <img src=http://go.microsoft.com/fwlink/?LinkId=108181 

7           alt="Get Microsoft Silverlight" style="border-style: none"/>

8    </a>
9 </object>

Esimesed kaks rida määravad lisatava objekti tüübi ning Silverlight versiooni. Kolmas rida on oluliseim, viitab rakenduse suhtelisele asukohale antud veebilehest. Viies kuni kaheksas rida defineerivad vaikimis “Get Silvelright” pildi, mida näidatakse juhul, kui kasutajal ei ole Silverlight installeeritud.

• kasutada createSilverlight() funktsiooni failist Silverlight.js.

Selle kasutamiseks tuleb aga projekti lisada ka Silverlight.js fail, mis asub kataloogis %ProgramFiles%\Microsoft SDKs\Silverlight\v2.0\Tools.

1 function createSilverlightEx() {
2    Silverlight.createObjectEx({
3       source: "TereMaailm.xap",
4       parentElement: document.getElementById("SilverlightHost"),
5       properties: {
6       width: '600',
7       height: '200',
8       version: '2.0'
9    },
10       events: {}
11    });

Antud funktsiooni kasutamiseks tuleb Silverlight projekti lisada fail Silverlight.js, mis asub kataloogis %ProgramFiles%\Microsoft SDKs\Silverlight\v2.0\Tools. Oluline erinevus object märgisega seisneb neljandas reas. Kui object märgist kasutades kuvati Silverlight rakendus märgise kohale, siis JavaScript funktsiooni puhul tuleb näidata ka div, mille sisse rakendus minema peab.

Kumb on parem?

JavaScript funktsiooni ning märgise object tulemus on Silverlight veebilehitseja lisa jaoks sama.

Otsus kumb valida, sõltub väga palju olukorrast.

• Märgist object on kindlasti lihtsam kasutada, piisab vaid ühest märgisest ja skriptifaile ei ole vaja lisada. Lisaks on oluliselt lihtsam pakkuda rakenduse embedded linke, selle kuvamiseks mõnel teisel veebilehel.
• Object miinuseks on aga see, et vähemasti IE blokeerib object märgisega lisatud Silverlight rakenduse kui potentsiaalselt ohtliku ActiveX komponendi. Seda probleemi JavaScripti kasutades ei ole. Teisalt võib veebilehitsejas olla ka JavaScript keelatud ning Silverlight rakendust ei laetaks ka sel juhul. Tänases Web 2.0/AJAX ajastus on see aga ebatõenäoline.
• Vaid 16KB suurune Silverlight.js võib suure kasutajakonna juures andmemahtu oluliselt paisutada.

Hea lugemine dokumentatsioonist:

• Instantiating a Silverlight Plug-In (Silverlight 2)
• Using Silverlight.js

Antud teema on kaetud ka minu bakalaureusetöö neljandas peatükis. Sisu on enam-vähem sama.

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.