Sigurd Snørteland



Erfaringer fra silverlight 4 out-of-browser + “toast” notifications i viu²

I viu²-prosjektet har jeg lenge hatt ønske om å ta i bruk ‘Silverlight Out-of-Browser’ slik at løsningen kan kjøres som en lokalt program. Det viser seg midlertidig at viu²-prosjektet ikke har kunnet benytte denne funksjonen fordi min løsning er avhengig av å hoste en html-frame over silverlight app’en for å vise YouTube-videoer. For å benytte html-frames på toppen av silverlight må man sette følgende parameter i silverlight objekt-taggen i html-siden: <param name=”Windowless” value=”True” /> Når man benytter silverlight ‘Out-of-Browser’ kan man ikke benytte denne teknikken og jeg har derfor tidligere løst dette ved å laget en WPF applikasjon for å  ”hoste” silverlight løsningen i (sjekk denne blogposten: ‘Host Silverlight i WPF app).

Når Silverlight 4  beta’en ble lanser på PDC i november 2009 var ‘Out-of-browser’ en av de løsningen som hadde fått utvidet funksjonalitet og nå finnes blant annet en webbrowser-kontroll som kan host andre websider inne i Silverlight. Jeg har nå oppgradert viu²-prosjekte til Silverlight 4 og lagt inn støtte for ‘Out-of-browser’ som du kan se på bildet nedenfor:

En annen nyttig funksjon i Silverlight 4 er muligheten for å vise “toast” notifications på samme måte som f.eks. det Outlook gjør når man mottar en ny mail. I viu² vises “toast” notifications vinduer med navn på sang og artist ide det skiftes track (se bildet nedenfor). I silverlight 4 er “toast” notifications vinduene foreløpig bare tilgjengelig i “out-of-browser”-mode.

Jeg skal nå gå gjennom hvordan jeg har tatt i bruk disse nye silverlight 4 funksjonene i viu²-prosjektet.

Out-of-browser
Det første jeg undersøkte i forbindelse med Silverlight 4 var å ta i bruk den nye webbrowser-kontrollen for å vise YouTube-innhold og lignende, i stede for dagens løsning med å hoste en html-frame over silverlight app’en. Jeg oppdaget da at den nye webbrowser-kontrollen bare er tilgjengelig i “out-of-browser”-mode og at man i browser-mode må benytte html-brush i stede. Med utgangspunkt i dette har jeg i stede valgt å beholde dagens løsning slik den fungerer på http://www.viu2.com og heller vise denne websiden i webbrowser-kontrollen når man befinner seg i “out-of-browser”-mode.

Tidligere ble RootVisual i App.xaml satt til usercontrol’en MainPage.xaml, men nå har jeg opprettet en ny usercontrol kalt Main.xaml som settes i RootVisual.

Main.xaml-filen inneholder bare en kontroll og der er den nye webbrowser-kontrollen som skal benyttes i ‘out-of-browser’-mode.

Når Main-kontrollen blir loaded sjekkes det om løsningen kjøres lokalt som ‘out-of-browser’ eller inne i en browser. Dersom man kjører ‘out-of-browser’  navigerer vi webkontrollen til å vises siden http://www.viu2.com. Hvis løsningen derimot kjører inne i en browser setter vi RootVisual til MainPage.xaml og viser dermed viu2-løsningen på “gamle måten” uten bruk av de nye Silverlight 4 funksjonene.

Denne løsningen gjør det mulig å kjøre viu² i “out-of-browser”-mode uten å gjøre endringer på den eksisterende logikken.

“Toast” notifications
‘Toast notifications’ eller ‘NotificationWindow’, som det heter i Silverlight 4, gjør det mulig å vise så popupvinduer nede i høyre skjermdel tilsvarende det Outlook gjør når man mottar en ny mail. Denne funksjonen er bare tilgjengelig når man kjøre i ‘out-of-browser’-mode og kan se ut som på bildet nedenfor.

Metoden nedenfor er en del av ‘Main.xaml’-filen og sørger for at popupvinduene vises. Metoden tar inn en tekst med navnet på sang og artist adskilt med tegnet §, som den splitter opp og viser i popupvinduet, men først sjekkes det at applikasjonen kjører i ‘out-of-browser’-mode.

Klassen ‘NotificationWindow’ er ny i silverligt 4 og er den metoden som viser popup-vinduet, og vi lager derfor en instans av denne klassen, og definerer høyde, bredde, innhold/content til popup-vinduet. Deretter kaller vi metoden ‘Show(5000)’ sammen med antallet millisekunder popupen skal vises, som i vårt tilfellet er 5 sek.

Når det gjelder innholdet i popup-vindue, dvs. content, så har vi definert de i en egen usercontrol kalt ‘NotificationControl’. Xaml’en til denne usercontrollen vises lenger nede i denne artikkelen.

Nedenfor vises xaml’en til usercontrol’en ‘NotificationControl’ som settes som ‘conent’ i popup-vinduet.

Normalt sett har vi nå skrevet all nødvendig kode for å vise et ‘toast vindu’, men siden jeg har valgt å lage ‘out-of-browser’-løsingen på en litt spesiell måte må vi gjøre noen flere triks. Problemet er at når vi kjører i ‘out-of-browser’-mode viser denne løsningen bare en html-control som rendrer http://www.viu2.com nettsiden. Årsaken til denne fremgangsmåten finner du lengre oppe i denne artikkelen. Jeg må derfor lagen en kommunikasjonskanal mellom ‘out-of-browser’-klienten lokalt og http://www.vi2.com, slik at nettsiden kan melde i fra til ‘out-of-browser’-klienten om at popup-vindu skal vises. Dette løser jeg ved å benytte html-bridge/javascript.

Vi begynnet med å opprette en javascript-metode i html-siden som hoster http://www.viu2.com. Denne metoden tar inn en string kalt ‘text’ som vil være navnet på artisten og sangen som skal vises i popup-vinduet. Javascriptet kaller videre på ‘window.external.Notify’ med stringen ‘text’ som innparameter. Dette er en metode som http://www.viu2.com kan kalle på og som ‘out-of-browser’-klienten kan lytte på.

Vi går så inn i den “gamle” koden til http://www.viu2.com og definerer en metode som kan kalle på javascriptet som vi nettopp oppretten. Nedenfor vises eksempel på hvordan man kaller på javascriptet. Innparameteret vil i dette tilfellet være navn på sang+artist, adskilt med tegnet §.

HtmlPage.Window.Invoke(javascriptmetodenavn, innparameter);

Siste skritt er å gå tilbake til ‘Main.zaml’ og definere en lytter til javascriptet slik at man kan vises popup-vinduet i ‘out-of-browser’-mode. Det skjer i metoden ‘UserControl_Loaded’ slik du ser på bildet nedenfor.

Vi har dermed en løsning som viser ‘toast’-vinduer i ‘out-of-browser’-mode med informasjon som kommer fra en “ekstern” nettside på internett.

Hvis du går til www.viu2.com og høyreklikker kan man velge å installere viu² lokalt og dermed kan du teste ut disse ny funksjonene.

Pop Chart Top 100
En annen liten nyhet i viu² er at klienten nå henter inn Yahoo sin ‘Pop Chart Top 100‘-liste med bilder og rangering av sangene. Dermed kan man nå enkelt få tilgang til listepop-musikk. Planen er etter hvert å tilby andre hit-lister også, samt lage liste over hva brukerne av viu² hører mest på. Andre funksjoner som er på vei inn i viu² er visning av lignende artister og sanger til det du som bruker hører på.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: