Hõbevalge nagu Silverlight :)

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>

Mulle meeldib, kui mulle kirjutatase ja Silvelright  kohta küsitakse, sest siis on kohe blogimise teema olemas ja on ka teada, et lugejatele see huvi pakub. Seega andke tuld ja kirjutage mulle jaanametsamaa [ät] gmail.com

Küsimus oli selle kohta, kuidas Silverlight rakendustes navigeerida. Navigeerimine või linkimine jagub Silverlight rakendustes kaheks. Lingid välistele veebilehtedele ja lingid teistele XAML lehtedele rakenduse sees.

Lingid veebehtedele

Selleks, et rakenduses asuva Silverlight logo peale vajutades jõutaks: http://h6bevalge.riiul.com lehele. Lohistame vajaliku objekti (näiteks see logo) peale HyperlinkAction käitumismalli ning paneme paika atribuudid.

1. Mis sündmuse korral navigeerima hakatakse?

Vajutamise korral: nupul alati Click, teistel objektide puhul MouseLeftButtonUp sündmus. Samas võib ka olla peenem ja rohkem segadust tekitada ja avada uue veebilehe igakord, kui hiirega logo peale sattume .

2. Kus link avatakse?
   • samas aknas _self (meie Silverlight rakendus pannakse kinni :()
   • uues aknas _blank
3. Kuhu link viib? – http://h6bevalge.riiul.com

Navigeerimine erinevate XAML lehtede vahel

Ma pean tunnistama, et minu arvates ei ole hea mõte teha terve veebileht Silverlightis aga kindlasti on erandeid, ega vist muusikute veebilehti ilma fancy Flashita ette kujutakski Aga kui vaja navigeeruda xaml lehtede vahel, siis käib see nii:

1. Kõigepealt tuleb projekti lisada viide System.Windows.Controls.Navigation teegile.

See asub C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\ kataloogis.

2. Lisada MainPage.xaml päisesse viide sellele nimeruumile

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

3. Lisada MainPage.xaml lehele navigatsioon (näiteks nupud) ning üks Frame, mille sisu me väljavahetame

<StackPanel Orientation=”Vertical”>
<StackPanel Orientation=”Horizontal”>
<Button Click=”Button_Click” Tag=”/Views/Esimene.xaml” Content=”Esimene” FontSize=”18″ />
<Button Click=”Button_Click” Tag=”/Views/Teine.xaml” Content=”Teine” FontSize=”18″ />
</StackPanel>
<navigation:Frame x:Name=”valjavahetatavSisu” HorizontalContentAlignment=”Stretch” VerticalContentAlignment=”Stretch” Source=”/Views/Esimene.xaml” />
</StackPanel>

4. Lisada objektidele (mis meil linkidena käituvad) tag-id, mille väärtus on .xaml faili path, kuhu me navigeerima peame.
5. Iga kord kui vajutatakse mõnda “navigatsiooni elementi”, navigeerida õigele xaml lehele.

private void Button_Click(object sender, RoutedEventArgs e)
{
Button nuppMidaVajutati = sender as Button;
string url = nuppMidaVajutati.Tag.ToString();

this.valjavahetatavSisu.Navigate(new Uri(url, UriKind.Relative));
}

Ja ongi valmis Loomulikult see siin eeldab, et MainPage.xaml faili kõrval asuvad kataloogis Views ka failid (File->New Item-> Page) Esimene.xaml, Teine.xaml jne.

Tähelepanekud

Kui Silverlight rakenduses nüüd ringi navigeerida, siis hakkavad automaagiliselt tööle veebilehitseja edasi ja tagasi nupud. Jooksvalt muutub ka lehekülje aadress (saab sõbrale saata!) ja kui Page päises muuta Title väärtust, muutub ka lehe pealkiri Väga lahe!

Märkus

Esimese hooga tegin uue projekti, lisasin uue Page tüüpi faili ning püüdsin sarnast koodi, mis siin näites tööle saada. Kuidagi ei õnnestunud. Siis surfasin veidi internetis ning selgus tõsiasi, et kõikides näidetes on vaikimisi Page failid kataloogis Views. Miks? Nähtavast on see koht, kust Silverlight vaikimisi vaateid otsib, kui tahta struktuuri muuta, siis tuleb teha ümberkaardistamist (UriMapping), millest räägib mõni järgmine blogipostitus .